祝 🎉 両方とも正式リリース！ GitHub Codespaces と Nuxt3 で次世代開発体験 / codespaces-nuxt3

GEEKERS NITE #2 で発表したスライドです。
https://geekersnites.connpass.com/event/265046/

Transcript

1. 祝 両方とも正式リリース
   GitHub Codespaces と Nuxt3 で次世代開発体験
   GEEKERS NITE #2 - Kazuyuki Miyake
   

   View Slide

2. About Me
   三宅　和之 @kazuyukimiyake
   株式会社ゼンアーキテクツ 代表
   Azure, GitHub, Nuxt のスペシャリスト集団
   Microsoft MVP ( for Microsoft Azure )
   Vue.js 日本ユーザーグループコアスタッフ
   PaaS がかりの部屋(Blog): https://k-miyake.github.io/blog/
   

   View Slide

3. GitHub Universe 2020 に行ってきました!
   3
   

   View Slide

4. GitHub Codespaces が正式リリース
   GitHub Codespaces とは
   GitHub が提供する VS Code ベースのクラウド開発環境
   ノート PC より高速？（32 コア, 64 GB まで選択可能）
   開発環境の標準化が可能（Docker ベースの開発環境）
   NEW
   Free, Pro アカウントに 60 時間/月無料枠提供
   月 60 時間の開発用 PC が全人類に無償配布されたことに？！
   4
   

   View Slide

5. Codespaces がもたらす開発体験
   好みの開発環境を設定ファイルひとつでセットアップできる
   .devcontainer.json
   を設定するだけ
   コードと一緒に開発環境をリポジトリに紐付けできる
   ライブラリの更新にあわせて開発ツールも一緒に更新可能
   プロジェクトメンバーで細部まで開発環境を統一できる
   環境構築手順書を作成する時代は終わりました
   5
   

   View Slide

6. Codespaces テンプレートが便利
   リポジトリがなくても起動できるようになった。便利！
   いくつかのテンプレートがあらかじめ用意されている
   React / Next.js （Vue 系はまだない ）
   Ruby on Rails
   Jupyter Notebook (GPU と組み合わせると強力！)
   自作の開発環境テンプレートを起動可能
   Nuxt3 用テンプレート作っちゃいました
   起動 URL: https://github.com/codespaces/new?
   template_repository=k-miyake/codespaces-nuxt3
   6
   

   View Slide

7. DEMO
   Codespaces x Nuxt3
   以下のセットアップが自動化（不要になる）される例
   Node.js / TypeScript インストール
   Vue.js 開発用 Extension のインストール
   プロジェクト初期ファイルの作成
   npm ライブラリのインストール
   dev server の起動
   約 30 秒の起動時間は BGM をお楽しみください
   7
   

   View Slide

8. Nuxt3 が正式リリース
   Nuxt3 とは
   Vue.js ベースのアプリケーションフレームワーク
   Vue3 を利用したメジャーバージョンアップ
   公式サイト: nuxt.com - (Beta 版から変更されているので注意)
   8
   

   View Slide

9. Nuxt3 がもたらす開発体験いろいろ
   Vite によるビルド/バンドルで軽量高速な開発
   自動インポート
   TypeScript 完全対応（設定不要）
   Nitro (Server engine) によるフルスタック化
   多彩なレンダリングモード（後述）
   Nuxt2 での長所を生かしつつ短所がほぼ解消されている
   9
   

   View Slide

10. 多彩なレンダリングモードをサポート！
    Client-side Only Rendering (CSR): ブラウザのみでレンダリング
    Universal Rendering (SSR): サーバーで HTML を描画
    Static site generation (SSG): Jamstack に最適
    Hybrid rendering: ページごとにレンダリングモードを選択可能
    しかもコードの書き換えがほぼ不要
    10
    

    View Slide

11. Client-side Only Rendering (CSR)
    いわゆる SPA モード (Single Page Application)
    実装がシンプルでインフラも手軽（ファイルを置くだけ）
    初期ロードが遅い
    SEO に弱い
    11
    

    View Slide

12. Universal Rendering ( ≒
    SSR)
    Nuxt3 では追加設定不要で SSR が可能になった！
    初期応答が速く SEO にも強い
    サーバーが必要
    12
    

    View Slide

13. Nuxt3 をデプロイする
    CSR / SSG なら主要なクラウドホスティングに対応
    サポートされているプロバイダー
    SSR は Node.js サーバーが必要になる
    Azure Static Web Apps は標準で対応！
    Azure Static Web Apps 上でユニバーサル レンダリングを使用
    した Nuxt 3 サイトをデプロイする
    Vercel, Netlify なども対応
    13
    

    View Slide

14. ご清聴ありがとうございました
    DJ タイムもお楽しみに！
    14
    

    View Slide