$30 off During Our Annual Pro Sale. View Details »

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 まぁし(知念)


    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