Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

miyake
November 24, 2022

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

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

miyake

November 24, 2022
Tweet

More Decks by miyake

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide