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
120
2万ページのSSG運用における工夫と注意点 / Vue Fes Japan 2024
chinen
3
2.7k
MTDDC Meetup TOKYO 2023
chinen
2
390
Nuxt 3でJamstackテンプレートを作るときの考え方
chinen
3
2k
WWDC2023-Recap-LT
chinen
1
160
Web Push対応状況2023
chinen
0
580
技術記事が書けない人はGPTに背中を押してもらおう
chinen
2
220
Three.jsで3Dぷわんを動かす / PWA Night vol.46
chinen
0
230
PWA開発を基礎からおさらい / PWA Night CONFERENCE 2022
chinen
3
1.5k
Other Decks in Technology
See All in Technology
見てわかるテスト駆動開発
recruitengineers
PRO
4
270
事業価値と Engineering
recruitengineers
PRO
1
190
人を動かすことについて考える
ichimichi
2
320
OpenAPIから画面生成に挑戦した話
koinunopochi
0
150
株式会社ARAV 採用案内
maqui
0
340
Yahoo!ニュースにおけるソフトウェア開発
lycorptech_jp
PRO
0
330
[CVPR2025論文読み会] Linguistics-aware Masked Image Modelingfor Self-supervised Scene Text Recognition
s_aiueo32
0
210
実践アプリケーション設計 ②トランザクションスクリプトへの対応
recruitengineers
PRO
2
140
サービスロボット最前線:ugoが挑むPhysical AI活用
kmatsuiugo
0
190
7月のガバクラ利用料が高かったので調べてみた
techniczna
2
230
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
8.6k
GCASアップデート(202506-202508)
techniczna
0
250
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
431
65k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
480
Automating Front-end Workflow
addyosmani
1370
200k
Site-Speed That Sticks
csswizardry
10
780
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
The Language of Interfaces
destraynor
160
25k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.4k
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で一緒にお仕事したい方も歓迎! ご依頼・採用も募集中 登壇します!