Webフレームワークの選び方を紹介します
世の中には非常に多くのWebフレームワークが存在します。
選択肢が多いのは良いことですが、どのWebフレームワークを選べばよいのかと悩まれる方もいらっしゃると思います。
そこで本記事ではWebフレームワークを選ぶ際の判断材料としてどのようなものがあり、どのような基準でWebフレームワークを選べばよいかについて私なりの考えをまとめてみました。
Webの基本
フレームワークのお話に入る前に、Webの基本について簡単に整理しておきたいと思います。
下図はユーザーがブラウザからWebサイトにアクセスしたときの一連の流れを説明していますが、WebアプリケーションがHTMLを作成してブラウザ側に返していることがわかります。
図の詳細は下記のリンクをご確認ください。
一方、Single Page Application（略してSPA）という実現方法では下図のようにWebアプリケーションはHTMLの代わりにデータをブラウザ側に返しています。
図の詳細は下記のリンクをご確認ください。
Webフレームワークの分類
上記で述べたことを１つにまとめたのが下図で、上段が「従来の実現方法」で下段が「SPAでの実現方法」です。
図の詳細は下記のリンクをご確認ください。
上図の赤線と青線で囲まれている箇所がありますが、次のことを意味しています。
赤線 → サーバーサイドのWebフレームワークが動く場所
青線 → クライアントサイドのWebフレームワークが動く場所
サーバーサイドのWebフレームワーク（バックエンドフレームワーク）とクライアントサイドのWebフレームワーク（フロントエンドフレームワーク）には次のようなものがあります。
サーバーサイドのWebフレームワークの例
ASP.NET/ASP.NET Core
Ruby on Rails
Django
Laravel
Spring
Express
Flask
FastAPI
...
クライアントサイドのWebフレームワークの例
React
Angular
Vue.js
...
以上のようにWebフレームワークといってもサーバーサイドのWebフレームワークとクライアントサイドのWebフレームワークでは動く場所も役割も違いますのでご注意ください。
Webフレームワークを選ぶ際の判断材料
世の中には多くのWebフレームワークが存在していますが、その中からどれかを選ぶには何らかの判断材料が必要となります。
私が重要だと考えている判断材料は下記の７つです。
１．Webフレームワークランキング
２．プログラミング言語ランキング
３．公式ドキュメントの充実度
４．本格的なチュートリアルの有無
５．本格的なアプリのサンプルコードの有無
６．長時間YouTube動画の有無
７．その他の判断材料
以下でそれぞれを簡単に紹介します。
１．Webフレームワークランキング
Webフレームワークを選ぶ際の判断材料として一番重要なのはWebフレームワークのランキング情報だと考えています。
ここでは下記の２つのサイトのランキング情報を紹介します。
HotFrameworks
Stack Overflow Developer Survey
HotFrameworks
現在のランキングは下図のとおりです。
HotFrameworksでは下図のようにランキングの推移も確認することができます。
下記にサイトのリンクを貼っておきます。
Stack Overflow Developer Survey
下図の赤線の「Technology」の箇所ではいろいろなランキングが紹介されています。
Webフレームワーク関連の４つのランキングを紹介します。
人気フレームワークのランキング（全ての投票者）
人気フレームワークのランキング（プロの開発者のみ）
好きなフレームワークのランキング
使ってみたいフレームワークのランキング
下記にサイトのリンクを貼っておきます。
２．プログラミング言語ランキング
サーバーサイドのフレームワークは様々なプログラミング言語で実現されているため、Webフレームワークを選ぶ際の判断材料としてプログラミング言語のランキングも重要だと考えています。
ここでは下記の２つのサイトのランキング情報を紹介します。
PYPL PopularitY of Programming Language
TIOBE Index
PYPL PopularitY of Programming Languageのランキング
下記にサイトのリンクを貼っておきます。
TIOBE Indexのランキング
下記にサイトのリンクを貼っておきます。
３．公式ドキュメントの充実度
Webフレームワークを学習する際に一番信頼できる情報源は公式ドキュメントです。
よって、公式ドキュメントの充実度もWebフレームワークを選ぶ際の判断材料として重要だと考えています。
例えばVue.jsとFastAPIの公式ドキュメントはとても読みやすくて、内容も充実しているのでフレームワークの学習には非常に適していると思います。
Vue.jsの公式ドキュメント
学習のための動画が用意されています。
動画の一覧です。
YouTube上に動画が公開されていましたのでリンクを貼っておきます。
公式ドキュメントの中にCodePenの環境が埋め込まれているので動かしながら学習することができます。
FastAPIの公式ドキュメント
FastAPIはチュートリアルがとても充実しています。
たくさんのチュートリアルが用意されています。
初学者向けのチュートリアルの例
実践的なチュートリアルの例
４．本格的なチュートリアルの有無
Webフレームワークをじっくりと学習する場合は本格的なチュートリアルがあると非常に助かります。
例えばRailsにはRuby on Railsチュートリアルという非常に有益なチュートリアルがあります。
下図はチュートリアルで作成するアプリです。
また、Djangoには下記のようなチュートリアルがあります。（Djangoのバージョンが１なのでちょっと内容が古いのが残念ですが。。。）
下図のようなアプリをチュートリアルで作成していきます。
５．本格的なアプリのサンプルコードの有無
Webフレームワークを学習する場合は本格的なアプリケーションのサンプルコードがあると非常に助かります。
GitHub上にはRealWorld example appsというリポジトリがあり、そこではいろいろなフレームワークのサンプルコードが公開されています。
下図のようなアプリをさまざまなフレームワークで実現しています。
下図の一覧画面からフレームワークを選択します。
例えばASP.NET Core（現在３つ存在）から１つを選択すると下記のリポジトリに飛びますが、GitHubのスター数が1.5kもあります。
FastAPIのリポジトリも存在しますが、GitHubのスター数が1.6kもあります。
下記にRealWorld example appsのリポジトリのリンクを貼っておきます。
６．長時間YouTube動画の有無
Webフレームワークを学習する方法として、YouTube動画で学ぶ方法もありますが、長時間の動画で学習すればフレームワークについてかなり詳しく理解することができるので非常に助かります。
例えばYouTube上で「django tutorial」で検索すると下記のような長時間動画が見つかりました。
今度は「laravel 8 tutorial」で検索すると下記のような長時間動画が見つかりました。
７．その他の判断材料
その他の判断材料としては書籍の多さ、求人数、パフォーマンス、、、などいろいろあると思いますが、ネットで検索するといろいろと情報が得られますので必要に応じて調べていただくのが良いと思います。
フレームワークの選び方の例
以上の内容を踏まえまして、ここでは下記の３つの基準でフレームワークを選んでみようと思います。
１．人気で選ぶ
２．人気＋習得のしやすさで選ぶ
３．プログラミング言語で選ぶ
１．人気で選ぶ
フロントエンドフレームワーク → React
バックエンドフレームワーク → ASP.NET/ASP.NET Core
フロントエンドは多くのランキングで１位となっているReactを選びました。
バックエンドは多くのランキングで上位のASP.NET/ASP.NET Coreを選びました。（上記のランキングではASP.NETとASP.NET Coreは別に扱われていましたが、ここでは１つとして考えることにします）
２．人気＋習得のしやすさで選ぶ
フロントエンドフレームワーク → Vue.js
バックエンドフレームワーク → FastAPI
フロントエンドは多くのランキングで上位で、習得難易度が低く、公式ドキュメントも充実しているVue.jsを選びました。
バックエンドは好きなフレームワークのランキングで上位で、習得難易度が低く、公式ドキュメントも充実しているFastAPIを選びました。
FastAPIは登場してまだ３年の新しいフレームワークなので現時点ではランキングが低いですが、今後は伸びてくることが予想されます。
３．プログラミング言語で選ぶ
Python → Django or FastAPI
Java → Spring
JavaScript → React or Vue.js / Express
C# → ASP.NET/ASP.NET Core
PHP → Laravel
Ruby → Rails
ランキングの結果から、各プログラミング言語のフレームワークを１つか２つ選んでみました。
JavaScriptのみフロントエンドとバックエンドの両方のフレームワークを選んでいます。
Web開発がはじめての方におすすめのフレームワーク
初めてWebフレームワークを学習するという方は、まずは下図のようなMVCパターンを理解する必要があると思います。
図の詳細は下記のリンクをご確認ください。
MVCパターンを学習するのにおすすめのフレームワークはDjangoかLaravelかRailsです。
フレームワークでTodoアプリを作ってみよう
以上でWebフレームワークの選び方についていろいろと述べてきましたが、フレームワークとはどのようなものかを理解するには実際に動かしてみるのが一番です。
ということで下記の５つのフレームワークで簡単なTodoアプリを作成してみました。
フロントエンドフレームワーク → React、Vue.js
バックエンドフレームワーク → Django、Laravel、Rails
作成するTodoアプリは下図のようなものです。
それぞれのフレームワークでTodoアプリを作成する手順については別記事でまとめていますので、以下にリンクを貼っておきます。
ReactでTodoアプリを作成した記事のリンクは下記です。
Vue.jsでTodoアプリを作成した記事のリンクは下記です。
DjangoでTodoアプリを作成した記事のリンクは下記です。
LaravelでTodoアプリを作成した記事のリンクは下記です。
RailsでTodoアプリを作成した記事のリンクは下記です。
最後に
最後にWeb開発が初めての人向けにCSSについて少しお話をしようと思います。
話す内容は下記の２点です。
１．Webアプリ開発にはCSSの知識が必要
２．Tailwind CSSは便利
１．Webアプリ開発にはCSSの知識が必要
Webアプリ開発にはCSSの知識が必要になります。
実際のアプリを使って説明します。
例えば下記はReactの公式ドキュメントのExample Projectsというページですが、その中に「Snap Shot」というアプリがあります。
「Snap Shot」アプリの画面です。
下記がCSSのコードですが、赤線で囲まれた箇所にCSS Flexbox関連の記載があるように、このアプリはCSS Flexboxを使って画面レイアウトが作られています。
下記はFlaskというフレームワークのチュートリアルページです。
下図はチュートリアルで作成するアプリです。
下記がCSSのコードですが、赤線で囲まれた箇所にCSS Flexbox関連の記載があるように、このアプリはCSS Flexboxを使って画面レイアウトが作られています。
以上のようにWebフレームワークを使ってアプリ開発を行う場合にはWebフレームワークの知識だけではなくCSSの知識も必要となります。
「Webフレームワークを学習するだけでも大変なのにCSSも学習する必要があるなんて、、、」と思われた方もいらっしゃると思います。
そんな方に朗報です。
今はYouTubeがあります。
CSSの基本を理解するだけならYouTube動画で手っ取り早く学習することができます。
下記の記事ではおすすめの動画を紹介していますので、興味のある方はご確認ください。
２．Tailwind CSSは便利
Webアプリの画面を作成する方法としてCSSを用意する代わりにCSSフレームワークを使う方法もあります。
CSSフレームワークにはいろいろなものがありますが、CSSに近いことが実現できる自由度が高いCSSフレームワークにTailwind CSSがあります。
下図はTailwind CSSの公式サイトですが、赤線で囲まれたもの（例：bg-gray-100、w-24、h-24）がTailwind CSSで用意されたclassです。
Tailwind CSSを使う場合はTailwind側で用意されているclassをhtmlのコードに埋め込んでいきながらアプリの画面を作っていきます。
Tailwind CSSに関しては公式の動画も用意されていますので、Tailwind CSSに興味のある方はチェックされると良いでしょう。
公式ページからは下記の赤線のScreencastsをクリックすると動画のページに飛びます。
Tailwind CSSを初めて学習される方は下記の赤線の動画がおすすめです。
YouTube上にも動画が公開されていますので初回の動画のリンクを貼っておきます。
下記はNext.js（React）とTailwind CSSでAmazonのサイトの画面を作成する動画ですが非常に面白かったので紹介します。