Re:ゼロから始める文系プログラマ

未経験がプログラミングを通して人生を変える

Vue.jsを簡単に、かつざっくり解説


スポンサードリンク
 

f:id:ShotaNukumizu_1000:20210619112318p:plain
(引用元:jp.vuejs.org)

おはようございます。Shotaです。今日はJavaScriptフレームワークの一つである「Vue.js」について徹底解説します。実際に、多くの企業でJavaScriptフレームワークが導入されています。

しかし、JavaScriptフレームワークの導入の際に「JavaScriptフレームワークをどう使えばいいか、かつどのように選択すればいいかわからない....」と困ってしまうことが大半です。

そこで、今回は人気が急上昇しているJavaScriptフレームワークである「Vue.js」について徹底解説します。

【目次】


Vue.jsとは?

Vue.jsは、JavaScriptフレームワークの一つで現在人気が集まっています。その理由は、シンプルで自由度が高いにも関係なく高い生産性を発揮することです。それだけではありません。他のライブラリとの組み合わせを自由に選べるので、足りない部分を補えるのも人気の理由の一つです。

Vue.jsは多くのサービスや企業で使われています。代表的なサービスとしては「LINE」が挙げられます。


Vue.jsでできること2つ

f:id:ShotaNukumizu_1000:20210615064836p:plain

Vue.jsは、主にWebアプリケーション開発で使われていることが多いフレームワークです。

できることとして強調しておきたいのは次の2つです。

  • ユーザの入力に即座に反応する「リアクティブ」
  • ウェブブラウザの負担を軽減する「トランジション

それぞれ順番に解説していきます。


ユーザの入力に即座に反応する「リアクティブ」

リアクティブは、簡単に言えばユーザが打ち込んだデータに即座に反応する機能です。ユーザが入力した情報をキープする「Model」の値とユーザが実際に目にする値「View」が連動しており、どちらかの値が変更すれば即座に猛威っぽいの値が変更する仕様です。

例えば、Webアプリの画面でユーザがデータを打ち込んだ際に、すぐに画面上の情報が変化していた場合にリアクティブ機能が働いています。

Vue.jsがあれば、ユーザの利便性を向上しやすいでしょう。


ウェブブラウザの負担を軽減する「トランジション

トランジションとはHTMLやCSSを変更した際に、DOM(HTMLを構築するもの)の内容も即座に変更できる機能のことを指します。

通常、ウェブブラウザに画面を表示する際にはDOMからHTMLを解析してWebページを表示しますが、これだとHTMLを変更する際にWebブラウザが読み込みをしなければいけ無いのでフランが大きいです。

ところが、トランジションを使えばHTMLとDOM両方とも変更できるのでWebブラウザの読み込みの負担を大幅に削減できます。


メリット・デメリット

Vue.jsが人気ある理由の一つとして、以下の3つのメリットがあります。

  • 習得するための難易度が低い
  • サーバとの通信量を削減できる
  • ユーザの入力値をすぐに反映できる


逆に、デメリットは次の2つです。

  • 大規模開発に向かない
  • ネイティブアプリが発展途上

両方とも致命的なデメリットではありませんが、知っておいて損はありません。


まとめ

今回の記事では「Vue.js」の概要とできること、メリット・デメリットを簡単に説明しました。

Vue.jsは学習コストが低く、かつ文法がシンプルでわかりやすいです。

ところが、完全初心者向けというわけではないです。HTML, CSS, JavaScriptの中級レベルの知識がある前提で作られています。プログラミング完全初心者がVue.jsから学ぶのは効率が良くないのであまりおすすめしません。

今回の記事を通して、Vue.jsを知ってもらえるきっかけになれたら嬉しいです。

最後まで読んでくださり、本当にありがとうございました!

【参考サイト】

www.sejuku.net