$30 off During Our Annual Pro Sale. View Details »

MTDDC Meetup TOKYO 2023

Chinen
November 11, 2023

MTDDC Meetup TOKYO 2023

MTDDC Meetup TOKYO 2023の登壇資料です。

「CMSを取り巻くフロントエンド開発の現状と課題」

Chinen

November 11, 2023
Tweet

More Decks by Chinen

Other Decks in Programming

Transcript

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  7. 1. 近年のWeb制作の変化

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  12. 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

    View Slide

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

    View Slide

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

    View Slide



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

    View Slide

  16. 複雑じゃない?

    View Slide

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

    View Slide

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

    View Slide

  19. 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アプリ
    制作パターンが
    多様化
    制作パターンが
    固定化

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  23. Jamstackはいいぞ

    View Slide

  24. 注意:前提として知っておくべきことが多い
    ● 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フレームワークでどう扱うか

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  31. CMSとWebの組み合わせは無くならない
    誰もがプログラミングをしてサイトを運営するのは難しい

    HTMLがわからない人でも更新できる仕組みは必要

    そのためのCMSをどう使うか
    ChatGPTやCopilot、AIエージェント系がUIを作る時代になっても、
    データは必要(コンテンツのデータはCMSに持たせられる)

    View Slide



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

    View Slide



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

    View Slide



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

    View Slide

  35. STUDIO
    https://studio.design/ja

    View Slide

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

    View Slide

  37. 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/

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide