More than 5 years have passed since last update.

Vue.js入門〜Vue.jsのはじめの一歩〜を5分で飛ばし読みする

Last updated at 2019-02-19Posted at 2019-01-23

※この内容はVue.js入門の〜基礎から実践アプリケーション開発まで〜の第1章をを勉強したときの自己流理解メモです。

活字アレルギー過ぎて、Vue.js 入門の本を読むのにストレスフルで辛らいので、時間かかるけど、自分語（なくわかる適当な言葉で）に変換して読んでいくことにした。

とりあえず、Vue.jsを学んでいくスタートとして、最初に知りたいことは、
Vue.js てHTML、CSS、jQuery、JSやってきたけど、それらと何が違うの?

プログラマ、コーダーとしての初心者の壁は、若干越えたところあたりにいる私は、まだ真のエンジニアになりきれていない感がこういうところに現れる。（ポエムになりそうなのでここでやめる）

HTML、CSS、jQuery、JSとVue.jsとの違い。（ざっくり）

P9の"現在の課題とVue.js" に、ほかのフレームワークに比べて学習コストが低くなるように考慮されていると書かれていた。なんとなくだけど、覚えなきゃいけないことも少ないし、良いかも?という期待が持てた。

期待持てたのはいいけど、結局どこらへんが学習コスト低くなるの?、と気になるところ。
他のフレームワークを深く触ったことないから、納得できるかわからないけど、その答えっぽい文章を探してみた。

P10
「UI構築には、簡単なHTMLをベースにした形で書いていける&JavaScriptのデータ&Vue.jsの提供するAPIを組み合わせれば簡単に動的なHTMLの描画ができるよ」

ふむふむ、HTMLとJavascript使うのね。なるほど。
あ、そんな感じならJavascript勉強した時と難易度大差ないかも??...
いや、ちがう、動的って書いてある。動的っていうのもはっきり定義とかわからないけど、変化していくって感じかな?...

学習コストがかからないには、2つの理由があることがわかった。

という2点。
私は環境構築苦手意識あるから、それなしにスタートできるのはとても魅力的なフレームワークだ、学習コスト低い認定した。（環境構築ちゃんとやれば楽しかったけどやっぱまだ苦手だ）

そんな疑問が湧いてきたので、サクサク読み進めるとP17にはこんな内容の記述もありました。

P17
「Vue.jsはコンポーネントを容易に使えるライブラリ」

コンポーネントってなんやろ? アトミックデザインみたいなものかな? それぐらいの理解。小さい単位、部品で開発してその組み合わせだから、大きい開発でも事故りづらい? （Vue.jsのいいところは、コンポーネントごとにファイルを作れるみたい）

っていう項目があったので、それも簡単にまとめてみる（できるかな...）

P18
状態の変更をVue.jsが検知（監視）して、自動的にviewに反映する。これを可能にしているプロパティこそ算出プロパティです。

（プロパティがなんのこっちゃわからんけど、プロパティというものこそ動的な状態変化を管理しているものの根本なのかな?これからやっていくから今回はこの程度でOK!ということにする）

P23までVue.jsのメリットを書かれていた。その辺はとりあえずいいかなと思ってよみ飛ばしたけど、P23までを一言でまとめると、2点

Vue.jsでは簡単な1枚ページから複雑なWEBアプリまで作ることができるけど、Vue.js自体viewに特化したライブラリなので、アプリとか作るときは他のプラグインの導入が必要だよ
テスト、ビルドの環境は自分で容易しろよ?
環境構築に必要なオススメツールを羅列してておわり

最初大丈夫大丈夫、怪しくないよ〜と甘い言葉で近寄ってきて、最後に怖いお兄さんでてくるみたいな、そんな感じで2章がんばっていこうぜ！という内容でした。
改めてこの記事を読み返すとサクサクわかるけど、スタートした時は30分もかかってしまった。

【1章 Vue.jsのはじめの一歩完】

※この内容はVue.js入門の〜基礎から実践アプリケーション開発まで〜のP23を勉強したときの自己流理解メモです。