Vue.jsを実装してみた。Part1(Vue.jsの概要)

こんにちは!こんばんは、みんろです!

今日から巷で噂のVue.jsを簡単に解説・実装していきます。

そもそもVue.jsってなんだよ
って人もいると思うので、自己勉強含め、今日は簡単に概要とかを書いていきます。

Vue.jsって何?

Vue.jsを一言で表すならば、

「JavaScriptフレームワーク」である。

なんだそれは・・・・
一つ一つ振り返っていきましょう。

一つ一つ振り返っていきましょう。

JavaScriptとは
Webブラウザ上で動作して、動的な機能を提供してくれるもの。

よくある機能例

  • 文字を入力していく時に、後何文字入力できますと表示が出てくる
  • 全項目が入力完了しなければ、完了ボタンが活性化しない
フレームワークとは
直訳すると、「骨組み」
システム的には必要な機能などがある程度集約されているもののこと。セットみたいなイメージ。

補足すると、よく使う機能群が最初から提供されているようなイメージです。
すぐにサンプルプロジェクトを作成できるような下準備を全部やってくれているような感じ。

なんとなく、JavaScriptの機能を使いやすくまとめてくれているものだと理解したところで、
良いところはなんなんだ
ということで、次節でまとめていきます。

良いところは何?

Vue.jsの良いところを語るには、もうちょっと詳しい説明が必要なので、公式の文言を引いてきます。

Vue.jsとは
ユーザーインターフェイスを構築するためのプログレッシブフレームワークです。他の一枚板なフレームワークとは異なり、Vue は少しずつ適用していけるように設計されています。中核となるライブラリは view 層だけに焦点を当てています。そのため、使い始めるのも、他のライブラリや既存のプロジェクトに統合するのも、とても簡単です。また、モダンなツールやサポートライブラリと併用することで、洗練されたシングルページアプリケーションの開発も可能です。

長いけど、個人的に超重要なポイントは下記だと思っている。
洗練されたシングルページアプリケーションの開発も可能
図解すると下記のようなイメージだ。

↑従来のWebアプリケーションの動き。サーバ側でhtmlを作っており、細かい画面切替などで時間がかかる場合が多かった。

↑SPA(シングルページアプリケーション)の動き。リクエストがブラウザの中で画面作成などを行うため、ページ描写が速い。
SPAの良いところは下記のようなものがあります。

  • 表示の切替が速い。
    上述のように、ページ全体の読み込みがないため、スムーズに切替が行える。
    また、1ページ内のある部分だけ切り替えるような使い方も可能のため、Webでありながら、スマホアプリのような使い方が可能。
  • 開発目線だとサーバとWeb側(Vue.js)の役割分担が明確。
    今までサーバがやっていた画面の動きなどをWeb側(Vue.js)に任せることができ、
    データベースへの接続やデータ加工処理などをサーバが行うなど、役割分担が明確化される。

ただし、初期ローディングはコード量が増えるため、最初のページを開くまでの速度が落ちる。

まとめ

Vue.jsはSPA(シングルページアプリケーション)でページ切替が速い。
ただし、最初のページを開くまでの速度が落ちる。
そのため、ユーザーが頻繁にページ切替を行うサイトなど滞在時間の長いサービスに適している。

おすすめ

1件の返信

  1. 2020年2月16日

    […] ちなみに前回の記事はこちらから。 […]

コメントを残す

メールアドレスが公開されることはありません。