書く・即・DONEな仕組みをNuxtで作る

2023/7/27 「Vue.jsの勉強会はなんぼあってもいいですからね」

Transcript

1. Vue.jsの勉強会はなんぼあってもいいですからね 書く・即・DONEな仕組みを で作る Nuxt 合同会社世路庵　沖 良矢　|　2023.7.27 THU
2. おき 沖 よ し や 良矢 @448jp ⚫ 合同会社世路庵 代表 ⚫ デザイナー／エンジニア ⚫ 受託制作一筋20年
4. Adobe MAX Japan 長岡造形大学 LinkedInラーニング Web Designing MdN × Bau-ya DIST
5. 相原 典佳、沖 良矢、倉又 美樹、岡部 千幸（著） ⚫ 2023.5.26発売 ⚫ 272ページ 2,860円 ⚫ エムディエヌコーポレーション刊 初心者からちゃんとしたプロになる Figma基礎入門
6. ブログ構築における の選択肢 2023年
7. 代表的なブログ構築手法 ⚫ スクラッチで開発 （Nuxt、Next.js、Astro...） ⚫ SSGで開発 （VitePress、Gatsby...） ⚫ ブログソフト （WordPress、Movable Type...） ⚫ SaaS （note、Zenn、Qiita...） ⚫ ノーコード （STUDIO、Wix...）
8. ブログ構築手法の星取表 開発コスト ランニングコスト メンテナンスコスト カスタマイズの自由度 コンテンツの管理しやすさ ウェブサイトとの連携 スクラッチ ✕ ◯ ✕ ◎ ◎ ◎ SSG △ ◯ ◯ △ ◯ ◯ ブログソフト ✕ ◯ ✕ ◎ ✕ ◎ SaaS ◎ △ ◎ ✕ △ ✕ ノーコード ◯ ✕ ◯ △ △ △
9. 構築手法の選定は現在も一長一短
10. ブログ構築手法の星取表 開発コスト ランニングコスト メンテナンスコスト カスタマイズの自由度 コンテンツの管理しやすさ ウェブサイトとの連携 スクラッチ ✕ ◯ ✕ ◎ ◎ ◎ SSG △ ◯ ◯ △ ◯ ◯ ブログソフト ✕ ◯ ✕ ◎ ✕ ◎ SaaS ◎ △ ◎ ✕ △ ✕ ノーコード ◯ ✕ ◯ △ △ △
11. スクラッチ開発の手段 JavaScriptフレームワーク ⚫ Nuxt, Vue ⚫ Next.js, React ⚫ Astro / Svelte ⚫ jQuery...? コンテンツ管理 ⚫ ヘッドレスCMS ⚫ 静的アセット ⚫ 自前DB ⚫ WordPress REST API
12. スクラッチ開発の手段 レンダリング ⚫ ISR ⚫ SSG ⚫ SSR ⚫ SPA ホスティング ⚫ CDN ⚫ 自社サーバー ⚫ レンタルサーバー
13. 構築手法の選定は現在も一長一短 一方、スクラッチ開発の手法はラーメン化
14. 醤油ラーメンと豚骨ラーメンに勝ち負けがないように、 VueとReact、ヘッドレスCMSとWordPress REST APIなどの手法は 好みやこだわりとしての違いしかなくなってきている
15. 今回の技術選定 ⚫ JavaScriptフレームワーク：Nuxt 3（理由：好きだから） ⚫ コンテンツ管理：microCMS（理由：好きだから） ⚫ レンダリング：SSG（理由：速いから） ⚫ ホスティング：Cloudflare Pages（理由：好きだから） ⚫ UIコンポーネント：NuxtLabs UI（理由：使ってみたいから）
16. デモ
17. Nuxt 3＋Cloudflare Pagesの注意点1 Nuxt 3のSSGをCloudflare Pagesにデプロイするとき、「ビルドの設定」でNuxtのプリセットがありますが、これはNuxt 2用です。Nuxt 3では動きま せん。ビルドコマンド「npm run generate」、ビルド出力ディレクトリ「.output/public」と設定しましょう。
18. Nuxt 3＋Cloudflare Pagesの注意点2 そのままではビルドでコケるため、2つの環境変数を設定します。NITRO_PRESETはNuxtビルド時の設定、NODE_VERSIONはCloudflare上で利用 されるNode.jsのバージョン指定です。
19. まとめ Conclusion
20. 好きなラーメンを食べるように、 を選んで、 楽しいものを作りましょう！ 好きな技術
23. ありがとうございました 合同会社世路庵　沖 良矢 @448jp