Vue.jsインストール、プロジェクトの作成

Vue.jsは、UIとSPA（Single Page Application）の構築を容易にするために設計されたオープンソースのJavaScriptフレームワークです。2014年にエヴァン・ユーによって作成され、宣言的なデータバインディングとコンポーネントベースのアーキテクチャを提供します。

双方向リアクティブバインディング: データとDOMが双方向に同期されるため、データ変更が自動的にDOMに反映されます。
コンポーネントベースのアーキテクチャ: 再利用可能なコンポーネントでコードを分割することで、コードの管理が容易になり、スケーラビリティも向上します。
ディレクティブ: v-bind、v-model、v-for、v-ifなどを使用して、HTMLテンプレート内で簡潔にデータバインディングや条件分岐を記述できます。
ツールサポート: Vue CLIを使用することで、プロジェクトのセットアップやビルドプロセスが簡単になります。

Vue.jsの利用方法
1. CDN（コンテンツデリバリネットワーク）を使用する
npmを使用する

Vue.jsの利用方法

CDN（コンテンツデリバリネットワーク）を使用する

Vue.jsを簡単に試す方法として、CDNを使用してスクリプトをHTMLファイルに読み込む方法があります。この方法は、小規模なプロジェクトや試験的な開発に最適です。特別なセットアップやビルドツールが不要で、すぐにVue.jsを使い始められます。
Vue 2 の例

<!DOCTYPE html>
<html>
<head>
  <title>Vue.js Example</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue.js!'
      }
    });
  </script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <title>Vue.js Example</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue.js!'
      }
    });
  </script>
</body>
</html>

HTML

Vue 3 の例

<!DOCTYPE html>
<html>
<head>
  <title>Vue.js 3 Example</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>

  <script>
    const { createApp } = Vue;

    createApp({
      data() {
        return {
          message: 'Hello Vue.js 3!'
        };
      }
    }).mount('#app');
  </script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <title>Vue.js 3 Example</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>

  <script>
    const { createApp } = Vue;

    createApp({
      data() {
        return {
          message: 'Hello Vue.js 3!'
        };
      }
    }).mount('#app');
  </script>
</body>
</html>

HTML

npmを使用する

Vue.js の新規プロジェクトを作成する場合は、まず npm create vue@latest を使うのが現在の最も標準的な方法です。Vue 公式では create-vue が公式のプロジェクト作成ツールとして案内されています。

npm create vue@latest

次のコマンドでもほぼ同じ意味になります。

npm init vue@latest

npm init vue@latest

npm の仕様では npm init ＜名前＞は create-＜名前＞を実行する仕組みのため、npm init vue@latest は create-vue を呼び出します。

プロジェクト名を指定して作成する場合は、次のように入力します。

npm create vue@latest vue-project

npm create vue@latest vue-project

作成後は、以下の順で進めます。

cd vue-project
npm install
npm run dev

cd vue-project
npm install
npm run dev

npm run dev を実行すると、Vite の開発サーバーが起動し、ローカル環境で Vue アプリを確認できます。Vue の現在の公式ツールチェーンは Vite ベースです。

このコマンドで行われること

npm create vue@latest または npm init vue@latest を実行すると、公式の create-vue が起動し、Vue.js プロジェクトのひな形が作成されます。実行中には、TypeScript や Vue Router、テスト機能などのオプションを追加するかどうかを対話形式で選択できます。

package.json が作成されます。
src フォルダなど、Vue アプリに必要な基本構成が生成されます。
Vite ベースの開発環境がセットアップされます。
npm run dev で開発サーバーを起動できるようになります。

npx create-vue@latest

npx create-vue@latest でも、Vue.js の新規プロジェクトを作成できます。これは Vue 公式の作成ツール create-vue を、その場で取得して実行する方法です。グローバルに Vue CLI をインストールしなくても使えるため、必要なときだけ手軽に実行できます。

実際の用途は npm create vue@latest とほぼ同じで、作成時には TypeScript や Vue Router などの追加機能を対話形式で選べます。まず試したい場合や、環境をできるだけシンプルに保ちたい場合に便利です。

npx create-vue@latest my-vue-project
cd my-vue-project
npm install
npm run dev

npx create-vue@latest my-vue-project
cd my-vue-project
npm install
npm run dev

この方法なら、Vue CLI を常時インストールしなくても、すぐに Vue 開発を始められます。

Vue CLI について

以前は Vue CLI を使って Vue プロジェクトを作成する方法が一般的でした。たとえば、次のようにグローバルインストールして利用していた方も多いと思います。

npm install -g @vue/cli

npm install -g @vue/cli

Bash

インストール後は、次のようなコマンドが使えます。

vue --version
vue create my-project

vue --version
vue create my-project

Bash

ただし、現在 Vue CLI は Maintenance Mode とされており、新規プロジェクトでは create-vue の利用が推奨されています。つまり、これから新しく Vue.js を始める場合は、Vue CLI を新規導入する必要は基本的にありません。既存の Vue CLI プロジェクトを保守する場面では使われますが、新規作成には npm create vue@latest を選ぶのが無難です。