Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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