フロントエンドの新しいスタンダードVue.js

現代のフロントエンド開発で人気を集めるのが「Vue.js」をはじめとしたフロントエンドライブラリ(フレームワーク⁠⁠。なぜ、これらのライブラリが人気を集めるようになったのか、どんなことが実現可能になったのかを知りましょう。

高度化していくWebフロントエンド開発

Webブラウザーや関連技術の進歩でフロントエンド開発は近年めまぐるしい変化を遂げました。JavaScriptが高速かつ本格的なプログラミング言語として発展を続け、Ajaxによる非同期通信は一般的になり、ページ遷移を伴わない描画などフロントエンドでできることがどんどん増えていきます。この流れに乗って、今まではサーバーサイドで行っていた処理をフロントエンドに移譲する流れが出てきます。

一昔前支配的だったWebシステム開発のモデル(旧モデル)を考えてみましょう。サーバーサイドでページを生成し、見た目や一部の動作をjQueryに任せるというものです。JavaScriptの役割は限定的なもので、フロントエンド開発はバックエンド(サーバーサイド)開発に対して補助的な役割しか担いません。このモデルは現在でも広く使われていますが、人気に陰りが見えつつもあります。

そこから、現在人気が出ているWebシステム開発モデル(現モデル)はフロントエンド開発に大きな比重を置くものです。JavaScriptが主役です。

現モデルではサーバーサイドはJSONを返すAPIサーバーとして機能し、ページの表示やURLの変更(ルーティング)などのWebシステムの根幹となる機能をJavaScriptに担わせます。こうすることでフロントエンド側でよりリッチな表現や高速な処理ができます。旧モデルと比較してユーザー体験の向上などが見込め、急速に人気を集めています

フロントエンドに多くの処理がやってきたため、フロントエンド開発がサーバーサイド開発と同等あるいはそれ以上に重要になってきます。

JavaScriptライブラリへの需要の変化

JavaScript中心のWebシステム開発モデルではReactやAngular、Vue.jsなどのライブラリが用いられるようになります。jQueryが重用されることの多かった旧モデルとの大きな違いです。

Vue.jsなどのライブラリは「高度化したフロントエンド開発」以降のライブラリです。そのため、きちんとそれらに対応できる機能を備えています。すべてのライブラリに共通しているわけではありませんが、バインディング(JavaScript上のデータと実際の画面表示などの連携⁠⁠、仮想DOM、組み込みルーティングなどの機能が代表的でしょう。

jQueryはこういった高度化したフロントエンド開発に対応するためのライブラリではありません。そのため機能や構造化の仕組みを有さず、徐々に利用が減っています。

React、Angular、Vue.jsを使えばすぐに現代的なフロントエンド開発ができるのでしょうか?

必ずしもそうではありません。これらのライブラリやそれが実現する新しいスタイルを学習するコストはついて回ります。

プログレッシブフレームワークVue.js

こんな現代のフロントエンド開発で、わかりやすい・直感的なライブラリとして人気を集めているのがVue.jsです。2017年にはGitHubで最も人気を集めたJavaScriptライブラリになり、Star数も11万5千超を集めています。

Vue.jsはプログレッシブフレームワークという、必要な機能を必要な時に追加していくスタイルのライブラリで、その時点で最低限の内容さえ覚えれば使える、新規の学習が最小限で済むライブラリです。そのため、開発モデルの変化に伴う学習コストが低減できるのが人気の理由です。さらに、Vue.jsは簡潔な構文になっているため、書きやすさも大きな特徴です。

学習しやすいVue.jsですが、そうはいってもドキュメントだけではなかなか実践的な開発は難しいものです。そこで読みたいのがVue.js入門 基礎から実践アプリケーション開発まで⁠。Vue.jsの基礎から実践的な内容まで、本番で活用したい人向けの入門コンテンツがそろっています。現代のフロントエンド開発を始めたい方は必読の一冊です。