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

この記事の対象者

• HTML、CSSがわかる人
• JavaScriptをかける人

私がやったこと

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

• Vue.js 日本公式サイト
• Vue.js 日本ユーザーグループ
• 基礎から学ぶ Vue.js 書籍用サポートページ

作業環境

• macOS Mojave
• Visual Studio Code 1.36.1
• vue.jsのバージョン 2.5.16

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

そもそも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
    • Vue Curated
    • Element
    • Onsen UI

インストール

• 公式サイトからDLして読み込む
• CDNを使って読み込む

基本機能

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

See the Pen Study Vue.js [Text Binding] by Yamamoto Shouya (@yamamon) on CodePen.

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

繰り返し

See the Pen Study Vue.js [Repeat] by Yamamoto Shouya (@yamamon) on CodePen.

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

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

See the Pen Study Vue.js [Synchronize with form] by Yamamoto Shouya (@yamamon) on CodePen.

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

その他の基本機能

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

ここまで勉強して思ったこと

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

今後の展望

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

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