MTDDC Meetup TOKYO 2024 / フロントエンドエンジニアの成長に繋がるCMS設計

Slide 1

Slide 1 text

フロントエンドエンジニアの成長に繋がるCMS設計 2024/11/23　まぁし / 知念

Slide 2

Slide 2 text

株式会社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

Slide 3

Slide 3 text

https://www.tam-tam.co.jp/ フロントエンドエンジニア採用強化中！！ 3

Slide 4

Slide 4 text

使いやすいWebを一緒に作りませんかクラウドワークス様 GLOBIS様メディカ出版様藤子・F・不二雄ミュージアム様 JAXA様 CMSの実績多数あります 4

Slide 5

Slide 5 text

フロントエンドのスキルロードマップ 5

Slide 6

Slide 6 text

フロントエンドのスキルロードマップ 1. HTML（タグ・マークアップ） 2. CSS（スタイル） 3. JavaScript（アコーディオン等のUI、ライブラリ） 4. ・・・？ 5. ・・・？ 6. Vue.js！React！TypeScript！SSR！ISR！どう習得すれば良い？駆け出しつよつよに見える 6

Slide 7

Slide 7 text

参考 https://roadmap.sh/frontend 7

Slide 8

Slide 8 text

CMSを使った開発はどこに入るの？ 8

Slide 9

Slide 9 text

ここらへんとか 9

Slide 10

Slide 10 text

ここもアリ 10

Slide 11

Slide 11 text

様々なCMS CMSとは・・・Contents Management System（コンテンツを管理する機能） HTMLやCSSがわからなくても、Webサイトのページ作成や編集ができる ● Movable Type ● WordPress ● Drupal ● Adobe Experience Manager ● microCMS ● Contentful 11

Slide 12

Slide 12 text

特徴の違い（最終的にできることはほぼ同じ） ● Movable Type ○ MTタグ（MTML）と呼ばれるような独自タグがありHTMLに含めて使える ○ 投稿したコンテンツはHTMLとして静的（Static）に生成する ○ 生成のために再構築という処理が必要 ● WordPress ○ PHPで動いており、ページにアクセス時にサーバー側でHTMLを組み立てて表示する ○ OSSでありテーマやプラグインが豊富 ● microCMS ○ Headless CMS（デザインテンプレートを持たない）でコンテンツのみを管理する ○ API経由でデータのやりとりを行う 12

Slide 13

Slide 13 text

技術スタックの違い（必要最低限） ● Movable Type ○ HTML/CSS ○ MTタグ、MTテンプレート ● WordPress ○ HTML/CSS ○ PHP ● microCMS ○ HTML/CSS ○ JavaScript、TypeScript、JSフレームワーク（Nuxt/Next.jsなど） ○ ビルドツールの理解 13

Slide 14

Slide 14 text

CMSの選定 14

Slide 15

Slide 15 text

Movable Type WordPress Headless CMS セキュリティ・低い攻撃リスク高パフォーマンス（表示速度）動的処理、リアルタイムに表示を切り替えられるセキュリティ・低い攻撃リスク高パフォーマンス（表示速度）クラウド版、パッケージ版、エンタープライズ版が選べるテーマ、プラグインが充実 JavaScriptに集中できる公式サポート開発が早い、シンプルなブログは実装できる人が多いコンポーネント開発の恩恵若手からの人気 APIがある（Data API） APIがある（REST API） APIがある要件に合うか考えよう（ちょっといいとこ） 15

Slide 16

Slide 16 text

Movable Type WordPress Headless CMS MTテンプレートタグの理解が必要 PHP、WordPress関数、テーマの理解が必要 ReactやVue.js等のJavaScript （TypeScript）、FetchやAPIの理解コンテンツが増えると再構築に時間がかかるカスタムブロックをReactで作るレベルになると難易度が上がる基本的に実装の難易度が高い、作れる人が少ない詳しい若手が少ないいろいろな構築パターンが生まれてしまうフレームワークのバージョンアップによる負荷費用面：初期コスト（パッケージ版） / 運用費（クラウド版）費用面：アップデートコスト、保守コスト費用面：ホスティング・ビルド環境が必要で運用費が高め要件に合うか考えよう（ちょっと大変なとこ） 16

Slide 17

Slide 17 text

CMSの選定 ● サイト規模 ● 更新頻度 ● リアルタイム性 ● 記事編集者のリテラシー、経験 ● サーバー等のインフラ環境ヒアリングが大事作りたいものはもちろん、運用方法までイメージしておく 17

Slide 18

Slide 18 text

CMS選定がスキルに与える影響 18

Slide 19

Slide 19 text

CMS選定がスキルに影響するかもしれない ● Web制作を極めたい → Movable Type ○ Webサイトを安定して作れる、バックエンドを意識しなくて良い ○ 小規模〜大規模まで網羅可能 ● フロントエンド・バックエンドを幅広くスキルアップしたい → WordPress ○ HTML/CSSでUIのスキルアップ ○ PHPのテンプレート構築でバックエンドの言語も学べる ● フロントエンドに特化したい → Headless CMS ○ JavaScriptが鍛えられる ○ TypeScriptによる静的型付けやビルド・バンドルツール周りの理解が深まる 19

Slide 20

Slide 20 text

CMSの共通点 20

Slide 21

Slide 21 text

CMSの共通点：データ（コンテンツ）を扱う本セッションでは、CMSに登録するデータ（コンテンツ）をどう扱うかの設計のことをCMS設計と呼びます。 CMS設計は、どのCMSを選んでも必要になる ● フィールドの種類 ● 必須かどうか ● 条件によって変わるものがあるか、仕様など 21

Slide 22

Slide 22 text

CMS設計の例（MTもmicroCMSもほぼ同じ） 22

Slide 23

Slide 23 text

CMS設計のポイント 23

Slide 24

Slide 24 text

使う人のことを考える例えば、この記事タイトル部分をCMSで編集できるようにしたいフィールドを分ける？ HTMLで更新する？こういうときどう設計する？ 24

Slide 25

Slide 25 text

案1. 入力フィールドを分ける 25

Slide 26

Slide 26 text

案2. リッチエディタで更新する 26

Slide 27

Slide 27 text

案3. テキストエリア（複数業）でHTML更新する 27

Slide 28

Slide 28 text

どれがいいと思う？ 28

Slide 29

Slide 29 text

どれも正解になり得る 29

Slide 30

Slide 30 text

データの取り扱いを考えるきっかけにもなる ● 案1はフィールドに入力した文字をそのまま「テキスト」として扱う ● 案2はリッチエディタの内容をHTMLに変換して扱う ● 案3はフィールドに入力したHTMLをそのまま扱うデータベースにどのように保存されるのか、実際にテンプレートで呼び出すときにどのような状態になるのか API開発の設計にも生かせる 30

Slide 31

Slide 31 text

CMSの選定 ● サイト規模 ● 更新頻度 ● リアルタイム性 ● 記事編集者のリテラシー、経験 ● サーバー等のインフラ環境ヒアリングが大事作りたいものはもちろん、運用方法までイメージしておく 31

Slide 32

Slide 32 text

CMSの選定 ● サイト規模 ● 更新頻度 ● リアルタイム性 ● 記事編集者のリテラシー、経験 ● サーバー等のインフラ環境ヒアリングが大事作りたいものはもちろん、運用方法までイメージしておく 32

Slide 33

Slide 33 text

再構築やサーバーサイドのレンダリングの理解 Movable Typeの再構築や、WordPressのサーバーサイドでレンダリングする仕組みは、JSフレームワークのSSGやSSRの概念の元になっている CMSでページを生成・表示する仕組みがイメージできていると、JSフレームワークが目指すものはその延長になっているので理解しやすくなる ● 再構築 → SSG / Pre Rendering ● サーバーサイド → SSR / ISR MTで再構築の時間を縮めるための設計はSSGに生かせる WordPressで表示速度を早めるための設計はSSRに生かせる 33

Slide 34

Slide 34 text

WebサイトのMovable Typeの構成例 DB ＋ CMS → HTMLやファイル生成エンジニアがMTにログインしてテンプレートを更新 Web担当者がMTにログインしてページ更新更新情報をデータベースに保存し、再構築によりファイル生成するデータベース 34

Slide 35

Slide 35 text

WebサイトのJamstack 構成例（SSG） Headless CMS ＋ Webフレームワーク → GitHub Actions → S3/CloudFront エンジニアがコードを更新   （git push）  Web担当者がページ更新   （Webhook）  GitHub Actionsでbuildコマンド実行   SSGでファイル生成してS3へ転送   S3に静的ファイル設置   CDN（Cloudfront）で配信   35

Slide 36

Slide 36 text

WebサイトのJamstack 構成例（SSR/ISR） Headless CMS ＋ Webフレームワーク → Vercel エンジニアがコードを更新   （git push）  リポジトリの更新でbuildコマンド実行   Node.jsでサーバーを立てて処理をする   CDNで配信  キャッシュの制御  Web担当者がページ更新   （Webhook）  36

Slide 37

Slide 37 text

Webアプリケーション構成例（SSR/CSR） Headless CMS ＋ Webフレームワーク → Vercel エンジニアがコードを更新   （git push）  データベース  コンテンツ・ユーザー情報   リポジトリの更新でbuildコマンド実行   Node.jsでサーバーを立てて処理をする   CDNで配信  キャッシュの制御  37

Slide 38

Slide 38 text

WebサイトからWebサービスまでのロードマップ案 HTML/CSSの静的（スタティック）なWebサイト ↓ CMSを使った更新可能なWebサイト ↓ Headless CMSとJSフレームワーク ↓ Webアプリケーション・Webサービス 38

Slide 39

Slide 39 text

まとめ 39

Slide 40

Slide 40 text

まとめ HTML/CSS/JavaScriptの基礎を習得し、そのままVue.jsやReactのようなライブラリをすぐ理解でき、扱える方はその方向性でも良いもし難しいなと思ったら、CMSから取り組んでみるのも良い設計で得る学びは無駄にならない ● Webサイト開発でHTML/CSSの基礎の次のステップとしてCMSは学びやすい ● CMSの設計はAPIを利用した開発にも応用できる ● APIを利用したCMS開発はJSフレームワークの学習に応用できる ● JSフレームワークとAPIのCMS開発はアプリ開発に応用できる 40

Slide 41

Slide 41 text

すぐに複雑なJavaScriptゴリゴリ書ける人もいれば、段階を踏んで学んでいく方が合うタイプもいる 41

Slide 42

Slide 42 text

フロントエンドのスキルロードマップ 1. HTML（タグ・マークアップ） 2. CSS（スタイル） 3. JavaScript（アコーディオン等のUI、ライブラリ） 4. ・・・？ 5. ・・・？ 6. Vue.js！React！TypeScript！SSR！ISR！ CMSもアリ！駆け出しつよつよに見える 42

Slide 43

Slide 43 text

ご清聴、ありがとうございました！ X（旧Twitter）まぁし@chocodogmagic 平日9:00〜スペースでWeb情報発信中！フォローしてね！ Web制作/Webアプリ開発ご依頼ください TAMはフロントエンドエンジニア採用中！ 43