GEEKERS NITE #2 で発表したスライドです。 https://geekersnites.connpass.com/event/265046/
祝 両方とも正式リリースGitHub Codespaces と Nuxt3 で次世代開発体験GEEKERS NITE #2 - Kazuyuki Miyake
View Slide
About Me三宅 和之 @kazuyukimiyake株式会社ゼンアーキテクツ 代表Azure, GitHub, Nuxt のスペシャリスト集団Microsoft MVP ( for Microsoft Azure )Vue.js 日本ユーザーグループコアスタッフPaaS がかりの部屋(Blog): https://k-miyake.github.io/blog/
GitHub Universe 2020 に行ってきました!3
GitHub Codespaces が正式リリースGitHub Codespaces とはGitHub が提供する VS Code ベースのクラウド開発環境ノート PC より高速?(32 コア, 64 GB まで選択可能)開発環境の標準化が可能(Docker ベースの開発環境)NEWFree, Pro アカウントに 60 時間/月無料枠提供月 60 時間の開発用 PC が全人類に無償配布されたことに?!4
Codespaces がもたらす開発体験好みの開発環境を設定ファイルひとつでセットアップできる.devcontainer.jsonを設定するだけコードと一緒に開発環境をリポジトリに紐付けできるライブラリの更新にあわせて開発ツールも一緒に更新可能プロジェクトメンバーで細部まで開発環境を統一できる環境構築手順書を作成する時代は終わりました5
Codespaces テンプレートが便利リポジトリがなくても起動できるようになった。便利!いくつかのテンプレートがあらかじめ用意されているReact / Next.js (Vue 系はまだない )Ruby on RailsJupyter Notebook (GPU と組み合わせると強力!)自作の開発環境テンプレートを起動可能Nuxt3 用テンプレート作っちゃいました起動 URL: https://github.com/codespaces/new?template_repository=k-miyake/codespaces-nuxt36
DEMOCodespaces x Nuxt3以下のセットアップが自動化(不要になる)される例Node.js / TypeScript インストールVue.js 開発用 Extension のインストールプロジェクト初期ファイルの作成npm ライブラリのインストールdev server の起動約 30 秒の起動時間は BGM をお楽しみください7
Nuxt3 が正式リリースNuxt3 とはVue.js ベースのアプリケーションフレームワークVue3 を利用したメジャーバージョンアップ公式サイト: nuxt.com - (Beta 版から変更されているので注意)8
Nuxt3 がもたらす開発体験いろいろVite によるビルド/バンドルで軽量高速な開発自動インポートTypeScript 完全対応(設定不要)Nitro (Server engine) によるフルスタック化多彩なレンダリングモード(後述)Nuxt2 での長所を生かしつつ短所がほぼ解消されている9
多彩なレンダリングモードをサポート!Client-side Only Rendering (CSR): ブラウザのみでレンダリングUniversal Rendering (SSR): サーバーで HTML を描画Static site generation (SSG): Jamstack に最適Hybrid rendering: ページごとにレンダリングモードを選択可能しかもコードの書き換えがほぼ不要10
Client-side Only Rendering (CSR)いわゆる SPA モード (Single Page Application)実装がシンプルでインフラも手軽(ファイルを置くだけ)初期ロードが遅いSEO に弱い11
Universal Rendering ( ≒SSR)Nuxt3 では追加設定不要で SSR が可能になった!初期応答が速く SEO にも強いサーバーが必要12
Nuxt3 をデプロイするCSR / SSG なら主要なクラウドホスティングに対応サポートされているプロバイダーSSR は Node.js サーバーが必要になるAzure Static Web Apps は標準で対応!Azure Static Web Apps 上でユニバーサル レンダリングを使用した Nuxt 3 サイトをデプロイするVercel, Netlify なども対応13
ご清聴ありがとうございましたDJ タイムもお楽しみに!14