Slide 1
Slide 1 text
チャリティーカンファレンス沖縄
株式会社 菅家大地
サイトを
の
構成にリニューアルした話
Slide 2
Slide 2 text
株式会社 フロントエンドエンジニア
菅家 大地
元デザイナーのフロントエンドエンジニア
福島→宮城→東京→宮城
仙台フロントエンド
Slide 3
Slide 3 text
年に ヶ月ほど
沖縄に住んでいました
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
ファイルを事前にレンダリングし、CDNから直接配信するこ
とで、Webサーバーの管理や運用の必要性を排除し、高速
で安全なサイトやアプリを配信します。
https://jamstack.org/
JavaScript
APIs
Markup
Slide 7
Slide 7 text
● リニューアルしたサイトの概要
● 使っている技術要素の紹介
● からのデータ移行
● で作ってみてどうだったか
● 苦労したポイント
今日話すこと
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
●
● ニュースだけ
ページくらい
● ニュース以外の更新は
非エンジニアでは触れない
● を検討
● ニュース以外も を
導入したい
● 社内で の実績があり
を使いたい
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
各技術要素の紹介
Slide 13
Slide 13 text
● サーバーサイドレンダリング（ ）
● シングルページアプリケーション（ ）
● 静的ファイルの生成
Vue.jsのフレームワーク。
さまざまなターゲットをサポート。
で からデータ取得すれば、
として静的に生成することが可能 のライフサイクル
参照
Slide 14
Slide 14 text
● 静的 生成していてもページ遷移時に にアクセスする
→ リリースの で の機能が追加
● 以下のようなケースがある場合は気になる？
○ のデータ転送量を減らしたい
○ セキュリティ面を考慮して隠蔽したい
● の遷移は使わずに タグでリンクをするなども可能
余談
Slide 15
Slide 15 text
● テンプレートを持たずに だけ提供
するヘッドレス 日本製
● インストールなどの手間が不要。
アカウント作成してすぐ始められる。
● 国産 を使用していて
コンテンツ配信が高速。
● 機能開発や改善が爆速。
参照 https://microcms.io/
Slide 16
Slide 16 text
● 管理画面の がわかりやすくて使いやすい
● 必要な だけを用意できるので更新部分がわかりやすい
デフォルトで色々付いてるとここは触らないでみたいなことが
● 自動でアップデートされるのは良いが、
が変わったりする場合があるのは良し悪し
● サポート対応が神
使用感 個人的感想
Slide 17
Slide 17 text
● リッチエディタの使い勝手が少し悪い印象がある
● 記事 コンテンツ が増えると管理画面の使い勝手が悪い
● 管理画面内での検索などが不十分な印象
● 画面プレビュー機能を使うには一手間必要
デメリットはありますが、意見を言うと爆速で改善してくれます。総合的に
はとても満足しています。
使用感 個人的感想
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
● 静的コンテンツのホスティングサービス
● コンテンツは の を使って配信される
● のサービスと連携し、 や があったら がビルドや
デプロイをしてくれる。とにかく簡単
● を使った との連携も簡単
● という言葉を提唱したのは の創業者
Slide 20
Slide 20 text
WordPressからのデータ移行
Slide 21
Slide 21 text
● 既存 の約 件の記事を移行する必要があった
● インポート機能があるが使わなかった
○ インポート用に整形する手間 記事がゼロの時しか使えない
● で記事を登録することが可能なのでこちらを採用
○ のエクスポートした データを整形して
○ 用に整形 画像のパス変換
● 画像は全選択→ドラッグ ドロップで 分くらいでいけた
の を使用して移行
Slide 22
Slide 22 text
● の元記事のデータが でそ
のまま のリッチエディタに登録す
るとうまくいかない
● 旧記事 用のフィールドを用意
● リッチエディタをチェックボックスで
切り替え可能に
● 何かあれば 側で対応できるように、移
行記事というチェックボックスを用意
エディタの互換性の問題
Slide 23
Slide 23 text
余談：最終的にリッチエディタを使わずに繰り返しフィールドを使用
Slide 24
Slide 24 text
JAMstackで作ってみてどうだったか
Slide 25
Slide 25 text
● セキュリティやパフォーマンス面でのメリットは大きい
● 各要素が疎結合なので、一部だけ置き換えるなどもしやすい
● 開発体験が圧倒的に良かった
→ や などの フレームワークを サイト制作で使うという
選択肢が持てる
体制やコスパの問題はあると思いますが
メリットや良かったこと
Slide 26
Slide 26 text
● 主にサイトの運用面で課題が出てくると感じた
● 記事が多いほどビルドにかかる時間が長くなる
● そのため公開時間がシビアなものには使いにくい
● 基本的に一部だけビルド・配信はできない
● 単体ではプレビューできない ビルドしないと確認できない
○ では のパラメータをつけると下書きを取得してく
れる機能がある 多少の開発が必要
に感じたデメリット
Slide 27
Slide 27 text
現時点での対策
開発環境だけSPAにし
て、ビルドなしのプレ
ビュー環境として使用し
ています。
Netlifyの環境変数を使
用することでワンソース
で実現可能。
Slide 28
Slide 28 text
苦労ポイントなど
Slide 29
Slide 29 text
● 動的ルーティング のような の は
自動で生成してくれないので指定する必要がある
● に のデータを取得して配列で渡す処理を書く
例：
● ニュース詳細・カテゴリ・ページング・期間・期間 カテゴリとやっていか
ないといけないので地味に大変
静的 生成時の動的ルーティング
Slide 30
Slide 30 text
HTML生成失敗時に
エラー終了せずに
デプロイされる
何食わぬ顔で通常終了デプロイされ に
なるので、イベントをキャッチして、明示的に
エラーを返す処理を入れる
Slide 31
Slide 31 text
/hooks/generate.js
/nuxt.config.js
Slide 32
Slide 32 text
● データ移行をしたら総ページ数が 弱になった
● 静的 生成時に に負荷がかかりエラーに
● ページ生成時の ページ毎のインターバル時間を設定でき、 秒に設定
したら のエラーが起きにくくなった
● が、その分ビルドにかかる時間は長くなり、 はビルドの が 分
越えると落ちるのでそこで落ちた
● 秒にしてなんとか 分くらいに落ち着く エラーはたまに発生
ビルド時間と 負荷との戦い
Slide 33
Slide 33 text
● という仕組みを使い、 生成時にあらかじめデータを渡す設
定をすることができる
○ ビルド時間が 分くらい 約半分 になりエラーも起きなくなった
○ ドキュメントに書いてあるのでちゃんと読みましょう
● 参考： ページ弱のトータルデプロイ時間 分 〜 分
○ ビルド時間：約 〜 分 の 分の対象はこっち
○ の 画像圧縮など 約 分
ビルド時間と 負荷との戦い
Slide 34
Slide 34 text
● でコンテンツが追加・更新されたら に を送りビ
ルドをトリガーするような設定にしていた
● 月のビルド時間に制限がある プランによるが今回は 時間
● で更新できる部分がかなり増えたので、更新の度に を
送ったら、それなりにビルド時間を消費することが予想された
● ニュース以外のコンテンツは を送らないことにして、
を送るだけのコンテンツを用意した
ビルド時間と のビルド時間制限との戦い
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
● はユーザーにも開発者にもメリットがある
運用面などの課題はあるが解消する技術や手法は今後出てくると思う
● モダンなフロントエンド技術や開発手法が使える場面が増え
ている
● おすすめです！
まとめ
Slide 37
Slide 37 text
ご静聴ありがとうございました