Vue.js を始める際、セットアップに時間がかかってしまい、肝心のコーディングに集中できないことがありますよね。特に macOS 環境で Yarn を使い、ESLint、Prettier、TypeScript、パスエイリアスまで一気に設定しようとすると、どこから手をつければよいのか迷ってしまいます。

この記事では、Vue.js プロジェクトを macOS 環境で Yarn を使って最短でセットアップする方法を、初心者の方にもわかりやすく解説いたします。ESLint によるコード品質の確保、Prettier による自動フォーマット、TypeScript による型安全性、そしてパスエイリアスによる import の簡潔化まで、実務で必要な設定を一気に整えていきましょう。

背景

Vue.js の開発環境に必要な要素

Vue.js で本格的な開発を始める際、プロジェクトの初期設定は非常に重要です。単に Vue.js をインストールするだけでなく、開発効率とコード品質を高めるためのツール群を整える必要があります。

現代の Vue.js 開発では、以下の要素が標準的に求められます。

mermaidCopy codeflowchart TB
  vue["Vue.js プロジェクト"] --> tools["開発ツール群"]
  tools --> ts["TypeScript<br/>型安全性"]
  tools --> eslint["ESLint<br/>コード品質"]
  tools --> prettier["Prettier<br/>自動整形"]
  tools --> alias["パスエイリアス<br/>import 簡潔化"]

  ts --> benefit1["バグ削減"]
  eslint --> benefit2["一貫性"]
  prettier --> benefit3["可読性"]
  alias --> benefit4["保守性"]

この図が示すように、各ツールは独立した役割を持ちながら、相互に連携してプロジェクトの品質を高めます。TypeScript は型チェックでバグを未然に防ぎ、ESLint はコーディング規約を統一し、Prettier はコードの見た目を自動で整えてくれます。

macOS と Yarn を選ぶ理由

macOS は開発者に人気の高い環境であり、Homebrew などのパッケージマネージャーとの相性も抜群です。Yarn は npm に比べて高速で、依存関係の解決が安定しているため、多くのプロジェクトで採用されています。

#	項目	npm	Yarn
1	インストール速度	★★☆	★★★
2	依存関係の安定性	★★☆	★★★
3	キャッシュ機能	★★☆	★★★
4	ロックファイル	package-lock.json	yarn.lock
5	モノレポ対応	workspaces	workspaces

Yarn のワークスペース機能やキャッシュ機構は、大規模プロジェクトでも快適な開発体験を提供してくれるのです。

課題

セットアップの複雑さ

Vue.js の開発環境を整える際、多くの開発者が直面する課題があります。それは、複数のツールを個別に設定し、それらを正しく連携させる必要があることです。

mermaidCopy codeflowchart LR
  start["プロジェクト開始"] --> problem1["設定ファイルが多い"]
  start --> problem2["ツール同士の競合"]
  start --> problem3["設定方法が分散"]

  problem1 --> result["セットアップに<br/>時間がかかる"]
  problem2 --> result
  problem3 --> result

  result --> impact["本来のコーディングが<br/>進まない"]

具体的には、以下のような課題が挙げられます。

よくある問題点

設定ファイルの氾濫

プロジェクトルートには .eslintrc.js、.prettierrc、tsconfig.json、vite.config.ts など、多数の設定ファイルが必要になります。これらを一つひとつ理解して設定するのは、初心者にとってハードルが高いでしょう。

ツール間の競合

ESLint と Prettier は、どちらもコードの整形に関わるため、設定が不適切だと互いに競合してしまいます。例えば、ESLint がセミコロンを要求する一方で、Prettier がセミコロンを削除するといった状況が発生することがあるのです。

パスエイリアスの設定漏れ

TypeScript でパスエイリアスを設定しても、Vite や Jest などのビルドツールやテストツールに同じ設定を反映させなければ、実行時にエラーが発生してしまいます。

#	課題	影響	頻度
1	ESLint と Prettier の競合	コードが自動修正されない	★★★
2	TypeScript の型定義不足	型エラーが頻発	★★★
3	パスエイリアスの不整合	ビルドエラー	★★☆
4	設定ファイルの記述ミス	起動できない	★★☆

これらの課題を一つひとつ解決していくのは、時間も労力もかかります。そこで、最短で確実にセットアップできる手順が求められるのです。

解決策

段階的なセットアップ手順

複雑なセットアップも、正しい順序で進めれば確実に完了できます。以下の手順に従って、一つひとつ丁寧に設定していきましょう。

mermaidCopy codeflowchart TD
  step1["1.環境確認<br/>Node.js / Yarn"] --> step2["2.Vue プロジェクト作成"]
  step2 --> step3["3.TypeScript 設定"]
  step3 --> step4["4.ESLint 導入"]
  step4 --> step5["5.Prettier 設定"]
  step5 --> step6["6.パスエイリアス設定"]
  step6 --> complete["セットアップ完了"]

  style step1 fill:#e1f5ff
  style complete fill:#c8e6c9

この図が示すように、各ステップを順番に進めることで、ツール間の競合を避けながら確実にセットアップできます。それでは、具体的な手順を見ていきましょう。

前提条件の確認

まず、macOS に必要なツールがインストールされているか確認します。

bashCopy code# Node.js のバージョン確認
node -v

Node.js がインストールされていない場合は、Homebrew を使ってインストールしてください。

bashCopy code# Homebrew で Node.js をインストール
brew install node

次に、Yarn をグローバルにインストールします。

bashCopy code# Yarn をグローバルインストール
npm install -g yarn

# バージョン確認
yarn -v

これで、Vue.js プロジェクトを作成する準備が整いました。

Vue プロジェクトの作成

公式の create-vue ツールを使って、プロジェクトを作成しましょう。このツールは対話形式でプロジェクトの設定を選択できるため、初心者にも優しい設計になっています。

bashCopy code# Vue プロジェクトを作成
yarn create vue@latest

対話形式で以下の質問が表示されますので、それぞれ選択してください。

#	質問	選択	理由
1	Project name	my-vue-app	任意のプロジェクト名
2	Add TypeScript?	Yes	型安全性のため
3	Add JSX Support?	No	Vue の SFC を使用
4	Add Vue Router?	Yes	ルーティングが必要な場合
5	Add Pinia?	Yes	状態管理が必要な場合
6	Add Vitest?	Yes	テストを書く場合
7	Add ESLint?	Yes	コード品質のため
8	Add Prettier?	Yes	自動整形のため

プロジェクトが作成されたら、ディレクトリに移動して依存関係をインストールします。

bashCopy code# プロジェクトディレクトリに移動
cd my-vue-app

# 依存関係をインストール
yarn install

この時点で、基本的な Vue.js プロジェクトが作成され、TypeScript、ESLint、Prettier も含まれた状態になっています。

TypeScript の設定調整

create-vue で生成された tsconfig.json は基本的な設定がされていますが、パスエイリアスなどを追加で設定する必要があります。

プロジェクトルートの tsconfig.json を開いて、compilerOptions セクションを確認しましょう。

jsonCopy code{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true
  }
}

この基本設定に加えて、型チェックを厳密にするオプションを追加します。

jsonCopy code{
  "compilerOptions": {
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  }
}

これらのオプションを有効にすることで、未使用の変数やパラメータ、switch 文の fall-through など、潜在的なバグを未然に防げます。

ESLint の設定

create-vue で生成された ESLint 設定は .eslintrc.cjs ファイルに記述されています。この設定を確認し、必要に応じて調整しましょう。

javascriptCopy code/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-typescript',
    '@vue/eslint-config-prettier/skip-formatting',
  ],
};

この設定では、Vue 3 の推奨ルール、ESLint の標準ルール、TypeScript 用のルール、そして Prettier との統合が含まれています。

追加で、より厳格なルールを適用したい場合は、vue3-essential を vue3-recommended に変更できます。

javascriptCopy codemodule.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-recommended', // より厳格なルール
    'eslint:recommended',
    '@vue/eslint-config-typescript',
    '@vue/eslint-config-prettier/skip-formatting',
  ],
};

vue3-recommended は、ベストプラクティスに関するルールも含むため、コード品質がさらに向上します。

Prettier の設定

Prettier の設定は、プロジェクトルートに .prettierrc.json ファイルを作成して記述します。

jsonCopy code{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "none",
  "printWidth": 100,
  "tabWidth": 2
}

各オプションの意味は以下の通りです。

#	オプション	値	説明
1	semi	false	セミコロンを省略
2	singleQuote	true	シングルクォートを使用
3	trailingComma	none	末尾のカンマを省略
4	printWidth	100	1 行の最大文字数
5	tabWidth	2	インデント幅

Prettier と ESLint が競合しないよう、.eslintrc.cjs には既に @vue​/​eslint-config-prettier​/​skip-formatting が含まれているため、追加の設定は不要です。

パスエイリアスの設定

パスエイリアスを設定すると、..​/​..​/​..​/​components​/​Button.vue のような相対パスを @​/​components​/​Button.vue のように簡潔に書けるようになります。

まず、vite.config.ts を開いて、resolve.alias セクションを確認しましょう。

typescriptCopy codeimport { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

Vite の設定ファイルでは、エイリアスを以下のように定義します。

typescriptCopy codeexport default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
});

この設定により、@ が src ディレクトリを指すようになります。

次に、TypeScript にもこのエイリアスを認識させる必要があります。tsconfig.app.json を開いて、paths オプションを追加しましょう。

jsonCopy code{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

baseUrl を . に設定し、paths で @​/​* を .​/​src​/​* にマッピングします。これで、TypeScript もパスエイリアスを理解できるようになりました。

エディタ設定（VS Code）

VS Code を使用している場合、ESLint と Prettier の拡張機能をインストールすると、自動でコードを整形できます。

プロジェクトルートに .vscode​/​settings.json を作成し、以下の設定を追加しましょう。

jsonCopy code{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}

この設定により、ファイル保存時に Prettier が自動でコードを整形し、ESLint が自動で修正可能な問題を修正してくれます。

#	設定項目	効果
1	formatOnSave	保存時に自動整形
2	defaultFormatter	Prettier を使用
3	codeActionsOnSave	ESLint の自動修正

これで、開発中にコードを保存するたびに、一貫性のあるフォーマットが適用されるようになります。

具体例

プロジェクト構造の確認

セットアップが完了したプロジェクトの構造を確認してみましょう。以下のような構成になっているはずです。

cssCopy codemy-vue-app/
├── .vscode/
│   └── settings.json
├── src/
│   ├── assets/
│   ├── components/
│   ├── router/
│   ├── stores/
│   ├── views/
│   ├── App.vue
│   └── main.ts
├── .eslintrc.cjs
├── .prettierrc.json
├── tsconfig.json
├── tsconfig.app.json
├── vite.config.ts
└── package.json

この構造は、Vue.js の推奨プラクティスに従っており、コンポーネント、ルーター、ストアなどが明確に分離されています。

パスエイリアスの実践

実際にパスエイリアスを使って、コンポーネントをインポートしてみましょう。src​/​views​/​Home.vue を開いて、以下のようにコンポーネントをインポートします。

typescriptCopy code<script setup lang='ts'>
  // パスエイリアスを使用したインポート import HelloWorld
  from '@/components/HelloWorld.vue' import TheWelcome from
  '@/components/TheWelcome.vue'
</script>

パスエイリアスを使わない場合、以下のように相対パスで記述する必要があります。

typescriptCopy code<script setup lang='ts'>
  // 相対パスでのインポート（非推奨） import HelloWorld from
  '../components/HelloWorld.vue' import TheWelcome from
  '../components/TheWelcome.vue'
</script>

ディレクトリ階層が深くなると、..​/​..​/​.. のような記述が増えてしまい、可読性が低下します。パスエイリアスを使うことで、常にルートからの絶対パスで記述でき、リファクタリング時にもパスの修正が不要になるのです。

TypeScript の型定義を活用

TypeScript の型定義を使って、プロパティを安全に扱う例を見てみましょう。src​/​components​/​UserCard.vue を作成します。

vueCopy code<script setup lang="ts">
// プロパティの型定義
interface Props {
  name: string;
  age: number;
  email?: string; // オプショナル
}

// defineProps で型を指定
const props = defineProps<Props>();
</script>

テンプレート部分では、型が保証されたプロパティを使用できます。

vueCopy code<template>
  <div class="user-card">
    <h2>{{ props.name }}</h2>
    <p>年齢: {{ props.age }}</p>
    <p v-if="props.email">メール: {{ props.email }}</p>
  </div>
</template>

スタイルは、scoped 属性を付けてコンポーネントに限定します。

vueCopy code<style scoped>
.user-card {
  padding: 1rem;
  border: 1px solid #ddd;
  border-radius: 8px;
}
</style>

この UserCard コンポーネントを別のコンポーネントから使用する際、TypeScript が型チェックを行ってくれます。

vueCopy code<script setup lang="ts">
import UserCard from '@/components/UserCard.vue';

// 正しい使用例
const user = {
  name: '山田太郎',
  age: 30,
  email: 'yamada@example.com',
};
</script>

テンプレートでコンポーネントを使用します。

vueCopy code<template>
  <UserCard
    :name="user.name"
    :age="user.age"
    :email="user.email"
  />
</template>

もし、型が合わないプロパティを渡そうとすると、エディタ上でエラーが表示されます。

vueCopy code<template>
  <!-- エラー: age は number 型が必要 -->
  <UserCard
    :name="user.name"
    :age="'30'"
    :email="user.email"
  />
</template>

このように、TypeScript を使うことで、実行前にエラーを検出でき、バグを減らせるのです。

ESLint と Prettier の連携確認

実際に、ESLint と Prettier が正しく動作するか確認してみましょう。意図的にフォーマットが乱れたコードを書いてみます。

typescriptCopy code// フォーマットが乱れたコード
const user = { name: '山田太郎', age: 30 };
const message = 'Hello';

このコードをファイルに保存すると、Prettier が自動で整形してくれます。

typescriptCopy code// Prettier による自動整形後
const user = { name: '山田太郎', age: 30 };
const message = 'Hello';

さらに、ESLint がコードの問題を指摘してくれます。例えば、未使用の変数があると警告が表示されます。

typescriptCopy code// ESLint の警告例
const unusedVariable = 'これは使われていません'; // 'unusedVariable' is assigned a value but never used

手動で ESLint を実行して、すべてのファイルをチェックすることもできます。

bashCopy code# ESLint でチェック
yarn lint

# 自動修正も実行
yarn lint --fix

これらのツールが連携することで、コードの品質と一貫性が自動的に保たれるのです。

開発サーバーの起動と動作確認

すべての設定が完了したら、開発サーバーを起動して動作を確認しましょう。

bashCopy code# 開発サーバーを起動
yarn dev

ターミナルに以下のようなメッセージが表示されれば成功です。

arduinoCopy codeVITE v5.0.0  ready in 500 ms

➜  Local:   http://localhost:5173/
➜  Network: use --host to expose
➜  press h to show help

ブラウザで http:​/​​/​localhost:5173​/​ にアクセスすると、Vue.js のウェルカムページが表示されます。

ホットリロード機能により、ファイルを編集して保存すると、ブラウザが自動的に更新されます。試しに src​/​App.vue を編集してみてください。

vueCopy code<template>
  <div id="app">
    <h1>Vue.js セットアップ完了！</h1>
    <p>
      TypeScript、ESLint、Prettier、パスエイリアスが動作しています。
    </p>
  </div>
</template>

保存すると、即座にブラウザに変更が反映されるはずです。

ビルドと本番環境への準備

開発が完了したら、本番環境用にビルドを行います。

bashCopy code# 本番ビルド
yarn build

ビルドが成功すると、dist ディレクトリに最適化されたファイルが生成されます。

perlCopy codedist/
├── assets/
│   ├── index-abc123.js
│   └── index-def456.css
└── index.html

ビルドされたファイルは、静的サイトホスティングサービス（Netlify、Vercel、GitHub Pages など）にデプロイできます。

ローカルでビルド結果をプレビューすることもできます。

bashCopy code# ビルド結果をプレビュー
yarn preview

これにより、本番環境と同じ状態で動作を確認できます。

まとめ

この記事では、macOS 環境で Yarn を使って Vue.js プロジェクトを最短でセットアップする方法を解説しました。create-vue を使うことで、TypeScript、ESLint、Prettier が最初から含まれた状態でプロジェクトを作成でき、追加でパスエイリアスを設定することで、開発効率をさらに高められます。

セットアップの各ステップは独立しているように見えますが、実際には相互に連携して動作します。TypeScript が型安全性を提供し、ESLint がコード品質を保ち、Prettier がフォーマットを統一し、パスエイリアスがコードの可読性を向上させるのです。

これらのツールを最初から導入しておくことで、プロジェクトが大きくなっても一貫性を保ちやすくなり、チーム開発でもスムーズに協力できるようになります。また、エディタの自動整形機能により、コーディング中のストレスが減り、本質的なロジックの実装に集中できるでしょう。

ぜひこの記事を参考に、快適な Vue.js 開発環境を構築してみてください。

関連リンク

• Vue.js 公式サイト
• create-vue（Vue プロジェクト作成ツール）
• Vite 公式ドキュメント
• TypeScript 公式サイト
• ESLint 公式サイト
• Prettier 公式サイト
• Yarn 公式サイト
• Vue Router 公式ドキュメント
• Pinia（Vue 状態管理）