こまけぇこたぁいいんだよ ─ のんびりVue.js超入門［第1回：Hello,world!］

JavaScript

posted : 2018.10.07

updated : 2018.10.08

こんにちは、ma-ya’s CREATE［まーやずくりえいと］です。

先日Vue.js入門本を読み終わったものの、仕事で生かす場面も現状特にないので初めてみました。

Vue.js入門連載です。

とは言っても僕も入門者に変わりはないので、99.9％は自分の為の備忘録としてのんびりと続けていこうかな、と思います。

基本的にはタイトル通り松田鏡二的「こまけぇこたぁいいんだよ」スタイルで行こうと思ってます。

もし細かいことが気になったら、僕より数段優れた方たちが多くの記事を書いてくださっていますし、日本語公式リファレンスも非常に充実しているという話（僕はまだざっくり見た程度）なのでそちらをご参照ください。

また誤った認識が混じる可能性も当然御座いますのでその点ご了承をmm

で、Vue.jsって何？

Javascriptのフレームワークです。

ざっくりいうと、生のJSが敬語なら、フレームワークは口語です。

より簡単な記述で言語をコンピュータに理解させる事が可能な、簡易言語のようなものだと僕は思ってます。

こまけぇ事が気になるならwikiなりQiitaなりご覧になればいいです。

難しくないの？

当然やりたいことにも寄りますが、一冊書籍を読み終わった感じだとかなり色々なことが効率的かつ少ないコードで実現出来そうです。

しかもプロジェクトの規模を問わず導入しやすい（小規模でも大規模でもその恩恵を受けられる）ので人気が出るのも当然だろうな、という印象でした。

ただし。

色々なサイト、そして恐らく書籍でも書かれているであろう「ノンプログラマでも簡単に使える！」的な文句はちょっとどうかな、と思います。

実際、すんなりと理解し始められるのは“最低限”下記要件を満たした方以上かな、と思ってます。

HTML・CSSがわかる人（中級～）
Javascript(というかプログラミング)の基本文法・概念をある程度抑えていて、調べながらであればちょっとしたコードは書ける、若しくはJSライブラリやjQueryプラグインなど特に苦労することもなく実装出来る人

特に②を満たしていない方にとっては簡単では無いと思います。

さらに大規模 or 複雑なことをやろうとすればいくらフレームワークでも難しい場面もあるので、根気が必要になってきます。

逆に①②を満たしている方であれば、書籍なりhowtoサイトなり、中盤までは難なく理解ができるものだと思います。

ちなみに僕なんてものは②にちょっと毛が生えた程度の人間なので、書籍の後半（大規模開発での導入etc）は結構読み飛ばしたところが有りました。いと情けなし。

というわけで超入門とはいえ、この連載は①②に該当する方向けの超入門となっております。

Vue.jsの書き方

正直前置きがめんどくさくなってきたので先にコードを載せます。

おなじみHello world的コードです。

See the Pen Vue.js for super beginner, part1 by mycreatesite (@mycreatesite) on CodePen.

コードより多くを語るものはありません。

ご覧の通りVue.jsはHTMLにJavascriptの内容（データ）を紐づけて（バインディング）動的に表示する事ができます。

まずHTMLでVue.jsを読み込みます。jQueryのように。
同じくHTML内でVue.jsで弄りたいエリアを囲った要素にIDを付与します。
※HTML内の {{message}} はJavascriptデータを紐づけるための記法（mustache）の一つ。
JSファイルではVue.jsで弄る対象（②で付与したID）をelプロパティに指定します。

こうする事で、「el」プロパティで指定した要素内をVue.jsでいじいじすることが可能になります。

上記のコードで言えば、JSファイルのmessageプロパティの内容（「おっす、おら～」）が変われば、HTMLで出力されるメッセージ内容が変わります。

jQueryのようにHTMLでCDN読み込みするだけで始められるのはスバラシイですね。

ちなみにidをclassにして、#vueTest を .vueTest にしても同様に操作できますが、cssのように使いまわしが効かない＆そもそもパフォーマンスが落ちるのでこまけぇことはいいからおとなしくid指定にしましょう。

別要素内ではデータは使えない

当たり前と言えば当たり前ですが以下のコードを見て貰えれば一目瞭然。

See the Pen Vue.js for super beginner, part1-2 by mycreatesite (@mycreatesite) on CodePen.

id:hogehogeはelプロパティで紐づけられていないので、その要素内の{{message1}}と{{message2}}は無視されます。

要はHTMLとJSを簡単に連携しながらUIを作れるよ、と。

多分こんな弱小サイトのVue.js入門にたどり着いたくらいなら、Vue.jsが大体どんなものかは他サイトなどで調べていると思うので、こまけぇ説明はとことん省きます（そもそもロジカルな説明ができるほど僕は優秀では無いのです）。

自分も書籍を買ったり他のサイトで色々調べたんですが、僕のような普段何も考えず感覚で生きてしまっている人間にとっては概要部分でMVVMとか何とか言われても、ただただやる気が無くなるだけでした。。

それよりも実際のコード全体を読み解いた方が遥かに理解とイメージが膨らんだので、僕は何はともあれ色んなvue.jsのソースコードを眺めることをお勧めします。

まあそんな指向の元に連載を進めていきますよっと。

第1回感想

で、それができたから何？って感じ。

勘の良い人は「おっ…」って感じ。

いずれにしてもやってることはまだ1つも面白くないです。

つづく。