![技術語り-Tech Blog[JP]](https://blogger.googleusercontent.com/img/a/AVvXsEiYsL2e14T1O3H3pP9BUj4BxNQQDgWUK-pNhtt6X8syLNp1zvyRWOG_UEv_Gcanv4Nix1_-8MCZL02odSwi69Cbmp6WJeoNDX8f7GQSPH25NUW3dtNTkcGdKhA0sRemc7CD46aj4pMhd8WzzKViOuxBpGmZ5DaFru2sTTv9Jie9aXa98EppzJj1P3lUvyY=s175)
1_Vue.jsの特徴
■
対象書籍(Vue.js入門-基礎から実践アプリケーション開発まで)の内容で、本件に使えそうな部分についてを記事化していく試み。
下記記事も参考になる。この記事は非常にクオリティが高い。
【感想】『Vue.js入門 基礎から実践アプリケーション開発まで』でしっかりVue.jsに入門【JavaScrpt】
■■
Vue.jsの特徴としては、
開発環境はJSFiddleを用意する。ブラウザ上でVueを試せるツールである。
Vue.jsのエコシステム
対象書籍(Vue.js入門-基礎から実践アプリケーション開発まで)の内容で、本件に使えそうな部分についてを記事化していく試み。
下記記事も参考になる。この記事は非常にクオリティが高い。
【感想】『Vue.js入門 基礎から実践アプリケーション開発まで』でしっかりVue.jsに入門【JavaScrpt】
■■
Vue.jsの特徴としては、
- 学習コストが低い
- コンポーネント指向によるUIの構造化
- リアクティブなデータバインディング
- 段階的に導入可能なフレームワーク
[コンポーネント指向によるUIの構造化について]
[リアクティブなデータバインディングについて]
Viewとmodelが同期的に値の更新がなされること。
これは、オブザーバーパターンをベースとしている。[理解した]
[段階的導入のフレームワークについて]
フレームワークの導入段階は複雑性に応じていくつかのステップに分割されている。
- Declarative Rendering:宣言的レンダリング
- Component System:コンポーネントシステム
- Client-side Routing:クライアントサイドルーティング
- Large-scale State Management:大規模向け状態管理
- Build System:ビルドシステム
- Client-server Data Persistence:クライアントサーバーデータ永続化
[2000年代の代表であるjQueryとの対比]
- jQuery: DOMツリーがそのままUIを持ち、イベントごとにDOMツリーを直接変更していく。
- Vue.js: UIの状態をDOMツリーと別のJavaScriptオブジェクトで持ち、これを中心に考える。UIはこのJSオブジェクトで表現し、UIとDOMツリーをVue.jsがマッピングし、イベントでJSオブジェクトを通じて状態を変更していく。これがVue.jsのコーディングスタイルである。
本質はより短く書けるAPIの集合でしかないjQueryは設計の考え方がないのでなんでも適当に実装できてしまうが、Vue.jsはこの思想があるので規模が大きくなってもきちんとした設計を保ったまま開発していけるよ…という思想ですが、最初にこの話があるのはよいですね。
開発環境はJSFiddleを用意する。ブラウザ上でVueを試せるツールである。
Vue.jsのエコシステム
- Vue Router
- Vuex
- Vue Loader
- Vue CLI
- Vue DevTools
- Nuxt.js
- Awesome Vue
- Vue Curated
