概要

実務でVue.jsの開発業務に携わることになったので、勉強したことをアウトプットとして書いていきます。

Vue.jsとは

Vue.jsは、フロントエンドのJavaScriptフレームワークの1つであり、UIコンポーネントを構築するためのライブラリです。Vue.jsは、単一ファイルコンポーネント (SFC) と呼ばれる、HTML、JavaScript、CSSを1つのファイルにまとめたファイル形式を採用しています。

Vue.jsの特徴・メリット

・軽量でシンプルな構文であること
ReactやAngularなどに比べて、軽量であり、高速なレンダリングを行うことができるため、比較的小規模なプロジェクトを作成するのに向いています。

・リアクティブデータバインディング
Vue.jsは、リアクティブデータバインディングを採用しており、モデルの変更を自動的に反映することができます。これにより、開発者は手動でDOMを更新する必要がなくなり、開発効率が向上します。

・コンポーネントベースのアーキテクチャ
Vue.jsは、コンポーネントベースのアーキテクチャを採用しており、UIを小さな部品に分割することができます。これにより、コードの再利用性が高まり、保守性が向上します。

・拡張性が高い
Vue.jsは、プラグインシステムを備えており、必要に応じて機能を追加することができます。また、他のライブラリやフレームワークとの組み合わせも容易であり、柔軟性が高いと言えます。

Vue.jsのデメリット

・コミュニティがまだ発展途上
ReactやAngularと比較して、Vue.jsの生態系はまだ小さく、コミュニティも発展途上にあるため、情報収集が難しい場合があります。

・小規模プロジェクト向けのフレームワーク
Vue.jsは小規模なプロジェクト向けのフレームワークであり、大規模なアプリケーションを開発する場合には、アーキテクチャの設計が必要となります。

・サポートされていないブラウザがある
Vue.jsは、一部の古いブラウザでサポートされていない場合があります。特に、Internet Explorerの古いバージョンでは動作しない場合があります。

単一ファイルコンポーネントとは

先ほど説明した、単一ファイルコンポーネント形は以下のように記述していきます。

というように、HTML,CSS,JaavaScriptを一つのファイルで、まとめて書くことができ、これを別のファイルで呼び出して使うことができます。
「scoped」というのは、このファイル内でしか適用されないCSSにするという宣言になります。
開発の中で、クラス名が被ったりしても、ファイルごとにCSSを書くことができるので、とても便利な機能だと思います。
なので、全てのファイルに適用させる処理を書くApp.vueには「scoped」は書くことはないです。

インストール方法

node.jsをインストールして、以下のコマンドを実行していきます。

インストールが成功したら、以下のコマンドを実行して、インストールされているか確認します。

このように表示されたらOKです。
もしも、vueがインストールされていないというエラーが出た場合は、PATHが通っていない可能性があるので、確認してみましょう。

最後に

まだVueを触り始めて、一週間ほどですが、少しずつ学んだことを書いていこうと思います。
[cv:issue_marketplace_engineer]