VueJSを使い始める

Vue.js は、最近、日本でも人気の JavaScript フレームワークです。
これまで React や AngularJS などのフレームワークが主流でしたが、Vue.js は、より軽量で高速なフレームワークとして、多くの Web 開発者から注目を集めています。
日本でも Vue.js を使った Web サイトやアプリケーションが増えてきています。
また、Vue.js を使うことで、高度なインタラクティブな UI を作成することができます。
これからも、Vue.js は日本の Web 開発において、ますます重要な役割を果たしていくことでしょう。

VueJS をインストールしてアプリケーションを作成する

vue-cli を使って Vue3 をインストールする

1. 今回は vue-cli を使って Vue3 をインストールします。
1. vue-cli をインストールします。
1. vue-cli を使って Vue3 をインストールします。
1. Vue3 をインストールするには、コマンドラインから以下のコマンドを実行します。
  vue create my-app
1. my-app ディレクトリの中に Vue3 のプロジェクトが作成されます。
1. Vue3 を動作させるには、コマンドラインから以下のコマンドを実行します。
  cd my-app
  npm run serve
1. ブラウザでhttp://localhost:8080にアクセスすると、Vue3 のデフォルトページが表示されます。
  Vue3 のインストールは以上です。vue-cli を使って、簡単に Vue3 をインストールすることができました。

データをレンダーする方法は?

Vue.js は、Web アプリケーション開発において、データをレンダリングするためのフロントエンド JavaScript フレームワークです。
Vue.js は、コンポーネントベースのアプリケーション開発を可能にします。コンポーネント間でデータを受け渡すこともできます。
Vue.js は、データバインディングを使用して、データと UI を関連付けることができます。データバインディングを使用すると、UI を更新するたびに、データも更新されます。
Vue.js では、次のような様々な方法でデータをレンダリングすることができます。

・テンプレートを使用したレンダリング
・JavaScript を使用したレンダリング
・フィルターを使用したレンダリング

テンプレートを使用したレンダリング
テンプレートを使用したレンダリングは、Vue.js のテンプレートシステムを使用して行います。
テンプレートシステムは、HTML のようなテンプレートをコンパイルして、JavaScript のコードに変換します。
変換されたコードは、バインドされたデータに基づいて、UI を更新します。
テンプレートを使用したレンダリングでは、次のような様々なデータをレンダリングすることができます。

・テキスト
・オブジェクト
・配列
・関数

テキスト
テキストをレンダリングするには、テンプレート内に文字列を記述します。
例えば、次のようなテンプレートを使用して、テキストをレンダリングすることができます。

<div>
    {{ message }}
</div>

このテンプレートでは、バインドされたデータをレンダリングします。
オブジェクト
オブジェクトをレンダリングするには、テンプレート内にオブジェクトのプロパティを記述します。
例えば、次のようなテンプレートを使用して、オブジェクトをレンダリングすることができます。

<div>
    {{ user.name }}
</div>

配列
配列をレンダリングするには、テンプレート内に配列を記述します。
例えば、次のようなテンプレートを使用して、配列をレンダリングすることができます。

<ul>
    <li v-for="item in items">
        {{ item }}
    </li>
</ul>

関数
関数をレンダリングするには、テンプレート内に関数を記述します。
例えば、次のようなテンプレートを使用して、関数をレンダリングすることができます。

<div>
    {{ formatDate(date) }}
</div>

このテンプレートでは、バインドされたデータをレンダリングします。
JavaScript を使用したレンダリング
JavaScript を使用したレンダリングは、Vue.js の JavaScript API を使用して行います。
JavaScript API を使用すると、データを直接レンダリングすることができます。
JavaScript を使用したレンダリングでは、次のような様々なデータをレンダリングすることができます。

・テキスト
・オブジェクト
・配列
・関数

テキスト
テキストをレンダリングするには、JavaScript API の v-text ディレクティブを使用します。
例えば、次のようなコードを使用して、テキストをレンダリングすることができます。

<div id="app">
    <p v-text="message"></p>
</div>

オブジェクト
オブジェクトをレンダリングするには、JavaScript API の v-bind ディレクティブを使用します。
例えば、次のようなコードを使用して、オブジェクトをレンダリングすることができます。

<div id="app">
    <p v-bind:id="user.id"></p>
</div>

配列
配列をレンダリングするには、JavaScript API の v-for ディレクティブを使用します。
例えば、次のようなコードを使用して、配列をレンダリングすることができます。

<div id="app">
    <ul>
        <li v-for="item in items">
            {{ item }}
        </li>
    </ul>
</div>

関数
関数をレンダリングするには、JavaScript API の v-on ディレクティブを使用します。
例えば、次のようなコードを使用して、関数をレンダリングすることができます。

<div id="app">
    <button v-on:click="handleClick">
        Click me!
    </button>
</div>

フィルターを使用したレンダリング
フィルターを使用したレンダリングは、Vue.js のフィルターシステムを使用して行います。
フィルターシステムは、データを加工して、UI に表示する形式に変換します。
フィルターを使用したレンダリングでは、次のような様々なデータをレンダリングすることができます。

・テキスト
・オブジェクト
・配列

テキスト
テキストをフィルター処理するには、テンプレート内にフィルター名を記述します。
フィルター名の後ろに続くパイプ( | )は、フィルター処理の順序を示します。
例えば、次のようなテンプレートを使用して、テキストをフィルター処理することができます。

<div>
    {{ message | capitalize }}
</div>

このテンプレートでは、バインドされたデータをフィルター処理して表示します。
オブジェクト
オブジェクトをフィルター処理するには、テンプレート内にフィルター名を記述します。
フィルター名の後ろに続くパイプ( | )は、フィルター処理の順序を示します。
例えば、次のようなテンプレートを使用して、オブジェクトをフィルター処理することができます。

<div>
    {{ user | json }}
</div>

配列
配列をフィルター処理するには、テンプレート内にフィルター名を記述します。
フィルター名の後ろに続くパイプ( | )は、フィルター処理の順序を示します。
例えば、次のようなテンプレートを使用して、配列をフィルター処理することができます。

<ul>
    <li v-for="item in items | filterBy query">
        {{ item }}
    </li>
</ul>

このテンプレートでは、バインドされたデータをフィルター処理して表示します。

イベントと一緒に働く

Vue.js は、今年の 3 月にリリースされた最新バージョンです。
イベント処理に関して、新たに追加された機能を使ってみましょう！
公式ドキュメントには、以下のように書かれています。

Global Event Bus
Event Emitter
Event Delegation

3 つの方法があるようです。
まずは、1 つめの「Global Event Bus」から試してみましょう！
Global Event Bus は、Vue インスタンス間でイベントをやりとりする方法です。
Vue インスタンスを 2 つ作成しましょう。
それぞれのインスタンスには、以下のようなコードを書きます。
インスタンス 1

<template>
    <div id="app">
        <div>{{ message }}</div>
        <button @click="handleClick">Click!</button>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                message: "Hello Vue!"
            };
        },
        methods: {
            handleClick() {
                this.$emit("message", this.message);
            }
        }
    };
</script>

インスタンス 2

<template>
  <div id="app">
    <div>{{ message }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ""
    };
  },
  created() {
    this.$on("message", this.handleMessage);
  },
  beforeDestroy() {
    this.$off("message", this.handleMessage);
  },
  methods: {
    handleMessage(msg) {
      this.message = msg;
    }
  }
};
</script>

インスタンス 1 には、テンプレート内に{{ message }}と書かれた div 要素と、
ボタンを配置しています。
ボタンをクリックすると、インスタンス 1 のhandleClickメソッドが呼ばれます。
handleClickメソッド内では、this.$emitを使ってイベントを発火させています。
第 1 引数には、イベント名を指定します。
第 2 引数以降には、イベントオプションを指定できます。
今回は、第 2 引数にthis.messageを指定しています。
インスタンス 2 には、インスタンス 1 と同じように div 要素を配置しています。
テンプレート内には{{ message }}と書かれているので、
イベントオプションで指定したthis.messageの値が表示されます。
インスタンス 2 のcreatedフック内では、this.$onを使ってイベントを受け取るようにしています。
第 1 引数には、イベント名を指定します。
第 2 引数には、イベントハンドラを指定します。
今回は、handleMessageメソッドを指定しています。
イベントハンドラは、第 1 引数にイベントオプションが渡されます。
今回は、イベントオプションにthis.messageの値が渡されるので、
handleMessageメソッド内では、this.messageに代入しています。
これで、イベントの処理は終わりです。
インスタンス 1 のボタンをクリックすると、インスタンス 2 のmessageが更新されます。
このように、Vue インスタンス間でイベントをやりとりすることができました！
次は、2 つめの「Event Emitter」を試してみましょう！

データを DOM 要素にバインドする

Vue.js は、データバインディングを使用して DOM 要素にデータを表示するためのフレームワークです。データバインディングを使用すると、データを HTML に書き出すことなく、より効率的にコードを記述することができます。
では、2 つの方法でデータをバインドすることができます。1 つは、単にデータをテキストとして表示する方法です。もう 1 つは、データを使用して DOM 要素を作成する方法です。
テキストとしてデータを表示するには、次のように記述します。

<div id="app">
    {{ message }}
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'こんにちは、世界!'
        }
    })
</script>

このコードでは、 message プロパティの値をそのまま表示しています。
DOM 要素を作成する方法は、次のように記述します。

<div id="app">
    <p v-for="item in items">{{ item.text }}</p>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            items: [
                { text: 'item 1' },
                { text: 'item 2' },
                { text: 'item 3' }
            ]
        }
    })
</script>

このコードでは、 items プロパティの値を使用して DOM 要素を作成しています。
Vue.js では、データバインディングを使用して DOM 要素にデータを表示することができます。これは、コードを効率的に記述するための方法です。

結論として

Vue3 は非常に柔軟なフレームワークです。これは、フロントエンド開発者にとって最良の選択であると考えられています。

VueJS をインストールしてアプリケーションを作成する

データをレンダーする方法は?

イベントと一緒に働く

データを DOM 要素にバインドする

結論として

この著者について