2020/03/07に開催された Angular+Firebase Live Coding Session に参加しました。

このイベントはライブコーディング会場の様子をYoutube配信するというものです。楽しみにしていた TSConf に続き ng-kyoto が相次いで中止になってしまい、首都圏の平日開催のイベントには気軽に参加できない地方在住者の私としてはとても嬉しいものでした。

Youtube配信の様子

本日はAngular+Firebase Live Coding Session #gdgtokyo にご参加頂きありがとうございました✨@laco2net san、@startailall0 san に解説頂いた動画はもう少しで公開されます💁‍♀️後ほどシェアしますね！そして今後の開催に活かしていきたいので、是非アンケートのご回答よろしくお願いします🙏 https://t.co/HeEVvuQUdt pic.twitter.com/ivxNJHgf80
— Shoko Sato 🐶 (@satoshoco) March 7, 2020

司会は Google Developers Group オーガナイザの @satoshoco さんです。

ライブコーディングがメインなので、大半は登壇者が手元のPCで作業する様子が映し出されていましたが、時おり小休止が入って操作のおさらいをしたり、何か質問ありますかー？など呼びかけていただきました。私はSlack参加枠ではなかったのですが、Youtubeのチャット機能でリアルタイムに質問ができる環境でした。会場の「拍手〜」の声に合わせて一斉にチャットに「8888（パチパチ、の意味）」が書き込まれたり、カンファレンス会場とはまた違った盛り上がりがあって面白かったです。

【 Live coding session -1】Cloud Firestore Web

Firebase Japan User Group オーガナイザの @startailall0 さんの登壇です。

登壇資料

What's Firebase?

ローカルでアプリを動かすのは簡単だよね
でもデプロイして世界のみんなに使ってもらうのは大変
ホスト・ネットワークの準備、セキュリティの考慮、もろもろ...
全部ひとりでやろうと思ったらフルスタックエンジニアにならなきゃいけない

これらを全部やってくれるのがFirebase！という事でした。

Handson

ライブコーディングに参加しながら手元で実践したハンズオンをの内容をかいつまんで紹介します。（私の手元の環境は node 13.9 です、参考までに）

まず、Firebaseアカウントを作ります。ログイン済みのGoogleアカウントを使ってログインするだけなので、ボタンぽちぽちするだけで簡単にアカウントが作れます。

アカウントを作ったら画面右上のボタンから「Firebaseコンソール」に移動して、ハンズオン用のプロジェクトを作ります。この時いくつか設定がありますがGoogleAnalyticsの機能はデフォルトのままオンにしておくのがオススメだそうです。（GAの収集した情報を元にした機能がいくつかあるためアプリ開発の選択肢が増える）

無料プランでもFirebaseのいろいろなサービスを使う事ができますが、まずは使用頻度の高い「開発」にカテゴライズされた機能を使ってみましょう、との事。

めっちゃ便利だと思ったのが各プロバイダと連携した認証機能。自分で実装する場合は、プロバイダごとのSDKをインストールしてからプロバイダごとの独自APIを使った実装を追加しますよね。Firebaseを使えば、簡単な設定で連携をスタートする事ができ、共通したAPIインターフェースが得られるみたいです。すごい便利！！

データベースもFirebase上で簡単につくれます。昔ながらのなじみ深いリレーショナルデータベースでなく、NoSQL型と呼ばれるデータベースだそうです。

途中、ロケーション選択が出てきて「ろろ、ろけーしょん...？」とビビリました。この選択によって回線速度に差が出るため、アプリのターゲットユーザーに一番近い場所を選びましょうとの事。 asia-northeast1 が東京、asia-northeast2 が大阪なんだそうです。こういうフォローがあるのがライブコーディングの嬉しさですね。

ローカルでの作業は GitHubのリポジトリからcloneしたものをIDEで編集します。npmパッケージ firebase-tools をインストールするとターミナルで firebase コマンドが使えるようになり、ローカルで作業したものをFirebaseコンソールに送り込む事ができます。

$ firebase login
$ firebase use --add
$ firebase serve --only hosting

おお、動いている...！！

以降は割愛

内容が長くなってしまうため、ライブコーディングで紹介されていた下記の内容は割愛しました。

データ取得・フィルタ・書き込みなどのデータへのアクセス方法
トランザクション
インデックスのデプロイ

今回ハンズオンで紹介していただいたのはFirebaseで公開されているチュートリアルを踏襲していくものでしたが、ロケーション選択しかり、迷いがちな設定や注意ポイントについてフォローが入るのがとても有り難いものでした。

https://codelabs.developers.google.com/codelabs/firestore-web/index.html#0

【 Live coding session -2 】angularfire

Angular Japan Users Group オーガナイザの laco2net さんの登壇です。

登壇資料

What's AngularFire

公式ライブラリ AngularFire を使う事で簡単にAngularとFirebaseの連携をする事ができるそうです。ライブコーディングでは完成済みのAngularアプリにFirebaseを組み込む方法を実践しました。

Handson

デモアプリのインストールとお試しデプロイ

ハンズオン用のGitHubリポジトリをcloneしてセットアップします。

npm install して npm start -- -o するだけ。

ハンズオン用の携帯ECサイトがブラウザで立ち上がります。簡単ですね。最初だけビルドに時間がかかりますが、次回以降の npm start は速く実行できます。

連携させるFirebaseのプロジェクトを作っておきましょう。

AngularのFirebase公式ライブラリである AngularFire をインストールします。
コマンドは ng add @angular/fire@next たったこれだけ！簡単ですね。

stable版が公開されていないのでnext指定を忘れずに
@angular/cli をグローバルインストールしている場合は npm run ng... でローカルのngコマンドを動かす

ターミナル上でFirebaseコンソールで作ったプロジェクトが選択肢として表示されます。

１回デプロイしてみましょう。 ng deploy たったこれだけ！
デプロイ先のURLもターミナルに表示されます。便利。

おお、デプロイされている！

FirebaseコンソールのHostingを見るとデフォルトで２つのドメインにホストされています。この画面では、カスタムドメインの追加や、誤ったデプロイを過去のリビジョンに戻す操作も行えるそうです。

デモ用データのセットアップ

商品アイテムを追加するためにFirebaseコンソールでデータベースを作成しておきます。

手元のソースコードでは商品データとして products.ts の情報を画面に表示しています。これをFirebaseコンソールに移動させます（手入力）。

識別のために id:number フィールドを追加して適当に重複しない番号を振っておく

FirebaseをAngularアプリで使うための準備

Firebaseコンソールで Project overview > アプリを追加 > ウェブ で適当な名前のアプリを作成します。

アプリの登録が終わると、アプリから接続するための情報が表示されます（アプリの設定を辿って後から探す事も可能）

設定を environment.ts environment.prod.ts の変数に追加しておきます。

environment.ts はローカルビルド用の設定
environment.prod.ts はプロダクション用の設定
設定を変えればローカル環境とプロダクション環境でFirebaseプロジェクトを分ける事ができる

app.module.ts でアプリ起動時にFirebase関連のライブラリが読み込まれるように設定します。

AngularFireModule はFirebaseに接続するための設定
AngularfireXXXModule でFirebaseの個別の機能を読み込む
個別にモジュールを足す事によってビルドサイズの肥大化を抑える

商品リストをFirebaseコンソールから読み込む

product-list.component.ts（コンポーネントのソース） でFirestoreサービスを注入し products コレクションの変更を valueChanges() で受け取ります。

valueChanges() はRxJSのObservableを返すため product-list.component.html（ビュー） で async を使って非同期で値をレンダリングします。

データを取得して、変数に入れて、ビューをリフレッシュして....という手間がなく、短いコードで非同期データをハンドリングできるのがAngular & RxJSの強みですね。この強みがFirebaseとの親和性を高くしているのかな、と思いました。

さてさて、Firebaseコンソールでコレクションの値を更新すると.....。
おおお！！ダイレクトにローカルのアプリに反映された！！

この後は割愛

この後、チュートリアルでは下記のような機能も学習しました。
この調子で紹介していくとキャプチャの嵐になってしまうので、以降は割愛します。

FirebaseでGoogleアカウント認証を設定し、アプリでログイン・ログアウトボタンを出す
Firebaseで定数を設定し、閲覧ブラウザの言語設定により日本語・英語を切り替える方法

おわりに

最初のセッションが「Firebaseって何ぞや」から始まり、次のセッションが「どうやってアプリ作るの？」に続き、構成がとても良かったです。コマンドやコードのボリュームが少ないため普段Angularでなく別のフレームワークを使用している方でも、割とすんなり手元で試す事ができたのではないでしょうか。

カンファレンス会場に足を運んで登壇者の生の声を聞くことも楽しみですが、こうしてYoutube配信してくれると移動時間もなく後日アーカイブを見ながらゆっくり実践する事もできるので、地方在住者にはとてもとても嬉しい試みです。世の中のありとあらゆるイベントが中止されていく中で、フットワーク軽く形を変えてイベントが開催された事にエンジニア集団の強みを感じました。

最後に、Firebaseはread/writeのボリュームによって従量課金が発生するそうなので、お試しで作ったプロジェクトは削除しておきましょうね、との事でした。（「プロジェクトの設定」ページの一番下にある削除ボタンでサヨナラできます）