Blogを作った話 -Zli x DeNA-

Blogを作った話 -Zli x DeNA-

9fbbe5d0b8e2ee1cdc3a576b55a2d63d?s=128

uzimaru0000

January 22, 2020
Tweet

Transcript

  1. Blogを作った話 うじまる (大庭 周士)

  2. - 名前 - 大庭 周士 - 好きな物 - フロントエンド -

    TS - Elm - SNS - uzimaru0000 自己紹介
  3. 突然ですが・・・

  4. Blogを作りました

  5. なんで作ったのか - 冬休み中に何か作りたかった - 自分のドメインのブログが欲しかった そうだブログを作ろう

  6. 構成 - フロントエンド - React + TypeScript - バックエンド -

    Node.js + TypeScript - フレームワーク : Micro - データベース : FaunaDB - ホスティング先 - now.sh
  7. Microって? - https://github.com/zeit/micro - ZEIT社が作ったサーバサイドフレームワーク - Simpleに書ける - (個人的に)使いやすい

  8. FaunaDBって? - ACID特性を持ちつつスケーラビリティも備えた分散データ ベース - 標準でGraphQLに対応してる - ドキュメント指向のデータベース

  9. now.shって? - https://now.sh - $ now でデプロイできる - HPに “World-Class

    Static Hosting” とあるがServerもデプロ イできる - 独自のドメインも設定できる
  10. なんでこの構成なの? - AWS, GCPよくわからない、now.shしか使えない - now.shにはDBサービスが無いので外部のDBサービスを使 わないといけない - TwitterのプロモーションでFaunaDBが出てきてて良さげだっ た

  11. ディレクトリ構成 - now.json ← now.shの設定 - package.json - main/ ←

    クライアントサイドのソースコード - public/ ← faviconとかrobots.txtとかの静的ファイル - api/ ← APIサーバーのソースコード - cli/ ← CLI(後述) のソースコード - common/ ← 型定義とか
  12. now.json - どうルーティングするかなどを書いておく

  13. API Client Static

  14. API Client Static Client??

  15. ひよこだってSSRしたい

  16. SSRって? SSレア?

  17. SSRって? SSレア ServerSideRendering サーバサイドでレンダリングして結果(HTML)を返却する Next.jsとかNuxt.jsを使うと楽に実装できる

  18. CSR (クライアントサイドレンダリング) 鯖 HTML JS HTML, JSをクライアントに渡す

  19. CSR (クライアントサイドレンダリング) 鯖 JS 動的にDOMを構成

  20. CSR (クライアントサイドレンダリング) 鯖 JS データを取得

  21. SSR (サーバサイドレンダリング) 鯖 HTML JS HTML, JSをクライアントに渡す

  22. SSR (サーバサイドレンダリング) 鯖 HTML JS

  23. どうしてサーバで描画できるの? - ブラウザでHTMLを表示しているのはDOM <h1>Title</h1> <img src=”...”>

  24. どうしてサーバで描画できるの? - Reactさんが操作しているのは仮想DOM <h1>Title</h1> <img src=”...”>

  25. どうしてサーバで描画できるの? - 仮想DOMをHTML文字列にすればOK

  26. なんでSSRするの? - SEO対策 - クローラーがJSを解釈しないから - 初期描画を早くする - サーバでHTMLを生成しているから早い -

    OGPを設定したい
  27. なんでSSRするの? SEO対策 & 初期描画を早くする

  28. ひよこはnow.shを推したい

  29. なんで推したいのか - 使いやすい - 開発しやすい - 無料!

  30. 使いやすい - now.json の設定がそんなに複雑じゃない - 基本的に `$ now` を打てばデプロイしてくれる -

    デプロイごとに一意なURLを発行してくれる - ドメインのaliasも `$ now alias` でできる
  31. 開発しやすい - `$ now dev` というサブコマンド - 実際の環境と同じようにサーバを立ててくれる - ファイルを更新したら再起動してくれる

    - 環境変数を.envから勝手に読み取ってくれる File Watch
  32. 開発しやすい 今回の環境 Watch Watch Build Edit Parcel

  33. 開発しやすい 何が良かったか - サーバを複数立てなくていい - 今まではAPIとクライアントのサーバを別々で - URLが相対Pathで指定できる - DevとProdでPathを変えなくていい

  34. ひよこはCLIで投稿したい

  35. ディレクトリ構成 - now.json ← now.shの設定 - package.json - main/ ←

    クライアントサイドのソースコード - public/ ← faviconとかrobots.txtとかの静的ファイル - api/ ← APIサーバーのソースコード - cli/ ← CLI(後述) のソースコード
  36. なんでCLI - 長文書いてるとブラウザのエディタではUXが良くない - 結局ブラウザで書くよりローカルで書いたほうがいい - 別で管理画面を作るのが面倒 & そこまでいらない -

    CLIがすき
  37. 使ったpackage - https://github.com/tj/commander.js/ - CLIのフレームワーク的なやつ - https://github.com/terkelg/prompts - 入力をいい感じにやってくれるやつ -

    password入力 - セレクト - etc...
  38. commander.js 自分なりにちょっとアレンジ こんな感じの 型定義を作成

  39. commander.js - name - サブコマンドの名前 - args - 引数 -

    `<>` で囲むと必須 - `[]` で囲むと任意 - description - コマンドの説明 - action - コマンドの内容
  40. commander.js

  41. prompts - Promiseで入力値を受け 取れる - 複数連続して入力を受け 付けれる - 入力値にメッセージがつ けれる

  42. DEMO

  43. まとめ - now.sh とてもいい - 開発モードもあるので開発がしやすい - Micro とてもいい -

    ちょっとしたサーバならこれで十分 - Parcel とてもいい - webpack.config.js 書きたくないじゃん - SSR の勉強になった - フレームワークなしでSSRしたので勉強になった - prompts とてもいい - 簡単にインタラクティブな入力処理を書ける
  44. Q&A

  45. ありがとうございました