【サンプル有】Vue.js＋TypeScript - 開発環境構築からWebページ公開までの手順を紹介

Vue.jsは、Webページのユーザーインターフェース（UI）を構築するためのJavaScriptフレームワークです。多くの企業から支援を受けるオープンソースプロジェクトであり、大手による採用例も多数みられます。

本記事ではVue.jsの特徴のほか、パソコン上に開発環境を構築して簡単なWebページを作成するための方法について取り上げました。TypeScriptを用いることで、効率的に作業を進められる手順となっています。ぜひ、Vue.jsをWeb開発に取り入れる際の参考にしてください。

なお、TypeScriptの入門編については、こちらの記事をご覧ください。
【入門】TypeScriptとは？言語の特徴やJavaScriptとの違いを解説

Vue.jsとは

まずはVue.jsとはどのようなフレームワークなのか、その特徴について説明します。今回紹介する手順ではTypeScriptとNode.jsを用いるので、これらとの関係性についても併せてみていきましょう。

Vue.jsの3つの特徴

Vue.jsには、次に挙げるような3つの主要な特徴があります。

・Approachable（親しみやすい）：標準のHTML、CSS、およびJavaScriptを用いて構築できる

・Performant（効率が良い）：応答の早い描画が可能で、手動での最適化がほぼ必要ない

・Versatile（用途が広い）：ライブラリからフル機能のフレームワークまでの間でスケールする

ここで「スケールする」とは、現実の開発プロジェクトに段階的に採用できるということです。Vue.jsは「JavaScriptフレームワーク」とされていますが、必要な機能から少しずつ取り入れていく「JavaScriptライブラリ」のような使い方もできます。この特徴により、導入の際の学習コストについても比較的低く抑えやすいといえるでしょう。

Vue.jsとTypeScriptは相性抜群

Web開発では、JavaScriptの代わりにTypeScriptを使いたいというニーズが少なくありません。TypeScriptは「型」を扱う仕組み（type system）に拡張が施されており、開発者は独自の型を記述できます。こうした理由により、ソースコードの品質や開発スピードの向上が見込めるのです。

これに対してVue.jsは、実は旧バージョンの「Vue 2」まで、TypeScriptのサポートが弱いという意見もありました。TypeScriptのプログラムはJavaScriptにコンパイルされるため、本来であればブラウザ上でも実行できます。しかし、Vue.jsとともにTypeScriptを用いるのは難しかったのです。

2020年9月以降の新バージョン「Vue 3」では、Vue.jsそのものが全面的にTypeScriptで書き直されました。そのため、現在のVue.jsは、TypeScriptとも相性の良いフレームワークとなっています。

Vue.jsの環境構築にはNode.jsがおすすめ

Vue.jsは、既存のWebページに部分的に取り入れる「JavaScriptライブラリ」としての使い方も可能です。小規模な開発であれば、わざわざ環境を整える必要はないと感じるかもしれません。

しかし、このあと紹介する手順でVue.jsの開発環境を構築すれば、より規模の大きな開発にも耐えられるようになるでしょう。TypeScriptのコンパイラが利用でき、さらにローカルで動作する開発用サーバーにより、デバッグ作業も効率的に進めることが可能です。

こうした開発環境は、Node.jsがインストールされたパソコンを用いることで構築できます。Node.jsはWebサービスのサーバーサイドなどに使われるJavaScript実行環境ですが、Vue.jsによる開発用途にも便利なものなのです。

Vue.js＋TypeScriptの開発環境を構築しよう

ここからは、TypeScriptとともにVue.jsを用いてWebページを作成するための、開発環境の構築手順について説明していきます。

手順の一部では、コマンドラインからの操作が必要です。ディレクトリの移動やコマンドの実行といった基本的な操作に慣れていれば、スムーズに作業を進められるでしょう。

なお、開発環境の構築には、Node.jsがインストールされたパソコンが必要です。Node.jsの公式サイトからインストーラーを入手できるので、事前にダウンロードとインストールを済ませておいてください。

Vue.jsの開発用ディレクトリを作成する

TypeScriptによるVue.jsの開発環境には、「Vite」がおすすめです。「Vite」の環境は、「create-vue」というツールで構築します。

次のようにコマンドラインから、Node.jsのnpmコマンドで「create-vue」を実行しましょう。

コマンド：

npm init vue@latest

このコマンドで、Vue.jsの開発用ディレクトリ（フォルダ）が作られます。開発プロジェクト（これから制作するWebサイト）ごとに1つ、Vue.jsの開発環境としてディレクトリを用意するということです。

コマンドを実行すると最初にプロジェクト名を尋ねられるので、任意の名前を入力してください。入力したプロジェクト名（ここでは「vue-practice」）は、そのまま開発用ディレクトリの名前としても使われます。

次に、いくつかの設定項目について質問されるので、「Yes」か「No」で答えていきましょう。TypeScriptを有効にするかどうか聞かれたら「Yes」を選択します。残りの質問については任意ですが、今回の手順を同じように進めるには「No」を選択してください。

入力例：

Project name: … vue-practice
Add TypeScript? … Yes
Add JSX Support? … No
Add Vue Router for Single Page Application development? … No
Add Pinia for state management? … No
Add Vitest for Unit Testing? … No
Add Cypress for both Unit and End-to-End testing? … No
Add ESLint for code quality? … No

すべて入力し終えると、プロジェクト名と同じ名前のディレクトリが作成されます。引き続きコマンドラインから次のように操作して、作成されたディレクトリに移動（cd）し、必要なモジュールをインストールしましょう。

コマンド：

cd vue-practice
npm install

ここまでの操作で、開発用ディレクトリの準備が整いました。

Vue.jsの開発用サーバーを起動する

ディレクトリができたので、次に開発用サーバーを起動してみましょう。この手順は必須ではありませんが、Vue.jsによるコーディングやデバッグの作業を行ないやすくしてくれるものです。

Node.jsのnpmコマンドで、次のようにしてサーバーを起動します。

コマンド：

npm run dev

サーバーが起動すると、コマンドライン上にローカル（localhost）のURLが表示されます。ブラウザを開いて、このURLにアクセスしてみましょう。すると、実際にVue.jsで作られたサンプルページが表示されます。

サンプルページのソースコードは開発用ディレクトリに収められており、自由に編集可能です。これをベースにすれば、Vue.jsによる開発をはじめやすいでしょう。

なお、サーバーを停止したい場合は、起動時と同じコマンドラインの画面に「Ctrl+C」を入力します。

Vue.js＋TypeScriptでWebページを作ってみよう

ここからの手順では、実際にVue.jsを使った開発の流れを体験していきます。TypeScriptのソースコード編集に対応できるテキストエディタ（Visual Studio Codeなど）を用意しておくと、作業がしやすくなるでしょう。

また、HTMLやCSS、JavaScriptの知識がある程度あれば、作業内容の理解もスムーズになります。

Vue.jsのAppを書き換える

開発用ディレクトリを確認すると、srcサブディレクトリ内にApp.vueという名前のファイルがあるのがわかります。これをテキストエディタで開いてみましょう。すると、TypeScriptとHTML、CSSがミックスされたソースコードが見えます。

この記法は、「単一ファイルコンポーネント（SFC）」と呼ばれるものです。Webアプリを構成する「コンポーネント（component）」ごとに、関連する記述を1つのファイルにまとめておけるため、情報を整理しやすい書き方だといえます。

では、App.vueを次のサンプルコードのように書き換えてみましょう。

サンプルコード（App.vue）：

<script setup lang="ts">
</script>

<template>
  <main>
    <h1>Vue.jsの練習</h1>
  </main>
</template>

<style scoped>
  h1 {
    color: red;
  }
</style>

これは、見出しが1つあるだけの単純なページを表示するものです。HTMLで見出し（h1タグ）を追加し、その色をCSSで指定しました。TypeScriptの部分はまだ使わないので、空になっています。

ファイルを保存したら、ブラウザでの表示がどうなったか確認してみてください。正しく編集できていれば、自動的にページが再読み込みされて見出しが表示されている様子がわかるでしょう。

Vue.jsのAppにコンポーネントを埋め込む

コンポーネントをうまく活用すれば、ユーザーインターフェースを組み立てやすくなります。ここでは、「MyPractice」という名前のコンポーネントを追加してページに埋め込んでみましょう。

srcディレクトリ中にcomponentsというディレクトリが用意されているので、新しいコンポーネントはこちらに追加することにします。テキストエディタで新規ファイルを作成して次のソースコードを入力し、ファイル名をMyPractice.vueとして保存してください。

サンプルコード（MyPractice.vue）：

<script setup lang="ts">
</script>

<template>
  <p>コンポーネントの練習です。</p>
</template>

<style scoped>
</style>

このコンポーネントは、段落（pタグ）を1つ表示させるだけの単純な構造になっています。

それでは、MyPractice.vueをページに埋め込んでみましょう。テキストエディタで再びApp.vueを開いて、次のように編集します。

サンプルコード（App.vue）：

<script setup lang="ts">
  import MyPractice from "./components/MyPractice.vue"
</script>

<template>
  <main>
    <h1>Vue.jsの練習</h1>
    <MyPractice />
  </main>
</template>

<style scoped>
  h1 {
    color: red;
  }
</style>

TypeScriptの部分に、インポート（import）が追加されたのがわかるでしょうか。これにより、App.vueからMyPractice.vueを使えるようになります。

実際にコンポーネントを埋め込んでいるのは、HTMLの部分です。コンポーネント名をそのままHTMLのタグ名に置き換えて記述すれば、対応するコンポーネントを埋め込むことができます。

ファイルを保存してブラウザを見ると、ページにコンポーネントの内容が埋め込まれている様子を確認できるでしょう。

Vue.jsのコンポーネントでonclickイベントを処理する

Webアプリには、ユーザー操作に反応するインタラクティブな処理が欠かせません。そこで「MyPractice」を、「ボタンを押すとメッセージが切り替わる」という機能をもつコンポーネントにしてみましょう。

そのためには、Vue.jsに備わっている「ref」と呼ばれる仕組みを使うのが手軽な方法です。これにより、ボタンが押される前後で内容が変わる変数を使えるようになります。

MyPractice.vueを、テキストエディタで次のように編集しましょう。

サンプルコード（MyPractice.vue）：

<script setup lang="ts">
  import { ref } from "vue";

  const message = ref("ボタンを押してください。");

  function handleClick() {
    message.value = "ボタンが押されました！";
  }
</script>

<template>
  <p>{{ message }}</p>
  <button @click="handleClick">ボタン</button>
</template>

<style scoped>
</style>

TypeScript部分では、次のような処理を行なっています。

・refを用いて、メッセージを格納する変数（message）を作っておく

・イベントハンドラ（handleClick）で、メッセージをボタンが押された場合の内容に更新する

また、メッセージがHTMLにも埋め込まれている様子がわかるでしょうか。HTML部分にはテンプレートとしての働きがあり、二重の中カッコを用いた記法で変数の内容を埋め込むことができます。メッセージの内容が変われば、表示も自動的に切り替わる仕組みです。

Vue.jsのコンポーネントにpropsで引数を渡す

今のところ、「MyPractice」コンポーネントのソースコードには、ページ内に表示するメッセージが直接書かれている状態です。コンポーネントとしての汎用性を高めるために、メッセージを引数で渡せるようにしてみましょう。

それには、Vue.jsの「props」と呼ばれる仕組みを利用するのが便利です。具体的には、MyPractice.vueを次のように編集します。

サンプルコード（MyPractice.vue）：

<script setup lang="ts">
  import { ref } from "vue";

  const props = defineProps<{
    initialMessage: string
    clickedMessage: string
    buttonLabel: string
  }>();

  const message = ref(props.initialMessage);

  function handleClick() {
    message.value = props.clickedMessage;
  }
</script>

<template>
  <p>{{ message }}</p>
  <button @click="handleClick">{{ props.buttonLabel }}</button>
</template>

<style scoped>
</style>

TypeScript部分に、definePropsという記述があるのがわかるでしょうか。これは、コンポーネントがもつプロパティ（props）の形式を指定して、引数として受け取れるようにするためのものです。ここでは、以下3つのプロパティがあるものとしました。

・最初に表示するメッセージ（initialMessage）

・ボタンが押されたら表示するメッセージ（clickedMessage）

・ボタンのラベル（buttonLabel）

これらのプロパティはrefで変数に与える初期値と、イベントハンドラで更新する値、そしてHTMLタグに埋め込む内容として使われています。

プロパティの内容を指定するのは、コンポーネントを使う側であるApp.vueの役割です。次のサンプルコードを見てください。

サンプルコード（App.vue）：

<script setup lang="ts">
  import MyPractice from "./components/MyPractice.vue"
</script>

<template>
  <main>
    <h1>Vue.jsの練習</h1>
    <MyPractice
      initialMessage="ボタンを押してください。"
      clickedMessage="ボタンが押されました！"
      buttonLabel="ボタン"
    />
    <MyPractice
      initialMessage="スイッチを押して！"
      clickedMessage="スイッチが押された！"
      buttonLabel="スイッチ"
      />
  </main>
</template>

<style scoped>
  h1 {
    color: red;
  }
</style>

HTMLタグの属性と同様の書き方で、コンポーネントに渡すプロパティの内容を記述できることがわかるでしょう。今回作成したのは「MyPractice」のみですが、これをページ内に複数埋め込み、それぞれに異なるプロパティを指定する使い方も可能です。

Vue.js＋TypeScriptのWebページをビルドしてみよう

Vue.jsのWebページをインターネットに公開するには、「ビルド」という操作で公開用のファイル形式に変換する作業が必要です。

ビルドはNode.jsのnpmコマンドで行ないます。コマンドラインから次のように入力して、作成したWebページをビルドしてみましょう。

コマンド：

npm run build

開発用ディレクトリでビルドを実行すると、「dist」という名前のサブディレクトリが作られ、公開用のファイル一式が格納されます。あとはWebサーバーさえあれば、これらのファイルをまとめてアップロードすることでVue.jsのWebページを公開可能です。

なお、デフォルトの設定では、ビルドされたファイルはWebサーバーのドキュメントルート（「htdocs」など）直下に配置する必要があります。

Vue.js＋TypeScriptでインタラクティブなWebページを作成しよう

Vue.jsは、Webページのユーザーインターフェース構築を効率化するのに役立つ、親しみやすいフレームワークです。最新バージョンではTypeScriptとの相性も改善され、より品質や開発スピードの向上が見込めるようになりました。

Vue.jsと共通の目的で用いられるものとしては、「React」が挙げられます。Vue.jsは学習コストが比較的低いといわれていますが、複雑なWebアプリもコンポーネントの組み合わせで開発できる点などは、実はReatとも似ている部分です。

そこで、具体的な手順を見比べながら両者の違いがわかるよう、本記事の「React版」も用意しました。ぜひ、併せて参考にしてみてください。
【サンプル有】React＋TypeScript - 開発環境構築からWebページ公開までの手順を紹介