Angular+Firebase Live Coding Session に参加しました

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

- [イベントページ | connpass](https://gdg-tokyo.connpass.com/event/168843/)
- [Twitter #gdgtokyo](https://twitter.com/search?q=%23gdgtokyo)
- [Youtubeアーカイブ動画](https://t.co/STDUyTI9LA?amp=1)

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

# Youtube配信の様子

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">本日はAngular+Firebase Live Coding Session <a href="https://twitter.com/hashtag/gdgtokyo?src=hash&amp;ref_src=twsrc%5Etfw">#gdgtokyo</a> にご参加頂きありがとうございました✨<a href="https://twitter.com/laco2net?ref_src=twsrc%5Etfw">@laco2net</a> san、<a href="https://twitter.com/startailall0?ref_src=twsrc%5Etfw">@startailall0</a> san に解説頂いた動画はもう少しで公開されます💁‍♀️後ほどシェアしますね！そして今後の開催に活かしていきたいので、是非アンケートのご回答よろしくお願いします🙏 <a href="https://t.co/HeEVvuQUdt">https://t.co/HeEVvuQUdt</a> <a href="https://t.co/ivxNJHgf80">pic.twitter.com/ivxNJHgf80</a></p>&mdash; Shoko Sato 🐶 (@satoshoco) <a href="https://twitter.com/satoshoco/status/1236256170894962689?ref_src=twsrc%5Etfw">March 7, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

司会は [Google Developers Group](https://sites.google.com/site/gdgjapan/) オーガナイザの [@satoshoco](https://twitter.com/satoshoco) さんです。

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

# 【 Live coding session -1】Cloud Firestore Web

[Firebase Japan User Group](https://firebase-community.connpass.com/) オーガナイザの [@startailall0](https://twitter.com/startailall0) さんの登壇です。

## 登壇資料

https://docs.google.com/presentation/d/1auQoy-JpvwtAdw-MKyz5PVAFopZf9dgAX9mQbm2_PlU/edit#slide=id.p

## What's Firebase?

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

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

## Handson

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

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

<img width="400" alt="アカウント作成" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102284/befba652-8d64-7181-67f5-8827c94f3486.png">

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

<img width="400" alt="プロジェクト作成" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102284/5751614b-9d23-b110-bae6-ea35ea798a23.png">

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

<img width="400" alt="Firebaseコンソール" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102284/e474f463-2cbf-59e4-8859-05e16d36bf73.png">

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

<img width="400" alt="Authentication" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102284/5a7c33f0-3f11-b34c-aeb9-8db8fac13a65.png">

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

<img width="400" alt="Database" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102284/0d588b08-7866-9366-c15f-41df8102ff1f.png">

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

<img width="400" alt="ロケーション選択" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102284/bdc9e7fe-8ca4-8515-7145-2905ee020ecd.png">

ローカルでの作業は [GitHubのリポジトリ](https://github.com/firebase/friendlyeats-web) からcloneしたものをIDEで編集します。npmパッケージ [firebase-tools](https://www.npmjs.com/package/firebase-tools) をインストールするとターミナルで `firebase` コマンドが使えるようになり、ローカルで作業したものをFirebaseコンソールに送り込む事ができます。

<img width="400" alt="ソースコードのコピペ" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102284/671ead74-5a8a-8b28-adc6-9db25ec40265.png">

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

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

<img width="400" alt="ローカルのプレビュー" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102284/c70f49c4-58fd-fb89-5166-5b556031f69e.png">

## 以降は割愛

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

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

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

https://codelabs.developers.google.com/codelabs/firestore-web/index.html#0
<img width="400" alt="Cloud Firestore Web Codelab" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102284/ebfbfe7c-6d06-f8dc-b39f-c0a32d37502c.png">


# 【 Live coding session -2 】angularfire

[Angular Japan Users Group](https://ngjapan.connpass.com/) オーガナイザの [laco2net](https://twitter.com/laco2net) さんの登壇です。

## 登壇資料

https://hackmd.io/vVln5yOqSROnWTfzta_RCg?both#Set-up-local-environment

## What's AngularFire

公式ライブラリ [AngularFire](https://firebaseopensource.com/projects/angular/angularfire2/) を使う事で簡単にAngularとFirebaseの連携をする事ができるそうです。ライブコーディングでは完成済みのAngularアプリにFirebaseを組み込む方法を実践しました。

## Handson

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

[ハンズオン用のGitHubリポジトリ](github.com/lacolaco/angularfire-20200307-starter) をcloneしてセットアップします。

`npm install` して `npm start -- -o` するだけ。
<img width="400" alt="setup" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102284/65c1342d-e732-3998-907f-08dcd8b5837b.png">

ハンズオン用の携帯ECサイトがブラウザで立ち上がります。簡単ですね。最初だけビルドに時間がかかりますが、次回以降の `npm start` は速く実行できます。
<img width="400" alt="demo site" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102284/7f4d0ca1-f8ec-64c1-f444-95443bb796c5.png">

連携させるFirebaseのプロジェクトを作っておきましょう。
<img width="400" alt="new project" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102284/1c6ed36f-43e0-0249-8114-f70fa98e52a5.png">

AngularのFirebase公式ライブラリである [AngularFire](https://firebaseopensource.com/projects/angular/angularfire2/) をインストールします。
コマンドは `ng add @angular/fire@next` たったこれだけ！簡単ですね。

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

ターミナル上でFirebaseコンソールで作ったプロジェクトが選択肢として表示されます。
<img width="300" alt="ng add" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102284/ec692e91-c4fa-d134-a596-2c79f6fcdbc9.png">

１回デプロイしてみましょう。 `ng deploy` たったこれだけ！
デプロイ先のURLもターミナルに表示されます。便利。
<img width="300" alt="deploy" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102284/d41e728a-a73b-7e11-f63a-0ee66b394aa0.png">

おお、デプロイされている！
<img width="400" alt="deployed" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102284/04b6ae73-28cc-d2d8-1a08-66b3b577eb5a.png">

FirebaseコンソールのHostingを見るとデフォルトで２つのドメインにホストされています。この画面では、カスタムドメインの追加や、誤ったデプロイを過去のリビジョンに戻す操作も行えるそうです。
<img width="400" alt="hosting" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102284/b8d0c84d-77d2-22d5-5f70-b161039bbd08.png">

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

商品アイテムを追加するためにFirebaseコンソールでデータベースを作成しておきます。
<img width="400" alt="database" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102284/1734189c-5c55-4413-d568-619729a1b839.png">

手元のソースコードでは商品データとして `products.ts` の情報を画面に表示しています。これをFirebaseコンソールに移動させます（手入力）。
<img width="600" alt="products" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102284/3265b1e4-3ee1-0f84-678d-6b0e354a1f1d.png">

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

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

Firebaseコンソールで `Project overview` > `アプリを追加` > `ウェブ` で適当な名前のアプリを作成します。
<img width="400" alt="add web app" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102284/40d91112-af41-6de2-2b0d-49c6114da27d.png">

アプリの登録が終わると、アプリから接続するための情報が表示されます（アプリの設定を辿って後から探す事も可能）
<img width="400" alt="config source" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102284/c61b0c8f-5cfa-bd7e-3694-444a97ae8e8f.png">

設定を `environment.ts` `environment.prod.ts` の変数に追加しておきます。
<img width="400" alt="config dist" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102284/ddaa1066-c43b-3634-8b29-e8e092a78e6a.png">

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

`app.module.ts` でアプリ起動時にFirebase関連のライブラリが読み込まれるように設定します。
<img width="400" alt="import module" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102284/00a7a06f-2f39-ab72-288d-21e424b88f3a.png">

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

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

`product-list.component.ts（コンポーネントのソース）` でFirestoreサービスを注入し `products` コレクションの変更を `valueChanges()` で受け取ります。
<img width="400" alt="subscribe" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102284/b0fc9b76-4476-1b53-0d26-01d4ccd7eab3.png">

`valueChanges()` はRxJSのObservableを返すため `product-list.component.html（ビュー）` で `async` を使って非同期で値をレンダリングします。
<img width="400" alt="async" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102284/9f84fee2-52ba-eae1-b722-e511f7c542f1.png">

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

さてさて、Firebaseコンソールでコレクションの値を更新すると.....。
おおお！！ダイレクトにローカルのアプリに反映された！！
<img width="600" alt="update" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102284/4be7b932-0bef-630d-1c79-5252a9a7315f.png">

## この後は割愛

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

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

# おわりに

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

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

最後に、Firebaseはread/writeのボリュームによって従量課金が発生するそうなので、お試しで作ったプロジェクトは削除しておきましょうね、との事でした。（「プロジェクトの設定」ページの一番下にある削除ボタンでサヨナラできます）
<img width="400" alt="delete project" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102284/526788cb-96de-1822-f40b-fd1c4c3bbc46.png">