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
MTDDC Meetup TOKYO 2024 / フロントエンドエンジニアの成長に繋がるCMS設計
Search
Chinen
November 23, 2024
Programming
0
110
MTDDC Meetup TOKYO 2024 / フロントエンドエンジニアの成長に繋がるCMS設計
MTDDC Meetup TOKYO 2024の登壇資料です。
フロントエンドエンジニアの成長に繋がるCMS設計
Chinen
November 23, 2024
Tweet
Share
More Decks by Chinen
See All by Chinen
2万ページのSSG運用における工夫と注意点 / Vue Fes Japan 2024
chinen
3
2.6k
MTDDC Meetup TOKYO 2023
chinen
2
380
Nuxt 3でJamstackテンプレートを作るときの考え方
chinen
3
2k
WWDC2023-Recap-LT
chinen
1
160
Web Push対応状況2023
chinen
0
570
技術記事が書けない人はGPTに背中を押してもらおう
chinen
2
210
Three.jsで3Dぷわんを動かす / PWA Night vol.46
chinen
0
220
PWA開発を基礎からおさらい / PWA Night CONFERENCE 2022
chinen
3
1.5k
frontend-conf-okinawa-2022
chinen
0
510
Other Decks in Programming
See All in Programming
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
1
100
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
140
Cline指示通りに動かない? AI小説エージェントで学ぶ指示書の書き方と自動アップデートの仕組み
kamomeashizawa
1
560
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
3
350
Go Modules: From Basics to Beyond / Go Modulesの基本とその先へ
kuro_kurorrr
0
120
Using AI Tools Around Software Development
inouehi
0
1.2k
イベントストーミングから始めるドメイン駆動設計
jgeem
4
870
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
280
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
400
Perplexity Slack Botを作ってAI活用を進めた話 / AI Engineering Summit プレイベント
n3xem
0
670
ktr0731/go-mcpでMCPサーバー作ってみた
takak2166
0
170
iOSアプリ開発で 関数型プログラミングを実現する The Composable Architectureの紹介
yimajo
2
210
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
330
24k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
A Modern Web Designer's Workflow
chriscoyier
693
190k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.8k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
4
200
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
124
52k
For a Future-Friendly Web
brad_frost
179
9.8k
The Pragmatic Product Professional
lauravandoore
35
6.7k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.5k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Transcript
フロントエンドエンジニアの 成長に繋がるCMS設計 2024/11/23 まぁし / 知念
株式会社TAM/TAMTO:フロントエンドエンジニア 兼 個人事業主 知念 昌史 / まぁし X @chocodogmagic •
Vue.js / Nuxt / Next.js / セマンティックHTML / PWA / アクセシビリティ • コミュニティ運営(沖縄)v-okinawa (東京)PWA Night、MT東京、CSS福笑い • 平日 9:00〜おはようエンジニア #ohayo_engineer(820回くらい) ◦ X(旧Twitter)スペースでWeb関連のラジオ発信中、フォローしてね • ゲーム好き ◦ スプラトゥーン3(トライストリンガー/ハイドラント XP2050) ◦ ポケモンSV スカーレット 2
https://www.tam-tam.co.jp/ フロントエンドエンジニア採用強化中!! 3
使いやすいWebを一緒に作りませんか クラウドワークス様 GLOBIS様 メディカ出版様 藤子・F・不二雄ミュージアム様 JAXA様 CMSの実績多数あります 4
フロントエンドのスキルロードマップ 5
フロントエンドのスキルロードマップ 1. HTML(タグ・マークアップ) 2. CSS(スタイル) 3. JavaScript(アコーディオン等のUI、ライブラリ) 4. ・・・? 5.
・・・? 6. Vue.js!React!TypeScript!SSR!ISR! どう習得すれば良い? 駆け出し つよつよに見える 6
参考 https://roadmap.sh/frontend 7
CMSを使った開発はどこに入るの? 8
ここらへんとか 9
ここもアリ 10
様々なCMS CMSとは・・・Contents Management System(コンテンツを管理する機能) HTMLやCSSがわからなくても、Webサイトのページ作成や編集ができる • Movable Type • WordPress
• Drupal • Adobe Experience Manager • microCMS • Contentful 11
特徴の違い(最終的にできることはほぼ同じ) • Movable Type ◦ MTタグ(MTML)と呼ばれるような独自タグがありHTMLに含めて使える ◦ 投稿したコンテンツはHTMLとして静的(Static)に生成する ◦ 生成のために再構築という処理が必要
• WordPress ◦ PHPで動いており、ページにアクセス時にサーバー側でHTMLを組み立てて表示する ◦ OSSでありテーマやプラグインが豊富 • microCMS ◦ Headless CMS(デザインテンプレートを持たない)でコンテンツのみを管理する ◦ API経由でデータのやりとりを行う 12
技術スタックの違い(必要最低限) • Movable Type ◦ HTML/CSS ◦ MTタグ、MTテンプレート • WordPress
◦ HTML/CSS ◦ PHP • microCMS ◦ HTML/CSS ◦ JavaScript、TypeScript、JSフレームワーク(Nuxt/Next.jsなど) ◦ ビルドツールの理解 13
CMSの選定 14
Movable Type WordPress Headless CMS セキュリティ・低い攻撃リスク 高パフォーマンス(表示速度) 動的処理、リアルタイムに表示を 切り替えられる セキュリティ・低い攻撃リスク
高パフォーマンス(表示速度) クラウド版、パッケージ版、 エンタープライズ版が選べる テーマ、プラグインが充実 JavaScriptに集中できる 公式サポート 開発が早い、シンプルなブログは 実装できる人が多い コンポーネント開発の恩恵 若手からの人気 APIがある(Data API) APIがある(REST API) APIがある 要件に合うか考えよう(ちょっといいとこ) 15
Movable Type WordPress Headless CMS MTテンプレートタグの理解が必要 PHP、WordPress関数、テーマの 理解が必要 ReactやVue.js等のJavaScript (TypeScript)、FetchやAPIの理解
コンテンツが増えると再構築に時 間がかかる カスタムブロックをReactで作るレ ベルになると難易度が上がる 基本的に実装の難易度が高い、 作れる人が少ない 詳しい若手が少ない いろいろな構築パターンが生まれ てしまう フレームワークのバージョンアップ による負荷 費用面:初期コスト(パッケージ版) / 運用費(クラウド版) 費用面:アップデートコスト、保守コ スト 費用面:ホスティング・ビルド環境 が必要で運用費が高め 要件に合うか考えよう(ちょっと大変なとこ) 16
CMSの選定 • サイト規模 • 更新頻度 • リアルタイム性 • 記事編集者のリテラシー、経験 •
サーバー等のインフラ環境 ヒアリングが大事 作りたいものはもちろん、運用方法までイメージしておく 17
CMS選定がスキルに与える影響 18
CMS選定がスキルに影響するかもしれない • Web制作を極めたい → Movable Type ◦ Webサイトを安定して作れる、バックエンドを意識しなくて良い ◦ 小規模〜大規模まで網羅可能
• フロントエンド・バックエンドを幅広くスキルアップしたい → WordPress ◦ HTML/CSSでUIのスキルアップ ◦ PHPのテンプレート構築でバックエンドの言語も学べる • フロントエンドに特化したい → Headless CMS ◦ JavaScriptが鍛えられる ◦ TypeScriptによる静的型付けやビルド・バンドルツール周りの理解が深まる 19
CMSの共通点 20
CMSの共通点:データ(コンテンツ)を扱う 本セッションでは、CMSに登録するデータ(コンテンツ)をどう扱うかの設計の ことをCMS設計と呼びます。 CMS設計は、どのCMSを選んでも必要になる • フィールドの種類 • 必須かどうか • 条件によって変わるものがあるか、仕様など
21
CMS設計の例(MTもmicroCMSもほぼ同じ) 22
CMS設計のポイント 23
使う人のことを考える 例えば、この記事タイトル部分をCMSで編集できるようにしたい フィールドを分ける? HTMLで更新する? こういうとき どう設計する? 24
案1. 入力フィールドを分ける 25
案2. リッチエディタで更新する 26
案3. テキストエリア(複数業)でHTML更新する 27
どれがいいと思う? 28
どれも正解になり得る 29
データの取り扱いを考えるきっかけにもなる • 案1はフィールドに入力した文字をそのまま「テキスト」として扱う • 案2はリッチエディタの内容をHTMLに変換して扱う • 案3はフィールドに入力したHTMLをそのまま扱う データベースにどのように保存されるのか、実際にテンプレートで呼び出すとき にどのような状態になるのか API開発の設計にも生かせる
30
CMSの選定 • サイト規模 • 更新頻度 • リアルタイム性 • 記事編集者のリテラシー、経験 •
サーバー等のインフラ環境 ヒアリングが大事 作りたいものはもちろん、運用方法までイメージしておく 31
CMSの選定 • サイト規模 • 更新頻度 • リアルタイム性 • 記事編集者のリテラシー、経験 •
サーバー等のインフラ環境 ヒアリングが大事 作りたいものはもちろん、運用方法までイメージしておく 32
再構築やサーバーサイドのレンダリングの理解 Movable Typeの再構築や、WordPressのサーバーサイドでレンダリングする仕組 みは、JSフレームワークのSSGやSSRの概念の元になっている CMSでページを生成・表示する仕組みがイメージできていると、JSフレームワー クが目指すものはその延長になっているので理解しやすくなる • 再構築 → SSG
/ Pre Rendering • サーバーサイド → SSR / ISR MTで再構築の時間を縮めるための設計はSSGに生かせる WordPressで表示速度を早めるための設計はSSRに生かせる 33
WebサイトのMovable Typeの構成例 DB + CMS → HTMLやファイル生成 エンジニアがMTにログインして テンプレートを更新 Web担当者がMTにログインして
ページ更新 更新情報をデータベースに保存し、 再構築によりファイル生成する データベース 34
WebサイトのJamstack 構成例(SSG) Headless CMS + Webフレームワーク → GitHub Actions →
S3/CloudFront エンジニアがコードを更新 (git push) Web担当者がページ更新 (Webhook) GitHub Actionsでbuildコマンド実行 SSGでファイル生成してS3へ転送 S3に静的ファイル設置 CDN(Cloudfront)で配信 35
WebサイトのJamstack 構成例(SSR/ISR) Headless CMS + Webフレームワーク → Vercel エンジニアがコードを更新
(git push) リポジトリの更新でbuildコマンド実行 Node.jsでサーバーを立てて処理をする CDNで配信 キャッシュの制御 Web担当者がページ更新 (Webhook) 36
Webアプリケーション 構成例(SSR/CSR) Headless CMS + Webフレームワーク → Vercel エンジニアがコードを更新
(git push) データベース コンテンツ・ユーザー情報 リポジトリの更新でbuildコマンド実行 Node.jsでサーバーを立てて処理をする CDNで配信 キャッシュの制御 37
WebサイトからWebサービスまでのロードマップ案 HTML/CSSの静的(スタティック)なWebサイト ↓ CMSを使った更新可能なWebサイト ↓ Headless CMSとJSフレームワーク ↓ Webアプリケーション・Webサービス 38
まとめ 39
まとめ HTML/CSS/JavaScriptの基礎を習得し、そのままVue.jsやReactのようなライブ ラリをすぐ理解でき、扱える方はその方向性でも良い もし難しいなと思ったら、CMSから取り組んでみるのも良い 設計で得る学びは無駄にならない • Webサイト開発でHTML/CSSの基礎の次のステップとしてCMSは学びやすい • CMSの設計はAPIを利用した開発にも応用できる •
APIを利用したCMS開発はJSフレームワークの学習に応用できる • JSフレームワークとAPIのCMS開発はアプリ開発に応用できる 40
すぐに複雑なJavaScriptゴリゴリ 書ける人もいれば、 段階を踏んで学んでいく方が 合うタイプもいる 41
フロントエンドのスキルロードマップ 1. HTML(タグ・マークアップ) 2. CSS(スタイル) 3. JavaScript(アコーディオン等のUI、ライブラリ) 4. ・・・? 5.
・・・? 6. Vue.js!React!TypeScript!SSR!ISR! CMSもアリ! 駆け出し つよつよに見える 42
ご清聴、ありがとうございました! X(旧Twitter) まぁし@chocodogmagic 平日9:00〜スペースでWeb情報発信中!フォローしてね! Web制作/Webアプリ開発ご依頼ください TAMはフロントエンドエンジニア採用中! 43