Vue CLIが生成したプロジェクトの構成
Vue CLIが生成したプロジェクトの構成を簡単に紹介します。プロジェクトフォルダー直下には、図12のファイルやフォルダーが展開されます。
それぞれのファイルやフォルダーが持つ役割や意味を、表1に示します。
| ファイル／フォルダー名 | 役割 |
|---|---|
| node_modules | インストールされたNode.jsのモジュール |
| public | Webページとして公開されるindex.htmlなどを配置 |
| src | Vue.jsの実装内容を配置 |
| .browserlistrc | 対応するブラウザーを指定するファイル |
| .eslintrc.js | ESLint（Lintツール）の設定ファイル |
| .gitignore | Gitでリポジトリから除外するファイル・フォルダーの指定 |
| babel.config.js | Babelの設定ファイル |
| package-lock.json | プロジェクトで利用するパッケージとバージョンの設定 |
| package.json | プロジェクトの設定ファイル |
| README.md | READMEファイル |
| tsconfig.json | TypeScriptの設定ファイル |
プロジェクトに実装を追加するには、基本的にsrcフォルダー配下にソースコードを配置していきます。プロジェクト生成直後のsrcフォルダーには、図13のファイルが配置されます。
各ファイル／フォルダーの説明を表2に示します。
| ファイル／フォルダー名 | 役割 |
|---|---|
| assets | アセット（Webページの画像ファイルなど）を配置 |
| components | Vue.jsのコンポーネント（ページの一部に対応）を配置 |
| App.vue | Webページ全体に対応するコンポーネント |
| main.ts | App.vueをWebページに表示する処理 |
| shims-vue.d.ts | TypeScriptでVue.jsのコンポーネントを記述するための設定 |
Vue.jsの処理のエントリーポイントになっているのは、main.tsに記述されたリスト4の処理です。
import { createApp } from 'vue' // ...（1）
import App from './App.vue'// ...（2）
createApp(App).mount('#app') //...（3）
（1）で、Vue.js初期化に利用するcreateAppメソッドをインポートします。また（2）で、App.vueファイルからページ全体に対応するAppコンポーネントをインポートしています。（3）のcreateAppメソッドが実行されると、App.vueの内容を、HTML（public/index.html）内に記述された「app」というIDが付いたHTML要素に表示します。
Appコンポーネントを実装するApp.vueはリスト5の通りです。
<template><!--（1）-->
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/> <!--（1a）-->
</template>
<script lang="ts"><!--（2）-->
import { defineComponent } from 'vue';
import HelloWorld from './components/HelloWorld.vue'; // ...（2a）
export default defineComponent({
name: 'App',
components: {
HelloWorld // ...（2b）
}
});
</script>
<style><!--（3）-->
#app {
（略）
}
</style>
この拡張子vueのファイルは「単一ファイルコンポーネント」と呼ばれる形式で記述されており、表示内容を表すHTMLを<template>部（1）に、動作を表すTypeScriptを<script>部（2）に、スタイルを表すCSSを<style>部（3）に、それぞれ記述します。<script>部の「lang="ts"」は、スクリプトをTypeScriptで記述する指定です。
このサンプルでは（2a）でcomponents/HelloWorld.vueに記述された別のコンポーネントHelloWorldをインポートして、（2b）でHelloWorldコンポーネントを利用できるようにし、（1a）で<HelloWorld>タグを記述してHelloWorldコンポーネントを配置します。このように、あるコンポーネントの内側に別のコンポーネントを階層的に配置できます。記述方法の詳細は本連載で順次説明していきます。
前回作成したあいさつWebページをVue CLIとTypeScriptで作る
Vue CLIの基本的な使い方がわかったところで、前回記事でVue.jsやTypeScriptを利用して作成した、あいさつ文を表示するWebページを、Vue CLIを利用して作成してみます。テキストボックスに入力した名前をWebページ上に反映して表示するとともに、ボタンをクリックするとあいさつをダイアログに表示します。
まず、Vue CLIでプロジェクトを生成後、処理内容を記述したTypeScriptファイルmy-first-ts.tsを、プロジェクトのsrc/フォルダー配下に、リスト6の通り作成します。
// クラスの実装（exportキーワードでモジュールにする） ...（1）
export class MyFirstTS {
// プライベート変数
private name = ''; // 型推論でstring型となる ...（2）
// コンストラクター ...（3）
public constructor(newName: string) {
// this.nameはstring型なのでstring型のnewNameが代入できる
this.name = newName
}
// あいさつのメソッド ...（4）
public getGreetText(): string {
return `${this.name}さん、Vue.js + TypeScriptの世界にようこそ!`
}
}
前回記事でも類似ファイルを作成しましたが、前回と違うのは、他のファイルからインポートできるように、（1）のMyFirstTSクラスにexportキーワードを付与している点です。そのほかは前回と同一で、string型の変数name（2）、引数に指定されたstringをnameに反映するコンストラクター（3）、あいさつ文を取得するgetGreetTextメソッド（4）を備えます。
次に、App.vueをリスト7の通り記述します。
<template> <!--（1）-->
あなたの名前：<input v-model="name"><!-- テキストボックス ...（1a）-->
<div>→あなたは{{ name }}さん</div><!-- 名前の表示 ...（1b）-->
<button v-on:click="onButtonClicked()">あいさつ</button> <!-- ボタン ...（1c）-->
</template>
<script lang="ts"><!--（2）-->
import { defineComponent } from 'vue';
import { MyFirstTS } from './my-first-ts'; // MyFirstTSクラスをインポート ...（2a）
export default defineComponent({ // defineComponentはTypeScriptの型推論に必要 ...（2b）
data() { // データ ...（2c）
return {
name: '吉川英一'
}
},
methods: { // メソッド ..（2d）
onButtonClicked() {
// MyFirstTSクラスを利用してあいさつ文を作ってダイアログ表示 ...（2e）
const myFirstTS = new MyFirstTS(this.name)
alert(myFirstTS.getGreetText())
}
}
});
</script>
前回記事でindex.htmlに記述したページの内容は、App.vueの<template>部（1）に、対応するTypeScriptの実装は<script>部（2）に、それぞれ記述します。TypeScriptの型推論を利用するには、（2b）の通り、defineComponentメソッドの引数としてデータやメソッドの実装を記述します。
実装内容自体は前回と類似しており、（1a）のテキストボックスに指定されている「v-model="name"」記述により、（2c）で定義したname変数とテキストボックスの内容がひもづけ（バインディング）され、テキストボックス内容を変更すると、その内容がname変数に反映されるようになります。（1b）の「{{ name }}」には、その時のname変数の内容（つまり、テキストボックス内容と同じ文字列）が表示されます。（1c）のボタンに指定されている「v-on:click="onButtonClicked()」記述により、ボタンのクリック時に（2d）のonButtonClickedメソッドが実行されます。
このサンプルでは、あいさつ文の取得に、リスト6で実装したMyFirstTSクラスを利用しています。（2a）のimport文で、my-first-ts.tsファイルからMyFirstTSクラスを参照し、（2e）ではMyFirstTSクラスにname変数を渡してインスタンスを生成して、そのgetGreetTextメソッドで取得したあいさつ文をダイアログ表示しています。
このように、TypeScriptを使用するように指定してVue CLIで生成したプロジェクトでは、TypeScriptで実装したクラスをそのまま利用できます。
