フレームワークの選び方は？
フレームワークの選び方は？
2021年5月25日
フレームワークの選び方は？
Web アプリや Web サービスを作成するためのフレームワークは何を選んだら良いか迷う場合も多いと思います。この記事では、一つの考え方をまとめてみました。
以前、React と Vue のどちらを選ぶかと言う趣旨で記事を書いたことがありますが、今日の話題は、さらに範囲を広げて、いろいろあるフレームワークを検討する際に考えることを中心に紹介します。もちろん、全てのフレームワークやプログラミング言語をカバーできるわけではありませんので、あくまで「ガイドライン」の一つとして検討の際に考えてみることを中心にまとめみました。
一番手軽な方法は何か？
最初に考えるのは、一番手軽で簡単な方法です。 とにかく、「早く」サービスを立ち上げたい場合には、フロントエンド中心の実装が一番です。実装コストも安く済みますし、基本的に運用コストも安くできるのが 1 番の魅力です。
「Web サイト」と言う要素が強い場合は、一番広く利用されている WordPress などで作成するのが一番です。制作側の学習コストも低くて済みますし、情報もたくさんあります。また、Web ホスティングも殆どのサービスが利用できるので、最初に手がけるのには一番入りやすいと思います。実際に、制作依頼も沢山あります。
しかし、Web アプリや Web サービスなどのように、プログラミングの要素が大きくなってくると、話が少し変わってきます。その場合は、フロントエンドのフレームワークと Javascript を利用したプログラミングが初心者でも扱いやすく制作も HTML と CSS、Javascript で対応が可能です。
フロントエンド中心の開発でも、Firebase のように一般的にバックエンドで実装するような機能をフロントエンドから呼び出して活用すれば、バックエンドに手を出さなくても開発が可能です。しかも、性能も一定レベルのセキュリティ対策も考慮されているので、最初に手がける Web 開発としては、「フロントエンド ＋ Firebase」と言うのは、おすすめの開発手法だと言えます。
この連載でも、初めて Web 開発を手がける場合のおすすめの組み合わせとして紹介してきました。 プログラミング言語は Javascript だけで対応できるのは、プログラムを勉強中の方にはありがたい仕組みです。
フロントエンドのフレームワークは、React か Vue を選べば、かなり高度なことも可能になりますし、部品化を進めれば再利用も可能なのは大きな魅力です。
最初に考えるのは、一番手軽で簡単な方法です。 とにかく、「早く」サービスを立ち上げたい場合には、フロントエンド中心の実装が一番です。実装コストも安く済みますし、基本的に運用コストも安くできるのが 1 番の魅力です。
「Web サイト」と言う要素が強い場合は、一番広く利用されている WordPress などで作成するのが一番です。制作側の学習コストも低くて済みますし、情報もたくさんあります。また、Web ホスティングも殆どのサービスが利用できるので、最初に手がけるのには一番入りやすいと思います。実際に、制作依頼も沢山あります。
しかし、Web アプリや Web サービスなどのように、プログラミングの要素が大きくなってくると、話が少し変わってきます。その場合は、フロントエンドのフレームワークと Javascript を利用したプログラミングが初心者でも扱いやすく制作も HTML と CSS、Javascript で対応が可能です。
フロントエンド中心の開発でも、Firebase のように一般的にバックエンドで実装するような機能をフロントエンドから呼び出して活用すれば、バックエンドに手を出さなくても開発が可能です。しかも、性能も一定レベルのセキュリティ対策も考慮されているので、最初に手がける Web 開発としては、「フロントエンド ＋ Firebase」と言うのは、おすすめの開発手法だと言えます。
この連載でも、初めて Web 開発を手がける場合のおすすめの組み合わせとして紹介してきました。 プログラミング言語は Javascript だけで対応できるのは、プログラムを勉強中の方にはありがたい仕組みです。
フロントエンドのフレームワークは、React か Vue を選べば、かなり高度なことも可能になりますし、部品化を進めれば再利用も可能なのは大きな魅力です。
セキュリティを重視するならば、バックエンドも必要
Firebase とフロントエンドのフレームワークを組み合わせれば、大抵のアプリやサービスを実装することが十分にできます。しかし、Web ブラウザで実行するという仕組みのため、Javascript のコードは全て Web ブラウザから参照することができます。（ブラウザなしでダウンロードもできます）そう考えると、場合によっては「見せたくない」情報がある場合には、対策が必要になります。その場合は、通常はバックエンドで処理を行って、通常のブラウザからの HTTP のアクセスでは見えないようにして実装することが必要になります。
フロントエンドだけで、課金を行う仕組みもありますが、多くの課金サービスは、プライベートキー（秘密鍵）を発行して、課金のための処理をバックエンドで行うようにするようになっています。その場合は、フロントエンドだけではなく、バックエンドのサービスを利用する事になります。
この方法はいろいろな実装方法がありますが、バックエンドを独立に開発する方法や、Next や Nuxt などのフレームワークを利用して、バックエンドを含む形で開発する場合もあります。
Next や Nuxt のフレームワーク自体は、React や Vue の仕組みを上手く活用しているので、フロントエンドのフレームワークの延長として考える方も多いと思いますが、コンセプトは実際は結構違う部分が多いので「頭を切り替えて」開発する必要があります。特に、Next や Nuxt は Javascript 系の言語でプログラムを書く事になりますが、どの部分のプログラムのコードが何処で実行されるかを理解した上で、開発を行う必要があります。
バックエンドの開発をする場合に注意する必要があるのが、「サーバーの性能」です。フロントエンドで処理する場合は、Web ホスティングするサーバーは基本的にファイルのやり取りを行うだけで、あまり「データ処理」をしないのでサーバーの性能はどの程度の「同時アクセス」がポイントになります。データの処理は、フロントエンド（Web ブラウザ）で実行されるので、処理の負荷は Web ブラウザに分散されるので、サーバーの性能は通常はあまり高いものは必要ありません。
ところが、バックエンドでデータの処理を行うようになると、同時に多数のアクセスが発生して、それぞれがデータ処理を必要とする場合、サーバーで幾つものデータ処理が同時に行われる事になるので、サーバーの性能が問題になりやすくなります。
単にプログラムを開発すると言う観点では、フロントエンドとバックエンドで大きな違いはないように見えますが、実際にサービスを提供する場合は、サーバーの性能なども考慮しないといけないので、全体の設計にはサーバーの知識やネットワークの知識が求められます。つまり、開発のハードルは高くなるという事です。
Firebase とフロントエンドのフレームワークを組み合わせれば、大抵のアプリやサービスを実装することが十分にできます。しかし、Web ブラウザで実行するという仕組みのため、Javascript のコードは全て Web ブラウザから参照することができます。（ブラウザなしでダウンロードもできます）そう考えると、場合によっては「見せたくない」情報がある場合には、対策が必要になります。その場合は、通常はバックエンドで処理を行って、通常のブラウザからの HTTP のアクセスでは見えないようにして実装することが必要になります。
フロントエンドだけで、課金を行う仕組みもありますが、多くの課金サービスは、プライベートキー（秘密鍵）を発行して、課金のための処理をバックエンドで行うようにするようになっています。その場合は、フロントエンドだけではなく、バックエンドのサービスを利用する事になります。
この方法はいろいろな実装方法がありますが、バックエンドを独立に開発する方法や、Next や Nuxt などのフレームワークを利用して、バックエンドを含む形で開発する場合もあります。
Next や Nuxt のフレームワーク自体は、React や Vue の仕組みを上手く活用しているので、フロントエンドのフレームワークの延長として考える方も多いと思いますが、コンセプトは実際は結構違う部分が多いので「頭を切り替えて」開発する必要があります。特に、Next や Nuxt は Javascript 系の言語でプログラムを書く事になりますが、どの部分のプログラムのコードが何処で実行されるかを理解した上で、開発を行う必要があります。
バックエンドの開発をする場合に注意する必要があるのが、「サーバーの性能」です。フロントエンドで処理する場合は、Web ホスティングするサーバーは基本的にファイルのやり取りを行うだけで、あまり「データ処理」をしないのでサーバーの性能はどの程度の「同時アクセス」がポイントになります。データの処理は、フロントエンド（Web ブラウザ）で実行されるので、処理の負荷は Web ブラウザに分散されるので、サーバーの性能は通常はあまり高いものは必要ありません。
ところが、バックエンドでデータの処理を行うようになると、同時に多数のアクセスが発生して、それぞれがデータ処理を必要とする場合、サーバーで幾つものデータ処理が同時に行われる事になるので、サーバーの性能が問題になりやすくなります。
単にプログラムを開発すると言う観点では、フロントエンドとバックエンドで大きな違いはないように見えますが、実際にサービスを提供する場合は、サーバーの性能なども考慮しないといけないので、全体の設計にはサーバーの知識やネットワークの知識が求められます。つまり、開発のハードルは高くなるという事です。
バックエンドで利用するプログラミング言語
フロントエンドの開発の場合、フロントエンド（Web ブラウザ）で実行するのが前提になります。Web ブラウザで実行するプログラムは基本は「Javascript」なので、開発は当然 Javascript 系のプログラミング言語で行うことになります。この場合、学習するプログラミング言語に選択の余地がないので初心者にはあまり迷う事なく学習内容を絞ることができるので都合が良いと言えます。
一方で、バックエンドの場合は利用できるプログラミング言語はいろいろ選択できるので何を採用するかは結構迷うものです。WordPress の影響で、バックエンドでは、PHP を利用する場合は多いですが、他にも、Javascript(Node.js)や、Java、Python、Ruby などいろいろな言語が使われています。
では、どれを使えば良いかというと、何をやるかでプログラミング言語の選択も変わってきます。
この連載では、プログラムング言語の学習範囲を余り広げずに効率的に学習するという理由で、基本的には Javascript 系（Typescript）を推奨してきました。フロントエンドと同じ言語でプログラミングすることで、フロントエンドとバックエンドでの処理の調整が簡単にできるというメリットもあるので基本的におすすめです。Firebase を利用すれば、簡単にバックエンドの実装も可能なので、フロントエンド中心の開発からバックエンドに手を広げる場合でも比較的スムーズに拡張できるのが特徴です。
その他に Java も大きな案件では利用されていますし、日本では Ruby も広く利用されています。（海外では少し事情が違います）
フロントエンドの開発の場合、フロントエンド（Web ブラウザ）で実行するのが前提になります。Web ブラウザで実行するプログラムは基本は「Javascript」なので、開発は当然 Javascript 系のプログラミング言語で行うことになります。この場合、学習するプログラミング言語に選択の余地がないので初心者にはあまり迷う事なく学習内容を絞ることができるので都合が良いと言えます。
一方で、バックエンドの場合は利用できるプログラミング言語はいろいろ選択できるので何を採用するかは結構迷うものです。WordPress の影響で、バックエンドでは、PHP を利用する場合は多いですが、他にも、Javascript(Node.js)や、Java、Python、Ruby などいろいろな言語が使われています。
では、どれを使えば良いかというと、何をやるかでプログラミング言語の選択も変わってきます。
この連載では、プログラムング言語の学習範囲を余り広げずに効率的に学習するという理由で、基本的には Javascript 系（Typescript）を推奨してきました。フロントエンドと同じ言語でプログラミングすることで、フロントエンドとバックエンドでの処理の調整が簡単にできるというメリットもあるので基本的におすすめです。Firebase を利用すれば、簡単にバックエンドの実装も可能なので、フロントエンド中心の開発からバックエンドに手を広げる場合でも比較的スムーズに拡張できるのが特徴です。
その他に Java も大きな案件では利用されていますし、日本では Ruby も広く利用されています。（海外では少し事情が違います）
機械学習と相性の良い Python
この連載をお読みの方はお気づきかもしれませんが、最近流行りの機械学習(マシーンラーニング)は Python と相性が良いので、Django の活用を最近手がけています。これは、機械学習のライブラリは Python を中心に作成されている事情があって、Web アプリや Web サービスに組み込むには Python ベースのバックエンドのフレームワークが都合が良いからです。
同時に、データ処理のライブラリも豊富で、データの処理を別の言語で実装してコンパイルしたネイティブコードを Python のライブラリと組み合わせて高速にする工夫もされているので、こうしたデータを扱う場合にも都合が良いので上級編として、Djanto の活用を含めて、docker と組み合わせてデプロイメント（公開の設定）を紹介しています。これらは、さらにバックエンド側のデータ処理に負荷がかかるので、サーバーの選択やデータベースの設計などがアプリやサービスの鍵になります。
この連載をお読みの方はお気づきかもしれませんが、最近流行りの機械学習(マシーンラーニング)は Python と相性が良いので、Django の活用を最近手がけています。これは、機械学習のライブラリは Python を中心に作成されている事情があって、Web アプリや Web サービスに組み込むには Python ベースのバックエンドのフレームワークが都合が良いからです。
同時に、データ処理のライブラリも豊富で、データの処理を別の言語で実装してコンパイルしたネイティブコードを Python のライブラリと組み合わせて高速にする工夫もされているので、こうしたデータを扱う場合にも都合が良いので上級編として、Djanto の活用を含めて、docker と組み合わせてデプロイメント（公開の設定）を紹介しています。これらは、さらにバックエンド側のデータ処理に負荷がかかるので、サーバーの選択やデータベースの設計などがアプリやサービスの鍵になります。
まとめ
Web アプリや Web サービスを実装するフレームワークは多数あります。その選択に迷う場合があると思いますが、基本は、以下のような感じです。
- シンプルに実装したい場合はフロントエンドのフレームワークと Firebase
- セキュリティを強化したサービスにしたい場合は、バックエンド
- データの処理や機械学習の実装には Python ベースのフレームワークが便利
と言う感じです。初心者はまずは、フロントエンドのフレームワークである React や Vue と Firebase から入るのがお勧めです。
バックエンドのサービスを使う場合は、ホスティングの際にサーバーの性能をよく検討する必要があります。フロントエンドでは、Web ブラウザに分散して処理を任せることができますが、バックエンドの場合は、サーバー側で処理する必要があるため、アクセスが集中した場合の処理などを考慮したサーバーを選ぶ必要があるので、プログラミングの知識だけではなく、サーバーやネットワーク、ストレージなどのシステムの知識や OS の知識が結構重要になります。
Web アプリや Web サービスを実装するフレームワークは多数あります。その選択に迷う場合があると思いますが、基本は、以下のような感じです。
- シンプルに実装したい場合はフロントエンドのフレームワークと Firebase
- セキュリティを強化したサービスにしたい場合は、バックエンド
- データの処理や機械学習の実装には Python ベースのフレームワークが便利
と言う感じです。初心者はまずは、フロントエンドのフレームワークである React や Vue と Firebase から入るのがお勧めです。
バックエンドのサービスを使う場合は、ホスティングの際にサーバーの性能をよく検討する必要があります。フロントエンドでは、Web ブラウザに分散して処理を任せることができますが、バックエンドの場合は、サーバー側で処理する必要があるため、アクセスが集中した場合の処理などを考慮したサーバーを選ぶ必要があるので、プログラミングの知識だけではなく、サーバーやネットワーク、ストレージなどのシステムの知識や OS の知識が結構重要になります。
コメント
コメントを投稿