Vue.jsとは一体なんぞや

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

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

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

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

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

Vue.jsとは

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

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

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

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

○メリット

・生産性が上がる。

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

○デメリット

・学習コストが高い。

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

こんな感じです。

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

Vue.jsの特徴

○学習コストが低い

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

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

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

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

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

どういうとこで使われるの？

SPAでよく使われる。

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

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

Vue.jsテンプレート

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

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

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

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

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