この​教科書の​使い方

「Cloudflare​（クラウドフレア）、​なんだか​便利らしい」。
そう​聞いて​公式サイトを​開いて、​5分で​静かに​タブを​閉じた​経験は​ありませんか。
僕が​まさに​それでした。

書いてある​ことは​日本語なのに、​意味が​入って​こない。
日本語の​解説記事を​探しても​数が​少なくて、​見つかった​ものは​途中から​「ターミナルで​この​コマンドを​実行します」と​当たり前のように​進んでいきます。
プログラムを​書いた​ことがない​人間から​すると、​そこで​道が​切れるんですよね。

この​教科書は、​そこで​切れた​道を​つなぎ直すために​書きました。

この​教科書は、​こういう​人の​ために​書きました

• プログラムを​1行も​書いた​ことがない
• 黒い​画面​（ターミナル）が​出てくると​身構えてしまう
• でも、​自分の​ページや​画像の​置き場を​自分で​持ってみたい
• AIに​任せながらで​いいから、​動く​ものを​作ってみたい

逆に、​すでに​Webアプリを​仕事で​作っている​人には、​この本は​まわりく​どく​感じます。
その場合はkomiyammaさんのCloudflare学習教材のように、​コードから​入る​教材の​ほうが​早いです。
この本は、​その​手前に​ある​段差を​埋める​ための​ものです。

ゴールは​「自分の​画像置き場を、​世界に​公開する」

読み終わった​ときに、​あなたの​手元には​これが​残ります。

• インターネットに​公開された、​自分の​ページ​（第5章で​完成します）
• 画像を​アップロードすると、​それが​世界中から​見られるようになる​仕組み​（第14章）
• 「これは​何を​しているのか」を​自分の​言葉で​説明できる​状態

しかも、​ここまですべて​無料の​枠内で​作れます。
クレジットカードの​登録なしで​始められて、​途中で​勝手に​課金される​こともありません。
お金の​話は​第7章で、​数字を​出して​正面から​説明します。

そして​もう​1つ。
この本を​読み終えると、公式サイトを​自分で​作る​ための​土台が​できます。
ここで​扱うのは​「置き場所」と​「公開の​しくみ」で、​これは​サイトを​作る​ときに​そのまま​必要に​なる​ものです。
画像ギャラリーを​作るのは、​その​仕組みを​一番わかりやすい形で​体験して​もらう​ためです。

この本の​一番​大事な​ルール：コマンドは、​あなたが​打ちません

ふつうの​Cloudflare教材は、​こう​書いてあります。

npx wrangler r2 bucket create my-bucket

この​呪文を​1文字も​間違えずに​打ち込め、と​いうわけです。
半角と​全角を​間違えただけで​動きません。
これが​初心者を​落とす最大の​段差です。

この​教科書では、​そこを​まる​ごと​AIに​任せます。
あなたが​やるのは、日本語で​AIに​お願い​する​ことだけです。

お願い​された​AIが、​必要な​コマンドを​自分で​組み立てて、​自分で​実行して、​結果を​日本語で​報告してくれます。
あなたは​日本語を​書いて、​返ってきた​日本語を​読むだけです。

この​進め方には、​副産物が​あります。
AIが​実行した​コマンドは​画面に​表示されます。
読んでいる​うちに​「ああ、​bucket create って​書いてあるから、​これは​入れ物を​作る​命令なんだ」と、​勝手に​読めるようになっていきます。
打てるようになる​前に、​読めるようになる。
この​順番の​ほうが、​挫折しません。

用意する​ものは​2つだけ

• Cloudflareの​アカウント（無料）…​ メールアドレスが​あれば​作れます
• Claude Code …​ AIに​パソコンの​作業を​任せる​ための​道具です

ここは​正直に​書きます。
Cloudflareは​無料ですが、Claude Codeは​有料です。
Claudeの​Pro・Max・Team・Enterpriseの​どれかに​入っている​必要が​あります。
無料の​Claude.aiプランでは​使えません​（公式のセットアップ手順に​明記されています）。

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

どちらも​第4章で、​順番に​用意します。
今の​時点では​何も​準備しなくて​大丈夫です。
まずは​第3章まで、​コーヒーでも​飲みながら​読んで​みてください。

章の​読み方​：どの​章も​同じ​並びです

第4章以降は、​すべての​章が​この​順番で​並んでいます。
慣れると、​読みたい​ところに​一発で​たどり着けます。

1. この​章で​できるようになる​こと：3行で​書いてあります。
   ここだけ​見て​飛ばす判断を​しても​いいです
2. たとえ話と図：専門用語を​出す前に、​まず絵で​つかみます
3. 本編：新しい​言葉が​出てきたら、​その場で​必ず​説明します
4. Claude Codeに​こう​頼む：オレンジの​枠です。
   コピーボタンを​押して、​そのまま​貼れます
5. うまく​いったか​確認する：目で​見える​形で​確かめます
6. よく​あるつまずき：エラーの​文面と、​その​意味と、​直し方です
7. 章末チェックリスト：全部に​チェックを​入れると、​左の​目次に​読了マークが​付きます

言葉が​わからないのは、​あなたのせいでは​ありません

この​分野の​説明が​難しいのは、​書き手が​「これくらいは​知っているはず」と​思っている​言葉が​多すぎるからです。バケット、バインディング、デプロイ、エンドポイント。
どれも​日常では​使いません。

だから​この​教科書では、​新しい​言葉が​出てくる​たびに、​オレンジの​縦線が​付いた枠で​その場で​説明します。
前の​章に​戻らなくても​読み進められるようにしてあります。
それでも​詰まったら、​付録Aの​「詰まった​とき辞書」を​開いてください。