Vue.jsとは

Vue.jsの特徴としては、MVVMフレームワークと言われる所以でもある双方向データバインディングに特化しながらも、Facebook製のフレームワーク「React」で採用されているコンポーネント指向による一方向性のデーターフローの思想を取り入れ、柔軟なフロントエンドの開発ができるようになっています。

Vue.js 2.0ではReactの代名詞でもあったVirtualDOMやサーバーサイドレンダリングにも対応するなど、他のフレームワークの良い部分を取り入れることで、「かゆいところに手が届く」フレームワークと言われるようになってきています。Vue.jsの公式サイトには以下のようなページが用意されています。興味のある方は目を通してみてください。

• 他のフレームワークとの比較 – Vue.js

Vue.jsを気軽に試すには

私がよく使うフレームワークは「React」ですが、ネット上での盛り上がりを受けて、Vue.jsもどんなものか試してみようと思っているところです。ドキュメントなどを読んでみると、構文の違いはありますが、コンポーネントの組み立て方、コンポーネント間のデータの受け渡し方、バリデーションの書き方などは、ほぼほぼReactと同じような感覚で書けることがわかりました。ただシンプルさで言うとやはりReactの方が上かなと自分は思っています。Angular的なディレクティブを使う部分が、最初にいろいろ覚えなくてはいけないことが多そうで、なんか面倒に感じてしまいます。

ただそうは言っても、今年注目のフレームワークですし、私のようにVue.jsを試そうと思っている方も多くいるのではないでしょうか。開発環境については、vue-cliというCLIツールを使うことで、コマンド一発で構築することが可能です。いわゆるReactで言うcreate-react-appのようなものです。ただ、もっと気軽に試してみたい場合は、オンラインエディタの「CodePen」をオススメします。ローカルに開発環境を準備する必要がないので、ちょっとしたものを試すにはとても便利です。

今回はこのCodePenを使ってVue.jsを書くための方法を紹介したいと思います。

CodePenを使ってVue.jsを書く準備をする

気軽に試せると書きましたが、やはり多少の準備は必要です。まずはCodePenでVue.jsを書くための準備について説明します。

CodePenにアクセスする

以下よりCodePenにアクセスしてください。

• CodePen（https://codepen.io/）にアクセスする

「+NewPen」をクリックする

CodePenにアクセスしたら、画面右上の「+NewPen」をクリックします。コードを書くためのオンラインエディタ画面が新規で作成されます。

「JS」の設定ボタンをクリックする

エディタ画面が表示されます。設定ボタンをクリックして、JS（JavaScript）の各種設定画面を開きます。

JavaScript Preprocessorを「Babel」にする

JavaScriptを書くための各種設定を行なっていきます。まずは、ES2015+で書いたコードをトランスパイル（ES5.1に変換）してもらうために「Babel」を選択します（ES2015+でコードを書く場合）。

Quick-addから「Vue」を選択する

次に、「Vue.js」本体をエディタに読み込むようにします。

「SAVE & CLOSE」ボタンをクリックすると設定が保存されます。これでCodePenでVue.jsを書く準備が整いました。

Vue.jsでHello World（サンプルコード）

CodePenでの準備が完了しましたので、早速Vue.jsでコードを書いてみましょう。ちょっとした「Hello World」を書いてみましたので、サンプルコードとして紹介します。参考にしてみてください。

HTML

まずCodePenの「HTML」の入力箇所に以下を入力します。Vue.jsで書いたコードのレンダリング先となります。

<div id="content">
  <my-component></my-component>
</div>

JavaScript（Vue.js）

CodePenの「JS」の入力箇所に以下を入力します。ただ単にHello Worldを出力するだけだと面白くないので、テキストフィールドを用意し、入力したテキストをボタンを押したタイミングで、「Hello」の後に表示するようなものとしました。コードの書き方はReact風なデータフローとなるような書き方で書いています。一応、Vueの特徴でもある双方向データバインディングやカスタムイベントなどを使用してみました。

/**
 * 子コンポーネント1
 * 入力されたテキストを表示するコンポーネント
 */
const VueCompChild1 = {
  props: ['message'],
  template: `<h1>Hello {{ message }}</h1>`,
};

/**
 * 子コンポーネント2
 * テキストを入力するためのコンポーネント
 */
const VueCompChild2 = {
  props: ['inputValue'],
  methods: {
    handleInput($event) {
      this.$emit('input', $event.target.value);
    }
  },
  template: `<input type="text" v-bind:value="inputValue" v-on:input="handleInput($event)" />`,
}

/**
 * 子コンポーネント3
 * 入力されたテキストを表示させるボタンコンポーネント
 */
const VueCompChild3 = {
  methods: {
    handleClick($event) {
      this.$emit('clickButton', $event);
    }
  },
  template: `<button v-on:click="handleClick('click')">button</button>`,
};

/**
 * 親コンポーネント
 */
Vue.component('my-component', {
  data() {
    return {
      value: 'Vue',
      inputValue: '',
    };
  },
  methods: {
    handleClickButton($event) {
      console.log($event);
      this.value = this.inputValue;
      this.inputValue = '';
    },
  },
  components: {
    'vue-comp-child1': VueCompChild1,
    'vue-comp-child2': VueCompChild2,
    'vue-comp-child3': VueCompChild3,
  },
  template: `
    <div>
      <vue-comp-child1 v-bind:message="value"></vue-comp-child1>
      <vue-comp-child2 v-model="inputValue"></vue-comp-child2>
      <vue-comp-child3 v-on:clickButton="handleClickButton"></vue-comp-child3>
    </div>
  `,
});

/**
 * DOMに出力（Bootstrapping）
 */
new Vue({
  el: '#content',
});

出力結果

画面右上の「Save」をクリックすると、出力結果が画面右側に表示されます。以下はCodePenの画面をiframeで読み込んだものです。実際にテキストを入力して動きを確認することができます。

まとめ

以上のように、CodePenを使うと、Vue.jsを気軽に書いて試すことができます。Vue.jsの詳しい書き方などは、公式のドキュメントを参照してみてください。Vue.jsの人気が高まっている理由のひとつとなりますが、日本語の公式ドキュメントが用意されています。ぜひCodePenでVue.jsを書いてみてください。

• はじめに – Vue.js