猫本まとめ
個人的に知りたい部分について
アウトラインレベル
Vue.jsとは
JavaScriptのフレームワーク
特徴
一般的に言われていること
- 学習コストの低さ
- ある特定の部分に対してだけ機能を使いたいとなった時、その使い方だけ知れば実現できるという意味において言っていると思う(CDNなどで)
- スケールの柔軟性
- CDNとしてライブラリ的に使うことも、Vue CLIなどでフレームワーク的に拡張性があるように使うことも可能である事を言っていると思う
- 日本語ドキュメントの充実
- 日本では流行
- 現時点で世界的シェアはReactの方が倍以上ではある
使い方
大きく分けて2つある
-
CDN
- ライブラリ的な使い方
- jQueryとかと同じようなイメージ
-
Vue CLI
- フレームワーク的な使い方
- ある程度全体構成を意識する必要があるイメージ
考え方
Vueを理解する上で重要な考え方
データ駆動
構造の本体はDOMではなくJavaScriptのデータということ
データありきで、データに適したDOMを構築するという思想設計になっている
コンポーネント指向
機能ごとにHTML、CSS、JavaScriptを1つのセットとして分離し、開発する仕組みや考え方
インタラクティブ
インタラクティブなUIを構築するためのJavaScriptフレームワークというような文脈で表現される
簡単にいうと触れば動く(意訳すると対話的なので話しかければ応答する)のような感じだと思う＝画面がイケてますよ
用語
文脈次第で概念的なものを指すことと、Vueのある特定の技術を指すことができる用語。
コンポーネント
サイトUI構成レベルの1部品
Vue.component({
テンプレート
DOMを構築する前のHTMLベースの表記形式
template:、 <template>
データバインディング
データと描画を同期させる仕組みのこと
htmlベースのファイルに.vueで定義した値を出力すること
ディレクティブ
HTMLタグに混在させられるVue用の属性のこと
v-なんか
単一ファイルコンポーネント
HTML、CSS、 JavaScriptを1つにまとめたファイル
.vue拡張子のファイル
頻出構成要素
Vuex
複数のコンポーネントでデータを共有したり、アプリケーション全体の状態を一元管理する状態管理用のライブラリ
Vue Router
コンポーネントで構造化された複数の画面をURLと紐付ける、SPA構築のためのルーティング用のライブラリ
Vue CLI
ある程度複雑さや規模が大きくなる想定で、ツールやライブラリの構築、ビルドのサポートをしてくれるもの
webpack
Vue CLIによって作られた雛形構成のファイル群を、依存状況を解決しながら1つのファイルにまとめるためのツール名
バンドルツール
Element
パブリックなUIコンポーネント集
書籍情報
mio, 基礎から学ぶ Vue.js
https://amzn.to/2GuqPKh
雑感
開発時は人にとって効率的な形に(ファイルや構造を分けつつ)、
最終的に動く時はシステムとして効率的な形に(1枚のHTMLとJSに集約される)というのがよく考えられているなという感じ。
ひとまず最小構成で作ってみる