概要
実務で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の古いバージョンでは動作しない場合があります。
単一ファイルコンポーネントとは
先ほど説明した、単一ファイルコンポーネント形は以下のように記述していきます。
<template>
HTMLを記入
</template>
<script>
JavaScriptを記入
</script>
<style scoped>
//CSSを記入
</style>
というように、HTML,CSS,JaavaScriptを一つのファイルで、まとめて書くことができ、これを別のファイルで呼び出して使うことができます。
「scoped」というのは、このファイル内でしか適用されないCSSにするという宣言になります。
開発の中で、クラス名が被ったりしても、ファイルごとにCSSを書くことができるので、とても便利な機能だと思います。
なので、全てのファイルに適用させる処理を書くApp.vueには「scoped」は書くことはないです。
インストール方法
node.jsをインストールして、以下のコマンドを実行していきます。
npm install -g @vue/cli
インストールが成功したら、以下のコマンドを実行して、インストールされているか確認します。
vue --version
@vue/cli 5.0.8
このように表示されたらOKです。
もしも、vueがインストールされていないというエラーが出た場合は、PATHが通っていない可能性があるので、確認してみましょう。
最後に
まだVueを触り始めて、一週間ほどですが、少しずつ学んだことを書いていこうと思います。