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
Jamstack導入時の罠/ジャムスタックチョットデキル!! 秋のLT大会2022
Search
Chinen
November 09, 2022
Technology
1
420
Jamstack導入時の罠/ジャムスタックチョットデキル!! 秋のLT大会2022
ジャムスタックチョットデキル!! 秋のLT大会2022の登壇資料です
Chinen
November 09, 2022
Tweet
Share
More Decks by Chinen
See All by Chinen
MTDDC Meetup TOKYO 2024 / フロントエンドエンジニアの成長に繋がるCMS設計
chinen
0
140
2万ページのSSG運用における工夫と注意点 / Vue Fes Japan 2024
chinen
3
2.9k
MTDDC Meetup TOKYO 2023
chinen
2
390
Nuxt 3でJamstackテンプレートを作るときの考え方
chinen
3
2.1k
WWDC2023-Recap-LT
chinen
1
160
Web Push対応状況2023
chinen
0
590
技術記事が書けない人はGPTに背中を押してもらおう
chinen
2
230
Three.jsで3Dぷわんを動かす / PWA Night vol.46
chinen
0
230
PWA開発を基礎からおさらい / PWA Night CONFERENCE 2022
chinen
3
1.6k
Other Decks in Technology
See All in Technology
OCIjp_Oracle AI World_Recap
shinpy
1
180
Kubernetes self-healing of your workload
hwchiu
0
550
20251027_findyさん_音声エージェントLT
almondo_event
2
440
[re:Inent2025事前勉強会(有志で開催)] re:Inventで見つけた人生をちょっと変えるコツ
sh_fk2
0
120
プレイドのユニークな技術とインターンのリアル
plaidtech
PRO
1
370
AWS re:Invent 2025事前勉強会資料 / AWS re:Invent 2025 pre study meetup
kinunori
0
340
Open Table Format (OTF) が必要になった背景とその機能 (2025.10.28)
simosako
2
300
ゼロコード計装導入後のカスタム計装でさらに可観測性を高めよう
sansantech
PRO
1
460
AI時代におけるデータの重要性 ~データマネジメントの第一歩~
ryoichi_ota
0
720
IoTLT@ストラタシスジャパン_20251021
norioikedo
0
140
クラウドとリアルの融合により、製造業はどう変わるのか?〜クラスメソッドの製造業への取組と共に〜
hamadakoji
0
430
プロダクト開発と社内データ活用での、BI×AIの現在地 / Data_Findy
sansan_randd
0
170
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
463
33k
Making Projects Easy
brettharned
120
6.4k
Speed Design
sergeychernyshev
32
1.2k
Done Done
chrislema
185
16k
Documentation Writing (for coders)
carmenintech
75
5.1k
Build The Right Thing And Hit Your Dates
maggiecrowley
38
2.9k
How to Ace a Technical Interview
jacobian
280
24k
Site-Speed That Sticks
csswizardry
13
930
Agile that works and the tools we love
rasmusluckow
331
21k
Build your cross-platform service in a week with App Engine
jlugia
233
18k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Leading Effective Engineering Teams in the AI Era
addyosmani
7
640
Transcript
Jamstack導入時の罠 2022/11/9 まぁし(知念)
株式会社TAM/TAMTO:フロントエンドエンジニア 兼 個人事業主 知念 昌史 / まぁし Twitter@chocodogmagic •
沖縄でリモートワーク/元・美容師 • 技術コミュニティ運営 ◦ PWA Night(東京)/ v-okinawa(沖縄) • Vue.js/Nuxt/Jamstack/セマンティックHTML/ アクセシビリティ/SEO/パフォーマンス改善/CMS • 最近のハマり:スプラトゥーン3(弓ウデマエS+16)
これから話すJamstackとは、Headless CMSを使ったWebサイトの制作開発 (Webアプリではない)のことを指しています。 はじめに
• フロントエンドとバックエンドの分離 極端な話、フロントエンドのメンバーだけでもWebサイト、Webサービスが実装でき ちゃう(Headless CMS、Hostingサービスを使う) • JSベースのスキルでCMS案件が実装できる WordPress/Movable TypeなどのCMSの独自タグを覚えなくても良い (JSフレームワークならではの実装の学習は必要あるが)
• SSGで安全・高速なページの提供 パフォーマンス良いは正義 Jamstackのおすすめポイント
ググると作ってみた系、チュートリアル系の記事がたくさん出てくる Jamstackのよくある構成 ヘッドレスCMS データのみを扱う 記事更新してWebhookで連携 コードを更新してPushするとBuild
JSフレームワーク APIでCMSデータを受け取り HTMLと見た目を構築 ホスティングサービス JSフレームワークの自動 Buildに対応
良さそう〜!👍
だが、しかし 🍩
注意:実際は、よくある構成ができるとは限らない • Vercel使えません(うちはAWSで / 既存VPSサーバー / 数十〜数百万PV) •
GitHubありません(お客さんが使ったことない) • WordPressとの違い教えて(WordPressで良くない?) • Jamstackって何? API? ホスティングサービス?(まずそこから) • ニュースだけJamstackで(他の静的ページと住み分けどうする) • 記事の反映までに時間がかかるのNG(SSG以外の選択肢の悩み) • 納品後のHTML更新したい(けどReactやVueわからん言われる)
エンジニアとしても 💻
注意:前提として知っておくべきことが多い • 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 • 問い合わせフォーム などなど 有名どころのCMSなら自前で対応していたり、プラグイン入れて さくっとできたりするものも自分で用意する必要がある
見積もり気をつけよう Web制作・CMS開発を長年やってきた人は既存技術の組み合わせでいけるが、 Web初心者にとっては覚えることがたくさん。 単純に作業ベースで工数を見積もると、慣れたWordPressサイト構築よりも 金額は高く時間もかかる。(ノウハウがたまれば解決するハズ) プロジェクトで下手に「安い・早い・楽」な発想で手を出すと大変。 要件に合う場合のJamstackはメリットも多いので活用していこう!
ぜひ知見を共有しましょう 👍
ちなみに 最新のNuxt 3のJamstack導入についてはVue Fes Reject Conferenceで共有! https://speakerdeck.com/chinen/reject-conference-vue-fes-japan-online-2022
大変なところもあるけど Jamstack楽しい!! 🙌
Jamstackについて話したい方はぜひご連絡を! Twitter まぁし@chocodogmagic フォローしてね 11/19(土)フロントエンドカンファレンス沖縄2022 12/3(土)PWA Night CONFERENCE 2022
平日9:00〜SpacesでWeb情報発信中! TAMで一緒にお仕事したい方も歓迎! ご依頼・採用も募集中 登壇します!