はじめての公開第04章 ・ 読むのにかかる時間 約7分

準備:アカウントとClaude Code

道具を2つ用意して、作業する場所を決めます

ここから手を動かします。といっても、今日やるのは道具を2つ用意して、作業する場所を1つ決めるだけです。プログラムは1行も書きません。

この章でできるようになること

  • Cloudflareのアカウントを作る(無料・カード登録なし)
  • Claudeのデスクトップアプリを入れて、Claude Codeを使える状態にする
  • 作業フォルダをClaude Codeに渡して、最初のお願いをしてみる

横にスクロールできます

準備の3ステップ Cloudflareのアカウントを作り、Claudeのデスクトップアプリを入れ、作業フォルダを1つ作ります。 STEP 1 Cloudflareに登録 無料・カード不要 STEP 2 Claudeアプリを入れる ターミナルは開きません STEP 3 作業フォルダを作る デスクトップに1つ
ここまで終われば、第5章では10分ほどで自分のページが公開されます。

ステップ1:Cloudflareのアカウントを作る

dash.cloudflare.com/sign-up を開いて、メールアドレスとパスワードを入れるだけです。5分もかかりません。

  • クレジットカードの登録は求められません。無料プランのまま進めます
  • 登録すると確認メールが届きます。中のリンクを押して有効化してください
  • 「ドメインを追加してください」という画面が出ることがあります。今は飛ばして大丈夫です。ドメインは第7章で扱います

ダッシュボード

Cloudflareの管理画面のことです。ログインしたあとに出てくる、設定や状況を見るための画面をそう呼びます。この教科書では、画面をポチポチする作業はほとんどありませんが、結果を目で確かめるときに開きます。

ステップ2:Claudeのデスクトップアプリを入れる

Claude Codeには、ターミナルを開かずに使えるデスクトップアプリがあります。この教科書ではこれを使います。アイコンをダブルクリックして起動して、日本語で話しかける。それだけです。

ここは正直に書いておきます。Claude Codeは有料です。ClaudeのPro・Max・Team・Enterpriseのどれかに入っている必要があって、無料のClaude.aiプランでは使えません。ここだけは避けて通れないので、先に伝えておきます。

インストールが終わったら、アプリを開いてログインします。ログインはブラウザが開いて承認するだけです。

ステップ3:作業フォルダを1つ作る

これから作るものを1か所にまとめておきます。デスクトップに新しいフォルダを作って、名前を cloudflare-lesson にしてください。日本語の名前は避けます。トラブルの原因になりやすいからです。

フォルダを作ったら、Claude Codeでそのフォルダを開きます。デスクトップアプリなら、開くフォルダを選ぶ画面が最初に出るので、そこで今作ったフォルダを選ぶだけです。

フォルダを「開く」とはどういうことか

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章で最初のファイルを作ります。

この章のまとめ

アカウントを作り、アプリを入れ、作業する場所を決めました。地味ですが、ここが一番脱落しやすいところです。越えました。

次の章で、いよいよ自分のページをインターネットに出します。ここからが楽しいところです。

章末チェックリスト