Webフロントエンドの開発現場では昨年2016年末から「Vue.js」が盛り上がりを見せています(SPA案件というよりは、jQueryの置き換え案件などで)。Vue.jsは、元GoogleのエンジニアEvan You氏を中心に開発が進められているMVVM(Model-View-ViewModel)というアーキテクチャパターンに基づいたJavaScriptのフレームワークです。2016年10月1日にVue.js v2.0が公開されたことにより人気に火がつきました。今後、Vue.jsを試す機会が増えると思うので、まずどんなものかオンライン・エディタの「CodePen」で試す方法を紹介したいと思います。
Vue.jsとは
Vue.jsの特徴としては、MVVMフレームワークと言われる所以でもある双方向データバインディングに特化しながらも、Facebook製のフレームワーク「React」で採用されているコンポーネント指向による一方向性のデーターフローの思想を取り入れ、柔軟なフロントエンドの開発ができるようになっています。
![vue.js](/wp-content/uploads/2018/04/Vue_js-e1522601684542.png)
Vue.js 2.0ではReactの代名詞でもあったVirtualDOMやサーバーサイドレンダリングにも対応するなど、他のフレームワークの良い部分を取り入れることで、「かゆいところに手が届く」フレームワークと言われるようになってきています。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にアクセスしてください。
「+NewPen」をクリックする
CodePenにアクセスしたら、画面右上の「+NewPen」をクリックします。コードを書くためのオンラインエディタ画面が新規で作成されます。
![CodePen 「+NewPen」をクリック](/wp-content/uploads/2018/04/CodePen_1-e1522599441733.png)
「JS」の設定ボタンをクリックする
エディタ画面が表示されます。設定ボタンをクリックして、JS(JavaScript)の各種設定画面を開きます。
![設定ボタンをクリックして、JSの設定画面を開く](/wp-content/uploads/2018/04/codepen_2.png)
JavaScript Preprocessorを「Babel」にする
JavaScriptを書くための各種設定を行なっていきます。まずは、ES2015+で書いたコードをトランスパイル(ES5.1に変換)してもらうために「Babel」を選択します(ES2015+でコードを書く場合)。
![「Babel」を選択](/wp-content/uploads/2018/04/codepen_3.png)
Quick-addから「Vue」を選択する
次に、「Vue.js」本体をエディタに読み込むようにします。
![codepen vueの適用](/wp-content/uploads/2018/04/codepen_vuejs.png)
「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を書いてみてください。
コメント