【ISSUE】【Vue.js】基礎知識
2024年12月23日 8:40
実務でVue.jsの開発業務に携わることになったので、勉強したことをアウトプットとして書いていきます。
Vue.jsは、フロントエンドのJavaScriptフレームワークの1つであり、UIコンポーネントを構築するためのライブラリです。Vue.jsは、単一ファイルコンポーネント (SFC) と呼ばれる、HTML、JavaScript、CSSを1つのファイルにまとめたファイル形式を採用しています。
・軽量でシンプルな構文であること
ReactやAngularなどに比べて、軽量であり、高速なレンダリングを行うことができるため、比較的小規模なプロジェクトを作成するのに向いています。
・リアクティブデータバインディング
Vue.jsは、リアクティブデータバインディングを採用しており、モデルの変更を自動的に反映することができます。これにより、開発者は手動でDOMを更新する必要がなくなり、開発効率が向上します。
・コンポーネントベースのアーキテクチャ
Vue.jsは、コンポーネントベースのアーキテクチャを採用しており、UIを小さな部品に分割することができます。これにより、コードの再利用性が高まり、保守性が向上します。
・拡張性が高い
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]
診断を受けるとあなたの現在の業務委託単価を算出します。今後副業やフリーランスで単価を交渉する際の参考になります。また次の単価レンジに到達するためのヒントも確認できます。