Vue.jsとは一体なんぞや

2020年7月23日 15:03

なぜこんな記事を書こうと思ったか

Web系企業に転職が決まったからです。

そこではフロントエンドをVue.js、

バックエンドをSpring Bootを使用していて

入社前研修でこれらの知識が求められた為、勉強しました。

JavaScriptでUIを構築する為のフレームワーク。

ちなみに、TypeScriptでも開発できる。プロジェクト作成時に設定可。

そもそもフレームワークとはなんぞや

開発を効率化させられる仕組み。ソフトウェアの骨組みまでを用意してくれる。

○メリット

・生産性が上がる。

・枠組みが決められている為、バグ発生のリスクが減る。

○デメリット

・学習コストが高い。

・仕組みをわかっていなくても、理由できちゃう。

こんな感じです。

ずれちゃったんで本題に移ります。

○学習コストが低い

上記で述べたデメリットを克服している。HTML,CSS,JavaScript
が利用できればすぐに開発で利用することができる。
その為人気が高く、ドキュメントやブログが豊富。

○開発スピードが早くなる

Directiveという仕組みを利用してDOMを操作する事ができる。
(v-on, v-bind等)

双方向バインディングやHTMLの表示、非表示などを柔軟に変更できる。

かつ、Directiveを利用することでコード記述量減る。

SPAでよく使われる。

SPAとは
単一ページアプリケーション。

ページ遷移を行わず、中身のHTMLを動的に切り替えてページ遷移しているように表現できる。
単一ページの為、パフォーマンスが良い。

<div id= "app">
    <p>{{message}}</p>
</div>

Vueインスタンスの中で宣言した"message"を表示させることができる。

Vueインスタンスを利用する為には{{}}で囲ったり、v-on,v-bind等を利用する。

以上です。まだまだ学習中なので、不足してる点/間違っている点があればコメントで指摘していただけると幸いです！

ここまで読んでいただきありがとうございました！