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
360
Jamstack導入時の罠/ジャムスタックチョットデキル!! 秋のLT大会2022
ジャムスタックチョットデキル!! 秋のLT大会2022の登壇資料です
Chinen
November 09, 2022
Tweet
Share
More Decks by Chinen
See All by Chinen
2万ページのSSG運用における工夫と注意点 / Vue Fes Japan 2024
chinen
3
1.6k
MTDDC Meetup TOKYO 2023
chinen
2
340
Nuxt 3でJamstackテンプレートを作るときの考え方
chinen
3
1.8k
WWDC2023-Recap-LT
chinen
1
120
Web Push対応状況2023
chinen
0
520
技術記事が書けない人はGPTに背中を押してもらおう
chinen
2
150
Three.jsで3Dぷわんを動かす / PWA Night vol.46
chinen
0
160
PWA開発を基礎からおさらい / PWA Night CONFERENCE 2022
chinen
3
1.4k
frontend-conf-okinawa-2022
chinen
0
430
Other Decks in Technology
See All in Technology
The Role of Developer Relations in AI Product Success.
giftojabu1
0
120
AGIについてChatGPTに聞いてみた
blueb
0
130
【Startup CTO of the Year 2024 / Audience Award】アセンド取締役CTO 丹羽健
niwatakeru
0
950
障害対応指揮の意思決定と情報共有における価値観 / Waroom Meetup #2
arthur1
5
470
スクラムチームを立ち上げる〜チーム開発で得られたもの・得られなかったもの〜
ohnoeight
2
350
100 名超が参加した日経グループ横断の競技型 AWS 学習イベント「Nikkei Group AWS GameDay」の紹介/mediajaws202411
nikkei_engineer_recruiting
1
170
隣接領域をBeyondするFinatextのエンジニア組織設計 / beyond-engineering-areas
stajima
1
270
The Rise of LLMOps
asei
5
1.3k
データプロダクトの定義からはじめる、データコントラクト駆動なデータ基盤
chanyou0311
2
280
マルチプロダクトな開発組織で 「開発生産性」に向き合うために試みたこと / Improving Multi-Product Dev Productivity
sugamasao
1
300
DMARC 対応の話 - MIXI CTO オフィスアワー #04
bbqallstars
1
160
SSMRunbook作成の勘所_20241120
koichiotomo
2
130
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
28
2k
BBQ
matthewcrist
85
9.3k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
Building Better People: How to give real-time feedback that sticks.
wjessup
364
19k
Building an army of robots
kneath
302
43k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
The Art of Programming - Codeland 2020
erikaheidi
52
13k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
665
120k
The Pragmatic Product Professional
lauravandoore
31
6.3k
Designing Experiences People Love
moore
138
23k
A better future with KSS
kneath
238
17k
Happy Clients
brianwarren
98
6.7k
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で一緒にお仕事したい方も歓迎! ご依頼・採用も募集中 登壇します!