Claude Codeの始め方と
やっておくべき初期設定

Claude Code Webアプリ制作講座　第1回
2026.09.05
今日は、動くところまで
1本目に作るものを決める

4回で、公開まで行きます

09.05
作るものを決めて、
Claude Codeを動かす
09.09
作った画面を、
人に渡せるURLにする
09.15
外のサービスとつなぎ、
手作業をひとつ消す
09.25
作ったものを見せて、
次に作るものを決める

質問は、Discordへ

質問する場所
🦀｜ウェブアプリ講座
聞ける回数
制限なし。何度でも聞けます
見返す場所
学習サイトの講座ページに全4回
今日出られなかった人も、あとから同じところに追いつけます

エラーは、文字で貼る

画像で貼ると
文字が読めず、
どこで止まったか追えない
文字で貼ると
出ている文をそのまま検索でき、
その場で原因が分かる
画面に出ている文字を、選んでコピーして、そのまま貼るだけ

いま、ここで止まっていませんか

✓
何を作ればいいか決められない
9人
✓
公開・デプロイまわりで行き詰まっている
5人
✓
ターミナル（黒い画面）が苦手
2人
✓
何と頼めばいいか分からない
2人
受講前アンケート 21件（2026年9月3日時点）

今日のゴール

その1
Claude Codeが
動いている
その2
公開まで通るのを、
目の前で見た
その3
1本目を、
1行で書ける

今日の4つのポイント

1
始め方とやっておくべき初期設定
2
Cloudflareとは
3
作って、公開する
4
1本目に作るものの決め方
ポイント1 ・ 今日ここまでやれば動きます
1
始め方とやっておくべき初期設定

9割が詰まるのは、返事が来るまで

開いているのが
「コード」かどうか
アプリの中に「ホーム」と「コード」があり、
ホームでも返事は来ます
Claude Codeに「おはよう」と送って返事が来た画面
返事が来たら、そこから先は全部日本語で頼めます
ステップ1 ・ ダウンロード

開いたら「コード」のほう

ホーム
ふだんのチャット。
文章の相談はこちら
コード
今日の入口。
「おはよう」はこちらに送る
ダウンロードは claude.com/ja/download（日本語ページ）
ステップ2 ・ ログイン

いつものアカウントでログイン

持っている人
いつものClaudeの
アカウントでログイン
まだの人
アカウントを作成して、
サブスクに登録
ログインできたら、準備はあと1つです
ステップ3 ・ 初期設定

ターミナルに貼って、Enter

やること
記事のコピーボタンを押して貼る
覚えること
ありません。あとから全部消せます
待つところ
文字が流れている間はそのまま
ターミナルにコマンドを貼り付けた画面
返事が来たら完了。ターミナルはここで卒業です

Claudeの利用料は、別にかかります

月額 3,000円 〜 30,000円
まずは、いちばん下のプランで始める
途中で止まるようになったら上げる
使う量によって変わります。最新の金額は申込画面で確認してください

コピペで進められるガイド記事

Claude Code 初期設定ガイド記事
初期設定ガイド
ダウンロードから返事が来るまで
無料で公開しています。コピーボタンを押して貼るだけで進みます
リンクはZoomのチャットにも流します

渡すフォルダは、まず1つでいい

まずはこれ
1つのフォルダで始める。
散らかったら「整理して」と頼む
慣れてきたら
「メモ」と「開発」に分ける
作り始めると、関係ないファイルが一気に増えるため
これも全部、Claudeに聞きながら進められます

最初に入れる設定は1つだけ

入れるもの
CLAUDE.md というメモ1枚
書くこと
自分のこと／やってほしくないこと／
間違えられたことを1行ずつ
いまは入れなくていい
細かい権限設定・外部ツール連携
CLAUDE.mdに自分のことを書いた画面
増えて長くなったら、あとで「スキル」に分けます

詰まったら、この形で聞く

1
やりたかったこと
2
画面に出ている文字
3
自分が試したこと
書き方の例
初期設定を進めたい
画面に「command not found」と出た
記事のコマンドを貼ってEnterした
3行並べて貼れば、次にやることが返ってきます
3つ並べて貼るだけ。日本語のままで大丈夫です
ポイント2 ・ 作ったものを置く場所
2
Cloudflareとは

パソコンを閉じても、動き続ける場所

作ったものを、
パソコンの外に出す
URLを渡せば、
スマホからも開く
寝ていても、
受け付けは続く

今日使うのは、この3つ

Workers
ワーカーズ
アプリの本体
画面を出して、送られた
内容を受け取る
D1
ディーワン
入力を保存する場所
送られた内容が1行ずつ
たまっていく
R2
アールツー
画像や動画を置く倉庫
大きいファイルは
こちらに置く

4つの、役割の違い

Pages
静的ページ
置き場
見せるだけのページ
Workers
アプリの本体
受け取って、返す
D1
記録を残す
1行ずつたまる
R2
大きいファイル
を置く
画像・動画・PDF
今日作るのは、Workers と D1 の組み合わせです

無料枠で始められます

クレジットカードは
要りません
使った分だけ。
枠を超えたら有料
独自ドメインは
あとから

先に済ませる、4ステップ

1
メールアドレスとパスワードで登録
2
届いた確認メールのリンクを開く
3
プランは「無料（Free）」を選ぶ
4
Node.js を入れる（インストーラーで次へを押すだけ）
「ドメインを追加しますか」は今は追加しない。リンクは2本ともZoomのチャットに流します

このスライドも、Cloudflare

01
学習サイト
ログインと動画の
出し分けまで
02
講座の申込ページ
申し込みを受けて
記録する
03
このスライド
いま映っている画面
そのもの
04
決済の通知
買われた瞬間に
Discordへ飛ぶ
特別なものではなく、毎日使っているものが同じ場所で動いています

作ったものは、2か所にあります

自分のパソコン
作りかけも、完成品も、
フォルダの中にある
ネット側
同じ中身が置いてあり、
そこからURLが出る
片方が消えても、もう片方から戻せます

Claudeが止まっても、残ります

ファイルは、自分のパソコンとネット側に置いてある
公開中のページは、そのまま動き続ける
別のAIに同じファイルを渡せば、続きから作れる
Claudeは作るための道具で、作ったものの置き場ではありません
ポイント3 ・ アンケートフォームを1本
3
作って、公開する

Claude Codeに、1行で頼む

講座の感想を聞くアンケートを作って。ニックネーム・満足度5段階・自由記述の3つ
コマンドは私に打たせず、あなたが実行して
回答は保存して、一覧で見られるページも作って
コマンドは、こちらは打たない

進んでいる間に、起きていること

1
雛形を作る
フォームの画面が
できる
→
2
保存先を作る
回答がたまる
場所ができる
→
3
公開する
Cloudflareへ
置きに行く
→
4
URLが出る
そのまま人に
渡せる

出てきたURLを、スマホで開く

受け取り方
リンクはZoomの
チャットに流します
やること
回答を1つ送る

回答が、一覧に増えていく

送ってもらう画面
回答フォームの画面
自分だけが見る一覧
回答の一覧画面

パソコンの外で、動いている

さっき作ったページが、ネット側で動いています
このパソコンを閉じても、
受け付けは続く
URLを知っている人は、
誰でも回答できる

同じものを、自分の手で

1
手順書2の指示書を貼る
2
続けて、手順書3の公開ブロックを貼る
道具の導入もログインも、AIがやります。自分でやるのはCloudflareのアカウント作成だけ
ポイント4 ・ 1本目を、1行で決める
4
1本目に作るものの決め方

3つの質問で決まります

Q1
毎日か毎月、手でやっている作業は
Q2
それは誰のためにやっているか
Q3
いま、その情報はどこに書いてあるか

1本目は、3手で終わる形に

レベル1
フォーム・保存・一覧
だけ
9月9日までに
公開URLになる大きさ
レベル2
自動メールか集計を
1つだけ足す
9月15日で扱う範囲
レベル3
決済・会員・
外のサービスとの連携
9月25日の発表や、
仕事の形につながる
足りなければ、来週そのまま足せます

レベル1の例

当日キャンセル待ちフォーム
空きが出るたび、常連へ個別に連絡している
面談前ヒアリングフォーム
毎回チャットで往復して、聞き出している
宿題の提出ページ
提出物が3か所に散らばり、毎週かき集めている
日次の売上メモ
手帳に書いて、月末にまた入力し直している
どれも画面2枚。入れる場所と、見る場所だけです

迷ったら、この3つから選ぶ

案A
アンケート
フォーム
画面1　ニックネーム・満足度・感想
画面2　回答の一覧と、満足度の件数
案B
イベントの
出欠確認
画面1　名前・出欠・ひとこと
画面2　出欠の一覧と、人数の内訳
案C
簡易投票
画面1　4つの選択肢から1つ選ぶ
画面2　票数と、投票の一覧
指示書は3本とも、そのまま貼れる形で配ります

最初の1本で選ばない3つ

他人のお金を
預かるもの
預り金・売上金の管理・
代理での支払い
法律や資格が
絡むもの
医療・法律相談・
士業の判断が入るもの
いきなり
大人数が使うもの
最初から数百人が
同時に触る前提のもの
2本目以降なら大丈夫です。1本目に置かないだけです
課題

同じアンケートを、自分の手で

1
Cloudflareのアカウントと、Node.js を入れる
2
指示書を貼る（手順書2 ＋ 手順書3）
3
公開URLをDiscordに貼る
迷ったら、1本目に作るものを1行で投稿するだけでもいい。9月9日まで
締め
質疑応答タイム

次回は9月9日（水）20:30

やること 1
公開できた画面を、
その場で講評
やること 2
保存と、
デザインの整え方
宿題のURL投稿だけ済ませてくる

講座ページと質問チャンネル

見返すのはこちら
学習サイトの
講座ページ
今日のアーカイブと解説動画がそろっています
聞くのはこちら
🦀｜ウェブアプリ講座
詰まったところを、その日のうちに聞けます
リンクはZoomのチャットに流します
補足 ・ 質問が出たときに

言葉の整理

JavaScript
プログラムを書く言語。ブラウザでもCloudflareでも動く
Node.js
JavaScriptを自分のPCで動かす土台。Wranglerを動かすのに要る
Wrangler
Cloudflareを操作する道具。開発・テスト・公開をコマンドでやる。AIが打つ
Workers
Cloudflare上でプログラムを動かす場所。受け取る・保存する・返す
Pages
画面だけを置く場所。動く処理がないサイト向け
全部AIが扱う。名前と役割だけ知っていれば足りる
補足 ・ 質問が出たときに

アンケートフォームの、分担

画面
Workersが配る。入力欄と送信ボタン
JavaScript
ボタンを押したら、回答を送る
Workers
回答を受け取って、保存先へ渡す
D1
回答を1行ずつためる
Node.js＋Wrangler
自分のPCで作って、Cloudflareへ公開する