MTDDC Meetup TOKYO 2023

Slide 1

Slide 1 text

CMSを取り巻くフロントエンド開発の現状と課題 2023/11/11　まぁし（知念） #MTDDC

Slide 2

Slide 2 text

アンケートお願いします🙏 ハッシュタグ #MTDDC

Slide 3

Slide 3 text

株式会社TAM/TAMTO：フロントエンドエンジニア兼個人事業主知念昌史 / まぁし X(Twitter)@chocodogmagic ● 職歴：大学卒 → 美容師 → エンジニア12年くらい ● 2019年に東京 → 沖縄へ帰省してフルリモート（沖縄在住） Vue.js/Nuxt/Jamstack/セマンティックなHTML/PWA/ アクセシビリティ/SEO/パフォーマンス改善/Movable Type

Slide 4

Slide 4 text

個人的な活動 ● 平日9:00〜朝活配信：おはようエンジニア #ohayo_engineer ○ X（旧Twitter）SpacesでWeb関連の情報発信中、フォローしてね ○ 550回継続しているがいまだに早起きは苦手、一緒にがんばろ？ ● コミュニティ運営 ○ PWA Night（東京） / v-okinawa（沖縄） / CSS福笑い（東京） ● 好き ○ 甘いもの（寝起きでケーキもいける） ○ スプラトゥーン3（トライストリンガー XP1980） ○ ポケモンSV スカーレット（公式大会に出たい）

Slide 5

Slide 5 text

https://www.tam-tam.co.jp/

Slide 6

Slide 6 text

これから話すこと 1. 近年のWeb制作の変化 2. Jamstackによる開発体験の向上と複雑化 3. いろいろなCMSの特徴と開発環境の違い 4. 今後のWeb制作の流れと課題

Slide 7

Slide 7 text

1. 近年のWeb制作の変化

Slide 8

Slide 8 text

Googleトレンド・・・iPhone 2008年に日本で発売 Webにも大きな影響を与えた

Slide 9

Slide 9 text

Googleトレンド・・・レスポンシブ 2010年くらいから増え始めて、 2015年頃にピークを迎える（普及した）

Slide 10

Slide 10 text

Googleトレンド・・・React、Vue.js、Angular 差はあるものの、 2015年頃から増え始めている

Slide 11

Slide 11 text

Googleトレンド・・・Jamstack 2019年頃からトレンドとして大きくなる（Netlifyの創設者 Matt Biilmannが 2015年に提唱）

Slide 12

Slide 12 text

Web制作を振り返り（日本の場合） ● 1995年頃・・・ホームページ黎明期、ホームページ・ビルダー ● 2000年前後・・・携帯電話、Flash、テーブルレイアウト ● 2000年〜・・・Movable Typeリリース（2001）、Blogブーム、WordPress ● 2005年〜・・・スマートフォンの登場、レスポンシブウェブデザイン ● 2010年〜・・・モバイルファースト、Googleもモバイルフレンドリーへ ● 2015年〜・・・Angular・React・Vue.jsの登場、コンポーネント開発へ ● 2018年〜・・・Jamstack、Headless CMS ● 現在・・・Next.js・Nuxt、STUDIO、Figma

Slide 13

Slide 13 text

Jamstackとは初出2015〜2019年頃までJAMStack（表記も少し違う） JavaScript API Markup JavaScriptを使ってAPIでデータを取得し、HTMLに埋め込んで静的ファイルを生成、CDNで配信する構成のこと Headless CMSとの相性の良さ、React/Vue.jsの普及とも重なる

Slide 14

Slide 14 text

2023年現在「Jamstack」という定義の変化 Next.js（React）、Nuxt（Vue.js）のようなフレームワークの登場、 Vercel / NetlifyのようなSSRに対応した環境がそろってきたことで静的ファイル生成以外の選択肢ができたフロントエンドとバックエンドのコードを分離して、マイクロサービスを組み合わせて構築していくことそのものをJamstackと呼ぶようになっている（このタイミングで表記も現在のJamstackに）さらに、Jamstackでの開発が当たり前になってきたのでそろそろ死語になるかもこの資料では認識合わせのためにあえてJamstackを使っています

Slide 15

Slide 15 text

    Jamstackのよくある構成ヘッドレスCMS 　データのみを扱う　記事更新してWebhookで連携エンジニアコードを更新してPushする JSフレームワーク　APIでCMSデータを受け取り　HTMLと見た目を構築ホスティングサービス　JSフレームワークの　自動Buildに対応　生成したHTMLを配信する

Slide 16

Slide 16 text

複雑じゃない？

Slide 17

Slide 17 text

Movable Typeなら全部揃ってる記事更新担当　MTにログインして投稿するエンジニア　MTにログインしてテンプレート編集する再構築　HTMLを生成して公開する

Slide 18

Slide 18 text

Webサイト：いわゆるホームページ（コーポレートサイトなど） ● 静的ページがほとんど、もしくはCMSで足りる ● 状態（state）管理が必要となる場面が少ない ● バックエンドは問い合わせフォームくらい Webサービス：事業会社のサービス（SmartHR、Amebaなど）、Webアプリ ● ログイン、投稿など、ユーザーからの入力・操作する画面が多い ● 状態管理が必須、動的なページ ● バックエンドとの連携が必須 WebサイトとWebサービスの違い（境界線は無い）

Slide 19

Slide 19 text

WebサイトとWebサービス（Webアプリ）で二極化 ● HTML/CSS/jQuery → 運用はある ------------------------------ ● Pug/EJS、Sass（Gulp） ● JavaScript（ES6〜） ● MT/WordPress等のCoupled CMS ------------------------------ ● Next.js/Nuxt/Astro → Jamstack ● Jamstackが基本 ● React / Vue ● Next.js / Nuxt ● コンポーネント開発 ● デザインシステム → 素のHTMLで作っていない → TypeScriptが基本 → マイクロサービス化 Webサイト Webサービス/Webアプリ制作パターンが多様化制作パターンが固定化

Slide 20

Slide 20 text

2. Jamstackによる開発体験の向上と複雑化

Slide 21

Slide 21 text

Jamstackのメリット① Jamstack構成のメリットはフロントエンドとデータを分解できること従来の開発手法による課題を解決できる ● PHP、Rubyなど見た目に関するコードとDBのデータを埋め込むためのコードが混在し、密結合となる（モノリス）ことで運用しにくい ● PC/スマホ/タブレットなど端末の多様化や、コーポレート、メディア、アプリなど複数チャネルが必要になり、共通のデータを扱いたい MTのData API、WordPressのREST APIなどが開発されたのもこの流れがある

Slide 22

Slide 22 text

Jamstackのメリット② コンポーネント開発の恩恵を受けられる ● フロントエンドのUI開発の効率化（テンプレートを使い回せる） ● ScopedなCSS ○ コンポーネント内のみに適用されるので他のコンポーネントに影響を与えない ○ CSS設計がほぼ不要（BEM、FLOCSSなど気にしなくても良い） ● JavaScriptのため独自構文が少ない（MTタグ・WordPress関数） ○ 他の開発にも応用が効く ● フロントエンドメンバーだけでもサービスが作れる

Slide 23

Slide 23 text

Jamstackはいいぞ

Slide 24

Slide 24 text

注意：前提として知っておくべきことが多い ● HTML、CSS、JavaScriptの基礎（主に見た目の調整） ● CMS設計（DBのデータの持ち方、入力フィールド作成、カテゴリ管理等） ● APIのFetch、Promise周りの理解などJS力 + TS力 ● React/Vue.jsのようなライブラリを使ったコンポーネント開発 ● Next.js/Nuxt のようなフレームワークのBuild（SSG/SSRなど） ● コマンドラインでの操作（Node.jsやGit等） ● ホスティング、デプロイ環境の理解（レンサバのみでBuildむずい） ● SEO、アクセシビリティをJSフレームワークでどう扱うか

Slide 25

Slide 25 text

注意：意外と作るもの多い ● ルーティング ● ページネーション ● 下書きプレビュー ● サイトマップXML ● 問い合わせフォームなどなど Movable TypeやWordPressならデフォルトで対応していたり、プラグインでさくっと実装できるものも自分で用意する必要がある

Slide 26

Slide 26 text

3. いろいろなCMSの特徴と開発環境の違い

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

メリット・デメリットを理解して使うならどれも間違いではない

Slide 30

Slide 30 text

4. 今後のWeb制作の流れと課題

Slide 31

Slide 31 text

CMSとWebの組み合わせは無くならない誰もがプログラミングをしてサイトを運営するのは難しい ↓ HTMLがわからない人でも更新できる仕組みは必要 ↓ そのためのCMSをどう使うか ChatGPTやCopilot、AIエージェント系がUIを作る時代になっても、データは必要（コンテンツのデータはCMSに持たせられる）

Slide 32

Slide 32 text

    Jamstack構成ヘッドレスCMS 　データのみを扱う　記事更新してWebhookで連携 ※MTのData APIでも可能エンジニアコードを更新してPushする JSフレームワーク　APIでCMSデータを受け取り　HTMLと見た目を構築ホスティングサービス　JSフレームワークの　自動Buildに対応

Slide 33

Slide 33 text

Slide 34

Slide 34 text

    Jamstack構成ヘッドレスCMS 　データのみを扱う　記事更新してWebhookで連携 ※MTのData APIでも可能エンジニアコードを更新してPushする JSフレームワーク？ AIエージェント？　APIでCMSデータを受け取り　HTMLと見た目を構築ホスティングサービス？チャットUI？ SGE？？

Slide 35

Slide 35 text

STUDIO https://studio.design/ja

Slide 36

Slide 36 text

Figma to STUDIO Figmaで作成したデザインをSTUDIOに取り込んで公開できる

Slide 37

Slide 37 text

GitHubのCopilot Workspace（2024年〜） Copilot Workspace で Issue を開くと、意図した変更を実装するためのプランが自動的に提案されます。Copilot Workspaceは完全に編集可能である〜（中略） Copilot Workspaceでコードをビルド、実行、テストできます。エラーが発生した場合は、自動的に修正を提供します。参照：https://github.blog/jp/2023-11-09-universe-2023-copilot-transforms-github-into-the-ai-powered-developer-platform/

Slide 38

Slide 38 text

開発方法の多様化 ● HTMLを直接書く → テンプレートエンジンからGulpでHTML生成 → React/Vue.js等のフレームワークからHTML生成 → ？？？ ● STUDIOなどのノーコード・ローコード系ツールで生成 ● Figma to React、Figma to STUDIO等のデザインからコードに変換し、デプロイできる仕組みの登場 ● ChatGPT等のコード生成、GPTsでアプリ作成 ● GitHubのCopilot Workspaceでどうなる？

Slide 39

Slide 39 text

課題 ● エンジニア育成・教育 ○ フロントエンドで習得するスキルマップが広すぎる ○ HTMLとCSSが書けるだけでは作れないものが出てきている ○ 育成に時間がかかる ● Web環境の転換点 ○ フレームワークの進化のスピードが早い、開発手法の複雑化 ○ AIによるプログラミングのブラックボックス化

Slide 40

Slide 40 text

今日のまとめ ● 時代の変化に合わせて、サイト制作の作り方も技術も変わっている ● Webの専門家でない人が運用できる仕組みを提供するためにCMSは必須 ● CMSをどう扱うか、開発手法はメリット・デメリットを考慮して要件に合うものを選ぶ ● Web開発の流行や変化の背景を見つつ、運用に耐えられることを重視しよう開発するエンジニアも、サイトに訪問するエンドユーザーも、運用するクライアント様もみんなが使いやすいものを作るためにひたすら考えてます

Slide 41

Slide 41 text

ご清聴、ありがとうございました！ X（Twitter）まぁし@chocodogmagic 毎月第3水曜日はPWA Night 参加してね！平日9:00〜SpacesでWeb情報発信中！ Web制作・Webアプリ開発ご依頼ください。一緒にお仕事しませんか？各職種で採用中