Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Chinen
November 09, 2022

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

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

Chinen

November 09, 2022
Tweet

More Decks by Chinen

Other Decks in Technology

Transcript

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


  2. 株式会社TAM/TAMTO:フロントエンドエンジニア 兼 個人事業主 
 知念 昌史 / まぁし [email protected]
 •

    沖縄でリモートワーク/元・美容師
 • 技術コミュニティ運営
 ◦ 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で一緒にお仕事したい方も歓迎!
 ご依頼・採用も募集中
 登壇します!