Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
祝 🎉 両方とも正式リリース! GitHub Codespaces と Nuxt3 で次世代開...
Search
miyake
November 24, 2022
Technology
0
1.5k
祝 🎉 両方とも正式リリース! GitHub Codespaces と Nuxt3 で次世代開発体験 / codespaces-nuxt3
GEEKERS NITE #2 で発表したスライドです。
https://geekersnites.connpass.com/event/265046/
miyake
November 24, 2022
Tweet
Share
More Decks by miyake
See All by miyake
Cosmos DB で持続可能な RAG を実現しよう!~ AOAI Dev Day ふりかえりを添えて / Sustainable RAG with Cosmos DB with recap AOAI Dev Day
miyake
0
320
Mirroring Azure Cosmos DB in Microsoft Fabric
miyake
2
230
LLM 時代におさえておきたい Azure Serverless ファミリーまとめ / serverlessdaystokyo2023-llm-aoai
miyake
9
2.8k
Nuxt Studio を使ってみた / nuxt-studio-intro
miyake
1
1.1k
Microsoft Build 2023 で発表された Cosmos DB の注目アップデート / Microsoft Build 2023 Cosmos DB update
miyake
1
870
Static Site Generator でサイト構築 / building sites with static site generator
miyake
1
390
Design and implementation of Cosmos DB Change Feed-centric architecture
miyake
0
1k
Well-Architected Framework を活用した Azure 設計パターン / azure-well-architected-framework
miyake
2
1.5k
2020 年下半期 Cosmos DB の更新まとめ
miyake
0
650
Other Decks in Technology
See All in Technology
Preferred Networks (PFN) とLLM Post-Training チームの紹介 / 第4回 関東Kaggler会 スポンサーセッション
pfn
PRO
1
180
[CVPR2025論文読み会] Linguistics-aware Masked Image Modelingfor Self-supervised Scene Text Recognition
s_aiueo32
0
210
モバイルアプリ研修
recruitengineers
PRO
2
220
ECS モニタリング手法大整理
yendoooo
1
120
夢の印税生活 / Life on Royalties
tmtms
0
280
Postman MCP 関連機能アップデート / Postman MCP feature updates
yokawasa
0
150
実践アプリケーション設計 ③ドメイン駆動設計
recruitengineers
PRO
1
160
Understanding Go GC #coefl_go_jp
bengo4com
0
1.1k
アジャイルテストで高品質のスプリントレビューを
takesection
0
110
モダンな現場と従来型の組織——そこに生じる "不整合" を解消してこそチームがパフォーマンスを発揮できる / Team-oriented Organization Design 20250825
mtx2s
5
520
Oracle Base Database Service:サービス概要のご紹介
oracle4engineer
PRO
2
20k
広島銀行におけるAWS活用の取り組みについて
masakimori
0
130
Featured
See All Featured
Code Review Best Practice
trishagee
70
19k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
480
Designing Experiences People Love
moore
142
24k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Site-Speed That Sticks
csswizardry
10
780
Measuring & Analyzing Core Web Vitals
bluesmoon
9
570
Why Our Code Smells
bkeepers
PRO
338
57k
Writing Fast Ruby
sferik
628
62k
Building an army of robots
kneath
306
46k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Transcript
祝 両方とも正式リリース GitHub Codespaces と Nuxt3 で次世代開発体験 GEEKERS NITE #2
- Kazuyuki Miyake
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 ベースの開発環境) NEW Free, Pro アカウントに 60 時間/月無料枠提供 月 60 時間の開発用 PC が全人類に無償配布されたことに?! 4
Codespaces がもたらす開発体験 好みの開発環境を設定ファイルひとつでセットアップできる .devcontainer.json を設定するだけ コードと一緒に開発環境をリポジトリに紐付けできる ライブラリの更新にあわせて開発ツールも一緒に更新可能 プロジェクトメンバーで細部まで開発環境を統一できる 環境構築手順書を作成する時代は終わりました 5
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
DEMO Codespaces 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