三大Javascriptフレームワーク「Angular、React、Vuejs」について

TOP
コラム
三大Javascriptフレームワー

はじめに

昨今のフロントエンド技術の発展は目覚ましく、様々なJavascript製フレームワークが登場しております。しかし、色々な種類のフレームワーク等が乱立していて、どのフレームワークを使って開発しようかと悩んでいる方は多いのではないでしょうか？

今回は、いわゆる「3大フレームワーク」と言われる「Angular」「React」「VueJS」の有名な3つのフレームワークを紹介すると共に、その特徴などにも触れていきたいと思います。

Angularとは？

Angularとは、Googleが2016年頃開発したTypescriptベースのフロントエンドフレームワークです。「フルスタックフレームワーク」を自称しており、Webフロントエンド開発にはAngularを用意するだけで事足りるような設計を目指して開発されています。
Angularについて注意すべきことは、Angularの初期バージョンは「AngularJS」というJavascriptベースのフレームワークだということです。そのため「Angular」と「AngularJS」は違うものであるため、情報収集等をする際にはその点だけ気をつけて下さい。

1・特徴

・フルスタックフレームワーク

上記でも述べましたが、Angularは「フルスタックフレームワーク」を自称しており、UIの構築だけではなく、ルーティングや状態管理、バックエンドとの通信などの機能は一通り揃えており、Angularだけ用意すればWebフロントエンド開発ができるような設計になっています。

・コンポーネント思考

Angularはコンポーネントベースの設計をされており、一つのコンポーネント内にUIを構築する「.html」ファイル「.css」ファイル、状態変化やリクエストなどのロジックを記述する「.ts」ファイル、テスト用のコードを記述する「.spec.ts」の4つのファイルで構成されています。これらのファイルにコードを記述し、開発をしていく流れになります。

・Typescriptを標準採用

AngularはTypescriptを標準で採用しています。そのため、型付けや型推論、Null安全などのTypescriptの恩恵を十分に受けることが可能です。

2・メリット

・Angularだけでフロントエンドの機能が開発できる

上記にも述べましたが、AngularはUIの構築だけではなく、ルーティングや状態管理などフロントエンド開発に必要な機能が一通り揃っていますので、特に新しく何かライブラリ等を追加しなくてもフロントエンド開発を始められる手軽さが強みです。

・コンポーネントの作成が早い

Angularはコンポーネントの作成は「angular-cli」というコマンドラインツールでも作成することができますが、このCLIを使用するとコンポーネントの作成が早くできます。
コンポーネントを作成するには「ng g component(コンポーネント名)(作成する場所)」と入力すると、指定したコンポーネント名、場所に.html、.css、.ts、.spec.tsファイルがすぐに作成されます。

3・デメリット

・Typescriptの学習が必須である

React、VueJSはTypescriptは任意で開発に使うことができますが、Angularはロジックの記述はTypescriptを使用して記述することが必須なので、開発にあたってはTypescriptの知識が必須となります。Angularの開発には型付けなどのTypescriptの仕様を把握しなければならないので、Typescriptを学習したことのない人には少々ハードルが高いです。

・開発の規模によってはオーバースペックである

Angularはフロントエンド開発に必要な様々な機能が搭載されていますが、開発規模によっては必要のない機能などもあります。例えば、小規模な個人サイトなどで状態管理の機能はあまり必要のない機能です。このように、開発規模によっては必要のない機能までついてくるので、その点は注意が必要です。

Reactとは？

Reactは、Facebook社が開発したUIの構築を目的とした「UIライブラリ」です。現在のフロントエンドフレームワークではポピュラーは「仮想DOM」の概念をいち早く導入した先駆者でもあり、宣言的UIによって柔軟なフロントエンド開発が可能になっています。

１・特徴

JSX

Reactは、「JSX」というJavascriptの機能を拡張した構文の中にHTML、Javascriptのロジックなどを一緒にして記述します。これにより柔軟な開発が可能になっています。

最低限の機能を用意

上記でも述べましたが、Reactは「UIライブラリ」で、初期状態ではUI構築に必要な最低限の機能しか用意されておらず、あとは開発者が用途に応じて適宜機能を追加していくような使い方が想定されています。

2・メリット

Javascriptの特性を最大限に活かせる

Reactで採用されているJSXは、Javascriptの拡張構文です。そのため、関数の戻り値にコンポーネントが指定できたり、内部のロジックの記述にJavascriptの記法ができるため、Javascriptの特性を最大限に活かした記述ができます。

再利用性の高いコンポーネントの作成ができる

Reactは他二つのフレームワークと比べて柔軟なコンポーネントの記述ができるため、再利用性の高いコンポーネントの作成が可能です。

軽量

Reactは必要な機能は適宜開発者がプロジェクトの規模に応じて追加していく形なので、無駄が少なく、軽量になります。

３・デメリット

学習コストが高い

ReactはJSXという独特な記述方式や抽象的な概念が多いことから、理解するのに時間がかかるため、他のフレームワークよりも比較的学習コストが高いと言えます。

機能の変更、追加のペースが早い

Reactは世界中で人気があり、公式やコミュニティの開発も活発なため、次々に新しい機能やライブラリ等が開発、追加されたりします。それは良いことでもありますが新しく追加された仕様や機能を覚えなければならないのは開発者にとっては負担にもなりえます。

VueJSとは？

VueJSは、2014年頃開発されたフロントエンドフレームワークです。AngularJSの開発に携わっていた開発者が「AngularJSの良い所だけを抽出した、軽量なフレームワーク」を目指して開発されました。

１・特徴

単一ファイルコンポーネント

VueJSは「単一ファイルコンポーネント」といい、１ファイルの中にHtml、Css、Javascriptを混在させることが可能です。これにより、コンポーネント間の関係などがつかみやすくなります。

２・メリット

学習コストが低い

VueJSは他二つのフレームワークと比べて、フレームワーク独特の仕様などは少ないので、学習コストは比較的低いと言えるでしょう。

日本語情報が多い

VueJSは日本や中国などアジア圏での人気が高いため、日本語の情報も比較的多いです。何か困った時に検索した時に情報が多いと助かりますよね。

３・デメリット

単一ファイルコンポーネントは大規模な開発には向かない

単一ファイルコンポーネントは小規模な開発には適していますが、大規模な開発になってくるとコードの記述量が増え、コードの可読性が低下するので、大規模な開発にはあまり向いてるとは言えないでしょう。

器用貧乏な面がある

VueJSはReduxのようなエコシステムに習ってVuexを導入するなど、他のフレームワークやライブラリの良い所も取り入れようとするのですが、他のフレームワークと比較してフレームワークとしての方向性が定まっていないように見受けられる場面があります。

まとめ

いかがでしたでしょうか。この記事がみなさんのフロントエンド開発の技術選定の助けになれば幸いです。