js の

js の

原作者	エヴァン・ユー
開発者	エヴァン・ユーとコアチーム[1]
初回リリース	2014年2月; 10年前[2] (2014-02)
安定版リリース	3.5.13 [3] / 2024年10月11日; 54日前 (2024-10-11)
リポジトリ	github.com/vuejs/コア
書かれた	タイプスクリプト
プラットフォーム	ウェブプラットフォーム
サイズ	33.9 KB以上+ gzip [4]
タイプ	JavaScript ライブラリ
ライセンス	MITライセンス[5]
Webサイト	翻訳元

Vue.js （一般的にはVueと呼ばれ、「ビュー」と発音します^{[6] ）は、}ユーザーインターフェイスとシングルページアプリケーションを構築するためのオープンソースのモデル-ビュー-ビューモデルフロントエンドJavaScriptフレームワークです。^[12]これはEvan Youによって作成され、彼と他のアクティブなコアチームメンバーによって維持されています。^[13]

Vue.jsは、宣言型レンダリングとコンポーネント構成に重点を置いた段階的に適応可能なアーキテクチャを特徴としています。コアライブラリはビュー層のみに焦点を当てています。^[6]ルーティング、状態管理、ビルドツールなどの複雑なアプリケーションに必要な高度な機能は、公式にメンテナンスされたサポートライブラリとパッケージを通じて提供されます。^[14]

Vue.jsでは、ディレクティブと呼ばれるHTML属性を使用してHTMLを拡張できます。 ^[15]ディレクティブはHTMLアプリケーションに機能を提供し、組み込みまたはユーザー定義のディレクティブとして提供されます。

Vue は、 GoogleでAngularJS をいくつかのプロジェクトで使用した後に、Evan You によって作成されました。彼は後に、自分の思考プロセスを次のようにまとめています。「Angular で本当に気に入っている部分を抽出して、本当に軽量なものを作れたらどうなるかと考えました。」 ^[16]プロジェクトの最初のソースコードコミットは 2013 年 7 月の日付で、当時は「Seed」と名付けられていました。^[17] Vue は、翌年の 2014 年 2 月に初めて公開されました。^{[18] [19]}

バージョン名はマンガやアニメに由来することが多い。

新しいメジャーバージョン（v3.yz）がリリースされると、最後のマイナーバージョン（2.xy）は18か月間LTSリリース（バグ修正とセキュリティパッチ）となり、その後18か月間はメンテナンスモード（セキュリティパッチのみ）になります。^[42]

Vue コンポーネントは、基本的なHTML 要素を拡張して、再利用可能なコードをカプセル化します。高レベルでは、コンポーネントは、Vue のコンパイラが動作をアタッチするカスタム要素です。Vue では、コンポーネントは基本的に、定義済みのオプションを持つ Vue インスタンスです。^[43] 以下のコード スニペットには、Vue コンポーネントの例が含まれています。このコンポーネントはボタンを表示し、ボタンがクリックされた回数を出力します。

<テンプレート> 
  < div  id = "tuto" > 
    <ボタンがクリックされました v-bind:initial-count = "0" ></ボタンがクリックされました> 
  </ div > 
</テンプレート>

< script > 
Vue.component ( 'button-clicked' , { props : [ ' initialCount' ], data : () => ({ count : 0 , } ), template : '<button v-on:click="onClick">クリックされた回数{{count}}回</button>' , computed : { countTimesTwo ( ) { return this.count * 2 ; } } , watch : { count ( newValue , oldValue ) { console.log ( `countの値が${oldValue}から$ { newValue }に変更されました。` ) ; } } , methods : { onClick () { this.count + = 1 ; } } , mounted () { this.count = this.initialCount ; } }) ; 
   
     
     
  
   
   
     
         
    
  
   
      
      
    
  
   
     
        
    
  
   
      
  


新しいVue ({ el : '#tuto' , }); </スクリプト> 
   

Vue はHTMLベースのテンプレート構文を使用して、レンダリングされたDOM を基礎となる Vue インスタンスのデータにバインドできます。すべての Vue テンプレートは、仕様に準拠したブラウザーと HTMLパーサーで解析できる有効な HTML です。Vue はテンプレートを仮想 DOMレンダリング関数にコンパイルします。仮想ドキュメント オブジェクト モデル (または「DOM」) により、Vue はブラウザーを更新する前にメモリ内でコンポーネントをレンダリングできます。リアクティブ システムと組み合わせることで、Vue は再レンダリングするコンポーネントの最小数を計算し、アプリの状態が変わったときに最小限の DOM 操作を適用できます。 ^{[44] Vue ユーザーはテンプレート構文を使用するか、関数呼び出しまたは}JSX を介してハイパースクリプトを使用してレンダリング関数を直接記述することを選択できます。^[45]レンダリング関数を 使用すると、ソフトウェア コンポーネントからアプリケーションを構築できます。^[46]

Vueは、プレーンなJavaScriptオブジェクトと最適化された再レンダリングを使用するリアクティブシステムを備えています。各コンポーネントはレンダリング中にリアクティブ依存関係を追跡するため、システムはいつ再レンダリングするか、どのコンポーネントを再レンダリングするかを正確に把握します。^[47]

Vue は、アイテムがDOMに挿入、更新、または削除されるときにトランジション効果を適用するさまざまな方法を提供します。これには、次のツールが含まれます。

• CSSトランジションとアニメーションのクラスを自動的に適用する
• Animate.cssなどのサードパーティのCSSアニメーションライブラリを統合する
• 遷移フック中にJavaScriptを使用してDOMを直接操作する
• Velocity.jsなどのサードパーティのJavaScriptアニメーションライブラリを統合する

トランジション コンポーネントでラップされた要素が挿入または削除されると、次のことが起こります。

1. Vue は、ターゲット要素に CSS トランジションまたはアニメーションが適用されているかどうかを自動的に検出します。適用されている場合は、適切なタイミングで CSS トランジション クラスが追加/削除されます。
2. 遷移コンポーネントが JavaScript フックを提供している場合、これらのフックは適切なタイミングで呼び出されます。
3. CSSトランジション/アニメーションが検出されず、JavaScriptフックが提供されていない場合、挿入および/または削除のDOM操作は次のフレームで直ちに実行されます。^{[48] [49]}

シングルページ アプリケーション(SPA)の従来の欠点は、特定の Web ページ内の正確な「サブ」ページへのリンクを共有できないことです。SPA はサーバーからユーザーに 1 つの URL ベースの応答のみを提供するため (通常は index.html または index.vue を提供します)、特定の画面をブックマークしたり、特定のセクションへのリンクを共有したりすることは、不可能ではないにしても通常は困難です。この問題を解決するために、多くのクライアント側ルーターは、動的 URL を「ハッシュバン」(#!) で区切ります (例: page.com/#!/ ) 。ただし、HTML5 では、ほとんどの最新ブラウザーがハッシュバンなしのルーティングをサポートしています。

Vue は、現在の URL パスに基づいてページに表示される内容を変更するインターフェイスを提供します。変更方法 (メールのリンク、更新、ページ内リンクなど) は問いません。さらに、フロントエンド ルーターを使用すると、ボタンやリンクで特定のブラウザー イベント (クリックなど) が発生したときにブラウザー パスを意図的に遷移させることができます。Vue 自体には、フロントエンドのハッシュ ルーティングは付属していません。ただし、オープンソースの「vue-router」パッケージは、アプリケーションの URL を更新するための API を提供し、戻るボタン (履歴をナビゲート) や、認証 URL パラメーターを使用した電子メール パスワード リセットまたは電子メール検証リンクをサポートしています。ネストされたルートをネストされたコンポーネントにマッピングし、きめ細かい遷移制御を提供します。Vue を使用すると、開発者は既に、小さなビルディング ブロックで大きなコンポーネントを構築してアプリケーションを作成しています。vue-router を追加すると、コンポーネントは所属するルートにマッピングするだけでよく、親/ルート ルートは子がレンダリングされる場所を示す必要があります。^[50]

< div  id = "app" > 
  <ルータービュー></ルータービュー> 
</ div >
...

<スクリプト> 
... 
const User = {テンプレート: '<div>User {{ $route.params.id }}</div>' };   
   


const router = new VueRouter ({ルート: [ {パス: '/user/:id' 、コンポーネント: User } ] }); ... </スクリプト>    
   
         
  

上記のコード:

1. フロントエンドルートを設定しますwebsitename.com/user/<id>。
2. これは (const User...) で定義された User コンポーネントでレンダリングされます。
3. User コンポーネントが、$route オブジェクトの params キーを使用して URL に入力されたユーザーの特定の ID を渡すことを許可します$route.params.id。
4. このテンプレート (ルーターに渡されるパラメータによって変化します) は、<router-view></router-view>DOM の div#app 内にレンダリングされます。
5. 次のように入力すると、最終的に生成される HTML は次のwebsitename.com/user/1ようになります。

< div  id = "app" > 
  < div > 
    < div >ユーザー 1 </ div > 
  </ div > 
</ div >

^[51]

コア ライブラリには、コア チームと貢献者によって開発されたツールとライブラリが付属しています。

• Devtools – Vue.js アプリケーションをデバッグするためのブラウザ devtools 拡張機能
• Vite – 迅速な Vue.js 開発のための標準ツール
• Vue Loader – シングルファイルコンポーネント (SFC) と呼ばれる形式で Vue コンポーネントを記述できる Webpack ローダー

• Vue Router – SPAの構築に適した公式ルーター^[17]
• Vuex – Fluxにヒントを得た集中型状態管理システム^[52]
• Vue サーバー レンダラー– サーバーサイド レンダリング
• Pinia – 新しいシンプルな状態管理

• JavaScript ベースの Web フレームワークの比較
• 反応する
• アンギュラー
• 角度
• クエーサーフレームワーク
• ウェブフレームワーク
• JavaScript ライブラリ
• モデル–ビュー–ViewModel
• 翻訳

 この記事には、フリーコンテンツ作品からのテキストが組み込まれています。MITライセンス(ライセンス ステートメント/許可) に基づいてライセンスされています。テキストは Vue.js ガイド、Vue.js から取得されています。

• 公式サイト