Vite+TypeScript+Vue.jsではじめるフロントエンドプロジェクト

Vueフロントエンド開発プロジェクトの作り方について、スキャフォールディングとスクラッチの比較、その他重要なポイントについて説明します。

Transcript

1. Vite+TypeScript+Vue.jsではじめる フロントエンドプロジェクト 2025.08.02 hokkaido.js vol.4@Hakodate 三浦 恒樹 (MIURA KOUKI) 診療情報管理士 上級医療情報技師 医用画像情報専門技師 ドゥウェル株式会社
2. 長男が飼っている モンちゃん（ハリネズミ） がアイコン Self Introduction ・ドゥウェル株式会社 （医療系IT開発・導入会社）に所属 ・マネージャー（プレイング・マネージャー） ・TypeScript, Vue.js, Node.js, Java，C#, PHP ・３児の父 ・休日は子どものサッカー観戦 ・参加している勉強会 　札幌PHP勉強会、JBUG札幌、JavaDO、ゆるWeb勉強会、えびてく、 　クラメソ札幌IT勉強会(仮)、AWS初心者LT会in札幌、 　札幌すごいAI会、札幌IT石狩鍋、hokkaido.js　　等
3. 1. プロジェクトの作り方 2. スキャフォールディングではじめる 3. スクラッチではじめる 4. その他のプロジェクト設定 5. まとめ INDEX Vueフロントエンド開発プロジェクトの作 り方について、スキャフォールディングと スクラッチの比較、その他重要なポイント について説明します。
4. 1. プロジェクトの作り方 2. スキャフォールディングではじめる 3. スクラッチではじめる 4. その他のプロジェクト設定 5. まとめ
5. １．プロジェクトの作り方 スキャフォールディング スクラッチ メリット 早い。 スタンダードを知る。 デメリット 理解が進まない。 不要な設定が混入する。 メリット 理解が進む。 必要最低限になる。 デメリット 時間がかかる。 マイノリティのリスク。
6. 1. プロジェクトの作り方 2. スキャフォールディングではじめる 3. スクラッチではじめる 4. その他のプロジェクト設定 5. まとめ
7. 2．スキャフォールディングではじめる ・node22以上 ・pnpm10以上 必要なもの。 pnpm=プンプン という 読み方を流行らせたい。
8. 2．スキャフォールディングではじめる pnpm create vue@latest を実行。プロジェクト名を入力。ここでは my-template1 を入力。
9. 2．スキャフォールディングではじめる 使用する機能を選択。ここでは TypeScript と Router (SPA development) を選択。
10. 2．スキャフォールディングではじめる 実験的な機能を選択。ここでは選択しない。
11. 2．スキャフォールディングではじめる サンプルコードを省略して、空のVueプロジェクトを作成するか。ここでは No を選択。
12. 2．スキャフォールディングではじめる 完成。実行のコマンド、Gitリポジトリ初期化のコマンドが表示される。
13. 2．スキャフォールディングではじめる cd my-template1、pnpm install を実行。
14. 2．スキャフォールディングではじめる pnpm dev を実行。http://localhost:5173/ をブラウザで開く。 実行する。
15. 2．スキャフォールディングではじめる
16. 2．スキャフォールディングではじめる ビルドする。 ./dist にビルド(依存関係解決＋トラン スパイル＋minify)される pnpm build を実行。
17. 1. プロジェクトの作り方 2. スキャフォールディングではじめる 3. スクラッチではじめる 4. その他のプロジェクト設定 5. まとめ
18. 3．スクラッチではじめる ・node22以上 ・pnpm10以上 ・Visual Studio Code ・Visual Studio Code Extension: Vue(Official) 必要なもの。
19. 3．スクラッチではじめる 空のプロジェクトフォルダを作成。ここでは my-template2 を指定。VisualStudioCodeで開く。
20. 3．スクラッチではじめる ターミナルを表示。
21. 3．スクラッチではじめる pnpm init を実行。 package.jsonファイルを作成する。
22. 3．スクラッチではじめる pnpm i -D typescript vite @vitejs/plugin-vue @vue/tsconfig を実行。 開発用パッケージを追加する。
23. 3．スクラッチではじめる pnpm i vue を実行。 実行用パッケージを追加する。
24. 3．スクラッチではじめる パッケージの説明 (Powered by Claude Sonnet 4) 開発/実行 パッケージ 概要 開発 typescript JavaScriptに静的型付けを追加するプログラミング言語で、コンパイルしてJavaScript に変換する。その言語仕様とコンパイラ等。 開発 vite 高速なビルドツールで、開発サーバーの起動が早く、モダンなフロントエンド開発に最適化さ れている。 開発 @vitejs/plugin-vue ViteビルドツールでVue.jsアプリケーションを開発するための公式プラグイン。単一ファイ ルコンポーネント（.vueファイル）の解析・コンパイル機能を提供し、Vue 3との統合を可能 にする。 開発 @vue/tsconfig Vue.jsプロジェクトでTypeScriptを使用する際の推奨設定を提供するパッケージ。 tsconfig.jsonで継承することで、Vue開発に最適化されたコンパイラオプションを簡単に 適用できる。SFC(Single File Component)のDOM構造を解析するために必要。 実行 vue ユーザーインターフェース構築のためのプログレッシブJavaScriptフレームワーク。コン ポーネントベースの開発が可能で、リアクティブなデータバインディングと仮想DOMを特徴 とし、学習コストが低く人気がある。
25. 3．スクラッチではじめる スクリプトを設定する。 変更前 変更後 package.json の scripts を修正。
26. 3．スクラッチではじめる 必要なファイルを作成する。 ファイル 概要 src/assets/main.css Vueアプリ全体に適用するCSS。 src/App.vue SFC(Single File Component) のルートビュー。 src/main.ts Vueアプリのエントリーポイント。 index.html tsconfig.json TypeScriptプロジェクトのコンパイル設定を定義するファイルで、型チェックやビルドオプションを指 定する。 vite.config.ts Viteの設定ファイルのTypeScript版で、型安全性を保ちながら開発サーバーやビルド設定を記述 する。
27. 3．スクラッチではじめる 必要なファイルを作成する。
28. 3．スクラッチではじめる 必要なファイルを作成する。
29. 3．スクラッチではじめる 必要なファイルを作成する。
30. 3．スクラッチではじめる 必要なファイルを作成する。
31. 3．スクラッチではじめる 必要なファイルを作成する。
32. 3．スクラッチではじめる 必要なファイルを作成する。
33. 3．スクラッチではじめる pnpm dev を実行。http://localhost:5173/ をブラウザで開く。 実行する。
34. 3．スクラッチではじめる
35. 3．スクラッチではじめる pnpm i -D vue-tsc npm-run-all2 を実行。 開発用(ビルド用)パッケージを追加する。
36. 3．スクラッチではじめる パッケージの説明 (Powered by Claude Sonnet 4) 開発/実行 パッケージ 概要 開発 vue-tsc Vue.jsプロジェクトでTypeScriptの型チェックを行うコマンドラインツール。単一ファイル コンポーネント（.vue）内のTypeScriptコードを解析し、型エラーの検出やビルド時の型 チェックを提供する。 開発 npm-run-all2 複数のnpmスクリプトを並行または直列で実行できるコマンドラインツール。 package.jsonのscriptsセクションで定義されたタスクを効率的に管理し、ビルドプロセ スの自動化に役立つ。
37. 3．スクラッチではじめる スクリプトを設定する。 変更前 変更後 package.json の scripts を修正。
38. 3．スクラッチではじめる ビルドする。 ./dist にビルド(依存関係解決＋トラン スパイル＋minify)される pnpm build を実行。
39. 1. プロジェクトの作り方 2. スキャフォールディングではじめる 3. スクラッチではじめる 4. その他のプロジェクト設定 5. まとめ
40. 4．その他のプロジェクト設定 その他のプロジェクト設定をする。 設定 概要 vue-router Vue.jsアプリケーションでSPA（単一ページアプリケーション）のルーティングを定義する。ルート定 義、コンポーネントマッピング、ナビゲーションガードなどを設定してページ遷移を管理する。 ESLint コード品質を保つための静的解析ツール設定。Vue、TypeScript用のESLintプラグインを導入 し、.eslintrc.jsでルールを定義してコーディング規約を統一する。 Prettier コードフォーマットを自動化するツールの設定。.prettierrcファイルでフォーマットルールを定義し、 ESLintと連携させて一貫したコードスタイルを維持する。 AIカスタム命令 AI/AIエージェントの動作を設定する。例: .github/copilot-instructions.md コーディング規約 コンポーネント名はPascalCase、ファイル名はkebab-case、ディレクトリ構造等の統一が重要。ま た、TypeScriptの型定義の適切な使用、Vue 3のComposition APIの一貫した利用、propsと emitsの明確な定義なども気を付けるべき規約。 コミット規約 「feat:」「fix:」「docs:」「style:」「refactor:」「test:」などのプレフィックスを付け、コミットメッセー ジを構造化(Conventional Commits)。これにより変更内容が明確になり、自動的なバージョン管 理やリリースノート生成が可能となる。
41. 4．その他のプロジェクト設定
42. 1. プロジェクトの作り方 2. スキャフォールディングではじめる 3. スクラッチではじめる 4. その他のプロジェクト設定 5. まとめ
43. ５．まとめ • スキャフォールディングで簡単に・素早く・一般的なアプリ設定を作成 ◦ すぐコーディングに取り掛かれる ◦ 数パターンから選択できる ◦ 標準的な設定が解る • スクラッチで1つずつ・理解しながら・最低限必要な・アプリ設定を作成 ◦ 時間がかかるが仕組みを理解できる ◦ 時間がかかるが最低限必要な設定のみ含まれる ◦ 時間がかかるが造っている感がある 通常、理解しながら一度作成 した後、テンプレートとして 開発組織内で横展開
44. ご清聴ありがとうございました。 最後に ： おすすめの書籍 うまくいっている人は忙しいので移動する → 移動する人だから「うまくいく」 ・人は意志が弱い、意志→改善はできない 　だから、行動(環境)を変える→意志が変わる→改善する ・移動・普段と違う＝刺激・脳の活性化 　コンフォート・ゾーンから抜け出す ・新しい知識・体験→面白い人生→自分も面白い人間 　→移動する→新しい人に出会う→新しい知識・体験...