【初心者向け】Vue.jsについて学んでみた。
アプリ開発をしようとなったとき、フロントエンドとバックエンドどちらをやりたいか聞かれました。
フロントエンドは画面構築がメインで、ユーザに表示される画面をどうするのかを設計します。
UIやUXも関わる部分ですね。
バックエンドは、データの処理や受け渡し、機械学習など画面操作の裏で行われる部分になります。
そこで私は、フロントエンドをやりたい、といいました。
なぜなら、裏でなにが行われていて、どう表示されるのかを知りたいと思ったからです。
そしたら、Vue.jsを勉強することを勧められました。
そのとき初めて聞いたので「？？？」状態でしたが、自分なりに調べてみました。
1．Vue.jsとは？
Viewと同じ発音で、ユーザーインターフェイスを構築するためのプログレッシブフレームワークです。
フレームワークとは何かというと、プログラミングする上でのルールみたいな枠組みです。
アプリ開発をするときに、各自が自由に開発すると、現場が混乱します。
なので、一定の枠組みに従って開発を行う必要があります。
これがフレームワークです。プログラミング言語とは違いますね。
Vue.jsはjsとある通り、JavaScript言語を使います。
そして、画面構築ですからHTMLやCSSの知識も必要です。
言い換えれば、JavaScript、HTML、CSSができればVue.jsも構築できるのです。
Vue.jsはJavaScriptのフレームワークです。
JavaScriptのフレームワークとしては珍しく、LINEやDeNAといった大企業でも使われています。
近年注目が集まっているフレームワークとも言えますね。
2．Vue.jsのメリット、デメリット
Vue.jsのメリットとして、コンポーネントの依存関係が描画中に自動的に追跡されるため、システムは状態が変化したときに実際にどのコンポーネントを再描画する必要があるか正確に認識できる点にあります。
簡単に言うと、記述内容が変われば、他の部分も自動で変わると言うことです。
わざわざ変更部分を反映させる必要はありません。
また、HTMLやCSSに即しており、学習者のハードルを下げています。
（HTMLやCSSも初心者なので、まずこれらの勉強も必要ですね･･･）
日本語の公式サイト（ドキュメント）が豊富なのも嬉しいところです。
各機能のメリットでは、以下の4つがあげられます。
ユーザーの入力に即座に反応する「リアクティブ」
プログラムを部品のように扱う「コンポーネント」
Webブラウザの負担を抑える「トランジション」
プラグインを利用できる「拡張性」
これらによって、開発時間を短縮したり、生産性を上げることができます。
では逆にデメリットは何かというと、大規模開発には向いていない点です。
Vue.jsはSPAを強みとするので、中小規模開発に向いています。
SPAとは何かというと、
最初にブラウザ側に通信機能を持ったスクリプトを読み込み、利用者の操作や入力が行われるとスクリプトの内部処理でサーバ側との通信が行われ、入力の送信、応答の取得、表示内容の更新が行われる。
IT用語辞典より
ページの必要な箇所だけ更新するため、軽快に操作できるが、URLによって状態を識別・同定することができないなどのデメリットもあります。
実際に開発してみないとわかりませんが、習得できたら今後役に立ちそうです。
環境構築からやる必要があるので、先輩方に聞きまくりながら自分だけでできるところを増やしていけたらなと思います！
【参照サイト】