はじめての公開
準備:アカウントとClaude Code
道具を2つ用意して、作業する場所を決めます
ここから手を動かします。といっても、今日やるのは道具を2つ用意して、作業する場所を1つ決めるだけです。プログラムは1行も書きません。
この章でできるようになること
- Cloudflareのアカウントを作る(無料・カード登録なし)
- Claudeのデスクトップアプリを入れて、Claude Codeを使える状態にする
- 作業フォルダをClaude Codeに渡して、最初のお願いをしてみる
横にスクロールできます
ステップ1:Cloudflareのアカウントを作る
dash.cloudflare.com/sign-up を開いて、メールアドレスとパスワードを入れるだけです。5分もかかりません。
- クレジットカードの登録は求められません。無料プランのまま進めます
- 登録すると確認メールが届きます。中のリンクを押して有効化してください
- 「ドメインを追加してください」という画面が出ることがあります。今は飛ばして大丈夫です。ドメインは第7章で扱います
ダッシュボード
Cloudflareの管理画面のことです。ログインしたあとに出てくる、設定や状況を見るための画面をそう呼びます。この教科書では、画面をポチポチする作業はほとんどありませんが、結果を目で確かめるときに開きます。
ステップ2:Claudeのデスクトップアプリを入れる
Claude Codeには、ターミナルを開かずに使えるデスクトップアプリがあります。この教科書ではこれを使います。アイコンをダブルクリックして起動して、日本語で話しかける。それだけです。
- macOSは13.0以降、Windowsは10(1809)以降。メモリは4GB以上
- ダウンロードはClaude Code公式のデスクトップ版案内から
ここは正直に書いておきます。Claude Codeは有料です。ClaudeのPro・Max・Team・Enterpriseのどれかに入っている必要があって、無料のClaude.aiプランでは使えません。ここだけは避けて通れないので、先に伝えておきます。
インストールが終わったら、アプリを開いてログインします。ログインはブラウザが開いて承認するだけです。
ステップ3:作業フォルダを1つ作る
これから作るものを1か所にまとめておきます。デスクトップに新しいフォルダを作って、名前を cloudflare-lesson にしてください。日本語の名前は避けます。トラブルの原因になりやすいからです。
フォルダを作ったら、Claude Codeでそのフォルダを開きます。デスクトップアプリなら、開くフォルダを選ぶ画面が最初に出るので、そこで今作ったフォルダを選ぶだけです。
フォルダを「開く」とはどういうことか
Claude Codeに「この場所で作業してください」と伝えることです。開いたフォルダの中のファイルだけを見て、その中に新しいファイルを作ります。関係ないところを勝手にいじられる心配がないので、初めてのときほど、専用のフォルダを作って開くのが安全です。
最初のお願いをしてみる
準備ができたか、Claude Code自身に確かめてもらいます。下のボタンでコピーして、Claude Codeの入力欄に貼って送ってください。
いま開いているフォルダの場所を教えてください。あわせて、このパソコンに Node.js が入っているかどうかを調べて、バージョンを教えてください。入っていない場合は、どうやって入れるのがこのパソコンにとって一番簡単かを、専門用語を使わずに説明してください。
Cloudflareに公開するときに使う道具(wranglerといいます)が、Node.jsという土台の上で動きます。だから先に、あるかどうかだけ確認しておきます。
Node.js(ノードジェイエス)
パソコンの中でプログラムを動かすための土台です。あなたが直接さわることはありません。「Cloudflareに公開する道具を動かすために、裏で必要なもの」という理解で十分です。入っていなければ、Claude Codeが入れ方を案内してくれます。
入っていなかった場合、パソコンによってはインストーラーをダブルクリックして、パスワードを入れる場面が出てきます。ここだけはあなたの手で押す必要があります。Claude Codeが「このファイルを開いてください」と言ってきたら、その通りに進めてください。
うまくいったか確認する
- Cloudflareにログインすると、管理画面(ダッシュボード)が表示される
- Claude Codeが、あなたが作った
cloudflare-lessonフォルダの場所を答えられる - Node.jsのバージョン(
v22.11.0のような数字)が表示される、または入れ終わっている
よくあるつまずき
- 確認メールが届かない
- 迷惑メールフォルダを見てください。それでも無ければ、登録画面からもう一度送り直せます。数分待っても来ない場合は、メールアドレスの打ち間違いを疑います。
- 「ドメインを追加」から先に進めない
- スキップやあとで、にあたるリンクを探して飛ばします。無料プランなら、ドメインを持っていなくても先へ進めます。
- command not found: node
- Node.jsが入っていない、という意味です。エラーではなく「まだ無い」という報告なので、慌てなくて大丈夫です。そのままClaude Codeに「入れてください」と頼んでください。
- Claude Codeが「このフォルダにはファイルがありません」と言う
- 正常です。まだ空のフォルダなので、中身がなくて当たり前です。第5章で最初のファイルを作ります。
この章のまとめ
アカウントを作り、アプリを入れ、作業する場所を決めました。地味ですが、ここが一番脱落しやすいところです。越えました。
次の章で、いよいよ自分のページをインターネットに出します。ここからが楽しいところです。
章末チェックリスト
準備完了です。次の第05章で、自分のページを公開します。