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
1.1k
Well-Architected Framework を活用した Azure 設計パターン / azure-well-architected-framework
miyake
2
1.5k
2020 年下半期 Cosmos DB の更新まとめ
miyake
0
660
Other Decks in Technology
See All in Technology
現場で効くClaude Code ─ 最新動向と企業導入
takaakikakei
1
260
株式会社ログラス - 会社説明資料【エンジニア】/ Loglass Engineer
loglass2019
4
65k
はじめてのOSS開発からみえたGo言語の強み
shibukazu
3
980
「何となくテストする」を卒業するためにプロダクトが動く仕組みを理解しよう
kawabeaver
0
430
EncryptedSharedPreferences が deprecated になっちゃった!どうしよう! / Oh no! EncryptedSharedPreferences has been deprecated! What should I do?
yanzm
0
490
20250913_JAWS_sysad_kobe
takuyay0ne
2
250
20250910_障害注入から効率的復旧へ_カオスエンジニアリング_生成AIで考えるAWS障害対応.pdf
sh_fk2
3
280
2025/09/16 仕様駆動開発とAI-DLCが導くAI駆動開発の新フェーズ
masahiro_okamura
0
130
slog.Handlerのよくある実装ミス
sakiengineer
4
470
💡Ruby 川辺で灯すPicoRubyからの光
bash0c7
0
120
データ分析エージェント Socrates の育て方
na0
6
2.2k
CDK CLIで使ってたあの機能、CDK Toolkit Libraryではどうやるの?
smt7174
4
190
Featured
See All Featured
Optimizing for Happiness
mojombo
379
70k
Faster Mobile Websites
deanohume
309
31k
Context Engineering - Making Every Token Count
addyosmani
3
58
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.9k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
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