Vercelとは
最後に、GitHubのリポジトリを使ってVercelにアプリケーションを公開していきます。Vercelはホスティングサービスと呼ばれるもので、コードを世界に公開するために使います。
Vercelのアカウント作成
Googleで「Vercel」と検索すると一番上に出てきますので、クリックしてください。GitHubで作ったアカウントのメールアドレスでログインすると一番簡単です。「Continue with GitHub」で新規登録またはログインしておいてください。
サインアップできましたら、ダッシュボードページに遷移します。
デプロイの手順
1. プロジェクトを作成する
右上の「Add New」ボタンを押し、「Project」を選択してください。
2. GitHubと連携する
GitHubと連携するために「Install」ボタンを押してください。下のほうにスクロールして「All Repositories」で全てのリポジトリに許可を出し、インストールしましょう。メールアドレスの確認も行ってください。
3. リポジトリを選択する
認証が完了するとリポジトリ一覧が表示されますので、デプロイしたいリポジトリを選択してインポートしてください。プライベートリポジトリでもアップロードすることができます。
4. 環境変数を設定する
AI系のアプリなど環境変数を設定しているプロジェクトの場合は、「Environment Variables」の項目にKeyとValueを設定します。エディターに戻って.env.localファイルの内容をコピーし、Vercelの環境変数の入力欄にそのままペーストすれば設定できます。
5. デプロイする
環境変数の設定が終わったら「Deploy」ボタンを押してください。ビルドログが表示され、1分足らずで公開できます。
6. 公開されたアプリを確認する
デプロイが完了したら「Continue to Dashboard」をクリックし、「Domains」に表示されるURLをクリックしてください。先ほどClaude Codeで作ったアプリが公開されており、このリンクにアクセスすれば誰でも使えるようになっています。
Vercelのすごさ
たったこれだけで簡単に世の中に公開できるというのは、非常にすごいことです。昔はこのようなホスティングサービスが整備されていなかったので、自分でレンタルサーバーを契約し、そこに自分で作ったサイトをアップロードして、ドメイン設定をして、いろいろなことをやってやっと公開できるという状態でした。今はボタンをクリックするだけで数分でデプロイできる、すごい時代になっています。
自作アプリの付加価値
AIアプリを作っても「Claudeがあるじゃん」「ChatGPTがあるじゃん」だから作らなくてもいいという発想ではなく、自作アプリケーションには独自の良さがあります。
例えばメール文の作り方やSEOに強いブログ記事生成、自分の文体を寄せた記事の生成など、裏側のシステムプロンプトの部分を自分のプログラムで調整できます。そういったシステムプロンプトの部分でアプリケーションの強みを出していけるということです。
また、使いやすいUI/UXも重要です。何か特定の業務や効率化に特化したAIを本気で作ってみると、個人開発で利益を上げられる可能性があります。
セクションのまとめ
今回のセクションはClaude Codeを始めたばかりの人に向けた、簡単なWebアプリの作り方についてでした。これで基礎的なWebの知識はついたと思いますので、皆さん独自の個人開発のアプリケーションを試しに作ってみるといいでしょう。
簡単なものが作れて要領を得た方は、本格的なWebアプリ作成の講座も見ていただいて、さらに利益を上げられるようなアプリケーション作りに挑戦してみてください。
続いてのセクションでは、より発展的なClaude Codeの使い方として、MCPサーバー、フックス、スキルズなどを紹介していきます。Claude Code初級者を卒業して、中級者寄りのお話に進んでいきます。
