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

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

Transcript

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

   View Slide

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

   View Slide

3. View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

16. デモ
    

    View Slide

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

    View Slide

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

    View Slide

19. まとめ
    Conclusion
    

    View Slide

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

    View Slide

21. View Slide

22. View Slide

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

    View Slide