2017/01/11
javascriptフレームワークのvue.jsを使ってみる（入門編）
今やjavascriptフレームワークはフロントエンドの者にとっては出来て当たり前という雰囲気をひしひしと感じております。
javascriptフレームワークといえば、
・react
・angular
・backbone
・riot
・Aurelia
等々あり、特に人気が高いのは、react,angularなのですが…
私が目をつけたのは「vue」です。
vue.jsとは
vue.jsとは公式サイトから引用させて頂き、
Vue (発音は / v j u ː / 、 view と同様）はユーザーインターフェイスを構築するためのプログレッシブフレームワークです。他の一枚板(モノリシック: monolithic)なフレームワークとは異なり、Vue は初めから少しづつ適用していけるように設計されています。中核となるライブラリは view 層だけに焦点を当てているため、Vue.js を使い始めたり、他のライブラリや既存のプロジェクトに統合したりすることはとても簡単です。一方、モダンなツールやサポートライブラリと併せて利用することで、洗練されたシングルページアプリケーションを開発することも可能です。
まぁ他の同じようなjavascriptのフレームワークと同じで大きくは変わりませんが、
私が良いと思った点は、
シンプルで軽いという点です。
他のフレームワークより学習コストが低く、始めるのが手軽です。
まず試しに使ってみようと思ったら、ダウンロードしたjsファイルを読み込むだけでOKで、
環境設定とかnodeとかそういうのは必要ありません。
普通にローカル環境でできます。
対応ブラウザ
モダンブラウザに対応しておりますが、
IEだけ9以上の対応になります。
vue.jsを試してみる
今回、vue.jsの基本的な説明をすることは省いて、
実際に作ったものを説明していきます。
まずはGitHubからソースをダウンロードします。
(今回verは2.0です)
GitHub – vuejs/vue: A progressive, incrementally-adoptable JavaScript framework for building UI on the web.
とりあえずzipでダウンロードして解凍します。
いろいろとファイルはありますが、取り急ぎ必要なのは、distフォルダにある、vue.min.jsだけで大丈夫です。
ちなみに、examplesフォルダに、サンプルのソースがあるのでそれをいじってみたりするのでもいろいろ試せると思います。
サンプルはこのページからも見れます。
今回はこのmarkdownのサンプルを少しいじってみたいと思います。
先程ダウンロードしたデータの
examples/markdownのindex.htmlとstyle.cssを使います。
適当なフォルダにindex.htmlとstyle.cssとvue.min.jsを入れたら準備OKです。
MarkDownエディタ
head内で、vue.min.jsを読み込みます。
（すでに記述があるのでパスを変更するだけです）
今回、よりシンプルにするために、
#editor部分と、script内を以下のように変更しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <div id="editor"> <textarea v-model="input"></textarea> <div v-html="compiledMarkdown"></div> </div> <script> new Vue({ el: '#editor', data: { input: '# ここにテキストを記入してください' }, computed: { compiledMarkdown: function () { return marked(this.input, { sanitize: true }) } } }) </script> |
サンプルはこちらになります。
DEMO
8行目のelで対象のDOMを設定します。ここはidでもclassでも大丈夫です。
9行目〜11行目にはtextareaに入るデータを設定します。
変更があった場合もこのdataにあるinputを変更し、html側に表示するようになっています。
12行目〜15行目では、computedというプロパティで、自動的にdataがthisとして入るようになっています。
そして、そのthisが変更された時に、呼び出されるようになっています。
つまり、inputが変更されたら、compiledMarkdownが呼び出される形です。
14行目のmarkedでmarkdownの形式を変換しています。
この関数はvue.jsではなく、元々サンプルに読み込んであったhttps://unpkg.com/marked@0.3.6を使用しています。
script側はこれだけでOKです。
2行目のv-modelというは、
dataの出力、及び設定しているDOMの値に変更があった場合、変更するものです。
textareaのvalueの値に変更があったら、10行目のinputを変更します。
このv-modelによっていわゆる双方向バインディングを作成します。
3行目のv-htmlはhtmlのソースを表示するもので、いわゆるinnerHTMLと同じです。
この部分は先程軽く説明されていますが、12行目〜15行目で処理された情報が渡され表示されます。
以上今回のサンプルの説明になります。
今回は、サンプルをより見やすいように変更してみましたが、
簡単に変更出来るのでいろいろと試してみると慣れて来るかと思います。
感想的な
react等とは違い、htmlに直接vueの記述をしていく形になります。
この点も簡単に始められる点かと思います。
大規模なものになると直接htmlを変更するのはどうなのかということもあるかと思いますが、
phpのテンプレートエンジンみたいで、どこでなにをしているかが比較的わかりやすいので私的には悪くないなぁと思います。
Author Profile
スターフィールド編集部
SHARE
