Tweet
Tweet

Slide 1

Slide 1 text

Vue.jsの勉強会はなんぼあってもいいですからね 書く・即・DONEな仕組みを で作る Nuxt 合同会社世路庵　沖 良矢　|　2023.7.27 THU

Slide 2

Slide 2 text

おき 沖 よ し や 良矢 @448jp ⚫ 合同会社世路庵 代表 ⚫ デザイナー／エンジニア ⚫ 受託制作一筋20年

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

Adobe MAX Japan 長岡造形大学 LinkedInラーニング Web Designing MdN × Bau-ya DIST

Slide 5

Slide 5 text

相原 典佳、沖 良矢、倉又 美樹、岡部 千幸（著） ⚫ 2023.5.26発売 ⚫ 272ページ 2,860円 ⚫ エムディエヌコーポレーション刊 初心者からちゃんとしたプロになる Figma基礎入門

Slide 6

Slide 6 text

ブログ構築における の選択肢 2023年

Slide 7

Slide 7 text

代表的なブログ構築手法 ⚫ スクラッチで開発 （Nuxt、Next.js、Astro...） ⚫ SSGで開発 （VitePress、Gatsby...） ⚫ ブログソフト （WordPress、Movable Type...） ⚫ SaaS （note、Zenn、Qiita...） ⚫ ノーコード （STUDIO、Wix...）

Slide 8

Slide 8 text

ブログ構築手法の星取表 開発コスト ランニングコスト メンテナンスコスト カスタマイズの自由度 コンテンツの管理しやすさ ウェブサイトとの連携 スクラッチ ✕ ◯ ✕ ◎ ◎ ◎ SSG △ ◯ ◯ △ ◯ ◯ ブログソフト ✕ ◯ ✕ ◎ ✕ ◎ SaaS ◎ △ ◎ ✕ △ ✕ ノーコード ◯ ✕ ◯ △ △ △

Slide 9

Slide 9 text

構築手法の選定は現在も一長一短

Slide 10

Slide 10 text

ブログ構築手法の星取表 開発コスト ランニングコスト メンテナンスコスト カスタマイズの自由度 コンテンツの管理しやすさ ウェブサイトとの連携 スクラッチ ✕ ◯ ✕ ◎ ◎ ◎ SSG △ ◯ ◯ △ ◯ ◯ ブログソフト ✕ ◯ ✕ ◎ ✕ ◎ SaaS ◎ △ ◎ ✕ △ ✕ ノーコード ◯ ✕ ◯ △ △ △

Slide 11

Slide 11 text

スクラッチ開発の手段 JavaScriptフレームワーク ⚫ Nuxt, Vue ⚫ Next.js, React ⚫ Astro / Svelte ⚫ jQuery...? コンテンツ管理 ⚫ ヘッドレスCMS ⚫ 静的アセット ⚫ 自前DB ⚫ WordPress REST API

Slide 12

Slide 12 text

スクラッチ開発の手段 レンダリング ⚫ ISR ⚫ SSG ⚫ SSR ⚫ SPA ホスティング ⚫ CDN ⚫ 自社サーバー ⚫ レンタルサーバー

Slide 13

Slide 13 text

構築手法の選定は現在も一長一短 一方、スクラッチ開発の手法はラーメン化

Slide 14

Slide 14 text

醤油ラーメンと豚骨ラーメンに勝ち負けがないように、 VueとReact、ヘッドレスCMSとWordPress REST APIなどの手法は 好みやこだわりとしての違いしかなくなってきている

Slide 15

Slide 15 text

今回の技術選定 ⚫ JavaScriptフレームワーク：Nuxt 3（理由：好きだから） ⚫ コンテンツ管理：microCMS（理由：好きだから） ⚫ レンダリング：SSG（理由：速いから） ⚫ ホスティング：Cloudflare Pages（理由：好きだから） ⚫ UIコンポーネント：NuxtLabs UI（理由：使ってみたいから）

Slide 16

Slide 16 text

デモ

Slide 17

Slide 17 text

Nuxt 3＋Cloudflare Pagesの注意点1 Nuxt 3のSSGをCloudflare Pagesにデプロイするとき、「ビルドの設定」でNuxtのプリセットがありますが、これはNuxt 2用です。Nuxt 3では動きま せん。ビルドコマンド「npm run generate」、ビルド出力ディレクトリ「.output/public」と設定しましょう。

Slide 18

Slide 18 text

Nuxt 3＋Cloudflare Pagesの注意点2 そのままではビルドでコケるため、2つの環境変数を設定します。NITRO_PRESETはNuxtビルド時の設定、NODE_VERSIONはCloudflare上で利用 されるNode.jsのバージョン指定です。

Slide 19

Slide 19 text

まとめ Conclusion

Slide 20

Slide 20 text

好きなラーメンを食べるように、 を選んで、 楽しいものを作りましょう！ 好きな技術

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

ありがとうございました 合同会社世路庵　沖 良矢 @448jp