Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
WordPressサイトをNuxt.js × microCMSのJAMstack構成にリニュー...
Search
Daichi
June 21, 2020
Technology
1
1.6k
WordPressサイトをNuxt.js × microCMSのJAMstack構成にリニューアルした話
2020年6月21日に行われたチャリティカンファレンス沖縄で使用したスライドです。
Daichi
June 21, 2020
Tweet
Share
More Decks by Daichi
See All by Daichi
◯◯◯◯◯◯◯◯◯◯を使って簡単なゲームを作ってみた
kandai
0
1.3k
マージンを使わずに Webサイト構築してみた
kandai
0
3.2k
Jamstackの実案件で躓いたことや工夫したこと
kandai
0
1.5k
OpenAPIを使ってAPIドキュメントとモックサーバーを良い感じにした話
kandai
3
3.4k
ブラウザの新しいAPIで遊んでみる
kandai
1
1.4k
Gridsome × Headless CMSでJAMstackなWebサイトを作る
kandai
1
1.1k
Media Session APIを使ってPWAの音楽プレイヤーを作る
kandai
0
540
CSS組版で技術書を作った話
kandai
0
410
Web技術だけで作るQRコードリーダー
kandai
2
2.1k
Other Decks in Technology
See All in Technology
Should Our Project Join the CNCF? (Japanese Recap)
whywaita
PRO
0
110
なぜ私はいま、ここにいるのか? #もがく中堅デザイナー #プロダクトデザイナー
bengo4com
0
920
怖くない!はじめてのClaude Code
shinya337
0
110
生成AIで小説を書くためにプロンプトの制約や原則について学ぶ / prompt-engineering-for-ai-fiction
nwiizo
4
2.6k
PHP開発者のためのSOLID原則再入門 #phpcon / PHP Conference Japan 2025
shogogg
4
890
"サービスチーム" での技術選定 / Making Technology Decisions for the Service Team
kaminashi
1
180
mrubyと micro-ROSが繋ぐロボットの世界
kishima
2
350
Tech-Verse 2025 Keynote
lycorptech_jp
PRO
0
740
あなたの声を届けよう! 女性エンジニア登壇の意義とアウトプット実践ガイド #wttjp / Call for Your Voice
kondoyuko
4
480
BrainPadプログラミングコンテスト記念LT会2025_社内イベント&問題解説
brainpadpr
1
170
Witchcraft for Memory
pocke
1
490
AWS Summit Japan 2025 Community Stage - App workflow automation by AWS Step Functions
matsuihidetoshi
1
290
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Producing Creativity
orderedlist
PRO
346
40k
The Language of Interfaces
destraynor
158
25k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Being A Developer After 40
akosma
90
590k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Navigating Team Friction
lara
187
15k
Embracing the Ebb and Flow
colly
86
4.7k
Automating Front-end Workflow
addyosmani
1370
200k
Code Reviewing Like a Champion
maltzj
524
40k
Transcript
チャリティーカンファレンス沖縄 株式会社 菅家大地 サイトを の 構成にリニューアルした話
株式会社 フロントエンドエンジニア 菅家 大地 元デザイナーのフロントエンドエンジニア 福島→宮城→東京→宮城 仙台フロントエンド
年に ヶ月ほど 沖縄に住んでいました
None
None
ファイルを事前にレンダリングし、CDNから直接配信するこ とで、Webサーバーの管理や運用の必要性を排除し、高速 で安全なサイトやアプリを配信します。 https://jamstack.org/ JavaScript APIs Markup
• リニューアルしたサイトの概要 • 使っている技術要素の紹介 • からのデータ移行 • で作ってみてどうだったか • 苦労したポイント
今日話すこと
None
None
• • ニュースだけ ページくらい • ニュース以外の更新は 非エンジニアでは触れない • を検討 •
ニュース以外も を 導入したい • 社内で の実績があり を使いたい
None
各技術要素の紹介
• サーバーサイドレンダリング( ) • シングルページアプリケーション( ) • 静的ファイルの生成 Vue.jsのフレームワーク。 さまざまなターゲットをサポート。
で からデータ取得すれば、 として静的に生成することが可能 のライフサイクル 参照
• 静的 生成していてもページ遷移時に にアクセスする → リリースの で の機能が追加 • 以下のようなケースがある場合は気になる?
◦ のデータ転送量を減らしたい ◦ セキュリティ面を考慮して隠蔽したい • の遷移は使わずに タグでリンクをするなども可能 余談
• テンプレートを持たずに だけ提供 するヘッドレス 日本製 • インストールなどの手間が不要。 アカウント作成してすぐ始められる。 • 国産
を使用していて コンテンツ配信が高速。 • 機能開発や改善が爆速。 参照 https://microcms.io/
• 管理画面の がわかりやすくて使いやすい • 必要な だけを用意できるので更新部分がわかりやすい デフォルトで色々付いてるとここは触らないでみたいなことが • 自動でアップデートされるのは良いが、 が変わったりする場合があるのは良し悪し
• サポート対応が神 使用感 個人的感想
• リッチエディタの使い勝手が少し悪い印象がある • 記事 コンテンツ が増えると管理画面の使い勝手が悪い • 管理画面内での検索などが不十分な印象 • 画面プレビュー機能を使うには一手間必要
デメリットはありますが、意見を言うと爆速で改善してくれます。総合的に はとても満足しています。 使用感 個人的感想
None
• 静的コンテンツのホスティングサービス • コンテンツは の を使って配信される • のサービスと連携し、 や があったら
がビルドや デプロイをしてくれる。とにかく簡単 • を使った との連携も簡単 • という言葉を提唱したのは の創業者
WordPressからのデータ移行
• 既存 の約 件の記事を移行する必要があった • インポート機能があるが使わなかった ◦ インポート用に整形する手間 記事がゼロの時しか使えない •
で記事を登録することが可能なのでこちらを採用 ◦ のエクスポートした データを整形して ◦ 用に整形 画像のパス変換 • 画像は全選択→ドラッグ ドロップで 分くらいでいけた の を使用して移行
• の元記事のデータが でそ のまま のリッチエディタに登録す るとうまくいかない • 旧記事 用のフィールドを用意 •
リッチエディタをチェックボックスで 切り替え可能に • 何かあれば 側で対応できるように、移 行記事というチェックボックスを用意 エディタの互換性の問題
余談:最終的にリッチエディタを使わずに繰り返しフィールドを使用
JAMstackで作ってみてどうだったか
• セキュリティやパフォーマンス面でのメリットは大きい • 各要素が疎結合なので、一部だけ置き換えるなどもしやすい • 開発体験が圧倒的に良かった → や などの フレームワークを
サイト制作で使うという 選択肢が持てる 体制やコスパの問題はあると思いますが メリットや良かったこと
• 主にサイトの運用面で課題が出てくると感じた • 記事が多いほどビルドにかかる時間が長くなる • そのため公開時間がシビアなものには使いにくい • 基本的に一部だけビルド・配信はできない • 単体ではプレビューできない
ビルドしないと確認できない ◦ では のパラメータをつけると下書きを取得してく れる機能がある 多少の開発が必要 に感じたデメリット
現時点での対策 開発環境だけSPAにし て、ビルドなしのプレ ビュー環境として使用し ています。 Netlifyの環境変数を使 用することでワンソース で実現可能。
苦労ポイントなど
• 動的ルーティング のような の は 自動で生成してくれないので指定する必要がある • に のデータを取得して配列で渡す処理を書く 例:
• ニュース詳細・カテゴリ・ページング・期間・期間 カテゴリとやっていか ないといけないので地味に大変 静的 生成時の動的ルーティング
HTML生成失敗時に エラー終了せずに デプロイされる 何食わぬ顔で通常終了デプロイされ に なるので、イベントをキャッチして、明示的に エラーを返す処理を入れる
/hooks/generate.js /nuxt.config.js
• データ移行をしたら総ページ数が 弱になった • 静的 生成時に に負荷がかかりエラーに • ページ生成時の ページ毎のインターバル時間を設定でき、
秒に設定 したら のエラーが起きにくくなった • が、その分ビルドにかかる時間は長くなり、 はビルドの が 分 越えると落ちるのでそこで落ちた • 秒にしてなんとか 分くらいに落ち着く エラーはたまに発生 ビルド時間と 負荷との戦い
• という仕組みを使い、 生成時にあらかじめデータを渡す設 定をすることができる ◦ ビルド時間が 分くらい 約半分 になりエラーも起きなくなった ◦
ドキュメントに書いてあるのでちゃんと読みましょう • 参考: ページ弱のトータルデプロイ時間 分 〜 分 ◦ ビルド時間:約 〜 分 の 分の対象はこっち ◦ の 画像圧縮など 約 分 ビルド時間と 負荷との戦い
• でコンテンツが追加・更新されたら に を送りビ ルドをトリガーするような設定にしていた • 月のビルド時間に制限がある プランによるが今回は 時間 •
で更新できる部分がかなり増えたので、更新の度に を 送ったら、それなりにビルド時間を消費することが予想された • ニュース以外のコンテンツは を送らないことにして、 を送るだけのコンテンツを用意した ビルド時間と のビルド時間制限との戦い
None
• はユーザーにも開発者にもメリットがある 運用面などの課題はあるが解消する技術や手法は今後出てくると思う • モダンなフロントエンド技術や開発手法が使える場面が増え ている • おすすめです! まとめ
ご静聴ありがとうございました