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. 株式会社TAM/TAMTO:フロントエンドエンジニア 兼 個人事業主 
 知念 昌史 / まぁし Twitter@chocodogmagic
 •

    沖縄でリモートワーク/元・美容師
 • 技術コミュニティ運営
 ◦ PWA Night(東京)/ v-okinawa(沖縄) 
 • Vue.js/Nuxt/Jamstack/セマンティックHTML/
 アクセシビリティ/SEO/パフォーマンス改善/CMS
 • 最近のハマり:スプラトゥーン3(弓ウデマエS+16)

  2. ググると作ってみた系、チュートリアル系の記事がたくさん出てくる
 
 
 Jamstackのよくある構成
 ヘッドレスCMS
 データのみを扱う
 記事更新してWebhookで連携 
 コードを更新してPushするとBuild 


    JSフレームワーク
 APIでCMSデータを受け取り 
 HTMLと見た目を構築 
 ホスティングサービス 
 JSフレームワークの自動 Buildに対応

  3. 注意:実際は、よくある構成ができるとは限らない
 
 
 • Vercel使えません(うちはAWSで / 既存VPSサーバー / 数十〜数百万PV)
 •

    GitHubありません(お客さんが使ったことない)
 • WordPressとの違い教えて(WordPressで良くない?)
 • Jamstackって何? API? ホスティングサービス?(まずそこから)
 • ニュースだけJamstackで(他の静的ページと住み分けどうする)
 • 記事の反映までに時間がかかるのNG(SSG以外の選択肢の悩み)
 • 納品後のHTML更新したい(けどReactやVueわからん言われる)

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

  5. 注意:意外と作るもの多い
 • ルーティング
 • カテゴリごとの一覧ページ、タグごとの一覧ページ
 • ページャー
 • 下書きプレビュー
 •

    サイトマップXML
 • 問い合わせフォーム などなど
 有名どころのCMSなら自前で対応していたり、プラグイン入れて
 さくっとできたりするものも自分で用意する必要がある