【超初学者向け】「基礎から学ぶ Vue.js」を買ったのでVueの基本的なことをまとめてみた!!

## この記事の対象者
- HTML、CSSがわかる人
- JavaScriptをかける人

## 私がやったこと
vueを勉強するならこれ! とよく言われる「基礎から学ぶ  Vue.js」（ネコ本）を読みながらコードを書きました。

- [Vue.js 日本公式サイト](https://jp.vuejs.org/)
- [Vue.js 日本ユーザーグループ](https://github.com/vuejs-jp/home)
- [基礎から学ぶ Vue.js 書籍用サポートページ](https://cr-vue.mio3io.com/)


## 作業環境
- macOS Mojave
- Visual Studio Code 1.36.1
- vue.jsのバージョン  2.5.16

VS Codeの `Live Server` という拡張機能を使い、ローカルホストを立ち上げ勉強を進めていきます。
[CpdePen](https://codepen.io/)などのオンラインエディターを利用するのも良いと思います。

## そもそもVue.jsってなに？
>2014年にリリースされたJavaScriptのフレームワーク
>人気の理由は、「学習コストが低い」「スケールの柔軟性」「公式ドキュメントの充実」という点が支持されている。（基礎から学ぶ  Vue.js  より）

## vue.jsを勉強する上で意識すること
- 構造の本体はDOMではなくJavaScriptのデータ
    - データの状態に適したDOMを構築する
    - データを中心としたアプリケーション設計を「データ駆動」と呼ぶ
- データバインディング
    - データと描画を同期させる仕組み
- ディレクティブ
    - 見慣れない属性(`v-bind`や`v-if`とか)のこと
    - そのなかで`v-`で始まっているもの
    - 値はJavaScriptの単一な式  
- コンポーネント
    - 機能ごとにJavaScriptとテンプレートを1セットに
    - 他の機能と分離して開発可能
- リソースもたくさん
    - わざわざ作らなくてもVue.jsに最適化されたUIがある
        - [Awesome Vue GitHub](https://github.com/vuejs/awesome-vue)
        - [Vue Curated](https://curated.vuejs.org/)
        - [Element](https://element.eleme.io)
        - [Onsen UI](https://ja.onsen.io/)

## インストール
- 公式サイトからDLして読み込む
- CDNを使って読み込む

## 基本機能

#### テキストのバインディング

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="html,result" data-user="yamamon" data-slug-hash="NQREgG" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Study Vue.js [Text Binding]">
  <span>See the Pen <a href="https://codepen.io/yamamon/pen/NQREgG/">
  Study Vue.js [Text Binding]</a> by Yamamoto Shouya (<a href="https://codepen.io/yamamon">@yamamon</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

`<p>{{ word }}</p>`にJSで値を描画しています。

#### 繰り返し

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="html,result" data-user="yamamon" data-slug-hash="aemQXa" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Study Vue.js [Repeat]">
  <span>See the Pen <a href="https://codepen.io/yamamon/pen/aemQXa/">
  Study Vue.js [Repeat]</a> by Yamamoto Shouya (<a href="https://codepen.io/yamamon">@yamamon</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

`v-for`でJSで定義している`list`(配列)を順番に取り出し描画。
配列の数だけ`li`が増えている。

#### フォーム入力した値を瞬時に描画

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="html,result" data-user="yamamon" data-slug-hash="GVjPNZ" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Study Vue.js [Synchronize with form]">
  <span>See the Pen <a href="https://codepen.io/yamamon/pen/GVjPNZ/">
  Study Vue.js [Synchronize with form]</a> by Yamamoto Shouya (<a href="https://codepen.io/yamamon">@yamamon</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

`input`で入力した値がすぐに描画されます。

#### その他の基本機能
- クリックイベントなどイベントの利用 `v-on:click`など
- 条件分岐 `v-if`
- 組み込みコンポーネント `<transition>` を使ったトランジション&アニメーション

## ここまで勉強して思ったこと
- ここまででネコ本でいうSECTION ０５までの内容になります。
- 開発環境を細かく整えることなくさっと学習に入れたことが印象に残った。
    - 初学者は、だいたい環境構築でコケて、モチベーション下がって滞ることが多い。
    - その点、かなりハードルは低いと感じました。
- 「データ駆動」と呼ばれるだけに、簡単にデータの受け渡しができた。
- `v-for`は、`each`みたいにデータの長さを気にせず使えた。
    - forと聞くと無限ループのイメージ

## 今後の展望
せっかく学んでいるので、ポートフォリオとかを作るときに使ってみようと思いました。
そのためにも、ネコ本を頑張って読破します!!

記事中の誤字や脱字、間違いなどありましたらお気軽にコメントいただけると嬉しいです。
最後になりますが、「基礎から学ぶ Vue.js」の著者であるmioさんのオフィシャルサイトは以下です。
https://mio3io.com/