Vueでつくるシングルページアプリケーション（SPA）入門

VueでSPAを作成するチュートリアルLTの資料です。

Transcript

1. 2026.02.28 / VueSapporo #1 三浦　恒樹 (MIURA KOUKI) / 医療ITエンジニア Vueでつくるシングルページアプリケーション(SPA)入門
2. 自己紹介 - ドゥウェル株式会社 に所属（マネージャー） - 医療ITエンジニア / 診療情報管理士 / 上級医療情報技師 / 医用画像情報専門技師 - TypeScript / Vue.js / Node.js / Java / C# / PHP - 3兄弟の父、休日は習い事の送り迎えとか... - 参加している勉強会 札幌PHP勉強会 JBUG札幌 JavaDO ゆるWeb勉強会 えびてく クラメソ札幌IT勉強会（仮） AWS初心者LT会in札幌 札幌すごいAI会 札幌IT石狩鍋 hokkaido.js 函館本線沿線勉強会 VueSapporo - コーディングBGM ラックライフ - Naru, 名前を呼ぶよ BLUE ENCOUNT - Survivor, ポラリス SHANK Dizzy Sun Fist
3. INDEX - シングル・ページ・アプリケーション（SPA） - 従来のWebアプリとの違い - SPAの仕組み - VueでSPAをつくる - 仕様技術 - 開発環境構築 - VueRouterで画面遷移 - SPAのメリット・デメリット - まとめ ゴール: ・SPAとは何かを知る ・VueでSPAをつくる最小構成を知る
4. シングルページアプリケーション（SPA）
5. 従来のWebアプリとの違い
6. SPAの仕組み
7. VueでSPAをつくる
8. 仕様技術
9. 開発環境構築 npm create vue@latest コマンドでテンプレートを作成 プロジェクト名を入力 “first-spa” TypeScript と Router を選択 experimental(実験的な) ツールは選択しない このとおりコマンドを実行すると...
10. 開発環境構築 ブラウザで開いてみると... http://localhost:5173 > cd first-spa > npm install > npm run dev
11. 開発環境構築 router が プラグインとして 組み込まれる
12. VueRouterで画面遷移 遅延ローディング (Lazy Loading)の例
13. SPAのメリット・デメリット
14. まとめ - SPAとは？ … ページ移動のない、Webブラウザ上で動くアプリ - 従来のWebアプリとの違いは？ … 画面を『作り直す』のはブラウザの仕事 - SPAの仕組み … 初回読み込みで必要なリソースを取得。データだけ差分取得 - VueでSPAをつくる - 仕様技術 … VSCode, npm, vite, Vue.js, Vue-Router - 開発環境構築 … スキャフォールディングで簡単セットアップ可能 - VueRouterで画面遷移 … URL(Path)と画面のマッピング - SPAのメリット・デメリット … 優れたユーザー体験 vs 初回読み込み&SEO
15. ご清聴ありがとうございました。