初心者がWebアプリを公開するまでの道のり – GitHub×Vercelで簡単デプロイ
こんにちは！プログラミング学習中のゆうちです。
今日は、初めて自作のWebアプリ「コソ勉」を世界に公開することができました！
自作とは言っても、ほぼAIのClaudeCodeが作ったものですが・・・
でもブログでの情報発信を機に、わからなくても日々ブログ発信を目標に勉強をすすめていこうと思ってます。
そして正直、「アプリの公開」って難しそうで腰が引けていました。
でも、実際にやってみたら思ったより簡単で… 今日は同じように「作ったものを公開したいけど、どうすればいいか分からない」という方に向けて、私の体験をシェアしたいと思います。
きっかけは「見てもらえない悔しさ」
せっかく作ったアプリも、自分のPCの中だけにあったら誰にも見てもらえません。 防衛大学校出身で元自衛官の私は、「成果は形にして初めて評価される」ということを部隊で学んできました。
プログラミングも同じだと思うんです。
実際に動くアプリがこちら！
コソ勉アプリ – 25分単位で学習を記録できます
実際にやってみた！GitHub→Vercel公開の流れ
ステップ1：GitHubの準備
最初につまずいたのが「プロジェクトフォルダってどこ？」という基本的なところ。 恥ずかしいけど、こういう基礎的な部分で悩む人、多いと思うんです。
私の場合、フォルダはここにありました：
C:\Users\ユーザー名\プログラミング\kosoden_appステップ2：Gitコマンドとの格闘
ターミナル（黒い画面）を開いて、以下のコマンドを順番に入力：
git init
git add .
git commit -m "初回コミット"
git push origin mainこのコマンド、最初は呪文みたいでした（笑） 特に困ったのが日本語フォルダ名。エラーが出るかもと思いましたが、ダブルクォートで囲んだら大丈夫でした！
ステップ3：Vercelの魔法
Vercelの使い方は本当に簡単でした：
- Vercelにアクセス
- GitHubアカウントでログイン
- 「New Project」→ リポジトリを選択
- 「Deploy」ボタンをクリック
たったこれだけで、世界中からアクセスできるURLが誕生！
正直に告白：つまずいたポイント
1. Gitリポジトリの入れ子問題
hint: You've added another git repository inside...このエラーメッセージを見た時は焦りました。
解決法：不要な.gitフォルダを削除するか、.gitignoreで除外
2. 「もう一度pushする必要ある？」問題
一度pushしたのに、また同じコマンドを打つ必要があるのか分からず…
答え：編集してない限り不要！編集したときだけpushすればOK
3. 日本語フォルダ名
フォルダ名に日本語を使っていたので心配でしたが、ダブルクォートで囲めば問題なし！
公開してみて感じたこと
正直、コードは完璧じゃありません。 でも、「完璧になってから公開」では、いつまでも公開できないと思うんです。
自衛官時代に学んだ「70%の完成度でも、行動することに価値がある」という考え方が、ここでも活きました。
同じように悩んでいる方へ
もしあなたも「作ったけど公開の仕方が分からない」と悩んでいるなら、ぜひ挑戦してみてください。
必要なもの：
- GitHubアカウント（無料）
- Vercelアカウント（無料）
- 公開したいアプリのファイル
- 少しの勇気
私ができたんですから、あなたにも必ずできます！
まとめ：アプリ公開は思ったより簡単
- GitHub = アプリの保管場所
- Vercel = アプリを世界に公開する場所
- 必要な時間 = 30分もあれば十分
分からないことがあれば、コメント欄で聞いてください。 一緒に解決していきましょう。
プログラミングの旅は、まだまだ続きます。 でも、今日また一歩前進できました。
あなたも、その一歩を踏み出してみませんか？
参考リンク：
