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 2023
Search
Chinen
November 11, 2023
Programming
1
320
MTDDC Meetup TOKYO 2023
MTDDC Meetup TOKYO 2023の登壇資料です。
「CMSを取り巻くフロントエンド開発の現状と課題」
Chinen
November 11, 2023
Tweet
Share
More Decks by Chinen
See All by Chinen
Nuxt 3でJamstackテンプレートを作るときの考え方
chinen
3
1.7k
WWDC2023-Recap-LT
chinen
1
110
Web Push対応状況2023
chinen
0
500
技術記事が書けない人はGPTに背中を押してもらおう
chinen
2
130
Three.jsで3Dぷわんを動かす / PWA Night vol.46
chinen
0
150
PWA開発を基礎からおさらい / PWA Night CONFERENCE 2022
chinen
3
1.3k
frontend-conf-okinawa-2022
chinen
0
410
Jamstack導入時の罠/ジャムスタックチョットデキル!! 秋のLT大会2022
chinen
1
340
クライアントワーク(受託)のJamstack開発でNuxt 3を提案・実装する / Reject Conference - Vue Fes Japan Online 2022
chinen
2
1.5k
Other Decks in Programming
See All in Programming
ROS 2のZenoh対応とZenohのROS 2対応
takasehideki
2
220
Pydantic x Database API:turu-pyの開発
yassun7010
1
300
RemixとCloudflare Stack におけるFile Upload
ossamoon
1
120
"型"のあるRailsアプリケーション開発 / Typed Rails application development
sinsoku
8
2.1k
ビット演算の話 / Let's play with bit operations
kaityo256
PRO
3
140
AWS認定資格を受験するにあたり、気づいたこと・実践していたことのまとめ
satoshi256kbyte
1
120
Flutterアプリを生成AIで生成する勘所
rizumita
0
230
Vue :: Better Testing 2024
up1
1
320
コードレビューと私の過去と未来
jxmtst
0
110
Compose Multiplatform과 Ktor로 플랫폼의 경계를 넘어보자
kwakeuijin
0
200
実践Dash - 手を抜きながら本気で作るデータApplicationの基本と応用 / Dash for Python and Baseball
shinyorke
2
210
Micro Frontends for Java Microservices - dev2next 2024
mraible
PRO
0
150
Featured
See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
786
250k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
How to name files
jennybc
76
98k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
23
1.7k
Why Our Code Smells
bkeepers
PRO
334
57k
Agile that works and the tools we love
rasmusluckow
327
21k
Embracing the Ebb and Flow
colly
83
4.4k
Fashionably flexible responsive web design (full day workshop)
malarkey
402
65k
[RailsConf 2023] Rails as a piece of cake
palkan
49
4.7k
WebSockets: Embracing the real-time Web
robhawkes
59
7.3k
Rebuilding a faster, lazier Slack
samanthasiow
78
8.6k
Faster Mobile Websites
deanohume
304
30k
Transcript
CMSを取り巻くフロントエンド開発の 現状と課題 2023/11/11 まぁし(知念) #MTDDC
アンケートお願いします🙏 ハッシュタグ #MTDDC
株式会社TAM/TAMTO:フロントエンドエンジニア 兼 個人事業主 知念 昌史 / まぁし X(Twitter)@chocodogmagic • 職歴:大学卒
→ 美容師 → エンジニア12年くらい • 2019年に東京 → 沖縄へ帰省してフルリモート(沖縄在住) Vue.js/Nuxt/Jamstack/セマンティックなHTML/PWA/ アクセシビリティ/SEO/パフォーマンス改善/Movable Type
個人的な活動 • 平日9:00〜朝活配信:おはようエンジニア #ohayo_engineer ◦ X(旧Twitter)SpacesでWeb関連の情報発信中、フォローしてね ◦ 550回継続しているがいまだに早起きは苦手、一緒にがんばろ? • コミュニティ運営
◦ PWA Night(東京) / v-okinawa(沖縄) / CSS福笑い(東京) • 好き ◦ 甘いもの(寝起きでケーキもいける) ◦ スプラトゥーン3(トライストリンガー XP1980) ◦ ポケモンSV スカーレット(公式大会に出たい)
https://www.tam-tam.co.jp/
これから話すこと 1. 近年のWeb制作の変化 2. Jamstackによる開発体験の向上と複雑化 3. いろいろなCMSの特徴と開発環境の違い 4. 今後のWeb制作の流れと課題
1. 近年のWeb制作の変化
Googleトレンド・・・iPhone 2008年に日本で発売 Webにも大きな影響 を与えた
Googleトレンド・・・レスポンシブ 2010年くらいから 増え始めて、 2015年頃にピーク を迎える (普及した)
Googleトレンド・・・React、Vue.js、Angular 差はあるものの、 2015年頃から増え 始めている
Googleトレンド・・・Jamstack 2019年頃からトレン ドとして大きくなる (Netlifyの創設者 Matt Biilmannが 2015年に提唱)
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
Jamstackとは 初出2015〜2019年頃までJAMStack(表記も少し違う) JavaScript API Markup JavaScriptを使ってAPIでデータを取得し、HTMLに埋め込んで静的ファイルを 生成、CDNで配信する構成のこと Headless CMSとの相性の良さ、React/Vue.jsの普及とも重なる
2023年現在「Jamstack」という定義の変化 Next.js(React)、Nuxt(Vue.js)のようなフレームワークの登場、 Vercel / NetlifyのようなSSRに対応した環境がそろってきたことで 静的ファイル生成以外の選択肢ができた フロントエンドとバックエンドのコードを分離して、マイクロサービスを組み合 わせて構築していくことそのものをJamstackと呼ぶようになっている (このタイミングで表記も現在のJamstackに) さらに、Jamstackでの開発が当たり前になってきたのでそろそろ死語になるかも
この資料では認識合わせのためにあえてJamstackを使っています
Jamstackのよくある構成 ヘッドレスCMS データのみを扱う 記事更新してWebhookで連携 エンジニアコードを更新してPushする JSフレームワーク APIでCMSデータを受け取り HTMLと見た目を構築
ホスティングサービス JSフレームワークの 自動Buildに対応 生成したHTMLを配信する
複雑じゃない?
Movable Typeなら全部揃ってる 記事更新担当 MTにログインして投稿する エンジニア MTにログインしてテンプレート編集する 再構築 HTMLを生成して公開する
Webサイト:いわゆるホームページ(コーポレートサイトなど) • 静的ページがほとんど、もしくはCMSで足りる • 状態(state)管理が必要となる場面が少ない • バックエンドは問い合わせフォームくらい Webサービス:事業会社のサービス(SmartHR、Amebaなど)、Webアプリ • ログイン、投稿など、ユーザーからの入力・操作する画面が多い
• 状態管理が必須、動的なページ • バックエンドとの連携が必須 WebサイトとWebサービスの違い(境界線は無い)
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アプリ 制作パターンが 多様化 制作パターンが 固定化
2. Jamstackによる 開発体験の向上と複雑化
Jamstackのメリット① Jamstack構成のメリットはフロントエンドとデータを分解できること 従来の開発手法による課題を解決できる • PHP、Rubyなど見た目に関するコードとDBのデータを埋め込むためのコードが混在 し、密結合となる(モノリス)ことで運用しにくい • PC/スマホ/タブレットなど端末の多様化や、コーポレート、メディア、 アプリなど複数チャネルが必要になり、共通のデータを扱いたい MTのData
API、WordPressのREST APIなどが開発されたのもこの流れがある
Jamstackのメリット② コンポーネント開発の恩恵を受けられる • フロントエンドのUI開発の効率化(テンプレートを使い回せる) • ScopedなCSS ◦ コンポーネント内のみに適用されるので他のコンポーネントに影響を与 えない ◦
CSS設計がほぼ不要(BEM、FLOCSSなど気にしなくても良い) • JavaScriptのため独自構文が少ない(MTタグ・WordPress関数) ◦ 他の開発にも応用が効く • フロントエンドメンバーだけでもサービスが作れる
Jamstackはいいぞ
注意:前提として知っておくべきことが多い • 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フレームワークでどう扱うか
注意:意外と作るもの多い • ルーティング • ページネーション • 下書きプレビュー • サイトマップXML •
問い合わせフォーム などなど Movable TypeやWordPressならデフォルトで対応していたり、 プラグインでさくっと実装できるものも自分で用意する必要がある
3. いろいろなCMSの特徴と 開発環境の違い
Movable Type WordPress Headless CMS セキュリティ・低い攻撃リスク 高パフォーマンス(表示速度) 動的処理、リアルタイムに表示を 切り替えられる セキュリティ・低い攻撃リスク
高パフォーマンス(表示速度) クラウド版、パッケージ版、 エンタープライズ版が選べる テーマ、プラグインが充実 JavaScriptに集中できる 公式サポート 開発が早い、実装できる人が多い コンポーネント開発の恩恵 APIがある(Data API) APIがある(REST API) APIがある 要件に合う合わないを考えよう(主観も入ってる)
Movable Type WordPress Headless CMS MTテンプレートタグの理解が必要 PHP、WordPress関数、テーマの 理解が必要 ReactやVue.js等のJavaScript (TypeScript)、FetchやAPIの理解
コンテンツが増えると再構築に時 間がかかる カスタムブロックをReactで作るレ ベルになると難易度が上がる 基本的に実装の難易度が高い、 作れる人が少ない 詳しい若手が少ない いろいろな構築パターンが生まれ てしまう フレームワークのバージョンアップ による負荷 費用面:初期コスト(パッケージ版) or 運用費(クラウド版) 費用面:アップデートコスト 費用面:ホスティング環境・ビルド 環境が必要で運用費が高め 要件に合う合わないを考えよう(主観も入ってる)
メリット・デメリットを理解して 使うならどれも間違いではない
4. 今後のWeb制作の流れと課題
CMSとWebの組み合わせは無くならない 誰もがプログラミングをしてサイトを運営するのは難しい ↓ HTMLがわからない人でも更新できる仕組みは必要 ↓ そのためのCMSをどう使うか ChatGPTやCopilot、AIエージェント系がUIを作る時代になっても、 データは必要(コンテンツのデータはCMSに持たせられる)
Jamstack構成 ヘッドレスCMS データのみを扱う 記事更新してWebhookで連携 ※MTのData APIでも可能 エンジニアコードを更新してPushする JSフレームワーク
APIでCMSデータを受け取り HTMLと見た目を構築 ホスティングサービス JSフレームワークの 自動Buildに対応
Jamstack構成 ヘッドレスCMS データのみを扱う 記事更新してWebhookで連携 ※MTのData APIでも可能 エンジニアコードを更新してPushする JSフレームワーク
APIでCMSデータを受け取り HTMLと見た目を構築 ホスティングサービス JSフレームワークの 自動Buildに対応
Jamstack構成 ヘッドレスCMS データのみを扱う 記事更新してWebhookで連携 ※MTのData APIでも可能 エンジニアコードを更新してPushする JSフレームワーク?
AIエージェント? APIでCMSデータを受け取り HTMLと見た目を構築 ホスティングサービス? チャットUI? SGE? ?
STUDIO https://studio.design/ja
Figma to STUDIO Figmaで作成したデ ザインをSTUDIOに 取り込んで公開でき る
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/
開発方法の多様化 • HTMLを直接書く → テンプレートエンジンからGulpでHTML生成 → React/Vue.js等のフレームワークからHTML生成 → ??? •
STUDIOなどのノーコード・ローコード系ツールで生成 • Figma to React、Figma to STUDIO等のデザインからコードに変換し、 デプロイできる仕組みの登場 • ChatGPT等のコード生成、GPTsでアプリ作成 • GitHubのCopilot Workspaceでどうなる?
課題 • エンジニア育成・教育 ◦ フロントエンドで習得するスキルマップが広すぎる ◦ HTMLとCSSが書けるだけでは作れないものが出てきている ◦ 育成に時間がかかる •
Web環境の転換点 ◦ フレームワークの進化のスピードが早い、開発手法の複雑化 ◦ AIによるプログラミングのブラックボックス化
今日のまとめ • 時代の変化に合わせて、サイト制作の作り方も技術も変わっている • Webの専門家でない人が運用できる仕組みを提供するためにCMSは必須 • CMSをどう扱うか、開発手法はメリット・デメリットを考慮して要件に合う ものを選ぶ • Web開発の流行や変化の背景を見つつ、運用に耐えられることを重視しよう
開発するエンジニアも、サイトに訪問するエンドユーザーも、 運用するクライアント様もみんなが使いやすいものを作るために ひたすら考えてます
ご清聴、ありがとうございました! X(Twitter) まぁし@chocodogmagic 毎月第3水曜日はPWA Night 参加してね! 平日9:00〜SpacesでWeb情報発信中! Web制作・Webアプリ開発ご依頼ください。 一緒にお仕事しませんか?各職種で採用中