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
310
Jamstack導入時の罠/ジャムスタックチョットデキル!! 秋のLT大会2022
ジャムスタックチョットデキル!! 秋のLT大会2022の登壇資料です
Chinen
November 09, 2022
Tweet
Share
More Decks by Chinen
See All by Chinen
MTDDC Meetup TOKYO 2023
chinen
1
280
Nuxt 3でJamstackテンプレートを作るときの考え方
chinen
3
1.1k
WWDC2023-Recap-LT
chinen
1
86
Web Push対応状況2023
chinen
0
430
技術記事が書けない人はGPTに背中を押してもらおう
chinen
2
110
Three.jsで3Dぷわんを動かす / PWA Night vol.46
chinen
0
120
PWA開発を基礎からおさらい / PWA Night CONFERENCE 2022
chinen
3
1.2k
frontend-conf-okinawa-2022
chinen
0
350
クライアントワーク(受託)のJamstack開発でNuxt 3を提案・実装する / Reject Conference - Vue Fes Japan Online 2022
chinen
2
1.4k
Other Decks in Technology
See All in Technology
競技としてのKaggle、役に立つKaggle
yu4u
6
2.3k
コードや知識を組み込む / Incorporate Code and knowledge
ks91
PRO
0
150
Gitlab本から学んだこと - そーだいなるプレイバック / gitlab-book
soudai
7
1.3k
実例で紹介するRAG導入時の知見と精度向上の勘所
yamahiro
5
1.6k
IaCジェネレーターとBedrockで詳細設計書を生成してみた
tsukasa_ishimaru
4
880
ワールドカフェI /チューターを改良する / World Café I and Improving the Tutors
ks91
PRO
0
150
【基本】データベース設計
oracle4engineer
PRO
2
180
IPUT App Dev. Co. -Overview 2024/4
iputapp
0
120
LangSmith入門―トレース/評価/プロンプト管理などを担うLLMアプリ開発プラットフォーム
os1ma
5
710
コードファーストの考え方。 Amplify Gen2から学ぶAWS次世代のWeb開発体験
yoshiitaka
2
360
障害対応をちょっとずつよくしていくための 演習の作りかた
heleeen
1
1.6k
認知症フレンドリーテックとスタックチャン
naokiuc
0
190
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
From Idea to $5000 a Month in 5 Months
shpigford
378
45k
The Art of Programming - Codeland 2020
erikaheidi
43
12k
Documentation Writing (for coders)
carmenintech
61
4k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
228
16k
Building Flexible Design Systems
yeseniaperezcruz
320
37k
Optimizing for Happiness
mojombo
370
69k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
33
6k
The Cult of Friendly URLs
andyhume
74
5.7k
Teambox: Starting and Learning
jrom
128
8.4k
Six Lessons from altMBA
skipperchong
22
3k
The Straight Up "How To Draw Better" Workshop
denniskardys
228
130k
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で一緒にお仕事したい方も歓迎! ご依頼・採用も募集中 登壇します!