はじめに
この記事を読んで欲しい人
同じような境遇の人に読んで欲しいです。具体的には以下の人たちの参考になれば嬉しいです。
・WEBアプリケーションに興味はあるが、何から始めれば良いかわからない人
・HTMLやCSS、JavaScriptを少し学んだが、公開する方法が分からない人
・Pythonなどプログラミングは少しできるが、WEBアプリはよく分からない人
・簡単なフレームワーク（React、Flask）と無料の環境（vercel、render）でサクッとWEBアプリを作りたい人
自己紹介
2024年4月頃から完全独学でWEBアプリケーションを勉強し始めた、マーケターです。もともと理系でPythonは仕事でも使うため少しできるレベルですが、WEBアプリ開発の経験は０でした。
作ったWEBアプリ
海外サッカー分析アプリを作成しました。海外サッカーはその需要に対して、気軽に使える分析ツールが極端に少ないため、日本人向けに５大リーグの分析サイトを作りました。(*無料プランで公開しているため、データの読み込みに1分ほどかかります。)
ポイント1：どんな言語があり、どれを選ぶべきか？
そもそも言語とは？
WEBアプリケーションを作る上で必要になる言語は大きく２種類あります。一つはユーザーの使う画面を作るためのフロントエンドの言語。もう一つ分析したり計算を行うためのプログラムのバックエンドの言語です。
私の場合何か一つの言語だけできれば、WEBアプリが作れると勘違いしており、後述するpythonだけで全て作り込もうとしていました。
（＊簡単なものは一つの言語で作れますが、セキュリティや拡張性からどちらも学んだ方が良いです！）
どの言語を選ぶべきか？
結論フロントエンドはJavaScript、バックエンドはpythonがおすすめです。フロントエンドは基本的にJavaScriptが必須で、バックエンドはruby,javaなど色々選択肢はあるものの利用率が高くシンプルでライブラリも充実しているpythonを選ぶことをお勧めします。
フレームワークとは？
webアプリ開発はフロントエンド、バックエンドの言語でプログラムを書いていけば作れることは作れますが、フレームワークと呼ばれる仕組みを使うと効率的になります。フレームワークはwebアプリを作るための仕組みのことです。ざっくり言うとWEBアプリを作ることに特化したその言語特有のライブラリです。
JavaScriptのフレームワークにはReactやVue.jsと呼ばれるものがあります。PythonのフレームワークにはFlaskやDjangoがあります。
どのフレームワークを選ぶべきか？
JavaScriptのフレームワークはReact、PythonはFlaskがお勧めです。どちらも難しい概念が少ないためとっつきやすいです。
ポイント2：ChatGPTをフル活用する
下手なプログラミングの教科書を買うよりも0からChatGPTに教えてもらった方が、効率的に学習できます。
例えば、Ruby on Railsというフレームワークは非常に丁寧なチュートリアルを用意していますが、サックと開発したい個人開発で０から学習するのは非効率です。
その代わりにChatGPTにコードを自動出力してもらい、流れを掴む方がシンプルで分かりやすい場合が多いです。
ポイント3：サーバーはホスティングサービスを使う
localhostで動いた後はどうすれば良いか？
WEBアプリのプログラムを作成したら、サーバーを立ち上げる必要があります。フロントエンドはWEBサーバ、バックエンドはアプリケーションサーバというサーバを立ち上げ、そこで実行します。
本などでは、テスト用のサーバーで以下のコードでサーバを立ち上げ、アプリを動かしますが、本番環境でどうすれば良いか分からないというのが初学者あるあるです。私もだいぶ調べました。。。
npm start
flask run
上記コマンドは自分の環境であるlocalhost上では動きますが、誰でもアクセスできるわけではないです。
vercelとrenderを使う
サーバーを立ち上げる方法はいくつかあります。一番オーソドックスな方法は、AWSのEC2などのクラウドを使いそこで実行する方法です。しかしそれはそれでスキルが必要です。
そこでお勧めなのが、ホスティングサービスを活用することです。フロントエンドはvercel、バックエンドはrenderというサービスが無料で活用できます。
githubを使う
githubはプログラムファイルやフォルダを管理するためのバージョン管理ツールです。自分の書いたコードをオンライン上に保存できるイメージです。初学者にはしきいが高いイメージがありますが、githubは個人開発でも使えるに越したことはありません。また、意外と簡単に使えて便利です。
前述したホスティングサービスは、github上のソースコードを自動で読みに行っているため、githubも合わせて勉強する必要があります。
なお、githubにアップする際は「フロントエンド（react）」と「バックエンド（flask）」で別々にした方が都合が良いです。（意外とどこにも情報がないため迷います。。）
終わりに
独学だと何から勉強すれば良いのか見当がつかないことが多々あると思います。本当に基本的なことがわからない状態もザラです。私の場合は、「フロントエンドとバックエンドの違い」や「サーバーとは何か？」などよくわかっていませんでした。
この記事が個人開発で悩んでいる人の助けになれば嬉しいです！