Vue をパッケージ管理アプリを利用して使う！

Vue をパッケージ管理アプリを利用して使う！

前回は、HTML の中に Vue の記述を書いて Vue を利用する方法を紹介しました。今回は、パッケージ管理アプリを利用して、Vue を使うやり方です。この方法は、公式チュートリアルで学んだ方法と同じやり方で Vue を利用する事ができます。

この記事を読むのに必要な前提条件は：

プログラムを入力するためのエディタがインストールされている（VSCODなど）

NodeJSがインストールできる

コマンドラインの使い方がわかる（Windows の PowerShell や Mac/Linux のターミナル）

まずは、この記事をお読みになる前に、VSCODE などのエディタをインストールして、簡単にアプリを開いてみてください。

パッケージ管理アプリとは？

パッケージ管理アプリは、インターネット上に公開されている誰かが既に開発したモジュール（部品）を自分の開発のプロジェクトに取り込むためのアプリです。よく利用する基本的な機能は、大抵は誰かが作ってインターネット上で公開されています。そうしたモジュール（部品）を活用することで、アプリの開発を効率的に行う事ができます。

よく利用されている、パッケージ管理アプリは幾つかありますが、この記事では、「_npm_」というパッケージ管理アプリを利用して、Vue を使うやり方を紹介します。

「_npm_」は、「_NodeJS_」という Javascript のプログラムを、Web ブラウザではなく、PC 上で動かす際に利用するパッケージに入っています。NodeJS のサイトからダウンロードできます。インストールのやり方は NodeJS のサイトを参考にしてください。

Vite を使う

Vue のプロジェクトを作成するのに、Viteを利用します。 コマンドラインから、以下のコマンド「% npm init vue」を実行します。

途中、いくつかのプロジェクト名を含む幾つかの質問に答えるとプロジェクトを自動で作ってくれます。最初の「OK to proceed/」は、「y」で、その後にプロジェクト名をタイプして、後の質問はとりあえず、全て「No」で良いと思います。

% npm init vue

Need to install the following packages:

  create-vue

Ok to proceed? (y)

Vue.js - The Progressive JavaScript Framework

✔ Project name: … vue-sample-project

✔ Add TypeScript? … No / Yes

✔ Add JSX Support? … No / Yes

✔ Add Vue Router for Single Page Application development? … No / Yes

✔ Add Pinia for state management? … No / Yes

✔ Add Vitest for Unit Testing? … No / Yes

✔ Add Cypress for both Unit and End-to-End testing? … No / Yes

✔ Add ESLint for code quality? … No / Yes

Scaffolding project in /Users/Guest/Documents/projects/vue-sample-project...

Done. Now run:

  cd vue-sample-project

  npm install

  npm run dev

%

これが終了したら、実行の最後に出てきたコマンドを実行します。

% cd vue-sample-project

% npm install

% npm run dev

これで、サンプルの Vue のプロジェクトが作成されて、必要なモジュールがインストールされて、開発用の Web サーバーが起動されます。Web ブラウザで「localhost:3000」を入力すると、Vue のアプリにアクセスできます。

自分の Vue のアプリを動かすには？

プロジェクトのフォルダ（作成したプロジェクトのフォルダ）、この例では、「vue-sample-project」の下にある「src」のフォルダにある、App.vueを編集します。

例えば、公式チュートリアルの、ステップ４で作成した、ボタンをクリックする度に、ボタンのカウントの数字が１づつ増えるアプリの場合は、以下のコードをApp.vueに書けば OK です。

<script>

export default {

  data() {

    return {

      count: 0,

    };

  },

  methods: {

    increment() {

      this.count++;

    },

  },

};

</script>

<template>

  <button ＠click="increment">count is: {{ count }}</button>

</template>

開発用の Web サーバーが起動されている場合は、App.vueのファイルを保存すると、自動的に画面も更新されます。開発用の Web サーバーが起動されていない場合には、プロジェクトフォルダで以下のコマンドを実行すると起動されます。

% npm run dev

不要なファイルの削除

サンプルプロジェクトでは、デモの表示のための Vue の記述が自動的に作られています。 自分でアプリを開発する場合には、不要なので削除します。

% rm -rf src/assets

% rm -rf src/components

(*) Linux/Mac の例です

後は、App.vueを編集したり、ChildComp.vueを作成すれば、公式チュートリアルで学習したアプリを実際に動かす事ができます。

まとめ

パッケージ管理アプリを利用して、Vue を使う場合、これまで学習した、公式チュートリアルのかくステップのページに近い感覚で Vue を利用する事ができます。 この方法だと、インターネットに公開するのも簡単です。実際にインターネットに公開する例を次回の記事で紹介する予定です。2022 年 3 月 21 日にお届けする予定です。