Tweet
Tweet

Slide 1

Slide 1 text

Nuxt.js & Firebase & Netlifyでの 爆速プロトタイピングと 本格運用への足がかり ~ 秋のJavaScript祭 2018/11/17 ~ 渡邊達明＠株式会社クリモ

Slide 2

Slide 2 text

◉ 自己紹介 ◉ Webサービス開発３種の神器 ◉ Nuxt.jsはいいぞ ◉ Firebaseはいいぞ ◉ Netlifyはいいぞ ◉ 本格運用への足がかり ◉ まとめ 目次

Slide 3

Slide 3 text

自己紹介 ◉ 渡邊 達明（わたなべ たつあき） ◉ twitterとか: @nabettu ◉ 富士通株式会社→面白法人カヤック→独立 ◉ 妻（代表）と法人設立 ◉ Webフロントエンド（Vue.jsやNuxt.js）＆ アプリエンジニア（React Native）

Slide 4

Slide 4 text

◉ 妻がママ向け・保育士向けのメディア運営 ◉ 私が受託開発と、メディアの技術周り担当 ◉ 空いた時間でWebサービス開発 株式会社クリモ

Slide 5

Slide 5 text

みなさん Webサービス 作ってますか？

Slide 6

Slide 6 text

◉ SPAフレームワークワーク ◉ Firebase ◉ Netlify 私の考えるフロントエンドエンジニアの Webサービス開発三種の神器 これらを使って爆速でWebサービス開発しよう！

Slide 7

Slide 7 text

※SPAフレームワークは宗派があるので、 　適宜お好みのものに置き換えてください。 ◉ 軽量なものがいい人はRiot.jsやHyperappでも ◉ React派の人はNext.jsでも ◉ メディア系作るならGatsby.js や Gridsome でも ◉ アプリも見据えているならReact Native , Anguar.js + Ionic, Monaca などなど... 今回は私の好みでNuxt.jsで話を進めます。

Slide 8

Slide 8 text

Nuxt.jsはいいぞ

Slide 9

Slide 9 text

Nuxt.js使うとなにが嬉しいか ◉ ルーティングや状態管理などの欲しい機能がだいたい入っ てるからさっと本質的な開発に取り組める ◉ 困っても日本語のドキュメントが豊富 ◉ 状況に合わせてSSRにも静的サイトにも対応 Vue.jsがわかっていれば、とにかくさっと作れる！ 今日はjsのイベントで、みんな結構色々使ってるだろうからここはそんなに 話しません

Slide 10

Slide 10 text

Firebaseはいいぞ

Slide 11

Slide 11 text

Firebaseとは ◉ ユーザー認証がめっちゃ楽に実装できるBaaS ◉ NoSQLデータベースが↑の認証つかって読み書き管理が楽 ◉ リアルタイム用DBや画像などのストレージももちろんある ◉ FaaSが上記の機能と連携（認証も）してすぐ使える ◉ サーバーレスでAPI経由ですべてこなせます！

Slide 12

Slide 12 text

Firebaseはいいぞ① ユーザー認証の開発がめっちゃ楽 コードを書かずにユーザーログインが実装出来ます。 管理画面でポチポチーっとするだけ。メールアドレス以外に もSNSログインももちろんOK。SMSも

Slide 13

Slide 13 text

Firebaseはいいぞ② 認証に紐付いてDBやストレージが管理できて楽 ◉ FirestoreというNoSQLのDB ◉ ファイルストレージ が利用できクライアントから直接操作が実行できる。 その際独自のルール設定で、権限管理をユーザー認証に紐づ けて管理できるので、自分以外読み書き出来ないDBやスト レージの権限管理などが楽にできる。

Slide 14

Slide 14 text

Firebaseはいいぞ③ リアルタイム通信がWebSocket使わなくてもできるよ Realtime DBというチャットなどの実装に特化したデータベース があり、JavascriptSDKを入れておくと、クライアントサイドから 読み書きができる。 しかもListenerをセットしておくと、DBの変更を勝手に検知して 設定したコードを実行することもできるスグレモノ （Firestoreもできるけどラグが大きい）

Slide 15

Slide 15 text

Firebaseはいいぞ④ FaaSも簡単に導入できるよ Firebase FunctionsというAWS LambdaのようなNode.jsの関 数が使えます。 しかも「DBの変更を検知して動作」などの、他の機能との連携 も楽ちん！ Node.jsで動くので工夫すればSSRなども出来ます。

Slide 16

Slide 16 text

Netlifyはいいぞ

Slide 17

Slide 17 text

Netlifyとは ◉ 静的サイトホスティングサービス ◉ GitHubなどのリポジトリと連携して、自動でサイトホ スティングができる ◉ 静的サイト公開のための便利機能がたくさん詰まっ ている

Slide 18

Slide 18 text

Netlifyはいいぞ① Gitでブランチ切ってプッシュすると 自動でブランチ毎の公開サイトがつくられる ◉ 本番サイト ◉ テストサイト ◉ 新機能のプルリクエストのサイト など、用途に応じてなんとブランチを切るだけでそれぞれの 確認用サイトが出来上がる！ webhookでビルドなどももちろんできます。

Slide 19

Slide 19 text

Netlifyはいいぞ② ビルドも自動でやってくれるぞ distやpublicディレクトリをpushすんのかしないのか問題が 解決します。pushしないでビルドCircle CIなどに任せていた 人も、Netlifyで完結するので管理が楽になります。 しかもyarnなども自動でやってくれて、package.jsonに scriptsでbuildがあればもう設定いらず！

Slide 20

Slide 20 text

Netlifyはいいぞ③ 便利機能がたくさんあるよ ◉ 独自ドメイン設定 & HTTPS化 ◉ フォームの設置と投稿管理 ◉ gitにpushする独自CMS ◉ プリレンダリング ◉ Functions(Lambdaラッパー) などなど。。。。とにかく静的サイトの公開において問題になる 事への解決策が取り揃っています。

Slide 21

Slide 21 text

◉ フロントのみでSPAサイトを作って ◉ サーバーサイド構築は最小限で済ませて ◉ すぐにサイト公開ができる これら３つを組み合わせて、、、 結果爆速でWebサービスが作れる！

Slide 22

Slide 22 text

みなさんも三種の神器を使いこなして 爆速開発していきましょう！ でも、運用が大変 だったり かゆいところが あるんでしょう？ わかる

Slide 23

Slide 23 text

三種の神器を使った Webサービスの 本格運用への足がかり マジウケるｗｗｗ ためしがきの例も少し ギャルと一緒に説明するトラ！

Slide 24

Slide 24 text

作ってます

Slide 25

Slide 25 text

静的サイトジェネレータって OGPの出し分け出来なくない？① Functionsで一部のパスだけ SSRな機能を作って、 本サイトにリダイレクトする ◉ 基本的には決まったコンテンツにしか出来ない ◉ CGMなどでOGP芸をやるときに困る

Slide 26

Slide 26 text

静的サイトジェネレータって OGPの出し分け出来なくない？② NetlifyにPrerenderingという機能があり、 JSでのレンダリング結果をキャッシュして 持っておいてくれる機能を使う ※キャッシュがたまるまで少し時間がかかるためメディア系ならいける ◉ メディアなどの決まったコンテンツの場合で、 　　いちいち全部ジェネレートしないで動的に出す場合

Slide 27

Slide 27 text

Firebaseはただの コンテンツ管理させるにはだるくない？ Contentfulというヘッドレス CMSでフォントの管理をし ています。 admin権限のデータなどを 別途用意するとかにも便利

Slide 28

Slide 28 text

Firebaseって プロジェクト５個しか作れなくない？ どう考えても少ないっしょ 申請すると結構すぐ上限を上 げてくれます。 私も今30個くらいプロジェクト あります。。。

Slide 29

Slide 29 text

DBを非正規化すると クライアントサイドjoinだるくない？① 例) データproductAを取得してから 　 imageAをとってjoinして表示。 ◉ Joinするコードが増えて辛い ◉ Joinしてから画像表示すると遅い

Slide 30

Slide 30 text

DBを非正規化すると クライアントサイドjoinだるくない？② 1. urlなどの必要なデータのみ functionsを使って productAにも入れるようにする 2. procductAとimageAをくっつけた データをfunctionsで作っておく。 そのデータはリードオンリー。 クライアントは元データだけ更新

Slide 31

Slide 31 text

ってかFirestoreも更新検知できる とか言ってるくせに遅くない？ その部分だけでいいので、 Realtime DataBaseを使おう! ◉ まだ東京リージョンが来てない！ ◉ 間にfunctionsを挟んだりするとfunctionsは立ち上がりが遅いた め、その影響が出る

Slide 32

Slide 32 text

Firestoreって全文検索とかないわけ？ を使おう! Firestoreのデータを全部突っ込んで、検索可能にできます しかもalgolia経由の検索がめっちゃ早い ◉ ありません。全体的にQueryがしょぼいです

Slide 33

Slide 33 text

やっぱ私SDKとか知らんし、RESTにしたいん ですけど ◉ Firebase functionでREST APIを生やして使うこ とも出来ます ◉ その際にFirebase Authの認証情報を使って functionsの実行を制御出来たりもします！ ◉ ルールの設定が複雑怪奇になるくらいなら、 functionsに寄せて作ったほうが楽な場合もありま す

Slide 34

Slide 34 text

気づいちゃったんだけど、 なんかNetlifyのCDN遅くない？ 本番環境だけfirebase hostingを使おう!笑 確認用にNetlifyを利用 でもこないだ大型調達したからきっと改善するはず。。。！ ちょっと遅い、、、（ざっくり測ってみた） ◉ Cloudfront,FirebaseHosting：50ms〜100ms ◉ Netlify：150~180 ms ◉ Github Pages：250~400 ms

Slide 35

Slide 35 text

◉ 三種の神器で爆速開発を始めよう！ ◉ とはいえ開発効率はいいけど弱点もある ◉ でもプラスアルファで補える場合も多々あります！ ◉ 辛くなったら一部だけ使うとかに切り替えてもいい まとめ

Slide 36

Slide 36 text

Vue.jsとFirebaseの本、Netlifyの本を書いているので ぜひ買って下さい！ ◉ AmazonでKindle ◉ BoothでPDF が買えます！！！ 宣伝です

Slide 37

Slide 37 text

質問あればTwitterでもどうぞ。 お仕事も少し募集してます！ https://twitter.com/nabettu https://nabettu.com Thanks!

Slide 38

Slide 38 text

cometsについて こちらの発表は、専用サイトに コメントするとコメントが 発表者のスライドに表示されます。 https://comets.nabettu.com/?id=jsfes ちなみにFirebaseとNetlifyで動いています。