TODOアプリを公開しよう — Vercelで世界に届ける

自分だけのアプリを世界に届ける

ここまで3本の記事で、TODOアプリを一緒に作ってきました。

• 第1回：プロジェクトの立ち上げ
• 第2回：画面を作る
• 第3回：データを保存する

今、あなたのパソコンには「追加・削除・完了チェックができて、ブラウザを閉じてもデータが消えないTODOアプリ」があります。でも、まだ自分のパソコンでしか動きません。

今回は、このアプリを インターネットに公開 します。公開すると、あなたのアプリに 自分だけのURL が付きます。そのURLを友達に送れば、スマホからでもアクセスできます。

GitHubにコードをアップロードしよう

公開するためには、まずコードを GitHub にアップロードする必要があります。

はじめの一歩シリーズの第4回でGitHubアカウントを作った方は、そのまま使えます。まだの方は、先にアカウントを作っておいてください。

Claude Codeにお願いしましょう。

Claude Codeがやってくれること：

1. プロジェクトをGit（コードの変更履歴を記録する仕組み）で初期化する
2. GitHub上に新しいリポジトリを作る
3. コードをアップロードする

途中で「GitHubにログインしてください」と言われることがあります。ブラウザが自動で開いてログイン画面が表示されるので、画面の指示に従えばOKです。

Vercelで公開しよう

コードがGitHubにアップロードできたら、次は Vercel で公開します。

Vercelは、Webアプリを簡単に公開できるサービスです。はじめの一歩シリーズの第4回で使ったことがある方は、同じ手順です。

1. vercel.com にアクセスして、GitHubアカウントでログイン
2. 「Add New Project」 をクリック
3. さっきアップロードした my-todo-app を選ぶ
4. 「Deploy」 をクリック

あとは待つだけです。1〜2分でデプロイが完了し、URLが表示されます。

https://my-todo-app-xxxxx.vercel.app のようなURLが発行されるはずです。これがあなたのTODOアプリのアドレス。

公開されたアプリを確認しよう

表示されたURLをクリックして、アプリが動いているか確認しましょう。

1. TODOを追加してみる
2. チェックを入れてみる
3. 削除してみる

パソコンで作っていたときと同じように動きますよね。

次に、スマホでもアクセスしてみましょう。 URLをスマホのブラウザに入力するか、自分にLINEやメールでURLを送って開いてみてください。

スマホでもTODOの追加や削除ができるはずです。自分も初めてスマホで自分のアプリが動いたとき、思わずスクショを撮りました。パソコンでもスマホでも動いている——この瞬間はぜひ味わってほしいです。

URLを誰かに送ってみよう

せっかく公開したので、誰かに見せてみましょう。

友達や家族にURLを送って、「これ自分が作ったTODOアプリ」と伝えてみてください。相手のスマホやパソコンからもアクセスできます。

ただし、ひとつ覚えておいてほしいことがあります。今回のTODOアプリは LocalStorage を使っているので、データはそれぞれのブラウザに保存されます。 あなたが追加したTODOは、友達のブラウザには表示されません。それぞれが自分のTODOリストを持つ形になります。

「みんなで同じTODOを共有したい」場合は、サーバー側にデータベースを用意する必要があります。それはまた別の話になるので、今回はここまでで十分です。

コードを変更したら再公開する

URLを送って反応をもらったら、きっと直したいところが出てくるはずです。そんなときは、Claude Codeで修正して、もう一度GitHubにアップロードするだけです。

Vercelは、GitHubにコードがアップロードされると 自動で再デプロイ してくれます。つまり、コードを更新するだけで、公開されているアプリも自動的に最新になります。手動で何かする必要はありません。

この「コードを直す → GitHubにアップロード → 自動で公開される」という流れは、プロのエンジニアも日常的にやっていることです。あなたはもう同じことができています。

まとめ — TODOアプリ完成！

4本の記事を通して、ゼロからTODOアプリを作って公開するところまでやりました。振り返ってみましょう。

• 第1回 — Claude Codeをセットアップして、プロジェクトを立ち上げた
• 第2回 — TODOの追加・削除・完了チェックができる画面を作った
• 第3回 — LocalStorageでデータを保存して、消えないようにした
• 第4回（今回） — Vercelで公開して、URLを手に入れた

「画面を作る → データを扱う → 公開する」——この流れは、TODOアプリに限らず、あらゆるWebアプリで共通です。つまり、このシリーズで学んだことは、次に何を作るときもそのまま使えます。

TODOアプリは入門としては定番ですが、自分で作って公開するところまでやり切った人は、実はそう多くありません。ここまでたどり着いたあなたは、もう「アプリを作れる人」です。

次は何を作りましょうか？ LINE Bot、メディアサイト、自動化ツール——他のシリーズもぜひ覗いてみてください。