Vueを始める。#

VueはReact,Angularに並ぶ3大フロントエンドフレームワークといえます。

Vueの役目はHTMLをユーザの操作に応じて適切に書き換えることです。

早速、Vueを始めていきましょう。

前提#

すでに、ここから来たなどで、nodeプロジェクト（npm init を実行しているディレクトリで作業する場合）は以下の手順は不要です。ターミナル（もしくはコマンドプロンプト。以下ターミナルに寄せます。）を開き、プロジェクトのルートディレクトリにcd しておいてください。

このページから作業を開始する方は以下を行っておいてください。

Node.jsをインストールしておいてください。
必須ではないですが、Visual Studio Codeをインストールして、ファイルの編集に使うと便利です。
nodeプロジェクトを以下のコマンドで初期化してください。

mkdir vue_inspect
cd vue_inspect
npm init -y
npm i typescript

Vueおよび開発ツールのインストール#

npmコマンドででVueの開発ツールをインストールします。

まずはVueをインストールします。

以下のコマンドをターミナルで実行してください。

npm install vue

次に、開発ツールをインストールします。長いですが、一行で入力してください。

npm install -D vue-loader vue-template-compiler webpack webpack-cli terser-webpack-plugin optimize-css-assets-webpack-plugin copy-webpack-plugin node-sass css-loader babel-loader @babel/core @babel/preset-env typescript ts-loader

次に webpack.front.config.js というファイルを作成します。

const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const CopyPlugin = require('copy-webpack-plugin')

module.exports = {
    entry: './src/front/ts/index.ts',
    output: {
        path: path.resolve(__dirname, 'dist', 'public', 'js'),
        filename: 'bundle.js'
    },
    devServer: {
        contentBase: path.resolve(__dirname, 'public')
    },
    watchOptions: {
        poll: true
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.js$/,
                loader: 'babel-loader'
            },
            {
                test: /\.ts$/,
                use: [{
                    loader: 'ts-loader',
                    options: {
                        appendTsSuffixTo: [/\.vue$/],
                        configFile: "tsconfig.front.json"
                    }
                }]
            },
            {
                test: /\.css$/,
                use: ['vue-style-loader', {
                    loader: 'css-loader',
                    options: {
                        esModule: false,
                    }
                }],

            }
        ]
    },
    resolve: {
        extensions: ['.js', '.ts', '.vue', '.json'],
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        }
    },
    plugins: [
        new VueLoaderPlugin(),
        new CopyPlugin({
            patterns: [
                {
                    from: "**/*.html",
                    to: "../",
                    context: "./src/front/public/",
                },
            ]
        })
    ]
}

webpackという、ファイル間の依存関係を解決して、ファイルをまとめてくれるツールの設定ファイルです。

さらに、tsconfig.front.json というファイルを作成します。

{
  "include": [
    "src/front/**/*"
  ],
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "rootDir": "./src/front",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

TypeScriptのコンパイルオプションを設定するファイルです。

更には、TypeScriptから.vueファイルを読めるようにしていきます。

mkdir -p src/front

でディレクトリを作成し、 src/front/shims-vue.d.tsに以下の内容のファイルを作成します。

declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

これでVueの開発環境が整いました。

VueでWebページを作成する。#

VueでWebページを作成していきます。まず、ソースファイルを作成するための場所を作成します。

mkdir -p src/front/public

src/front/public/index.htmlに以下の内容のファイルを作成します。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>My App</title>
    </head>
    <body>
        <div id="app"></div>
        <script src="./js/bundle.js"></script>
    </body>
</html>

index.htmlがブラウザに表示されるアプリケーションのベースになります。index.htmlによりjs/bundle.jsがブラウザにダウンロードされ、js/bundle.jsでVueアプリが構築されます。

次に、読み込まれる js/bundle.js のもととなるTypeScriptファイルを作成します。 src/front/ts というディレクトリを作成するために、ターミナルで以下のコマンドを実行します。

mkdir -p src/front/ts

src/front/ts/index.tsに以下の内容のファイルを作成します。

import Vue from 'vue'
import App from '../components/App.vue'

new Vue({
  el: '#app',
  components: { App },
  template: '<app/>'
})

index.tsはVueの起動を行います。 src/front/components/App.vueを読み込んで、index.htmlに埋め込む、ということが書かれています。

App.vueを配置するディレクトリを作成します。

mkdir -p src/front/components/

src/front/components/App.vueに以下の内容のファイルを作成します。

<template>
  <div>
    <p>{{message}}</p>
  </div>
</template>
<script lang="ts">
import Vue from "vue";

export default Vue.extend({
  data() {
    return {
      message: "Vue動いたよ！"
    };
  }
});
</script>

App.vueはVueのコンポーネントと呼ばれるものです。 <template></template>に囲まれている部分がHTMLで画面を書く部分です。 <script></script>に囲まれている部分がTypeScriptで処理を書く部分です。 data()でreturn するデータをHTML部で使うことができます。

これでVueアプリの作成が完了しました。 Vueアプリが動くようにビルドしてみましょう！

ターミナルで以下のコマンドを実行します。

npx webpack --config webpack.front.config.js

すると、dist/public ディレクトリにindex.htmlとjs/build.jsが出来上がります。 Finderやエクスプローラ上でdist/public/index.htmlをダブルクリックしてみましょう。

Vue動いたよ！と表示される

このように表示されたら完成です！

編集時に自動的にビルドされるようにする。#

今の所、画面を編集するたびに webpackコマンドを実行しなければなりません。

自動的にビルドするためには webpackに--watchオプションを設定して実行します。

npx webpack --config webpack.front.config.js --watch

終了するにはターミナルでControl(もしくはCtrl)を押しながらCキーを押します。また、エラーが出ているので、

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

内容を読んで、webpackのオプションを追加します。

npx webpack --config webpack.front.config.js --watch --mode development

ちょっと長くなったので、コマンドをpackage.jsonに追加して、コマンドを実行しやすくします。

package.jsonから以下の様になっている行を見つけて、コマンドを追加します。

  //省略
  "scripts": {
    //省略
  }
  //省略

となっている場所に一行追加して

  //省略
  "scripts": {
    "watch:front": "webpack --config webpack.front.config.js --watch --mode development",
    //省略
  }
  //省略

行末の , を忘れないでください。これで、

npm run watch:front

と実行して、ファイルを変更すると、自動的にコンパイルがなされます。フロントのコンパイルができるようになったので、次は画面を作ってみましょう！

ご質問・ご要望をお待ちしています。