Nuxt.js & Firebase & Netlifyでの爆速プロトタイピングと本格運用への足がかり~ 秋のJavaScript祭 2018/11/17 ~渡邊達明＠株式会社クリモ
View Slide
◉ 自己紹介◉ Webサービス開発３種の神器◉ Nuxt.jsはいいぞ◉ Firebaseはいいぞ◉ Netlifyはいいぞ◉ 本格運用への足がかり◉ まとめ目次
自己紹介◉ 渡邊 達明（わたなべ たつあき）◉ twitterとか: @nabettu◉ 富士通株式会社→面白法人カヤック→独立◉ 妻（代表）と法人設立◉ Webフロントエンド（Vue.jsやNuxt.js）＆アプリエンジニア（React Native）
◉ 妻がママ向け・保育士向けのメディア運営◉ 私が受託開発と、メディアの技術周り担当◉ 空いた時間でWebサービス開発株式会社クリモ
みなさんWebサービス作ってますか？
◉ SPAフレームワークワーク◉ Firebase◉ Netlify私の考えるフロントエンドエンジニアのWebサービス開発三種の神器これらを使って爆速でWebサービス開発しよう！
※SPAフレームワークは宗派があるので、 適宜お好みのものに置き換えてください。◉ 軽量なものがいい人はRiot.jsやHyperappでも◉ React派の人はNext.jsでも◉ メディア系作るならGatsby.js や Gridsome でも◉ アプリも見据えているならReact Native , Anguar.js + Ionic,Monacaなどなど...今回は私の好みでNuxt.jsで話を進めます。
Nuxt.jsはいいぞ
Nuxt.js使うとなにが嬉しいか◉ ルーティングや状態管理などの欲しい機能がだいたい入ってるからさっと本質的な開発に取り組める◉ 困っても日本語のドキュメントが豊富◉ 状況に合わせてSSRにも静的サイトにも対応Vue.jsがわかっていれば、とにかくさっと作れる！今日はjsのイベントで、みんな結構色々使ってるだろうからここはそんなに話しません
Firebaseはいいぞ
Firebaseとは◉ ユーザー認証がめっちゃ楽に実装できるBaaS◉ NoSQLデータベースが↑の認証つかって読み書き管理が楽◉ リアルタイム用DBや画像などのストレージももちろんある◉ FaaSが上記の機能と連携（認証も）してすぐ使える◉ サーバーレスでAPI経由ですべてこなせます！
Firebaseはいいぞ①ユーザー認証の開発がめっちゃ楽コードを書かずにユーザーログインが実装出来ます。管理画面でポチポチーっとするだけ。メールアドレス以外にもSNSログインももちろんOK。SMSも
Firebaseはいいぞ②認証に紐付いてDBやストレージが管理できて楽◉ FirestoreというNoSQLのDB◉ ファイルストレージが利用できクライアントから直接操作が実行できる。その際独自のルール設定で、権限管理をユーザー認証に紐づけて管理できるので、自分以外読み書き出来ないDBやストレージの権限管理などが楽にできる。
Firebaseはいいぞ③リアルタイム通信がWebSocket使わなくてもできるよRealtime DBというチャットなどの実装に特化したデータベースがあり、JavascriptSDKを入れておくと、クライアントサイドから読み書きができる。しかもListenerをセットしておくと、DBの変更を勝手に検知して設定したコードを実行することもできるスグレモノ（Firestoreもできるけどラグが大きい）
Firebaseはいいぞ④FaaSも簡単に導入できるよFirebase FunctionsというAWS LambdaのようなNode.jsの関数が使えます。しかも「DBの変更を検知して動作」などの、他の機能との連携も楽ちん！Node.jsで動くので工夫すればSSRなども出来ます。
Netlifyはいいぞ
Netlifyとは◉ 静的サイトホスティングサービス◉ GitHubなどのリポジトリと連携して、自動でサイトホスティングができる◉ 静的サイト公開のための便利機能がたくさん詰まっている
Netlifyはいいぞ①Gitでブランチ切ってプッシュすると自動でブランチ毎の公開サイトがつくられる◉ 本番サイト◉ テストサイト◉ 新機能のプルリクエストのサイトなど、用途に応じてなんとブランチを切るだけでそれぞれの確認用サイトが出来上がる！webhookでビルドなどももちろんできます。
Netlifyはいいぞ②ビルドも自動でやってくれるぞdistやpublicディレクトリをpushすんのかしないのか問題が解決します。pushしないでビルドCircle CIなどに任せていた人も、Netlifyで完結するので管理が楽になります。しかもyarnなども自動でやってくれて、package.jsonにscriptsでbuildがあればもう設定いらず！
Netlifyはいいぞ③便利機能がたくさんあるよ◉ 独自ドメイン設定 & HTTPS化◉ フォームの設置と投稿管理◉ gitにpushする独自CMS◉ プリレンダリング◉ Functions(Lambdaラッパー)などなど。。。。とにかく静的サイトの公開において問題になる事への解決策が取り揃っています。
◉ フロントのみでSPAサイトを作って◉ サーバーサイド構築は最小限で済ませて◉ すぐにサイト公開ができるこれら３つを組み合わせて、、、結果爆速でWebサービスが作れる！
みなさんも三種の神器を使いこなして爆速開発していきましょう！でも、運用が大変だったりかゆいところがあるんでしょう？わかる
三種の神器を使ったWebサービスの本格運用への足がかりマジウケるｗｗｗためしがきの例も少しギャルと一緒に説明するトラ！
作ってます
静的サイトジェネレータってOGPの出し分け出来なくない？①Functionsで一部のパスだけSSRな機能を作って、本サイトにリダイレクトする◉ 基本的には決まったコンテンツにしか出来ない◉ CGMなどでOGP芸をやるときに困る
静的サイトジェネレータってOGPの出し分け出来なくない？②NetlifyにPrerenderingという機能があり、JSでのレンダリング結果をキャッシュして持っておいてくれる機能を使う※キャッシュがたまるまで少し時間がかかるためメディア系ならいける◉ メディアなどの決まったコンテンツの場合で、 いちいち全部ジェネレートしないで動的に出す場合
Firebaseはただのコンテンツ管理させるにはだるくない？ContentfulというヘッドレスCMSでフォントの管理をしています。admin権限のデータなどを別途用意するとかにも便利
Firebaseってプロジェクト５個しか作れなくない？どう考えても少ないっしょ申請すると結構すぐ上限を上げてくれます。私も今30個くらいプロジェクトあります。。。
DBを非正規化するとクライアントサイドjoinだるくない？①例) データproductAを取得してから imageAをとってjoinして表示。◉ Joinするコードが増えて辛い◉ Joinしてから画像表示すると遅い
DBを非正規化するとクライアントサイドjoinだるくない？②1. urlなどの必要なデータのみfunctionsを使ってproductAにも入れるようにする2. procductAとimageAをくっつけたデータをfunctionsで作っておく。そのデータはリードオンリー。クライアントは元データだけ更新
ってかFirestoreも更新検知できるとか言ってるくせに遅くない？その部分だけでいいので、Realtime DataBaseを使おう!◉ まだ東京リージョンが来てない！◉ 間にfunctionsを挟んだりするとfunctionsは立ち上がりが遅いため、その影響が出る
Firestoreって全文検索とかないわけ？を使おう!Firestoreのデータを全部突っ込んで、検索可能にできますしかもalgolia経由の検索がめっちゃ早い◉ ありません。全体的にQueryがしょぼいです
やっぱ私SDKとか知らんし、RESTにしたいんですけど◉ Firebase functionでREST APIを生やして使うことも出来ます◉ その際にFirebase Authの認証情報を使ってfunctionsの実行を制御出来たりもします！◉ ルールの設定が複雑怪奇になるくらいなら、functionsに寄せて作ったほうが楽な場合もあります
気づいちゃったんだけど、なんかNetlifyのCDN遅くない？本番環境だけfirebase hostingを使おう!笑確認用にNetlifyを利用でもこないだ大型調達したからきっと改善するはず。。。！ちょっと遅い、、、（ざっくり測ってみた）◉ Cloudfront,FirebaseHosting：50ms〜100ms◉ Netlify：150~180 ms◉ Github Pages：250~400 ms
◉ 三種の神器で爆速開発を始めよう！◉ とはいえ開発効率はいいけど弱点もある◉ でもプラスアルファで補える場合も多々あります！◉ 辛くなったら一部だけ使うとかに切り替えてもいいまとめ
Vue.jsとFirebaseの本、Netlifyの本を書いているのでぜひ買って下さい！◉ AmazonでKindle◉ BoothでPDFが買えます！！！宣伝です
質問あればTwitterでもどうぞ。お仕事も少し募集してます！https://twitter.com/nabettuhttps://nabettu.comThanks!
cometsについてこちらの発表は、専用サイトにコメントするとコメントが発表者のスライドに表示されます。https://comets.nabettu.com/?id=jsfesちなみにFirebaseとNetlifyで動いています。
nabettu
nagix
k_koheyi
whywaita
shinrinakamura
.png){kind=icon}
3playmarketing
tomuro
gawa
koudaiii
miyashino
line_developers
cyberarchitect
rigolon
lemiorhan
chrislema
smashingmag
brettharned
colly
kneath
geoffreycrofte
skipperchong
gr2m
notwaldorf
roundedbygravity
mthomps