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

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

Transcript

1. Jamstack導入時の罠

   2022/11/9　まぁし（知念）

   

   View Slide

2. 株式会社TAM/TAMTO：フロントエンドエンジニア 兼 個人事業主
   

   知念 昌史 / まぁし Twitter@chocodogmagic

   ● 沖縄でリモートワーク/元・美容師

   ● 技術コミュニティ運営

   ○ PWA Night（東京）/ v-okinawa（沖縄）
   

   ● Vue.js/Nuxt/Jamstack/セマンティックHTML/

   アクセシビリティ/SEO/パフォーマンス改善/CMS

   ● 最近のハマり：スプラトゥーン3（弓ウデマエS+16）

   

   View Slide

3. これから話すJamstackとは、Headless CMSを使ったWebサイトの制作開発

   （Webアプリではない）のことを指しています。

   

   はじめに

   

   View Slide

4. ● フロントエンドとバックエンドの分離

   極端な話、フロントエンドのメンバーだけでもWebサイト、Webサービスが実装でき
   ちゃう（Headless CMS、Hostingサービスを使う）

   ● JSベースのスキルでCMS案件が実装できる

   WordPress/Movable TypeなどのCMSの独自タグを覚えなくても良い

   （JSフレームワークならではの実装の学習は必要あるが）

   ● SSGで安全・高速なページの提供

   パフォーマンス良いは正義

   Jamstackのおすすめポイント

   

   View Slide

5. ググると作ってみた系、チュートリアル系の記事がたくさん出てくる

   

   

   Jamstackのよくある構成

   ヘッドレスCMS

   データのみを扱う

   記事更新してWebhookで連携 

   コードを更新してPushするとBuild 

   JSフレームワーク

   APIでCMSデータを受け取り 

   HTMLと見た目を構築 

   ホスティングサービス 

   JSフレームワークの自動
   Buildに対応

   

   View Slide

6. 良さそう〜！👍

   

   View Slide

7. だが、しかし 🍩

   

   View Slide

8. 注意：実際は、よくある構成ができるとは限らない

   

   

   ● Vercel使えません（うちはAWSで / 既存VPSサーバー / 数十〜数百万PV）

   ● GitHubありません（お客さんが使ったことない）

   ● WordPressとの違い教えて（WordPressで良くない？）

   ● Jamstackって何？　API？　ホスティングサービス？（まずそこから）

   ● ニュースだけJamstackで（他の静的ページと住み分けどうする）

   ● 記事の反映までに時間がかかるのNG（SSG以外の選択肢の悩み）

   ● 納品後のHTML更新したい（けどReactやVueわからん言われる）

   

   View Slide

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

   

   View Slide

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フレームワークでどう扱うか

    

    View Slide

11. 注意：意外と作るもの多い

    ● ルーティング

    ● カテゴリごとの一覧ページ、タグごとの一覧ページ

    ● ページャー

    ● 下書きプレビュー

    ● サイトマップXML

    ● 問い合わせフォーム などなど

    有名どころのCMSなら自前で対応していたり、プラグイン入れて

    さくっとできたりするものも自分で用意する必要がある

    

    View Slide

12. 見積もり気をつけよう

    Web制作・CMS開発を長年やってきた人は既存技術の組み合わせでいけるが、

    Web初心者にとっては覚えることがたくさん。

    単純に作業ベースで工数を見積もると、慣れたWordPressサイト構築よりも

    金額は高く時間もかかる。（ノウハウがたまれば解決するハズ）

    プロジェクトで下手に「安い・早い・楽」な発想で手を出すと大変。

    要件に合う場合のJamstackはメリットも多いので活用していこう！

    

    View Slide

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

    

    View Slide

14. ちなみに

    最新のNuxt 3のJamstack導入についてはVue Fes Reject Conferenceで共有！

    https://speakerdeck.com/chinen/reject-conference-vue-fes-japan-online-2022 

    

    

    View Slide

15. 大変なところもあるけど

    Jamstack楽しい！！

    🙌

    

    View Slide

16. Jamstackについて話したい方はぜひご連絡を！

    Twitter まぁし@chocodogmagic

    フォローしてね

    11/19（土）フロントエンドカンファレンス沖縄2022

    12/3（土）PWA Night CONFERENCE 2022

    

    平日9:00〜SpacesでWeb情報発信中！
    

    TAMで一緒にお仕事したい方も歓迎！

    ご依頼・採用も募集中

    登壇します！

    

    View Slide