1.はじめに

近年、web関係で「クライアントサイドJavaScript」というのがトレンドになっているそうです。

「クライアントサイドJavaScript」と、従来のWebアプリケーションとの違いは、ブラウザ側での動作が中心となることです。

従来のWebアプリケーションでは、Webサーバでの処理が中心でしたが、「クライアントサイドJavaScript」では、ブラウザ側での処理が中心となってきて、かつ、ユーザの使い勝手の良さが重要になってきます。

仕事でちょうど簡単なweb画面を1からつくる機会があり、クライアントサイドJavaScriptを使うことにしました。

現在使われているクライアントサイドJavaScriptは以下のようなものがあります。

AngularJS
React.js
Vue.js

この中でも一番簡単そうなVue.jsを使用してみました。

1.1 Vue.jsとは

Vue.jsとは、以下のようなJavaScript用ライブラリです。

View のみ
リアクティブデータバインディング
HTMLの各タグとデータを自動的に結び付ける
コンポーネントベース
簡単なAPI

お手軽ライブラリのようなので、入門的に導入してみました。

ここでは、Vue.jsを素で扱うのではなく、[Nuxt.js]を使用しようと思います。

1.2 Nuxt.jsとは

Vue.jsは比較的簡単に使用できますが、それでも、なんらかの準備は必要です。
Nuxt.jsとは、その準備を一通りやってくれるフレームワークと思えばいいでしょう。

主な特徴は以下の通りです。

Vue ファイルで記述できる
サーバーサイドレンダリング
ES6/ES7 のトランスパイレーション
モジュール構造で拡張できる

Vue.jsで実装する、vueファイルを追加するだけでいいので、Vue.jsだけを使用するより手軽に実装できます。

2.Nuxt.jsの導入

まず、Nuxt.jsを試す環境を導入してみます。

前提環境

OS: Ubuntu 16.04
Nuxt.js 2.4.3
node 9.4.0
npm 6.0.0

環境構築

Nuxt.jsをインストールします。

$ sudo npm i -g vue-cli
$ vue init nuxt/starter todo
$ cd todo
$ npm install
### package.jsonを修正
"dependencies": {
  "nuxt": "^1.4.0",
$ npm update

3.Nuxt.jsサンプル(TODO)の作成

上記で、Nuxt.jsを書ける環境が整ったので、サンプルを作成してみます。

サンプルは、[nuxtjs-sample-todo]に置いてあります。

ディレクトリ構成

インストール直後のディレクトリ構成は以下の感じです。

assets/
components/
layouts/
node_modules/
middleware/
nuxt.config.js
package.json
pages/
plugins/
static/
store/

todo vueコンポーネントの作成

todo用のvueコンポーネントは以下の通りです。

「v-model=”newTodo」「v-for=”(todo, index) in todos”」がデータバインディング
- 画面上のinputを変更すると、「newTodo」変数が変更されます。
- 「todos」を変更すると、画面上のリスト表示が変更されます。
「@keyup.enter」や「@click」がイベント受信
- enterや、クリックすることでVueモデルの処理に移行します。

以下をpages/todo/index.vueとして格納します。
追加するファイルはこの一つだけというのが、Nuxt.jsのいいところです。

<template>
    <div>
        <input v-model="newTodo" @keyup.enter="addTodo" />
        <ul>
        <li v-for="(todo, index) in todos" :key="todo.id">
            <span>{{ todo.text }}</span>
            <button @click="removeTodo(index)">X</button>
        </li>
        </ul>
    </div>
</template>

<script>

export default {
    data () {
        return {
            newTodo: '',
            todos: [
                { text: 'TODOを追加してください' }
            ]
        }
    },
    methods: {
        addTodo () {
            var text = this.newTodo.trim()
            if (text) {
                this.todos.push({ text: text })
                this.newTodo = ''
            }
        },
        removeTodo (index) {
            this.todos.splice(index, 1)
        }
    }
}
</script>

ほぼ見ての通りですが、一つだけ注意する必要があるのは、todosが配列で定義されているため、push/spliceを使う必要がある点です(時々、はまったりします)直接配列に代入すると画面が変更されません。

起動

別ホストからアクセスできるように、package.jsonに以下を追加します。

"scripts": {
  "dev": "HOST=0.0.0.0 PORT=8888 nuxt"
}

起動方法は以下の通りです。

$ npm run dev
(中略)

そして、以下にブラウザでアクセスすると、簡易TODOアプリにアクセスできます。192.168.132.128は環境によって変更してください。

http://192.168.132.128:8888/todo

3. コード整形/lintツールの設定/起動

3.1 設定方法

以下のツールを設定しておきます。

[prettier]
ESlint

以下でインストールします。

$ npm install babel-eslint eslint eslint-config-prettier eslint-loader eslint-plugin-vue eslint-plugin-prettier prettier

.eslintrc.jsを以下にします。

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true
  },
  parserOptions: {
    parser: 'babel-eslint'
  },
  extends: [
    "eslint:recommended",
    "plugin:vue/recommended",
    "plugin:prettier/recommended"
  ],
  // *.vue files を lint にかけるために必要
  plugins: [
    'vue'
  ],
  // ここにカスタムルールを追加します。
  rules: {
    "semi": [2, "never"],
    "no-console": "off",
    "vue/max-attributes-per-line": "off",
    "prettier/prettier": ["error", { "semi": false }]
  }
}

packages.jsonに以下を追加します。

"scripts": {
  "lintfix": "eslint --fix --ext .js,.vue --ignore-path .gitignore ."
}

3.2 起動方法

lintfixをすると、prettierを使用してソースを修正します。

$ npm run lintfix

> todo@1.0.0 lintfix /home/tanino/script-plactice/practice_the_script/nuxtjs/todo
> eslint --fix --ext .js,.vue --ignore-path .gitignore .

$ npm run lint

> todo@1.0.0 lint /home/tanino/script-plactice/practice_the_script/nuxtjs/todo
> eslint --ext .js,.vue --ignore-path .gitignore .

4.おわりに

導入は、あっさり終わりました。

次はもう少し実用的な内容として、コンポーネントを利用して実装しようと思います。

5.参考

https://ja.nuxtjs.org/guide/development-tools/

Vue.js 導入編