もり

法学部生/フロントエンド/SPA開発しています/Javascript/TypeScri…

もり

法学部生/フロントエンド/SPA開発しています/Javascript/TypeScript/express/React/Angular/Firebase/主にAngularとFirebaseのことについて書いていますhttps://twitter.com/masaaki6262

  • Angular❎Firebaseでの本格的なSPA開発

    休学中の大学生のSPA開発日記です。

FireAuth(Google認証)について

今回はFirebaseのAuthentication(認証)について書いていこうと思います。Authenticationは現在たくさんの認証方法があります。その中でもよく使うであろうGoogle認証についてやっていこうと思います。実際僕のプロジェクトでもGoogle認証を使用しています。 まず始めにやることは、FirebaseのAuthenticationからGoogle認証を有効にします。 次にserviceファイルを作成する。 ng g s services/aut

もり

    • FirebaseとAngularの連携

      前回Firebaseの環境構築を行いました。ですがこれだけではダメです。次はAngularとFirerbaseの連携を行います。進め方なのですが具体的な手順に関しましては英語なのですが こちらに記載されていますので参照してみてください。これに沿ってやっていきます。 まずはコマンドを叩きます。 npm install firebase @angular/fire --save これをプロジェクトルートで叩きます。 次に、Installation and Setupを押

      もり

      • Firebaseの導入

        結構前になりますが、AngularにFirebaseの導入をしたので忘れないうちに書き留めておこうと思います。 Firebase とは Google が提供しているモバイルおよび Web アプリケーションのBaaS(バックエンドサービス)です。 Firebaseの機能としては、認証(Authentication)、データベース(Database)、ストレージ(Storage)、ホスティング(Hosting)、Functionsなど便利な機能がたくさんあります。 右上のコ

        もり

        • Angularのモジュール、コンポーネントの作成

          今回もタイトルの通り、モジュールとコンポーネントの作成をおこなっていきたいと思います。 SPA開発では基本的にはコンポーネント単位で区切って開発していくのでモジュール、コンポーネントの作成は必須です。 モジュールの作成方法からしていきましょう。 ng g module モジュール名 これをターミナルで実行すればモジュール作成ができます。*モジュール名は任意のものを入れてください。ちなみにgとはgenerateの略です。 ng generate module モジュー

          もり

        FireAuth(Google認証)について

        もり

        マガジン

        • Angular❎Firebaseでの本格的なSPA開発
          10本

        記事

          Angular Formの実装

          今回は僕のプロジェクトのFormの実装についてのお話をします。 僕の求人webアプリではユーザーのプロフィール、企業側のプロフィール、求人投稿の３つのフォームがあります。 全部あげるとコード量が多くなってしますので今回はにユーザーのプロフィールの完成形のコードだけにします。 ・ngSubmit...　Formを送信するに使います。 ・mat-error... Formのエラーメッセージを表示したり際に使用します。Formに関しては必須項目です。 ・ngIf... 条

          もり

          Angular Formの実装

          もり

          AngularのFormについて

          今回はAngularのFormについて書いていこうと思います。Form関連はつまずきポイントだと思います。僕自身もFormでつまずきました。マークアップはAngular Materialでほぼほぼのことはできるので使用をお勧めします。 僕のプロジェクトではForm関連が３つあります。ユーザープロフィール、企業側のプロフィール、記事（求人）投稿のフォームがあります。Formを作成するにあたり必要になったのが １, FormControl 2, FormGroup 3,

          もり

          AngularのFormについて

          もり

          Angular Materialについて

          今回はAngular Materialの導入使い方について書いて行きたいと思います。 まず始めにAngular MaterialとはGoogleが提唱しているMaterial Designにのっとったものなので間違いはないと思います。モダンなスタイルが簡単に実現できます。この辺はAngular Materialの公式サイトをみた方が早いと思うのでURLを載せておきます。 Material Designについても本当に勉強になることが多いのでURlを載せておきます。見やすい

          もり

          Angular Materialについて

          もり

          Angularのプロジェクト作成方法

          今回はAngularのプロジェクト作成方法について書いていこうかなと思います。（＊環境構築はしている前提とする) プロジェクト名はなんでもいいのですが、例えばTodoアプリのようなものを作ると仮定して、プロジェクトを作成したいディレクトリで ng new 作成したいプロジェクト名（例）todo-app これがプロジェクトを新規作成するコマンドになります。このコマンドを叩くと続いて出てくるのが Would you like to add Angular routing?

          もり

          Angularのプロジェクト作成方法

          もり

          2.Angular環境構築とAngular Material、マークアップ

          Angularの環境構築とheader、footer、Angular Materialを使ってsearch画面のマークアップを行いました。 環境構築すんなり行くかなと思ったんですが、nodeのパスが通ってないと怒られ躓いたのですがなんとか環境構築完了しました。 Angularの環境構築に関してはAngular Cliに全て乗っています！コマンドはこんな感じです↓ しかし、僕の場合は下記のようにコマンドが見つかりませんと怒られました。wパスが通っていなかったようです。

          もり

          2.Angular環境構築とAngular Material、マークアップ

          もり