Vueを学ぶ

第1章. Vue.jsの世界へようこそ！

この作品はAIを使って翻訳されている。ご意見、ご感想をお待ちしている：[e-mail]

2014年にリリースされたVue.jsは、特に2018年に急速に普及した。Vueは、その使いやすさと柔軟性のおかげで、開発者コミュニティで人気のフレームワークだ。優れたパフォーマンスのWebアプリケーションを構築し、エンドユーザに出荷するための優れたツールを探しているなら、Vue.jsがその答えだ .

この章では、Vue.jsの中核となる概念に焦点を当て、Vue.jsの開発環境に必要なツールについて説明する。また、Vue.jsの開発プロセスをより管理しやすくする便利なツールについても説明する。この章の終わりには、簡単なVue.jsアプリケーションが動作する環境を手に入れ、Vue.js学習の旅を始める準備ができる。

Vue.jsとは何か？

Vue.js（ビュー）はフランス語でビューを意味し、フロントエンド・アプリケーションでプログレッシブ、コンポーザブル、リアクティブなユーザインタフェース（UI）を構築するためのJavaScriptエンジンである。

注

ここからはVue.jsを示すためにVueという言葉を使う。

VueはJavaScriptの上に書かれており、Webアプリケーションを構造化して構築するための組織的なメカニズムを提供する 。また、デプロイ前のビルド時に、Vueコードを（「Vueシングルファイルコンポーネントの構造」でさらに説明するシングルファイルコンポーネントとして）コンパイルして等価性のあるHTML、CSS、JavaScriptコードに変換するトランスコンパイラ（トランスパイラ）としても機能する。スタンドアロンモード（生成されたスクリプトファイル）では、Vueエンジンが実行時にコードの変換を行う。

VueはMVVM（Model-View-ViewModel）パターンに従っている。MVC（Model-View-Controller）とは異なる、¹ViewModelは、ViewとModelの間でデータをバインドするバインダーである。ビューとモデルの直接通信を可能にすることで、コンポーネントの反応性が向上する 。

要するに、VueはViewレイヤーのみにフォーカスして作成されたが、より複雑な使い方をするために他の外部ライブラリと統合できるようにインクリメントされている。

VueはViewレイヤーのみにフォーカスしているため、シングル・ページ・アプリケーション（SPA）の開発に威力を発揮する。SPAは、バックエンド と継続的にデータを通信しながら、迅速かつ流動的に動くことができる。

Vue の公式 Web サイトには、API ドキュメント、インストール、主な使用例が掲載されている 。

現代のウェブ開発におけるVueの利点

Vueの大きな利点は、よく書かれた分かりやすいドキュメントである。さらに、Vue Router、Vuex、Piniaなど、Vueを中心に構築されたエコシステムとサポート・コミュニティは、開発者が最小限の労力でプロジェクトをセットアップし、実行するのを助けてくれる。

Vue APIはわかりやすく、AngularJSやjQueryを使ったことがある人なら誰でも知っている。その強力なテンプレート構文は、必要な学習労力を最小限に抑え、アプリケーションでデータを扱ったり、DOM（Document Object Model）イベントをリッスンしたりすることを容易にする。 ...