Skip to content

DNET_VueJs

Jump to bottom
nishi_74322014 edited this page Sep 11, 2026 · 1 revision

Vue.js

概要

  • Googleにおいて AngularJS（(MV*) UIフレームワークの該当節を参照）を使用した開発に携わった
    エヴァン・ヨーによって開発され、2014年2月にリリースされた。

  • ヨーは

    「Angular（(MV*) UIフレームワークの該当節を参照）の本当に好きだった部分を抽出して、
    余分な概念なしに本当に軽いものを作ることができたらどうだろうか？」

    と考えていた。

詳細

特徴

  • 部分的に採用可能なアーキテクチャ（プログレッシブ・フレームワーク）を採用している。

  • コア・ライブラリは、宣言的なレンダリングとコンポーネントの構成に焦点を合わせている。

  • このスコープは Reactと、似ているが、
    React と違い、段階的に導入でき、学習コストが低い。

    • スケール・アップ＆ダウンの柔軟性が高く機能拡大がしやすい。

    • パッケージ・マネージャー、バンドラーを使用せず、
      CDNから直接的に読み込む「最小構成」を組める。

    • 以下の機能を部分的に使用できる。

      • データバインディング
      • ディレクティブ
      • コンポーネント

テンプレート

Angular（(MV*) UIフレームワークの該当節を参照）と同様、基本的にはHTMLをベースとしたテンプレート言語を採用。

  • テンプレートを仮想DOM（Reactの該当節を参照）レンダー機能にコンパイルする。
  • HTMLの要素にデータを宣言的にバインドする。

リアクティブ

  • モデルは単純なJavaScriptオブジェクトである。

  • それらが変更されるとViewが更新される。

  • 状態管理は非常に容易で直感的である。

  • このリアクティブ・システムは MVVM と依存追跡
    の分野における先駆者である Knockout（(MV*) UIフレームワークの該当節を参照）と似ている。

コンポーネント

  • Vueの最も強力な機能の1つ

  • Reactとの違い。

    • コンポーネントの依存関係が描画中に自動的に追跡される。
    • ネストされたコンポーネントに注意する必要は無い。

トランジション

  • DOM から要素を取得したり削除するといった
    トランジションエフェクトを自動的に適用できる。

  • 以下のツールが含まれる。

    • CSSトランジションとアニメーションのクラスを自動的に適用する
    • CSSアニメーションライブラリを統合する
    • トランジションフック中にJavaScriptを使用してDOMを直接操作する
    • JavaScriptアニメーションライブラリを統合する

ルーティング

  • SPAはブックマークに保存したり、特定の記事へのリンクを共有することは不可能。
  • この問題を解決するために、hashbang（#!）で分割されたURLを提供している。

トレンド

  • 2018年、GitHubスター数が、
    Backbone.js、AngularJS・Angular（(MV*) UIフレームワークの該当節を参照）、jQuery、React等、
    他の歴史あるライブラリを上回った。

  • 日本ではVueは React と二分する人気があるが、今では、世界的に React が人気。

    • 2020年には、React、Vueの2強
    • React が Vue の2-3倍ほどの人気
      （GitHubでスターやnpmのダウンロード数など）。

  • 参考

参考

Qiita

jp.vuejs.org

https://jp.vuejs.org/index.html

移行メモ

  • 「hashbang（#!）分割されたURLを提供している」は助詞が欠落していたため 「hashbang（#!）で分割されたURL」とした。
  • PukiWiki のページ内アンカ（#xxxxxxxx）は GitHub Wiki では再現できないため、 他ページのアンカを指すリンクは「〜（ページ名 の該当節を参照）」の形に置き換えた。

Tags: 移行, Vue.js, JavaScript, SPA, UIフレームワーク, コンポーネント, リアクティブ

このWikiは「Open棟梁Project」,「OSSコンソーシアム 開発基盤部会」によって運営されています。

NetDevInfraWiki

マイクロソフト系技術情報 Wiki
Open 棟梁 Wiki

（未着手）

開発基盤部会 Wiki

移行管理: DONE ／ TODO

Clone this wiki locally