PHP/Elixirエンジニアのブログ

有益なアウトプットを心がけます。

【JavaScript】Vue.jsってなに?

いつもご覧いただきありがとうございます。


本日は「Vue.js」について






初学者なりに学習した内容を書いていきます。






Vue.jsとは

 Webアプリケーションにおけるユーザーインターフェイスを構築するための、オープンソースJavaScriptフレームワークである。


他のJavaScriptライブラリを使用するプロジェクトへの導入において、容易になるように設計されている。


一方で高機能なシングルページアプリケーション(
SPA)を構築することも可能である。



Vue.jsの特徴

・学習コストが低い


JavaScriptフレームワークは、Vue.jsのほかにもAngularやBackbone.jsなど様々な種類があります。

今は多くの言語、フレームワークがあり、開発現場ごとに新しい技術を習得しなければいけないことも珍しくありません。

しかし、その中でもVue.jsは学習コストが低く、初心者、経験者問わず、すぐに開発に使用することができるという特徴があります。

 また、現在Vue.jsは構造がシンプルなことに加え、人気が非常に高いため、日本語での技術ブログや記事も充実しています。

不明点があった時も情報が充実しているためすぐに調べることができるので、これから学んでみようという方におすすめしやすいフレームワークです。



・開発スピードを早められる

Vue.jsにはDirective(ディレクティブ)という、Viewの要素に付加できる独自属性があります。

ディレクティブを利用することでDOM (Document Object Model)操作をすることができ、

HTML要素の表示・非表示などを柔軟に変化させることができます。

さらに、直接DOMを操作するコードの記述量を減らすことができるため、開発スピードを早めることができます。



・作業の簡易化が可能

Vue.jsはコンポーネント指向でアプリケーションなどの開発を行うフレームワークです。

コンポーネントとはGUI(グラフィカル・ユーザー・インターフェース)のパーツをモジュール化したもののことです。

コンポーネント指向のVue.jsで開発をすることによって、ボタンや入力欄など、

複数の画面で使用するものを“コンポーネント”という単位で区切ることができます。

これによって、再利用性が高くなり、デザインと技術の共同作業の簡易化、また開発スピードの向上を可能にします。



他のフレームワークとの比較

・Angular.js


AngularはGoogleと個人や企業のコミュニティから開発されたJavaScriptフレームワークです。


Vue.jsと同じくSPA開発が可能ですが、気軽に始められるVue.jsと異なり、導入・学習コストが高いため、個人開発には向いていません。


また、Vue.jsはJavaScriptを使用していますが、AngularはJavaScriptではなくTypeScriptというプログラミング言語を使用します。


TypeScriptの学習など、Angularは使えるようになるまでに時間がかかるため、学習コストをかけずにすぐ開発を始めたい人はVue.jsを選ぶのが無難です。



・React


ReactはFacebookが開発を主導している、JavaScriptフレームワークです。


ReactはVue.jsと同じようにJavaScriptで記述することができ、また導入・学習コストもそこまで高くありません。

そのため、個人開発でも使用できるフレームワークと言えます。


しかし、Vue.jsと違いReactの場合、データバインディングがデータから画面(HTML)に行く片方向のみとなっています。

Vue.jsは双方向バインディングのため画面に入力をすればすぐデータにも反映されますが、Reactは画面からデータに反映させることができません。


また、Angular、Vue.jsと比較すると、Reactは日本語での記事や書籍が少ないのが現状です。

ですから、特にプログラミング初心者には、Vue.jsを選択するのをおすすめします。



「Vue.js」について



かんたんにまとめさせていただきました。




最後までご覧いただきありがとうございました。