ジャムスタックチョットデキル!! 秋のLT大会2022の登壇資料です
Jamstack導入時の罠 2022/11/9 まぁし(知念)
View Slide
株式会社TAM/TAMTO:フロントエンドエンジニア 兼 個人事業主 知念 昌史 / まぁし Twitter@chocodogmagic ● 沖縄でリモートワーク/元・美容師 ● 技術コミュニティ運営 ○ PWA Night(東京)/ v-okinawa(沖縄) ● Vue.js/Nuxt/Jamstack/セマンティックHTML/ アクセシビリティ/SEO/パフォーマンス改善/CMS ● 最近のハマり:スプラトゥーン3(弓ウデマエS+16)
これから話すJamstackとは、Headless CMSを使ったWebサイトの制作開発 (Webアプリではない)のことを指しています。 はじめに
● フロントエンドとバックエンドの分離 極端な話、フロントエンドのメンバーだけでもWebサイト、Webサービスが実装できちゃう(Headless CMS、Hostingサービスを使う) ● JSベースのスキルでCMS案件が実装できる WordPress/Movable TypeなどのCMSの独自タグを覚えなくても良い (JSフレームワークならではの実装の学習は必要あるが) ● SSGで安全・高速なページの提供 パフォーマンス良いは正義 Jamstackのおすすめポイント
ググると作ってみた系、チュートリアル系の記事がたくさん出てくる Jamstackのよくある構成 ヘッドレスCMS データのみを扱う 記事更新してWebhookで連携 コードを更新してPushするとBuild JSフレームワーク APIでCMSデータを受け取り HTMLと見た目を構築 ホスティングサービス JSフレームワークの自動Buildに対応
良さそう〜!👍
だが、しかし 🍩
注意:実際は、よくある構成ができるとは限らない ● Vercel使えません(うちはAWSで / 既存VPSサーバー / 数十〜数百万PV) ● GitHubありません(お客さんが使ったことない) ● WordPressとの違い教えて(WordPressで良くない?) ● Jamstackって何? API? ホスティングサービス?(まずそこから) ● ニュースだけJamstackで(他の静的ページと住み分けどうする) ● 記事の反映までに時間がかかるのNG(SSG以外の選択肢の悩み) ● 納品後のHTML更新したい(けどReactやVueわからん言われる)
エンジニアとしても 💻
注意:前提として知っておくべきことが多い ● 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フレームワークでどう扱うか
注意:意外と作るもの多い ● ルーティング ● カテゴリごとの一覧ページ、タグごとの一覧ページ ● ページャー ● 下書きプレビュー ● サイトマップXML ● 問い合わせフォーム などなど 有名どころのCMSなら自前で対応していたり、プラグイン入れて さくっとできたりするものも自分で用意する必要がある
見積もり気をつけよう Web制作・CMS開発を長年やってきた人は既存技術の組み合わせでいけるが、 Web初心者にとっては覚えることがたくさん。 単純に作業ベースで工数を見積もると、慣れたWordPressサイト構築よりも 金額は高く時間もかかる。(ノウハウがたまれば解決するハズ) プロジェクトで下手に「安い・早い・楽」な発想で手を出すと大変。 要件に合う場合のJamstackはメリットも多いので活用していこう!
ぜひ知見を共有しましょう 👍
ちなみに 最新のNuxt 3のJamstack導入についてはVue Fes Reject Conferenceで共有! https://speakerdeck.com/chinen/reject-conference-vue-fes-japan-online-2022
大変なところもあるけど Jamstack楽しい!! 🙌
Jamstackについて話したい方はぜひご連絡を! Twitter まぁし@chocodogmagic フォローしてね 11/19(土)フロントエンドカンファレンス沖縄2022 12/3(土)PWA Night CONFERENCE 2022 平日9:00〜SpacesでWeb情報発信中! TAMで一緒にお仕事したい方も歓迎! ご依頼・採用も募集中 登壇します!