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
Vite+TypeScript+Vue.jsではじめるフロントエンドプロジェクト
Search
kouki.miura
August 02, 2025
Programming
0
47
Vite+TypeScript+Vue.jsではじめるフロントエンドプロジェクト
Vueフロントエンド開発プロジェクトの作り方について、スキャフォールディングとスクラッチの比較、その他重要なポイントについて説明します。
kouki.miura
August 02, 2025
Tweet
Share
More Decks by kouki.miura
See All by kouki.miura
リソース制限環境下でのローカルLLM構築術
koukimiura
0
90
フロントエンドのパフォーマンスチューニング
koukimiura
7
2.4k
医療系ソフトウェアのAI駆動開発
koukimiura
1
230
レポートから見る生成AIを活用したシステム開発.
koukimiura
0
150
AWSサービスの整理と使いたい機能の概要
koukimiura
1
87
生成AIによる PHP = Node.js 変換の検証
koukimiura
0
160
Javaの学習・実行環境-JBangの概要
koukimiura
0
120
オンプレミス環境にKubernetesを構築する
koukimiura
0
320
TypeScriptがなぜ必要だったか
koukimiura
0
98
Other Decks in Programming
See All in Programming
あのころの iPod を どうにか再生させたい
orumin
2
2.5k
A Gopher's Guide to Vibe Coding
danicat
0
150
サイトを作ったらNFCタグキーホルダーを爆速で作れ!
yuukis
0
350
0から始めるモジュラーモノリス-クリーンなモノリスを目指して
sushi0120
1
280
Understanding Kotlin Multiplatform
l2hyunwoo
0
260
プロダクトという一杯を作る - プロダクトチームが味の責任を持つまでの煮込み奮闘記
hiliteeternal
0
460
STUNMESH-go: Wireguard NAT穿隧工具的源起與介紹
tjjh89017
0
380
Introduction to Git & GitHub
latte72
0
110
実践 Dev Containers × Claude Code
touyu
1
210
生成AI、実際どう? - ニーリーの場合
nealle
0
110
物語を動かす行動"量" #エンジニアニメ
konifar
14
5.2k
No Install CMS戦略 〜 5年先を見据えたフロントエンド開発を考える / no_install_cms
rdlabo
0
480
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.8k
Documentation Writing (for coders)
carmenintech
73
5k
Why Our Code Smells
bkeepers
PRO
338
57k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
1k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.4k
Testing 201, or: Great Expectations
jmmastey
45
7.6k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Transcript
Vite+TypeScript+Vue.jsではじめる フロントエンドプロジェクト 2025.08.02 hokkaido.js vol.4@Hakodate 三浦 恒樹 (MIURA KOUKI) 診療情報管理士
上級医療情報技師 医用画像情報専門技師 ドゥウェル株式会社
長男が飼っている モンちゃん(ハリネズミ) がアイコン Self Introduction ・ドゥウェル株式会社 (医療系IT開発・導入会社)に所属 ・マネージャー(プレイング・マネージャー) ・TypeScript, Vue.js,
Node.js, Java,C#, PHP ・3児の父 ・休日は子どものサッカー観戦 ・参加している勉強会 札幌PHP勉強会、JBUG札幌、JavaDO、ゆるWeb勉強会、えびてく、 クラメソ札幌IT勉強会(仮)、AWS初心者LT会in札幌、 札幌すごいAI会、札幌IT石狩鍋、hokkaido.js 等
1. プロジェクトの作り方 2. スキャフォールディングではじめる 3. スクラッチではじめる 4. その他のプロジェクト設定 5. まとめ
INDEX Vueフロントエンド開発プロジェクトの作 り方について、スキャフォールディングと スクラッチの比較、その他重要なポイント について説明します。
1. プロジェクトの作り方 2. スキャフォールディングではじめる 3. スクラッチではじめる 4. その他のプロジェクト設定 5. まとめ
1.プロジェクトの作り方 スキャフォールディング スクラッチ メリット 早い。 スタンダードを知る。 デメリット 理解が進まない。 不要な設定が混入する。 メリット
理解が進む。 必要最低限になる。 デメリット 時間がかかる。 マイノリティのリスク。
1. プロジェクトの作り方 2. スキャフォールディングではじめる 3. スクラッチではじめる 4. その他のプロジェクト設定 5. まとめ
2.スキャフォールディングではじめる ・node22以上 ・pnpm10以上 必要なもの。 pnpm=プンプン という 読み方を流行らせたい。
2.スキャフォールディングではじめる pnpm create vue@latest を実行。プロジェクト名を入力。ここでは my-template1 を入力。
2.スキャフォールディングではじめる 使用する機能を選択。ここでは TypeScript と Router (SPA development) を選択。
2.スキャフォールディングではじめる 実験的な機能を選択。ここでは選択しない。
2.スキャフォールディングではじめる サンプルコードを省略して、空のVueプロジェクトを作成するか。ここでは No を選択。
2.スキャフォールディングではじめる 完成。実行のコマンド、Gitリポジトリ初期化のコマンドが表示される。
2.スキャフォールディングではじめる cd my-template1、pnpm install を実行。
2.スキャフォールディングではじめる pnpm dev を実行。http://localhost:5173/ をブラウザで開く。 実行する。
2.スキャフォールディングではじめる
2.スキャフォールディングではじめる ビルドする。 ./dist にビルド(依存関係解決+トラン スパイル+minify)される pnpm build を実行。
1. プロジェクトの作り方 2. スキャフォールディングではじめる 3. スクラッチではじめる 4. その他のプロジェクト設定 5. まとめ
3.スクラッチではじめる ・node22以上 ・pnpm10以上 ・Visual Studio Code ・Visual Studio Code Extension:
Vue(Official) 必要なもの。
3.スクラッチではじめる 空のプロジェクトフォルダを作成。ここでは my-template2 を指定。VisualStudioCodeで開く。
3.スクラッチではじめる ターミナルを表示。
3.スクラッチではじめる pnpm init を実行。 package.jsonファイルを作成する。
3.スクラッチではじめる pnpm i -D typescript vite @vitejs/plugin-vue @vue/tsconfig を実行。 開発用パッケージを追加する。
3.スクラッチではじめる pnpm i vue を実行。 実行用パッケージを追加する。
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を特徴 とし、学習コストが低く人気がある。
3.スクラッチではじめる スクリプトを設定する。 変更前 変更後 package.json の scripts を修正。
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版で、型安全性を保ちながら開発サーバーやビルド設定を記述 する。
3.スクラッチではじめる 必要なファイルを作成する。
3.スクラッチではじめる 必要なファイルを作成する。
3.スクラッチではじめる 必要なファイルを作成する。
3.スクラッチではじめる 必要なファイルを作成する。
3.スクラッチではじめる 必要なファイルを作成する。
3.スクラッチではじめる 必要なファイルを作成する。
3.スクラッチではじめる pnpm dev を実行。http://localhost:5173/ をブラウザで開く。 実行する。
3.スクラッチではじめる
3.スクラッチではじめる pnpm i -D vue-tsc npm-run-all2 を実行。 開発用(ビルド用)パッケージを追加する。
3.スクラッチではじめる パッケージの説明 (Powered by Claude Sonnet 4) 開発/実行 パッケージ 概要
開発 vue-tsc Vue.jsプロジェクトでTypeScriptの型チェックを行うコマンドラインツール。単一ファイル コンポーネント(.vue)内のTypeScriptコードを解析し、型エラーの検出やビルド時の型 チェックを提供する。 開発 npm-run-all2 複数のnpmスクリプトを並行または直列で実行できるコマンドラインツール。 package.jsonのscriptsセクションで定義されたタスクを効率的に管理し、ビルドプロセ スの自動化に役立つ。
3.スクラッチではじめる スクリプトを設定する。 変更前 変更後 package.json の scripts を修正。
3.スクラッチではじめる ビルドする。 ./dist にビルド(依存関係解決+トラン スパイル+minify)される pnpm build を実行。
1. プロジェクトの作り方 2. スキャフォールディングではじめる 3. スクラッチではじめる 4. その他のプロジェクト設定 5. まとめ
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)。これにより変更内容が明確になり、自動的なバージョン管 理やリリースノート生成が可能となる。
4.その他のプロジェクト設定
1. プロジェクトの作り方 2. スキャフォールディングではじめる 3. スクラッチではじめる 4. その他のプロジェクト設定 5. まとめ
5.まとめ • スキャフォールディングで簡単に・素早く・一般的なアプリ設定を作成 ◦ すぐコーディングに取り掛かれる ◦ 数パターンから選択できる ◦ 標準的な設定が解る •
スクラッチで1つずつ・理解しながら・最低限必要な・アプリ設定を作成 ◦ 時間がかかるが仕組みを理解できる ◦ 時間がかかるが最低限必要な設定のみ含まれる ◦ 時間がかかるが造っている感がある 通常、理解しながら一度作成 した後、テンプレートとして 開発組織内で横展開
ご清聴ありがとうございました。 最後に : おすすめの書籍 うまくいっている人は忙しいので移動する → 移動する人だから「うまくいく」 ・人は意志が弱い、意志→改善はできない だから、行動(環境)を変える→意志が変わる→改善する ・移動・普段と違う=刺激・脳の活性化
コンフォート・ゾーンから抜け出す ・新しい知識・体験→面白い人生→自分も面白い人間 →移動する→新しい人に出会う→新しい知識・体験...