$30 off During Our Annual Pro Sale. View Details »

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

miyake
November 24, 2022
Technology
0
780

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

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

miyake

November 24, 2022
Tweet

More Decks by miyake

See All by miyake
Static Site Generator でサイト構築 / building sites with static site generator
miyake
1
83
Design and implementation of Cosmos DB Change Feed-centric architecture
miyake
0
500
Well-Architected Framework を活用した Azure 設計パターン / azure-well-architected-framework
miyake
2
980
2020 年下半期 Cosmos DB の更新まとめ
miyake
0
430
Front-end web applications with Azure Static Web Apps
miyake
0
400
Azure Static Web Apps で実現する Serverless CMS / Serverless CMS with Azure Static Web Apps
miyake
2
1.5k
Hack Azure! #1 - Azure Serverless でオンライン決済基盤をつくる / hack-azure-1
miyake
1
470
Azure PaaS/Serverless の最新情報をキャッチアップしよう / Azure PaaS and Serverless Update
miyake
1
1.2k
Front-end web application development with Azure PaaS & Serverless, 2020 Update!
miyake
2
690

Other Decks in Technology

See All in Technology
YOW(やったこと/起きたこと/分かったこと)から始める分かったことの積み上げと、プラクティス・エフェクトを軸にした仕事の全体設計/yow practice effect sf mikawa2022
moriyuya
0
110
[FIT22] Flareformer: Large-scale Solar Flare Prediction by Integrating Magnetograms and Sunspot Physical Features
keio_smilab
PRO
0
510
布教Git
streamwest1629
0
110
Enjoy the Web
herablog
3
880
Amazon Route 53 Application Recovery Controller zonal shift 試してみた
yukihirochiba
0
100
事業をエンジニアリングし続けるなかで見えてきた私のキャリア / forkwell-cto-suzuken
carta_engineering
1
200
Oracle Exadata Database Service：サービス概要のご紹介
oracle4engineer
PRO
0
1.9k
Accelerated Computing on AWS for NLP
icoxfog417
1
290
Next.jsチョットデキル！サイトの規模やページ特性に合わせた開発テクニック
hanetsuki
2
1.4k
Autonomous Database Cloud 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
10
22k
re:Growth 2022 Amazon Verified Permissions/妄想を膨らませる_チバユキ
yukihirochiba
0
330
runnによるAPIのシナリオテストの導入と自動化 / stac2022
k1low
4
1.1k

Featured

See All Featured
Embracing the Ebb and Flow
colly
74
3.5k
4 Signs Your Business is Dying
shpigford
170
20k
How to name files
jennybc
45
70k
Atom: Resistance is Futile
akmur
256
24k
5 minutes of I Can Smell Your CMS
philhawksworth
197
18k
Building Your Own Lightsaber
phodgson
96
4.8k
Producing Creativity
orderedlist
PRO
335
37k
Designing on Purpose - Digital PM Summit 2013
jponch
107
5.8k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
23
4.4k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
182
15k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
120
29k
What’s in a name? Adding method to the madness
productmarketing
11
1.8k

Transcript

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

    - Kazuyuki Miyake

  2. About Me 三宅　和之 @kazuyukimiyake 株式会社ゼンアーキテクツ 代表 Azure, GitHub, Nuxt のスペシャリスト集団

    Microsoft MVP ( for Microsoft Azure ) Vue.js 日本ユーザーグループコアスタッフ PaaS がかりの部屋(Blog): https://k-miyake.github.io/blog/

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

  4. GitHub Codespaces が正式リリース GitHub Codespaces とは GitHub が提供する VS Code

    ベースのクラウド開発環境 ノート PC より高速？（32 コア, 64 GB まで選択可能） 開発環境の標準化が可能（Docker ベースの開発環境） NEW Free, Pro アカウントに 60 時間/月無料枠提供 月 60 時間の開発用 PC が全人類に無償配布されたことに？！ 4

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

  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

  7. DEMO Codespaces x Nuxt3 以下のセットアップが自動化（不要になる）される例 Node.js / TypeScript インストール Vue.js

    開発用 Extension のインストール プロジェクト初期ファイルの作成 npm ライブラリのインストール dev server の起動 約 30 秒の起動時間は BGM をお楽しみください 7

  8. Nuxt3 が正式リリース Nuxt3 とは Vue.js ベースのアプリケーションフレームワーク Vue3 を利用したメジャーバージョンアップ 公式サイト: nuxt.com

    - (Beta 版から変更されているので注意) 8

  9. Nuxt3 がもたらす開発体験いろいろ Vite によるビルド/バンドルで軽量高速な開発 自動インポート TypeScript 完全対応（設定不要） Nitro (Server engine)

    によるフルスタック化 多彩なレンダリングモード（後述） Nuxt2 での長所を生かしつつ短所がほぼ解消されている 9

  10. 多彩なレンダリングモードをサポート！ Client-side Only Rendering (CSR): ブラウザのみでレンダリング Universal Rendering (SSR): サーバーで

    HTML を描画 Static site generation (SSG): Jamstack に最適 Hybrid rendering: ページごとにレンダリングモードを選択可能 しかもコードの書き換えがほぼ不要 10

  11. Client-side Only Rendering (CSR) いわゆる SPA モード (Single Page Application)

    実装がシンプルでインフラも手軽（ファイルを置くだけ） 初期ロードが遅い SEO に弱い 11

  12. Universal Rendering ( ≒ SSR) Nuxt3 では追加設定不要で SSR が可能になった！ 初期応答が速く

    SEO にも強い サーバーが必要 12

  13. Nuxt3 をデプロイする CSR / SSG なら主要なクラウドホスティングに対応 サポートされているプロバイダー SSR は Node.js

    サーバーが必要になる Azure Static Web Apps は標準で対応！ Azure Static Web Apps 上でユニバーサル レンダリングを使用 した Nuxt 3 サイトをデプロイする Vercel, Netlify なども対応 13

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