【フレームワークがわかる】Webフレームワークとは何か?メリット・デメリットやその種類について紹介

初心者

今回は、Webフレームワーク(以下:フレームワーク)とは何か?フレームワークを活用するメリットやデメリット、それぞれの言語の代表的なフレームワークの種類やその特徴などについて解説していきます。

  • フレームワークってなに?
  • フレームワークを利用するメリットやデメリットは?
  • なぜフレームワークを勉強するべきなのか?
  • フレームワークにはどんな種類がある?

などの疑問に応えられるよう初心者向けに紹介していきますので、ぜひ参考にしてください。

フレームワークとは

一般的にフレームワークというと、IT関連で使用されるだけでなく、ビジネス関連など様々な場面で使用されている言葉です。そして単純に英訳すると『枠組み』や『骨組み』、『構造』などと言った意味があります。

要は、その業界や仕事においてのテンプレートやひな型といったもののことをよく『フレームワーク』と呼ばれます。

では、プログラミングや開発などIT関連でよく聞くフレームワークはどういうものを指すのかと言うと、『プログラミングや開発に必要な一般的な機能があらかじめ備わっているもの』のことを言います。

ちなみにネットで検索する時は、単にフレームワークではなく『Webフレームワーク』や『ソフトウェアフレームワーク』、『アプリケーションフレームワーク』などと検索するとIT関連でのフレームワークの記事にたどり着けます。
(以下:フレームワークはWebフレームワークのことを言います)

よりフレームワークについてイメージしやすいよう解説すると、Webサービスを開発する時に、何かしらの機能をもたせるには、コードを1から全て書いて開発を進めていく必要があります。

しかし、このような場面でフレームワークを活用すれば、コードを1から全て書かずとも開発を進めることが出来ます。

つまりフレームワークには、よく使用されるコードのテンプレートが準備されていますので、少量の記述量で開発を進めることができ、作業の効率化につなげることが出来ます。

フロントエンドの実装に特化したフレームワークやテストに特化したフレームワークなど様々なものがあります。

今ではこのフレームワークは、開発には欠かせない技術ですので、自身が習得しているプログラミング言語に合わせて適したフレームワークを習得する必要があるでしょう。

フレームワークを利用するメリット

フレームワークを利用するデメリットはこちらです。

  • 作業スピードの向上
  • コードの統一性を保てる
  • バグの回避
  • 欠点を補う

作業スピードの向上

フレームワークには、頻繁に使用される一般的な機能が搭載されていますので、1からコードを書いて開発をする必要がなく、コードを書く手間を大きく省くことが出来ます。

そのため作業スピードは向上し、開発期間の短縮につなげることが出来ます。

コードの統一性を保てる

フレームワークを使用することは、搭載されているテンプレートを使用するようなものですので、だれが書いても同じコードになります。それによりコードの解釈に掛かる手間を省くことができ、バグの回避にも役立ちます。

特に大規模な開発になると、より多くのエンジニアが一緒に開発を進めることになります。ぞれぞれが1からコードを書いているとコードがバラバラになってしまい、作業工数はもちろん管理コストも大きくかかってしまいます。

その分コードの統一性が保たれていれば管理も容易になり品質の向上にも繋がります。

バグの回避

バグの回避にも役立つのがフレームワークです。

フレームワークを使用することでコードを書く量が減るため、その分のミスを減らすことが出来るのは明白です。

また先ほどのメリットで出たようにフレームワークを使用すれば、コードの統一性を保つことが出来ます。そのためコードの違いにより起こるミスを減らすことが出来るため、バグを回避することに繋がります。

欠点を補う

プログラミング言語には、それぞれ他言語と比べて劣っている点が少なからず存在します。

ただフレームワークを使用することでその欠点を補える場合もあります。

例えばPythonは、一般的に実行速度が遅いと言われていますが、特定のフレームワークを使用することでその実行速度を向上させることもあります。

フレームワークを利用するデメリット

フレームワークを利用するデメリットはこちらです。

  • カスタマイズ性が低い
  • 学習コストが高い

カスタマイズ性が低い

フレームワークに搭載されている機能やテンプレートは、一般的に使用されるような汎用的なものです。

そのため人によっては、カスタマイズしたくなる場合もありますが、その際にはコードの修正や追加をしていく必要があります。

そうなるとフレームワークのメリットは薄れていきますし、場合によってはかえって開発に時間が掛かったりとデメリットになってしまう可能性もあります。

自由度は低くカスタマイズ性という面ではあまりよくありません。

学習コストが高い

利用するデメリットではないですが、フレームワークを利用するには、当然そのフレームワークを勉強するためのコストが発生します。

ユーザーが多く情報量の多いものであれば良いですが、中にはニッチなものがあったり情報量の少ないものもあるので、そうなると学習するのも一苦労です。

学習コストは発生しますが、フレームワークを習得することで、その後の開発が楽になるというメリットがあるので必ず習得しておきましょう。

フレームワークを学習するべき理由

フレームワークは、エンジニアにとって必ずと言って良いほど学習すべきものですが、なぜ学ばなければならないのか?はっきりした目的が持てない方は参考にしてみてください。

フレームワークを学習すべき理由はこちらです。

  • 転職や案件が獲得しやすくなる
  • リリースサイクルを早められる

転職や案件が獲得しやすくなる

開発においてフレームワークの利用は欠かせません。ほぼ必ずと言っても良いほど何かしらのフレームワークが使用されているでしょう。

そのためフレームワークの知識や使用経験があれば、転職する時や案件を獲得する時など有利に進めることが出来ます。大前提である仕事を獲得するという点において、フレームワークの学習は欠かせないでしょう。

リリースサイクルを早められる

何かしらのWebサービスをリリースする場合、機会損失を生まないためにも早い方が良いです。その為にはフレームワークを使用して開発スピードを上げることは必要不可欠です。

またWebサービスにはバグは付き物で、バグがあればいち早く改修し修正版をリリースする必要があります。

そのバグの原因をいち早く見つけるためには、管理しやすい環境が必要で、その為にもフレームワークは役立ちます。

このようにビジネスにおいてリリースサイクルを早める必要がある場面がほとんどですので、フレームワークは非常に重要であり学習すべきものと言えます。

代表的なフレームワークの種類

フレームワークは、サーバーサイドの言語やフロントエンドの言語など様々なプログラミング言語に対して、それぞれに適したものが存在します。

では実際にどのようなプログラミング言語にどんなフレームワークが存在するのか?代表的なものを言語別に特徴も踏まえて紹介していきます。

今回はこれらの言語別で紹介します。

  • Java
  • Scala
  • PHP
  • Ruby
  • Python
  • Go言語
  • JavaScript
  • TypeScript
  • HTML/CSS

Javaフレームワークの種類と特徴

Javaフレームワークの代表的なものはこちらです。

  • Struts
  • Spring
  • Play
  • JSF(JavaServer Faces)
  • Java EE(Java Platform, Enterprise Edition)

ちなみに上記5つのJavaフレームワークの過去5年間の日本国内でのトレンドを比較するとこのようになっています。

圧倒的にSpringの人気が高く、それ以外はどれも同じような状況です。実際に案件数という点で見てもSpringの案件が多く、需要が高いフレームワークのようです。

それではそれぞれの特徴について簡単に紹介していきます。

Struts

Strutsは、正式には『Apache Struts』と言いますが、一般的には『Struts』と省略された形で呼ばれます。

2001年に登場した歴史の古く有名なJavaのWebアプリケーションフレームワークで、MVCモデルのアーキテクチャを導入しているといった特徴があります。

2007年にはStruts1からStruts2へとして改善されてはいますが、2017年にはそのStruts2で脆弱性が発見され、それ以降別のJavaフレームワークへの移行が増えたりしており、人気の高いフレームワークとは言えない状況です。

上記で出したトレンドの図でも2017年に一時期Strutsのトレンドが高くなっているのが分かります。

ただ現在は、その脆弱性に対しての対応は出来ており、常に最新版へアップロードするなどの対応をすれば問題はありません。

オープンソースのフレームワークのため基本無償で利用でき、また独自のカスタムタグを利用できるなどの機能があったりと様々なメリットがあります。

Spring

Springは、オープンソースのJavaのアプリケーションフレームワークで、Javaフレームワークの中では最も利用されているものの1つです。トレンドで見ても他Javaフレームワークと比べ、圧倒的に高くなっています。

正式には『Spring Framework』と言いますが、省略して『Spring』と呼ばれています。

Springは、様々な機能を備えてはいますが、一番の大きな特徴としては、『DI』と『AOP』です。

DI(Dependency Injection)とは、日本語で言うと『依存性注入』と言い、この機能により個々でプログラムを独立させやすくなります。そしてその結果、コードを修正・変更する時は最低限の対応で済ます事ができ、開発を楽にします。

AOP(Aspect Oriented Programming)とは、訳すと『アスペクト指向プログラミング』と言い、要はプログラミングの事です。SpringではこのAOPを使用することができ、それによりコードの分別がしやすくなります。結果、バグや不具合を発見する際に原因を特定しやすくなり、保守性を高めることが出来ます。

Javaフレームワークは種類が多いですが、需要としてこのSpringが高いので、Javaエンジニアは学んでおきたいフレームワークです。

Play

Playは、2007年に登場したオープンソースのJavaのWebアプリケーションフレームワークであり、他プログラミング言語のScalaのフレームワークでもあります。

正式には『Play Framework』と言いますが、一般的には『Play』と呼ばれます。Playは、Rubyの代表的なフレームワークである『Ruby on Rails』やPythonの代表的なフレームワークである『Django』から大きな影響を受けており、これらに似た特徴をもつフレームワークです。

具体的にはMVCモデルのアーキテクチャを採用しており、効率的で高速な開発を実現することが出来ます。またCPUリソースやメモリの消費量が少なく軽快な動作を実現することができるので、軽量かつ高い動作性に定評があります。

JSF(JavaServer Faces)

JSFは、JavaServer Facesの略称で、2004年に登場したJavaのWebアプリケーションフレームワークです。

JSFの特徴は、StrutsやPlayと同じように、MVCモデルを採用しています。さらにGUIが組み合わさっているフレームワークですので、その親和性の高さにより、ログイン画面やページ遷移といった開発が容易に行えます。

JSFにはその他にも様々な機能があり、UI構築に適したフレームワークと言えるでしょう。また後述紹介するJava EEの仕様の一部にJSFが採用されているため、Java EEを使用している企業にとっては導入する有力な選択肢の1つになります。

Java EE(Java Platform, Enterprise Edition)

Java EEは、Java Platform, Enterprise Editionの略称で、Java標準仕様のフレームワークです。

Java EEの中にはJava SEが含まれていたり、Javaの各種APIなどの機能を備えています。そして企業向けの大規模なシステムやWebアプリケーション開発・構築に必要な機能をまとめて提供しています。

今はオラクル社が研修や認定資格を提供しているという他にはない特徴もあります。ただ元々はオラクル社運営でしたが、2017年にEclipse Foundationに寄贈してオープンソース化をしており、名前もJava EEのバージョン8以降から『Jakarta EE』に変わっています。

ちなみに『Java』はオラクル社より商標登録されている言葉の為、名前の変更をしています。

Java EEの認定資格があるほど世界的にも注目されているフレームワークですので、Javaエンジニアとして学んでおくのがよいでしょう。

Scalaフレームワークの種類と特徴

Scalaフレームワークの代表的なものはこちらです。

  • Play
  • Scalatra
  • Lift

ちなみに上記3つのScalaフレームワークの過去5年間の日本国内でのトレンドを比較するとこのようになっています。

Scalaフレームワーク同士で比較すればPlayが一番高く圧倒的な数字になっています。実際、ScalaのフレームワークといえばほとんどPlayという状況です。

それではそれぞれの特徴について簡単に紹介していきます。

Play

Playは、先ほどJavaフレームワークのところでも紹介したようにJavaとScalaのWebアプリケーションフレームワークで、正式名称は『Play Framework』と言います。

Javaのフレームワークとしては、広く使用されている訳ではないですが、Scalaのフレームワークと言えばこのPlayが主流です。

特徴としては、『Ruby on Rails』や『Django』といった他言語のフレームワークから大きく影響を受けており、MVCモデルのアーキテクチャで、軽量かつ動作性の高いフレームワークとして定評があります。

Scalaを扱うエンジニアは、フレームワークとして必ずこのPlayを学習しておきましょう。

Scalatra

Scalatraは、2009年に登場したオープンソースのScalaのWebアプリケーションフレームワークで、Rubyの『Sinatra』というフレームワークをモデルに開発されています。

特徴としては、シンプルかつ軽量で高いパフォーマンスを発揮する点です。その為、Scalaのマイクロフレームワークとも呼ばれています。

大規模な開発よりは、小規模な開発に向いているフレームワークです。

Lift

Liftは、オープンソースのScalaのWebアプリケーションフレームワークで、Rubyのフレームワークである『Ruby on Rails』のメリットを実現することを目標に開発されています。

Liftにはコントローラーという概念がなく、完全に画面から作成していく『view first』なアプローチをします。

また安全性という点には特に注力しているフレームワークで、公式サイトでは「最も強力で最も安全なWebフレームワーク」と謳っています。

PHPフレームワークの種類と特徴

PHPフレームワークの代表的なものはこちらです。

  • Laravel
  • Symfony
  • CakePHP
  • Zend Framework
  • FuelPHP

ちなみに上記5つのPHPフレームワークの過去5年間の日本国内でのトレンドを比較するとこのようになっています。

4年ほど前まではCakePHPの人気が高かったですが、2016年後半あたりからLaravelに逆転されています。

そして現在Laravel以外のフレームワークは、トレンドで見ると団子状態になっており、圧倒的にLaravelの人気が高くなっています。

それではそれぞれの特徴について簡単に紹介していきます。

Laravel

Laravelは、2011年に登場した比較的後発のオープンソースのPHPのWebアプリケーションフレームワークです。

PHPのフレームワークとしては現在一番人気があり、全世界で最も需要が高く広く使用されています。またプログラミング言語問わず、フレームワークという枠組みで見てもLaravelは、非常に人気が高いです。

Laravelは、MVCモデルを採用しており、多機能で柔軟性の高いフレームワークで、基本的にどんなWebアプリケーションの開発にも向いているフルスタックなフレームワークです。

人気の高さはさることながら、便利な機能も豊富で簡単で使いやすい特徴があります。ただ頻繁にバージョンアップがされているので都度キャッチアップをしていく必要があります。

PHPエンジニアは必ず習得しておきたいフレームワークです。

Symfony

Symfonyは、2005年に登場したオープンソースのPHPのWebアプリケーションフレームワークです。

Javaフレームワークの『Spring』やRubyフレームワークの『Ruby on Rails』から影響を受けて開発されています。

Symfonyの特徴としては、MVCモデルを採用したフレームワークで、機能テストやデバック用のツールが標準で搭載されていたりと、保守性や安定性を重視した設計になっています。

10年以上の豊富な実績がありますが、現在は需要は下がっている印象にあります。

ちなみに今一番人気のPHPフレームワークであるLaravelは、このSymfonyをモデルにしています。

CakePHP

CakePHPは、2005年に登場したオープンソースのPHPのWebアプリケーションフレームワークで、Symfony同様に『Ruby on Rails』の概念を取り入れて開発されいます。

また元々はPHPフレームワークの中で最も人気のあるものでした。ただ現在でも案件自体は豊富にあり、需要は一定数あります。

CakePHPの特徴は、開発速度を速くする設計になっている点です。

MVCモデルを採用していることに加え、bake機能というプログラムの自動生成機能を搭載していることで開発スピードを上げることが出来ます。

また10年以上前から活躍しており、過去は人気No.1という豊富な実績もあり、日本語の情報も多く学習面でも優れています。

PHPフレームワークの中では、Laravelに次いで案件数が多く需要があるため、学んでおきたいフレームワークです。

Zend Framework

Zend Frameworkは、2006年に登場したオープンソースのPHPのWebアプリケーションフレームワークです。

開発元は、ゼンド・テクノロジーズですが、技術パートナーとしてIBMやGoogle、マイクロソフト、アドビシステムズなどの世界的な大企業があります。

Zend Frameworkは、拡張性や柔軟性が高く、他PHPフレームワークに比べ規制が緩いです。改変したコードを公開する義務はないため、商用的には向いているフレームワークです。

またコンポーネントと呼ばれるクラスライブラリが豊富に存在しています。

FuelPHP

FuelPHPは、2011年に登場したオープンソースのPHPのWebアプリケーションフレームワークです。

本記事では紹介していないですが、『CodeIgniter』というPHPフレームワークを参考に開発しています。

FuelPHPは、HMVCモデルを採用しており、そして他PHPフレームワーク(CakePHP、Symfonyなど)の長所を活かして、軽量かつ高速なフレームワークとして定評があります。

規約の複雑化という点も解消した設計になっており、学習コストも比較的低く、小規模な開発に向いているフレームワークです。

Rubyフレームワークの種類と特徴

Rubyフレームワークの代表的なものはこちらです。

  • Ruby on Rails
  • Sinatra

ちなみに上記2つのRubyフレームワークの過去5年間の日本国内でのトレンドを比較するとこのようになっています。

Rubyのフレームワークと言えば『Ruby on Rails』ですが、トレンドの比較からの結果からもそれがよく分かるほど圧倒的な差があります。

それではそれぞれの特徴を簡単に紹介します。

Ruby on Rails

Ruby on Railsは、2004年に登場したオープンソースのRubyのWebアプリケーションフレームワークで、『RoR』と表記されたり『Rails』と呼ばれたりします。

Ruby on Railsは、他言語のフレームワークにも大きな影響を与えているほど優れているフレームワークで、Rubyフレームワークとしては最も人気があり一番需要の高いフレームワークです。

特徴としては、MVCモデルのアーキテクチャを採用しており、重複を防ぐために短く洗練されたコードの記述が可能であることやテスト自動化機能が搭載されているなど、開発効率を向上する仕組みや機能があります。

またRuby自体が日本産のプログラミング言語で日本語の情報が多いので、Ruby on Railsも比較的学習しやすいです。

Ruby関連の案件にはほぼ必須でRuby on Railsを使用するためRubyのエンジニアであれば必ず習得しておかなければならないでしょう。

Sinatra

Sinatraは、2007年に登場したオープンソースのRubyのWebアプリケーションフレームです。

特徴としては、MVCモデルを採用しておらず、柔軟性の高いプログラミングができる設計になっています。また軽量なフレームワークで、小規模の開発に向いています。

Sinatraは、多くの企業や団体に使用されており、代表的なところでは、AppleやBBC、イギリス政府、LinkedIn、GitHub、スタンフォード大学などがあります。

Rubyフレームワークは圧倒的に『Ruby on Rails』が使用されるため、需要はかなり低いですが、たまにSinatraを使用する案件も出てくることはありますし、比較的習得しやすいフレームワークですので興味のある方はぜひ学んでみてください。

Pythonフレームワークの種類と特徴

Pythonフレームワークの代表的なものはこちらです。

  • Tensorflow
  • Django
  • Bottle
  • Flask

ちなみに上記4つのPythonフレームワークの過去5年間の日本国内でのトレンドを比較するとこのようになっています。

ただどれもPythonフレームワークですが、Tensorflowとそれ以外とでは用途は違うためトレンドを比較するのも適切ではないかもしれませんが、このようになっています。

Pythonということもあり比較的どれもトレンド数値が高い傾向にありますが、その中でもPythonのWebアプリケーションフレームワークである『Django』の人気が高いです。

実際案件としてもDjangoの案件が多く、需要が高いです。

Pythonフレームワークについてやそれぞれの特徴や単価相場などより詳しく知りたい方はこちらも参考にしてください。

それではそれぞれの特徴を簡単に紹介していきます。

Tensorflow

Tensorflowは、2015年にGoogleによって開発されたオープンソースのPythonの機械学習・ディープラーニングフレームワークです。

日本では機械学習・ディープラーニングフレームワークとして、最も使用されているフレームワークの1つです。

Pythonフレームワークと言われてはいますが、実際は他の言語でも使用すること自体は可能です。ただ公式にPythonでしか安全性を保証しないと公表しているので、結果的にPythonフレームワークとなっています。

Google社開発ということで、Googleが提供するあらゆるサービスに導入されており、顔認証や画像認識・検索、音声認識など多くのユースケースに対応でき、そして事績があります。

また豊富なライブラリが存在し追加することが出来ます。

Pythonを使ってAI分野の開発やデータサイエンティスト関連に進みたい人には学んでおくべきフレームワークです。

Django

Djangoは、2005年に登場したPythonのWebアプリケーションフレームワークで、読み方は『ジャンゴ』と言います。

PythonのWebアプリケーションフレームワークとしては、最も人気があり需要が高く、Webに必要な基本的な機能が揃っており、多機能で万能型のフレームワークといった特徴があります。

また汎用性も高く、規模としても大小問わず対応できます。そしてユーザーも多く実績も豊富なため、情報量も多く学習面でも充実しています。

Pythonフレームワークであればまず1番に学んでおくべきフレームワークで、どのフレームワークか迷っているのであれば迷わずDjangoを選択すべきです。

Bottle

Bottleは、2009年に登場したPythonのWebアプリケーションフレームワークで、Pythonフレームワークの中では、最もシンプルと言われています。

特徴としては、シンプルかつ軽量で高速な設計になっており、Webアプリケーションの開発を速く簡単に行うことが出来ます。

需要はそこまで高い訳ではないですが、ドキュメントの量も他フレームワークと比べ少なく、学習コストの低いフレームワークですので興味のある方は学んでみるのも良いでしょう。

Flask

Flaskは、2010年に登場したPythonのWebアプリケーションフレームワークです。

標準で提供する機能を最小限にしており『マイクロフレームワーク』とも言われます。

特徴としては、シンプルで軽量なフレームワークであることと機能が最小限であるためカスタマイズ性が高い点があります。

シンプルの為初心者の方でも学習コストは比較的低く、また柔軟にライブラリ等機能を追加できる点は大きなメリットで、小回りの利くフレームワークです。
大規模な開発には向いてはいませんが、中小規模の開発に向いています。

Go言語フレームワークの種類と特徴

Go言語フレームワークの代表的なものはこちらです。

  • Echo
  • Revel
  • Gin
  • Beego
  • Goji
  • iris

それではそれぞれの特徴を簡単に紹介していきます。

Echo

Echoは、Go言語の軽量なWebアプリケーションフレームワークです。

特徴としては、RestAPIに向いており、高速で、拡張性及びカスタマイズ性の高いという点が挙げられます。

2015年に登場した比較的新しいフレームワークで、これまでGo言語フレームワークとして高速で有名であった『Gin』よりもパフォーマンスが高いと言われており、注目を集めています。

Revel

Revelは、Go言語のフルスタックなWebアプリケーションフレームワークです。

Rubyフレームワークの『Ruby on Rails』やJava/Scalaフレームワークの『Play』などから影響を受けており、MVCモデルのアーキテクチャを採用しています。

Webアプリケーション開発に必要な機能は一通り揃っており、大規模な開発にも対応できるフレームワークです。またMVCモデルの為、多言語のMVCフレームワークを使用した経験のある方には、比較的親しみやすいでしょう。

Go言語のフルスタックなフレームワークの中では、人気があります。

Gin

Ginは、Go言語の軽量なWebアプリケーションフレームワークで、古くからあり人気の高いフレームワークの1つです。

Go言語登場の初期からある『Martini』というWebアプリケーションフレームワークを元に、より高速なパフォーマンスを発揮できるよう設計されています。そしてそのMartiniより約40倍の高速な処理が可能となっています。

このようにパフォーマンスと生産性の高さに定評があるフレームワークで、また脆弱性に対しても強く、堅牢なWebアプリケーションの開発にも向いています。

Beego

Beegoは、Go言語のWebアプリケーションフレームワークで、Revel同様、MVCモデルを採用しており、フルスタックなフレームワークです。

特徴としては、ドキュメントが充実しており、簡単なWebアプリケーションであればBeegoのみで開発することが出来ます。

また自動テスト機能も搭載されているなど、万能型のフレームワークとして定評があります。

大手スマートフォンメーカーのファーウェイなどで使用されるなど、中国の企業で広く使用されているフレームワークです。

Goji

Gojiは、Go言語の軽量なWebアプリケーションフレームワークです。

Go言語フレームワークの『Gin』の次に高速と言われており、カスタマイズ性の高さやシンプルな設計に特徴があります。

中小規模の開発に向いているフレームワークです。

iris

irisは、オープンソースのGo言語の軽量なWebアプリケーションフレームワークで、ベンチマーク最速と謳われています。

デバイスにとらわれることなく、Webサーバーやデスクトップ・モバイルなど様々なデバイスで高いパフォーマンスを発揮します。

強い癖もなくドキュメントも充実しているため初学者であっても比較的学びやすい、おすすめのフレームワークです。

JavaScriptフレームワークの種類と特徴

JavaScriptフレームワークの代表的なものはこちらです。

  • AngularJS
  • React
  • Vue.js

ちなみに上記3つのJavaScriptフレームワークの過去5年間の日本国内でのトレンドを比較するとこのようになっています。

5年前はAngularJSのトレンドが高い傾向にありましたが、Reactに逆転され、直近ではVue.jsのトレンドが高くなっています。

トレンドで見ると大きく差があるように見えますが、どのフレームワークも多くの案件があり、多くの現場で使用されています。

それではそれぞれの特徴を簡単に紹介していきます。

AngularJS

AngularJSは、2009年に登場したオープンソースのJavaScriptのWebアプリケーションフレームワークです。

Googleによって開発されたフルスタックなフロントエンドのフレームワークで、機能も豊富で多くの現場で仕様されています。

基本的にはどの開発にも対応できる性能の高さがありますが、高速性を必要とするゲームやアプリケーションの開発には不向きです。

JavaScript問わずフレームワークという枠で見ても非常に人気です。案件も多く需要も高いので、フロントエンドエンジニアにとっては学んでおきたいフレームワークです。

React

Reactは、2013年に登場したJavaScriptのWebアプリケーションフレームワーク(正式にはライブラリ)です。

Facebook社によって開発されており、『ReactJS』や『React.js』と呼ばれることもあります。

信頼性の高いフレームワークで、ボタンやテキストボックスなどのUIの構成部分を作成するのに最適で、高速な動作で保守性の高いコードを書くことができる特徴があります。

また先ほど説明した、AngularJSとも併用可能です。

Reactの使用例だと『Facebook』や『Yahoo』、『Instagram』、『Netflix』などにも使用されています。

Vue.js

Vue.jsは、2014年に登場したJavaScriptのWebアプリケーションフレームワークです。

AngularJSよりも軽量でシンプルな設計になっており、比較的学習しやすいフレームワークで、現在人気が高まっています。

Vue.jsでは、UXを向上させるためのSPA(シングルページアプリケーション)やSSR(サーバーサイドレンダリング)などの開発にもよく使用されるフレームワークで、需要も高まっています。

日本でも案件がどんどん増えてきいますし、学習難易度も低いのでフロントエンドエンジニアは学んでおきたいおすすめのフレームワークです。

TypeScriptフレームワークの種類と特徴

TypeScriptフレームワークの代表的なものはこちらです。

  • Angular
  • React
  • Vue.js
  • Nest

TypeScriptはJavaScriptの拡張版のプログラミング言語で互換性もあるため、JavaScriptフレームワークと同じものが使える場合もあります。

それではそれぞれの特徴を簡単に紹介していきます。

Angular

Angularは、オープンソースのTypeScriptのWebアプリケーションフレームワークで、Googleによって開発されたフロントエンドのフルスタックなフレームワークです。

JavaScriptフレームワークの『AngularJS』とほぼ名前は同じ点からも分かるように、AngularはAngularJSにあった欠点を改善するためにAngularJSを開発したチームが1から開発したフレームワークで、AngularJSの機能も一部引き継がれています。

しかしAngularJSとAngularは、基本的には全くの別物であり、互換性もありません。

React

Reactは、JavaScriptフレームワークで了解した通りJavaScriptのWebアプリケーションフレームワークですが、TypeScriptの環境下でもReactが動作できるようサポートが追加されています。

それによりTypeScriptのフロントエンドのWebアプリケーションフレームワークとも言えます。

最近ではTypeScriptで書かれているReactも増えてきており、TypeScriptでReactを動かすための題材やチュートリアルといった情報も増えてきています。

Vue.js

Vue.jsも前項で、JavaScriptフレームワークと紹介しましたが、TypeScriptのフロントエンドのWebアプリケーションフレームワークでもあります。

ただVue.jsとTypeScriptの相性はReactと比べあまり良くないとの意見もちらほら出ています。

Nest

Nestは、TypeScriptのサーバーサイド側のフルスタックなフレームワークで、『Nest.js』とも言われます。

Angularに近い仕様の為フロントエンドの開発でAngularを使用するのであれば、似た考え方でサーバーサイド側も開発を進めることができます。

ただ日本語のドキュメントが少なく、日本ではまだあまり需要が高いとは言えません。

それでも評価の高い記事も見受けられるので、TypeScriptを使うエンジニアは、興味をもっておいても良いでしょう。

HTML/CSSフレームワークの種類と特徴

HTML/CSSフレームワークの代表的なものはこちらです。

  • Bootstrap
  • Bulma
  • Materialize

ちなみに上記3つのHTML/CSSフレームワークの過去5年間の日本国内でのトレンドを比較するとこのようになっています。

Bootstrapが圧倒的にトレンド数値が高い状況で、実際需要としてもほとんどがBootstrapを使用する案件です。他にもCSSのフレームワークは多く存在しますが、それでも圧倒的にBootstrapが人気です。

それではそれぞれの特徴を簡単に紹介していきます。

Bootstrap

Bootstrapは、2011年に登場したCSSのフロントエンドのWebアプリケーションフレームワークです。

Twitter社によって開発されており、CSSフレームワークの中では最も人気があり多くの現場で使用されています。

グリッドシステムを採用しており、レスポンシブデザインのレイアウトを簡単に実現することができ、テーブルやカラムの幅などの調整も容易に行えます。

フロントエンドエンジニアやデザイナーなどCSSを扱う人であれば、必ず習得しておきたいフレームワークです。

Bulma

Bulmaは、CSSの軽量なWebアプリケーションフレームワークです。

シンプルなグリッドシステムとコンポーネントを持たせたフレームワークで、フレームワーク本体のCSSファイルは約187KBと軽量さに特徴を持ちます。

ただ軽量さを求めている分、JavaScriptのファイルを持たせてはおらず、JavaScriptを使いたい場合は、自身でコードを追加していかなければなりません。

CSSフレームワークと言えば前述の『Bootstrap』が一般的ですが、Bootstrapにはない要素を取り入れるなど独自性があります。

Materialize

Materializeは、2018年に登場した比較的新しいCSSのWebアプリケーションフレームワークです。

Googleが提唱している『マテリアルデザイン』を取り入れており、質の高いUI/UXを実現出来ることが最大の特徴です。そしてそれを実現するために『アニメーション』や『トランジション』、『サイトテンプレート』などが豊富に揃っています。

Googleのツールに似たUIに仕上げたいときは、最適なフレームワークの1つです。

最後に

フレームワークについてメリットやデメリット、学ぶべき理由や言語別の代表的なフレームワークの種類とその特徴について紹介してきました。

フレームワークは開発には欠かせないものです。フレームワークの需要や特徴をきちんと把握し、どれを学習すべきなのか判断しましょう。

ぜひ参考にしてください。