Vue.jsとは
JavaScriptフレームワーク
MVVMパターン(Model-View-ViewModel)
ユーザーインターフェイスを構築するためのプログレッシブフレームワーク
###MVVMパターンとは
- Model:データ管理 ViewModelの担当外全てを担当
- View:ユーザインターフェース
- ViewModel:Model→Viewへの出力データを渡し、View→Modelへの入力データを渡す
###プログレッシブフレームワークとは
どんなとき、どんな規模にも段階的に柔軟に使える思想
・コンポーネント設計・ライブラリの活用・小規模から大規模まで可能になる
###コンポーネント設計とは
コンポーネント(component) 部品、成分、構成要素などの意味を持つ
GUIのパーツをモジュール化したもの
簡単に言うと部品を作成して組み立てようという事
###アトミックデザイン(Atomic Design)とは
- atoms:原子
- ボタン、テキスト、ボックスなど
- Molecule:分子
- Atomsの組み合わせ ログインフォームなど
- Organisms:有機体
- MoleculesやAtomを組み合わせ ヘッダーなど
- Template:テンプレート
- Organismsを組み合わせ ワイヤーフレーム
- Pages:ページ
- 文言、画像、データなどの最終調整
ボタンなどの小さなコンポーネント(atoms)を作り
ログインフォームなどの中くらいのコンポーネント(Molecule)を作り
ヘッダーやページ全体(Organisms、Template、Pages)を作っていく考え方