初学者が1日で0からWebアプリを形にした話
はじめに
「自分でWebアプリを作って公開してみたいけど、難しそう…」
私もまったく同じ気持ちでした。私は都内在住の理系大学生でプログラミング自体は軽く学んだことがありますが、pythonが触れる程度で、アプリ作成に関しては全くの初学者でした。
でも、とりあえず1日でできるところまでやってみよう！ と挑戦した結果、なんとか形になったので、その体験をまとめます。
「プログラミングを少しかじったけどどうやったらアプリを作れるのかちんぷんかんぷん」という方に向けた記事です。
どんなアプリを作ったの？
今回作ったのは、Zennの記事を集計して「OSS/開発ツール」の最新人気ランキングを出すアプリです。
- 「最近どんなツールが注目されているか」がわかる
- 記事数やLGTM数（いいね！みたいなもの）を集計して表示する
公開したページはこちら 👉 https://oss-rank.web.app/
ステップ1：アイデアを決める
最初のハードルは「何を作るか」。
私の場合は、これからプログラミングを学んでいきたいけど知らない単語ばかりで何から手をつけたらいいのかわからない...という悩みがあって、とりあえずトレンドワードから学んでいけば間違い無いのではと思い、Zennでのトレンドワードランキングを可視化できたら良いのではと思いました。
ポイントは 小さく始めること。
「まずはランキングだけ出せればOK」と決めて動きました。
ステップ2：バックエンドを作る
バックエンドって何？
ユーザーからは見えない「裏側の処理」のことです。
今回やったのは、Zennの記事データを集めて、ランキングに必要な数字をまとめる部分です。
ここは、私の得意なpythonコード中心で行えたので比較的楽でした。
使ったもの
- FastAPI：PythonでAPIを作れるライブラリ。シンプルで早い。
- SQLite：ファイル1つで扱えるカンタンなデータベース。
苦戦したところ
- 最初「トピック別API」を使おうとしたけどデータが取れなかった
- 結局「新着記事一覧」からタグやLGTMを取ってくる方法に変更
👉 初心者あるあるですが、予定通りに行かなくても代替手段を探せばなんとかなることを学びました。
ステップ3：フロントエンドを作る
フロントエンドって何？
ユーザーが実際に触る「見える部分」です。
ランキングを表示したり、記事をクリックできる部分を担当します。
使ったもの
- Flutter Web：1つのコードでスマホアプリもWebも作れるGoogleのフレームワーク
- Google Fonts：日本語がきれいに表示されるようにフォント設定
苦戦したところ
- LGTMがずっと「0」で表示されてしまった
- 日本語が「簡体字フォント」になってしまった
👉 それぞれ正規表現やフォント設定を工夫して解決しました。
ステップ4：デプロイ（公開）
作っただけでは誰も見られません。公開＝デプロイが必要です。
- バックエンド（FastAPI）は Renderなどのサービスを使うと基本有料なので、お金のない私はケチってjsonファイルをfront側に入れるという力技でなんとかしました。
- フロントエンド（Flutter Web）は Firebase Hosting にアップロード
最初はエラーも出ましたが、コマンドを一つずつ試していくうちに形になりました。
ステップ5：公開できた！
最終的に https://oss-rank.web.app/ でアプリを公開できました 🎉
- トップページ：人気ランキングが表示される
- 詳細ページ：各ツールごとの記事やLGTM合計が見られる
todo: 各ワードページにそのツールが学べる書籍をまとめる
学んだこと
- 最初から大きなアプリを作ろうとしない
→ 「ランキングだけ出す」と決めたから最後までできた - エラーは必ず出る
→ でも1つずつ検索・修正すれば解決できる - 公開までやると達成感がすごい
→ ローカルで動くのと「URLを共有できる」のは大違い！
まとめ
正直、途中で何度もつまずきました。
でも、1日で「動くWebアプリ」を形にできたのは、自分にとって大きな一歩でした。
私自身まだまだ初学者で、わからないことだらけなので、アドバイスなどいただけるとうれしいです！まだ初日なので、これからも作成したウェブアプリの改善を目指していきます✨
これから挑戦したい人へ：
👉 「完璧を目指さない」「まずは1日で動くもの」を意識すると、モチベーションを保ちやすいですよ。
MVP(Minimum Viable Product: 動く最小限の製品) を意識しましょう！
Discussion