create-vueでVue3のプロジェクトを作成する手順

はじめに

以下の記事はVue.jsのプロジェクトを作成する過程を学習した際の備忘録になります

修正点および加筆が必要な場合は都度更新します

create-vueについて

現段階で最新バージョンであるVue 3のプロジェクトを迅速にセットアップするための公式ツールです。

従来はVue CLIというツールを使用してプロジェクトを作成していましたが、現在ではVue.jsコミュニティからも支持を受けているcreate-vueが推奨されており、シンプルなコマンドで新しいプロジェクトを簡単に作成できます。

Node.jsのインストール

Vue.js 3は少なくともNode.js 16.x以上のバージョンが必要です。
以下のコマンドでNode.jsがインストールされているか確認できます

node -v

バージョンが表示されない場合はNode.js公式サイトからNode.jsをインストールする必要があります

create-vueの実行

プロジェクトを置きたいディレクトリにカレントディレクトリを合わせた後、以下のコマンドを実行することで、Vue.jsのプロジェクトを作成できます。

npm create vue@latest

create-vue パッケージがローカル（PC）にインストールされていない場合は以下のようなメッセージが出るため、インストールを進めるためには「y」を入力してEnterキーを押します

Need to install the following packages:
  create-vue@3.11.1
Ok to proceed? (y) y

実行中にエラーが発生した場合

インストール時、次のようなエラーが発生した場合は現在のNode.jsのバージョンがcreate-vueパッケージの要件を満たしていないため、Node.jsのアップグレードが必要です

以下の場合、現在v16.13.0に対し、Node.jsのバージョンは18.3.0以上が必要

npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: 'create-vue@3.11.1',
npm WARN EBADENGINE   required: { node: '>=v18.3.0' },
npm WARN EBADENGINE   current: { node: 'v16.13.0', npm: '8.12.2' }
npm WARN EBADENGINE }

最新バージョンにnpmをアップデートするコマンド

npm install -g npm

Node.jsが最新バージョンのnpmに対応していない場合、以下のコマンドでNode.jsを最新までバージョンアップさせることができます

nvm install --lts　　　// 最新のNode.jsのLTSバージョンをインストールする
nvm use --lts　　　　　//インストールしたバージョンを使用するように設定する

オプションの設定

プロジェクト名称や以下の追加オプション設定有無を問われるため、YES/NOを選択します

※プロジェクト名はキャメルケースまたはスネークケースが推奨されます
例：MyComponent , my-component

• プロジェクトの名称
• TypeScriptの追加有無
• JSX（JavaScript XML）の追加有無
• Vue Router追加の有無
• Piniaの追加有無
• Vitestの追加有無
• エンドツーエンド（E2E）の追加有無
• ESLintの追加有無
• Vue DevToolsの追加有無

全て選択し終わると、プロジェクトが作成されます

オプションについての補足

TypeScriptのメリット

TypeScriptはJavaScriptを拡張した言語で、JavaScriptの文法や機能をすべてサポートしています。それに加え、TypeScriptでは以下のようなメリットがあります。

型安全性の向上

TypeScriptは変数や関数の型を明示的に指定でき、誤ったデータ型が使われた場合にはエラーを表示してくれます。これにより、実行前にエラーを検知できるため、バグの発生を未然に防げます。

例.ts

function greet(person: string): string {
    return "Hello, " + person;
}

greet("Bob"); // 正常

greet(123); // エラー: Argument of type 'number' is not assignable to parameter of type 'string'.

IDEでの充実したコード補完

• TypeScriptは、統合開発環境（IDE）でのコード補完や型情報のサポートが充実しています。これにより、関数やプロパティの候補が自動的に表示され、開発効率が向上します。また、データ型が異なる場合も即座にエラーとして指摘されます

JSXのメリット

JSX（JavaScript XML）は、JavaScript内でHTMLのような構文を使える記法です。これにより、UIの構築が直感的かつ簡潔になります。

例えば、Vueファイルのtemplateタグにv-ifを使って条件がtrueのときのみHTMLを表示させる場合、通常はrenderメソッドにcreateElement関数を使用して次のようにHTMLを動的に作成します。

<template>
  <div>
    <h1 v-if="isLoggedIn">Welcome back!</h1>
    <h1 v-else>Please log in.</h1>
    <div>
      <!-- createElementを使った動的なHTML生成 -->
      <div v-if="isLoggedIn">
        {{ createGreetingMessage() }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoggedIn: true // ログイン状態を管理するデータ
    };
  },
  methods: {
    createGreetingMessage() {
      return this.isLoggedIn 
        ? this.$createElement('p', 'Glad to see you here!')
        : this.$createElement('p', 'We miss you! Please come back.');
    }
  }
}
</script>

しかしJSXを使うと、さらに簡潔にコードを記述することができます

<template>
  <div>
    <h1 v-if="isLoggedIn">Welcome back!</h1>
    <h1 v-else>Please log in.</h1>
    <div>
      <!-- createElementを使った動的なHTML生成 -->
      {isLoggedIn && this.createGreetingMessage()}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoggedIn: true // ログイン状態を管理するデータ
    };
  },
  methods: {
    createGreetingMessage() {
      return this.isLoggedIn 
        ? <p>Glad to see you here!</p> // JSXを使った場合
        : <p>We miss you! Please come back.</p>; // JSXを使った場合
    }
  },
  render() {
    return (
      <div>
        <h1>{this.isLoggedIn ? 'Welcome back!' : 'Please log in.'}</h1>
        <div>
          {this.isLoggedIn && <p>Glad to see you here!</p>}
        </div>
      </div>
    );
  }

}
</script>

コードの補足

$createElementメソッド

Vue.jsが提供する特別なメソッドで、createElementと同じ機能を持っています。
thisキーワードを使って呼び出すことで、Vueインスタンスのコンテキスト内でこのメソッドを利用できます。
通常、renderメソッドの引数として渡されるcreateElementと同様の役割を果たしますが、thisを介して呼び出すことで、インスタンスのデータやメソッドにアクセスできます。

&&

&&の左側の条件がtrueである場合のみ、右側の式が実行されます。

{this.isLoggedIn && <p>Glad to see you here!</p>}

Vue Router

Vue.jsアプリケーションでのルーティングを管理するための公式ライブラリです。ルーティングとは、ユーザーが特定のURLにアクセスしたとき、どのコンポーネントを表示するかを決定する機能を指します

router/index.js

import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';

Vue.use(Router);

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
    },
    {
      path: '/about',
      name: 'about',
      component: About,
    },
  ],
});

Pinia（ピニア）

Piniaは、Vue.jsのための状態管理ライブラリで、特にVue 3と非常に親和性があります。

アプリ全体で共有されるデータ（状態）を管理するストアという機能を持っており、ストアを各コンポーネントにインポートすることで、各コンポーネント間でデータの受け渡しを行うことができます。

ストアの具体例

storesフォルダにストアファイルを作成し、ユーザーのログイン状態やカートの内容など、アプリケーション全体で使いたいデータや関数（メソッド）を定義することで、ストアにデータを保存できます。

ストアファイルは各コンポーネントでimportすることができ、ストアファイルに格納されたデータを各コンポーネントで利用できるため、例えばカートに商品を追加する処理をストアで行った場合、カートの内容を表示するコンポーネントが自動的に更新されます。

Vitest

Vue.jsや他のJavaScriptプロジェクトで使うことができる「テストツール」です。テストツールは、アプリケーションが正しく動いているかどうかを確認するために使います

エンドツーエンド（E2E）

ソフトウェアやアプリケーションの全体の動作を確認するためのテスト手法です。このテストでは、ユーザーがアプリケーションを使用する際の実際の操作を模倣して、最終的な成果物が期待通りに機能するかどうかを検証します

ESLint（イーエスリント）

JavaScriptやTypeScriptのコード品質を向上させるためのツールです。具体的には、コードのスタイルやエラーを自動的にチェックし、開発者がより良いコードを書く手助けをします。

プロジェクト作成時にESLintを選択した場合、プロジェクト内のすべての関連ファイルを整備してくれるため、手動で設定を行う必要が少なくなります。

コードチェックの方法について

チェックしたいファイルやディレクトリに対して、以下のコマンドを実行することで、コードのスタイルを統一し、エラーを早期に発見することができます

npx eslint yourfile.js

Vue DevTools

Vue.jsで開発されたアプリケーションをデバッグおよび分析するためのブラウザ拡張機能です。このツールを使用すると、Vueコンポーネントの状態やイベント、データフローなどを視覚的に確認し、アプリケーションの動作を効率的に理解することができます。

Vueプロジェクト作成時のオプションで選択すると、ブラウザのVue DevToolsを利用する準備を整いますが、ローカルのブラウザには手動で拡張機能ストアから手動でダウンロードしてインストールする必要があります。