Claude Code: セットアップ

すでに Windows もネイティブ対応されている (2025年7月に対応)

最初に困ったところ

  • Pro プランの申し込みのURL が分からなかった
    • Googleで検索して、見つけた

インストール

  • node は入れておく必要あり
  • claude code のインストール
npm install -g @anthropic-ai/claude-code`

使い方

  • 作業用のフォルダを作成
  • 作成したフォルダに移動
  • VSCode を起動
  • memo.txt (memo.md でもよい)にやりたいことを書く
    • 具体例は後述
    • ちなみに私は CLAUDE.md は日本語で書いてください。 と書いている
      • 英語の方が良いらしいですが、英語が苦手なので日本語で書かせています
  • 赤いウニマークで Claude Code を起動
    • ファイルを開いていないとウニマークがない
    • ターミナルから claude を実行しても良い
  • /init を実行
    • memo.txt を勝手に読んで、やりたいことを把握してくれる
    • CLAUDE.md を作成してくれる
  • あとは指示を出すだけ

具体例 1 : Webアプリのデザインサンプルを作ってもらう

## 今回やりたいこと
* アプリケーションを実装する上で、デザイン案を複数出したい
* アプリケーションの実装は不要

## アプリケーション
* ブラウザベースのアプリケーション
* 開発の管理をするためのダッシュボードをまとめるアプリケーション

## 利用技術
* React + TypeScript + Tailwind CSS + DaisyUI

## 仕様
sample.html のような構成にします
* 固定のヘッダ領域が一番上にある
* サードバーが付いている

## やってほしいこと
* 1枚のhtml ファイルでデザインを確認できるサンプルを作成すること
* 最初の仕様
  * 現代風のアプリケーションのデザイン
  * かっこいいもの
* 共通仕様
  * Tailwind CSS と DaisyUI は、sample.html と同じように CDN から読み込んでください
  * sample.html については、構造(ヘッダ、サイドバー、メインがあるということ)以外は自由に変更して構いません
    * 色、枠の有無、角を丸くする、フォントの太さや大きさ、使っているsvgアイコン、hoverなど変更可です。
    * 画像を追加しても構いません

## その他条件
* CLAUDE.md は日本語で書いてください。
* 複数デザインを依頼するので、ファイル名を変えながら作成してください
  * ファイル名は、01_themename.html でお願いします。
    * 01 部分は、作成した回数 02, 03 ... と増やしてください
    * themename の部分は、テーマのコンセプトが分かる名称
  * 同じファイル名で拡張子を.md にして(01_themename.md)、そのファイルにデザインのコンセプトを説明する文章を作成してください。

具体例 2 : FastAPI と React + TypeScript のアプリ作成