-- Views
August 30, 26
スライド概要
Claude Codeの初心者向け勉強会。
前回リクエストのあった、「安全に使うには」を追加。
2026年8月29日(土)20:00〜21:30 Claude Codeで始めよう!ふたたび AIコーディング初心者勉強会 #2 システムエンジニア友の会 ご要望にお応えしての再演です 🎉
今日のながれ(90分) 時間 やること 20:00〜 🌱 はじめに(5分)… 友の会のこと/この会のこと/今日のゴール 20:05〜 🗣️ 説明(10分)… AIコーディング/Claude Code とは 20:15〜 💻 実演① はじめる(20分)… インストール〜はじめての起動 20:35〜 🛡️ 実演② 安心して使う(10分)… 勝手なことをさせない設定と止め方 🆕 20:45〜 ✍️ 実演③ 作ってみる(20分)… ページ作り/レポートの下書き 🆕 21:05〜 💬 ディスカッション(25分)… 質問・感想 途中参加・途中退出もOK。画面共有を見ながら、各自そのつど手を動かすスタイルです 🖐️ 2 / 36
システムエンジニア友の会とは? システムエンジニアの、システムエンジニアによる、システムエンジニアのための友の会です SEやIT業界の人たち、老若男女問わず、みんなで幸せになることを目指します そのために、SEのための学びのネタを幅広に取り扱う、そういう場をつくっていきます 今日のAIコーディングも、その「学びのネタ」の1つです 📚 3 / 36
この会について AIコーディングを「使う側」のためのやさしいユーザー会 🐣 これから始める人に全振り。環境構築でつまずいた人こそ歓迎 ツールは色々あるけど、今日も Claude Code に集中 営業・勧誘の場ではありません。安心してどうぞ 🕊️ 質問はいつでもチャットへ 💬 「そんなことも知らないの?」は無しっこ 🙅 4 / 36
今日のゴール 「AIコーディングって何?」がざっくりわかる 自分の環境で Claude Code をはじめて起動できる(有料プランがある人) こわがらずに使うための「安全ブレーキ」を知って帰る 今回の新ネタ 見学の人も「雰囲気」と「始め方の地図」を持ち帰れる 🗺️ 全部を完璧にやりきる会ではありません。 最初の一歩を、いっしょに踏むのが目的です 👣 5 / 36
2 0 : 0 5 〜 2 0 : 15 1. 説明 🗣️ AIコーディングって? Claude Code って? 6 / 36
AIコーディングって? ざっくり言うと AIに手伝ってもらいながらコードを書く/動かすこと 自然言語(日本語)で「こうしたい」と伝えると、AIが書く・直す・調べる 「バイブコーディング」=細部より雰囲気で、AIと対話しながら作るスタイル 🎵 コードだけじゃありません。 資料づくり・調べもの・文章書きもこなします 📝 7 / 36
AIコーディングツールはいろいろある 大きく分けると 2タイプ。エディタの中で書くのを手伝う 補完・チャット型(GitHub Copilot など)と、指 示すると自分で書いて動かす 自律エージェント型 🤖 今日の Claude Code もエージェント型。これは 使う場所(形態)で4つに分かれます 👇 形態 代表例 ターミナル型 🖥️ Claude Code ⭐/OpenAI Codex/Cline/Aider デスクトップアプリ型 🪟 Claude Code(アプリ版)/Codex(アプリ) IDE・エディタ型 🧩 Cursor/Google Antigravity/Kiro(AWS)/Devin Desktop Webアプリ型 🌐 Claude Code(Web)/Replit/v0/Bolt.new/Lovable 同じツールがいくつもの形態を持つのがふつうです。Claude Code がまさにそれ 👉 次のページ 8 / 36
Claude Code って? Anthropic(Claudeを作っている会社)公式のAIコーディングツール ターミナルや対応エディタから、AIといっしょに次のことができる コードを書く・直す/ファイルを読む・作る/コマンドを実行する/調べもの・説明 「指示 → AIが自分で手を動かして進める」 これがエージェント型。チャットに貼って戻す往復がいりません 🤖 9 / 36
どこで動く?(形がいろいろある) 形 特徴 ターミナル版 / claude で起動する一番基本の形。軽量でフル機能。今日はこれ CLI 🖥️ デスクトップアプリ Mac / Windows の専用アプリ。ウィンドウで見やすい Webアプリ ブラウザで開くだけ。処理はクラウド側で動く エディタ拡張 VS Code / JetBrains に組み込み。変更点(差分)が見やすい 中身は同じ Claude Code。入口が違うだけです 🚪 10 / 36
事前にご確認(料金プラン)※超重要 💳 Claude Code を 自分の手元で動かすには、Claude の有料プランが必要です。 ✅ Claude Pro(月額 20 ドル〜)または Max プラン ✅ もしくは API の従量課金(APIキーを設定) ❌ 無料プランでは Claude Code は使えません 👀 「契約はまだ。まずは見学だけ」も大歓迎! 画面共有で雰囲気を見て、良さそうなら後から始める、で全然OKです 11 / 36
2 0 : 15 〜 2 0 : 3 5 2. 実演① はじめる 💻 インストール 〜 はじめての起動 12 / 36
インストール(自分のOSの1行だけ) 対応OS: macOS 13+ / Windows 10(1809)+ / Linux(Ubuntu・Debian 等)/ メモリ 4GB+ Windows(PowerShell) irm https://claude.ai/install.ps1 | iex macOS / Linux / WSL curl -fsSL https://claude.ai/install.sh | bash Homebrew 派 brew install --cask claude-code Node.js 派は npm install -g @anthropic-ai/claude-code でも可(Node.js 22+) 入ったか確認 👉 claude --version 13 / 36
起動して、はじめの一歩 1. 作業用のフォルダを作って、そこへ移動する 🗂️ 2. ターミナルで claude と入力して起動 3. 初回はログイン。Pro / Max はブラウザが開く。API の人はキーを設定 ⚠️ いきなりデスクトップ直下やマイドキュメント直下では起動しないでください。 理由はあとの「実演②」で 🛡️ 14 / 36
例1: まずは簡単な質問(ウォームアップ) 普通の日本語でお願いするだけ。まず手応えを1つ 🐣 このフォルダに何がある? hello.txt を作って、自己紹介を書いて アナログとデジタルの時計を作って動かして AIがファイルを作る/コマンドを動かす様子を、いっしょに見てみましょう 👀 15 / 36
20:35〜20:45 🆕 今 回の新パート 3. 実演② 安心して使う 🛡️ 勝手なことをさせないための設定と、止め方 16 / 36
なぜこの話をするのか 前回、いちばん質問が集まったのがここでした。 「作業フォルダの外まで 「"全部消された"って 「gitコマンドまで 書き換えられない?」 投稿を見たんだけど…」 任せて大丈夫?」 こわいから使わない、はもったいない。ブレーキの位置を知れば普通に使えます。 今日おぼえて帰るのは3つだけ 👉 ① モード ② フォルダ ③ 止め方 17 / 36
① モード: どこまで自動でやらせるか モード 画面の表示 どうなる 確認モード 🐣 manual ファイルを書く前・コマンドを打つ前に毎回きいてくる。最初は これ プランモード 🗺️ plan まず計画だけ立てさせて、実行はしない。読むだけなので安全 編集の自動承認 accept edits ファイル編集は自動、コマンドは確認 おまかせ ⚠️ auto 危ないもの以外はほぼ自動で進む。速いが中身を見なくなる 切り替えは Shift + Tab を押すだけ。 いまどのモードかは画面の下に英語で出ています 👀 18 / 36
Auto モードの、何がこわいのか 便利。速い。でも「聞かずにやる」ということです。 作業フォルダの外を触りにいくことがある 消す・上書きするときも、いちいち止まらない どこまでガードされているのか、境界が見えない 対策はシンプルです 👉 触られて困るものを、そもそも見える範囲に置かない 🗂️ もっと固めたい人向けに Docker などで隔離する手もありますが、初心者には重いので後回しでOK 🐢 19 / 36
② フォルダ: 起動した場所が「行動範囲」 Claude Code は 起動したフォルダを起点に動きます。だから 作業用のフォルダを1つ作っ て、その中で起動する 🗂️ ❌ 事故のもと ✅ おすすめ ・デスクトップ直下で起動 ・ C:\work\claude-test のようなまっさらな練習用 ・マイドキュメントやユーザーフォルダの直下で起動 フォルダから始める ・仕事のファイルと趣味のファイルが同じ場所に ・目的ごとにフォルダを分ける(仕事/趣味/人に ある 見せる用) 20 / 36
③ 止め方: あぶないと思ったら Esc キー 🛑 「それ、止めて」 実行中の作業を、その場で止める 日本語で言っても、ちゃんと止まる Esc を2回 … ひとつ前のやりとりまで戻ってやり直し ⏪ 承認をきかれたら、読まずに Enter を押さない。何をしようとしているか1秒だけ見る 👀 エラーが出たら、そのままコピペして「エラー出ました」で投げればOK 🙆 21 / 36
番外: 見せる作業と、自分の作業は分ける 今日ターミナル版を使っているのには、実は理由があります 🖥️ デスクトップアプリ版はあなたの文脈を強く読みにいく 便利な反面、聞いてもいないのにあなたの属性を推測して話し出すことがある 「◯◯社の△△であるあなたにぴったりです」 個人で使うぶんには便利。でも画面共有では事故になります 😱 教訓 👉 便利さと露出はトレードオフ 22 / 36
🛡️ 安全のチェックリスト(持ち帰り用) ☑️ 最初は 確認モード( manual )。慣れるまで auto は使わない ☑️ 練習用フォルダを作って、その中で起動する ☑️ 大事なファイルがある場所では起動しない ☑️ Esc と「それ、止めて」を覚えておく ☑️ 承認画面は、押す前に1秒だけ読む ☑️ 人に見せるときは、見せてよい環境でやる 23 / 36
2 0 : 4 5 〜 2 1: 0 5 4. 実演③ 作ってみる ✍️ ページ作り/レポートの下書き 24 / 36
例2: ステキなトップページづくり お題: おしゃれな都会のバーのトップページ(架空・デモ用)🍸 1. お願い「おしゃれな都会のバーの1枚もののトップページを HTML/CSS/JS で作って。夜の 雰囲気で、スマホ対応もお願い」 2. プレビュー&微調整 ブラウザで開いて確認 →「もっと落ち着いた色に」「ロゴを大きく」など 日本語で直す 3. 仕上げ 動きを足す(スクロールでふわっと出る、営業時間、地図まわり) 25 / 36
例3: 論文(レポート)を書く 前回できなかったやつ お題: 「なぜ靴下は片方だけ行方不明になるのか」🧦 まじめな手順で、くだらないテーマを 1. 事前調査「このテーマの最近の論点・事例を調べて、要点を箇条書きでまとめて」 🔍 2. 構成づくり「調べた内容をもとに、序論・本論・結論の章立てとアウトラインを作って」 🧱 3. 執筆&保存「アウトラインに沿って本文を書いて、 paper.md に保存。参考にした情報源も添え て」 ✍️ 開発だけじゃない。調べる → 構成 → 書く という知的作業もまるごと任せられ ます 26 / 36
例3 でわかること: AIに「調べさせる」ときの注意 調べもの → 下書きまでは速い。そこから先は人間の仕事 ✍️ 出典のリンクは自分で開いて確かめる(それっぽい嘘が混ざることがあります) 提出物にするなら、事実確認と自分の言葉での書き直しは必須 便利な使い方は「ゼロから書かせる」ではなく たたき台を出させる 🧱 27 / 36
2 1: 0 5 〜 2 1: 3 0 5. ディスカッション 💬 質問・感想・詰まったところ 28 / 36
💬 質問・感想・ディスカッション 今日やってみての質問・感想を、気軽に話しましょう(チャットでもOK) 詰まったところ/うまくいったところ、どちらも大歓迎 🙌 話のタネ(迷ったらここから) 何に使ってみたい?(仕事/趣味/勉強) AIコーディングで不安なこと・こわいことは? 次回どんなテーマがいい? 29 / 36
話のタネ帳(沈黙したら、ここから) Git ってそもそも何? CLAUDE.md AIに任せて大丈夫? 初心者の最初の関門 AIへの指示を書き置きして、毎回説明しなくて済む ように 前の会話の続きから デザインを渡したい セッション履歴はどこに残る?( ~/.claude ) ワイヤーフレーム画像・Figma・Canva 連携 スマホから続きをやる 他のツールはどう? 出先から様子を見て、指示も出せる Codex/Cursor/Copilot。比較は別の回で 30 / 36
今日のまとめ AIコーディングは「使う側」でも十分たのしめる。今日は Claude Code 手元で動かすには有料プラン(Pro/Max)か API 課金。見学だけでもOK やったこと: インストール → 起動( claude )→ はじめての対話 → 作ってみる 指示は普通の日本語でOK。詰まって当たり前。今日の一歩が大事 🐣 🛡️ 安全は3つだけ モード(確認から)/フォルダ(練習用に区切る)/止め方(Esc) 31 / 36
📣 お知らせ: ハッカソン、出してきました 都知事杯オープンデータ・ハッカソン 2026(東京都主催)に友の会から参戦しました 🗼 応募は完了。8/22〜23 の開発本番も走り切りました 💪 明日 8/30、審査用のプレゼン動画を撮影します 🎬 結果発表は 9月下旬(通過24チーム)→ 10/17 に Final Stage・表彰式 作品づくりでも AIコーディングをがっつり使いました ⚔️ 経過は Discord で共有します 👀 8/8 に意見をくださったみなさん、ありがとうございました 🙏 32 / 36
📣 Claude Code Meetup Japan 「AI駆動開発勉強会」が主催。バリバリ使っている人・本気でやりたい人向けの大きな会です 🔥 直近の #7「Claude Code祭り!」は昨日 8/28 に開催(麻布台ヒルズ+YouTube Live/無料/ リモート枠1000人) プログラム抜粋 … 新卒AI育成の実践/指示待ちから変化で動くClaude Code/プロフェッショナ ルAI駆動開発/Claude DesignでUI解決/Claude Codeを使わない活用法/開発以外業務の 爆速化/Claude Code Portal開発事例/モバイルアプリ開発克服事例 この会は、そのひとつ手前の入口 🐣 慣れてきたら、ぜひあちらへ 🚀 🔗 https://aid.connpass.com/event/402949/ 33 / 36
🎁 おみやげ: Claude Code 1週間無料ゲストパス Claude Code を含む Claude Pro 相当を、7日間無料で試せる「ゲストパス」 対象: Claude の有料プランを使ったことがない新規ユーザーのみ 運営の枠から、その場でご案内します 🙌 ⚠️ 有効化にクレジットカードの登録が必要です。 続けない場合は7日以内に解約すれば料金はかかりません 気に入ったら、そのまま Pro/Max に移行してOK 👍 34 / 36
また、ゆるく集まりましょう 🙌 質問は Discord の Claude Code チャンネルへ。分かる人が答えます 💬 次回のテーマ、募集中です(もくもく会/お見せ合い/Git入門 など) 「作ってみた」を持ってきてくれる人、大歓迎 🎁 今日はありがとうございました! 次はあなたの「作ってみた」を見せてください ✨ 35 / 36
📌 今日の要点 インストール 起動 Windows: irm https://claude.ai/install.ps1 | iex 練習用フォルダを作る → そこへ移動 → claude Mac/Linux/WSL: curl -fsSL https://claude.ai/install.sh | bash 料金 確認: claude --version Claude Pro(月20ドル〜)/Max/API従量課金。無料 プランは不可 安全の3つ 困ったら ① モードは Shift+Tab で切替。最初は「確認モード」 エラーはそのままコピペして「エラー出ました」で投げる ② 起動したフォルダが行動範囲。練習用フォルダで起動 Discord の Claude Code チャンネルへどうぞ 💬 する ③ 止めたいときは Esc、または「それ、止めて」 36 / 36