Jamstack導入時の罠/ジャムスタックチョットデキル!! 秋のLT大会2022

ジャムスタックチョットデキル!! 秋のLT大会2022の登壇資料です

Transcript

1. Jamstack導入時の罠
 2022/11/9　まぁし（知念）

2. 株式会社TAM/TAMTO：フロントエンドエンジニア 兼 個人事業主 
 知念 昌史 / まぁし Twitter@chocodogmagic
 • 沖縄でリモートワーク/元・美容師
 • 技術コミュニティ運営
 ◦ PWA Night（東京）/ v-okinawa（沖縄） 
 • Vue.js/Nuxt/Jamstack/セマンティックHTML/
 アクセシビリティ/SEO/パフォーマンス改善/CMS
 • 最近のハマり：スプラトゥーン3（弓ウデマエS+16）

3. これから話すJamstackとは、Headless CMSを使ったWebサイトの制作開発
 （Webアプリではない）のことを指しています。
 
 はじめに

4. • フロントエンドとバックエンドの分離
 極端な話、フロントエンドのメンバーだけでもWebサイト、Webサービスが実装でき ちゃう（Headless CMS、Hostingサービスを使う）
 • JSベースのスキルでCMS案件が実装できる
 WordPress/Movable TypeなどのCMSの独自タグを覚えなくても良い
 （JSフレームワークならではの実装の学習は必要あるが）
 • SSGで安全・高速なページの提供
 パフォーマンス良いは正義
 Jamstackのおすすめポイント

5. ググると作ってみた系、チュートリアル系の記事がたくさん出てくる
 
 
 Jamstackのよくある構成
 ヘッドレスCMS
 データのみを扱う
 記事更新してWebhookで連携 
 コードを更新してPushするとBuild 
 JSフレームワーク
 APIでCMSデータを受け取り 
 HTMLと見た目を構築 
 ホスティングサービス 
 JSフレームワークの自動 Buildに対応

6. 良さそう〜！👍

7. だが、しかし 🍩

8. 注意：実際は、よくある構成ができるとは限らない
 
 
 • Vercel使えません（うちはAWSで / 既存VPSサーバー / 数十〜数百万PV）
 • GitHubありません（お客さんが使ったことない）
 • WordPressとの違い教えて（WordPressで良くない？）
 • Jamstackって何？　API？　ホスティングサービス？（まずそこから）
 • ニュースだけJamstackで（他の静的ページと住み分けどうする）
 • 記事の反映までに時間がかかるのNG（SSG以外の選択肢の悩み）
 • 納品後のHTML更新したい（けどReactやVueわからん言われる）

9. エンジニアとしても 💻

10. 注意：前提として知っておくべきことが多い
 • 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フレームワークでどう扱うか

11. 注意：意外と作るもの多い
 • ルーティング
 • カテゴリごとの一覧ページ、タグごとの一覧ページ
 • ページャー
 • 下書きプレビュー
 • サイトマップXML
 • 問い合わせフォーム などなど
 有名どころのCMSなら自前で対応していたり、プラグイン入れて
 さくっとできたりするものも自分で用意する必要がある

12. 見積もり気をつけよう
 Web制作・CMS開発を長年やってきた人は既存技術の組み合わせでいけるが、
 Web初心者にとっては覚えることがたくさん。
 単純に作業ベースで工数を見積もると、慣れたWordPressサイト構築よりも
 金額は高く時間もかかる。（ノウハウがたまれば解決するハズ）
 プロジェクトで下手に「安い・早い・楽」な発想で手を出すと大変。
 要件に合う場合のJamstackはメリットも多いので活用していこう！

13. ぜひ知見を共有しましょう 👍

14. ちなみに
 最新のNuxt 3のJamstack導入についてはVue Fes Reject Conferenceで共有！
 https://speakerdeck.com/chinen/reject-conference-vue-fes-japan-online-2022 
 

15. 大変なところもあるけど
 Jamstack楽しい！！
 🙌

16. Jamstackについて話したい方はぜひご連絡を！
 Twitter まぁし@chocodogmagic
 フォローしてね
 11/19（土）フロントエンドカンファレンス沖縄2022
 12/3（土）PWA Night CONFERENCE 2022
 
 平日9:00〜SpacesでWeb情報発信中！ 
 TAMで一緒にお仕事したい方も歓迎！
 ご依頼・採用も募集中
 登壇します！