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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

良さそう〜！👍 

Slide 7

Slide 7 text

だが、しかし 🍩 

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

エンジニアとしても 💻 

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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