シンプルな開発ならVue.js！JavaScriptの人気フレームワークを解説

現在、Javascriptフレームワークは様々な機能を備えたフルスタックフレームワークなど、非常に規模の大きなものが中心となっています。 フルスタックフレームワークはそれだけで何でもできる反面、 ・学習コストが高い ・動作が遅い といった点に対する不満を持つプログラマーは少なくありません。 そんな昨今のフレームワークとは対象的に、 「余計な機能を持たずコア機能以外はプラグインやサードパーティツールとして切り離し、必要最小限のものを選んで組み合わせて使う」 といった形の軽量フレームワークもまた根強い人気があります。 ここでは、そんな軽量フレームワークでも非常に人気の高いVue.jsについて紹介します。

Vue.jsとは

Vue.jsとは[/caption] Vue.jsとは、2014年にAngularJS（Angular 1.x）の開発者の一人・Evan Youによって作られたフレームワークです。 当時AngularJSは非常に先進的なフレームワークでしたが、その多機能さの反面、冒頭でもお話したようなデメリットもあります。 その問題を解決するため、AngularJSから必要な部分のみを切り出してミニマルなフレームワークを作ろうと考えられたのがVue.jsの始まりです。 そんな設計思想で作られたVue.jsですので、幾多のバージョンアップを重ねた現在においても 「シンプルでわかりやすいフレームワーク」 という原点を失うことなく、その魅力を保っています。 シンプル・軽量に強く惹かれるプログラマーは多く、初期から一部でカルト的な人気を誇っていましたが、最近ではAngular・Reactと合わせて3大フレームワークの1つに数えられるまでにシェアを伸ばしてきました。 また、そのシンプルさから汎用性も高く、様々なWebアプリのベースとしても用いられています。 例えばWordPress等のCMSの代替として注目される静的サイトジェネレーター（SSG）にもVue.jsを採用したVuePressがあり、Vue.js同様シンプルさやカスタマイズ性が高く評価されています。 そのため、今後ますます活躍の幅を広げていくことでしょう。

Vue.js の特徴

Vue.js の特徴[/caption] では、Vue.jsにはどのような特徴があるのでしょうか。

軽量・シンプルである

Vue.jsは 「単に低機能だから結果的に軽量である」 ということではありません。 ミニマルな設計思想に基づいて作られたVue.jsはフレームワークの仕様もシンプルにまとめられており、不要なロードやブロッキングが極力発生しないようになっています。 シンプルではありますが、Vue.jsコア単独でも必要な機能は一通り提供していますし、プラグインも必要なものを選んで適切に導入する分には、Vue.jsのシンプル性を損なうことはありません。

管理しやすいコンポーネント

Vue.jsでは、単一の機能に係るhtml・css・Javascriptを一つのコンポーネントとして扱います。 1ファイル1コンポーネントが基本であり、管理・変更が非常にしやすく、再利用性も抜群です。 汎用性が高いコンポーネントを一度しっかり設計すれば、何度も使いまわすことができ、開発速度を大幅に向上させることができます。 チーム開発においてもタスクの分担が行いやすい点が大きなメリットになるでしょう。

直感的なリアクティブシステム

Vue.jsにおける双方向データバインディングは、直感的なリアクティブシステムを採用しています。 データバインディングはJavascriptフレームワークを用いる主目的の一つともいえる目玉機能ですが、フレームワークによっては実装方法が直感的ではなかったり複雑であることが多く、このことが 「Javascriptフレームワークは難しい」 という印象を抱かせる原因の一つにもなっています。 Vue.jsはこのデータバインディングが非常に直感的でわかりやすい点が特徴です。 リアクティブなプロパティはコードブロック内ですべて明示的に宣言を行うため、どんな変数がどんな型としてリアクティブであるか一目でわかり、コードを追うのも非常に楽なのです。 Vue.jsに習熟していなくても、リアクティブ周りはコードをざっと見れば挙動を把握することができるでしょう。

Vue.jsに向くプロジェクト

Vue.jsに向くプロジェクト[/caption] では、Vue.jsにはどのようなプロジェクトが向いているのでしょうか。

速やかに立ち上げたい小規模プロジェクト

Vue.jsはシンプルでミニマルであることが最大の特徴ですので、完成までのスピードが命である小規模プロジェクトに非常に向いています。 Vue.jsのコアはシンプルですがVue CLI等の付属ツールは多機能であり、ターミナルからコマンド一つ打てば必要なプラグインが導入されボイラープレートが記述された新規プロジェクトがあっという間に作成されます。 定型的なSPAであれば驚くほど短時間で仕上げられるでしょう。

少人数チームでの開発

上記と同じく、シンプルなVue.jsは少人数開発において意思疎通が取りやすく、スムーズな開発に役立ちます。 Vue.jsを用いたプロジェクトはコードとその役割がしっかりリンクして、プロジェクト全体の見通しが良いため、分担作業が非常にやりやすいのです。 ソフトウェアアーキテクチャにおける各モデルごとに1～2人程度を分担するような少人数チームなら、チーム開発であることによるボトルネックはほぼ発生せず、それぞれが持てる力を最大限発揮して効率の良い開発が行えるでしょう。

パフォーマンスを最重視

Vue.jsは他のフレームワークと比べて非常に高速に動作しますので、パフォーマンスにシビアなプロジェクトにも最適です。 特にフレームワークの各ファイルのロード時間が他のフルスタックフレームワーク等と比べてかなり短くなりますので、レスポンス命のシンプルなSPA・ランディングページでは大きな差を生みます。

Vue.jsを利用する際の注意点

Vue.jsを利用する際の注意点[/caption] ここでは、Vue.jsを利用する際の注意点をまとめてきます。

プラグインの導入・管理がほぼ必須

vue.jsはミニマルなフレームワークなので、コア機能以外はできるだけ本体に導入せず、プラグインとして外部に切り出す方向性で開発されています。 例えばSPAに不可欠なルーター機能ですが、コア機能としては実装されておらず、公式プラグインのvue routerとして提供されていますので、別途インストールする必要があります。 このような、よく使われる機能はほとんど公式プラグインとして提供されていますし、プロジェクト作成時には公式ツールであるVue CLIから主要なプラグインの一括導入が可能ですので、導入に関してそこまで心配する必要はありません。 しかし、導入したプラグインの管理やテストはしっかり行う必要があります。 それらに係るコストをしっかり計算に入れておかないと、 「Vue.jsはシンプルで簡単だと思って導入したのに想像と違う」 などということになりかねません。

大規模プロジェクトでは逆に複雑になりがち

Vue.jsで大規模プロジェクトの開発を行う場合、前述の通りプラグインを導入することがほぼ必須となります。 プロジェクトが大きければ大きいほど、導入するプラグインも多くなりがちです。 多機能なプラグインは、管理に係るコストが非常に高くなってしまいます。 必ずしもプロジェクトの大きさと導入プラグインの量が比例するわけではありませんが、大量のプラグイン導入が必要になりそうな場合は、他のフレームワークを検討する必要があるでしょう。

チーム開発におけるルール決め

Vue.jsはかなり自由度の高いフレームワークです。 コンポーネントの書き方一つとっても、バージョン2以前のOptions APIを使う方法とバージョン3のComposition APIを使う方法のどちらもが許されており、どちらを選ぶかによって設計が大きく異なってきます。 また、Reactで用いられているJSXを使って書くことも可能で、当然ながらコードの内容や見た目は全く異なるものになります。 このように、様々な書き方が許されている点は個人開発においては大きなメリットですが、チーム開発ではしっかりルールを決めておかないと混沌とした状況になってしまうでしょう。 特に開発チームの人数が多い場合は、他のフレームワークよりも厳密にルールを決めておくことが重要であり、プロジェクトマネージャの管理能力が問われることになります。

フレームワーク選定に困ったらAMELAに相談を

フレームワーク選定に困ったらAMELAに相談を[/caption] 今回は、JavaScriptで人気のフレームワーク、Vue.jsについてみてきました。 小規模なプロジェクトには向いているVue.jsですが、フレームワーク選定の際には注意が必要でしょう。 間違ったフレームワークを選定してしまうと、後々の開発に大きな影響が出てしまいます。 そうならないためには、プロジェクト全体を見通して設計する必要性があります。 AMELAでは、様々なプロジェクトを通して最良のフレームワークの選定、最良の設計を行っています。 特にJavaScriptでは、多くのプロジェクトを成功させてきました。 現在JavaScriptでのプロジェクトを検討されている企業様は、是非とも一度ご相談頂ければと思います。