スマヌ15分では追いつけなかったよ…トラブルに引っかかったので60分かかった😢😢😢 ※Node.jsのインストールトラブルがなければ15分で終わるでしょう。
かなり無理を言ってる🤔わかってるでもやらないと追いつけない…😫 という話となります。さて短時間で学び直しはできるのでしょうか。
【スペック】
Claude Codeって何？
ターミナル上で動くAIコーディングアシスタントです。プロンプトに「〜を作って」「〜を修正して」と依頼することで開発ができます。VisualStudio CodeやJetBrains IDEとも連携が可能らしい。
正直、最初は「また新しいツール🙄？」って思ったけど、使ってみたら開発スタイルが完全に変わる予感はありました🤩
- Claude Codeって何？
- 1. 料金の話（重要）
- 2. 環境準備
- 3. Claude Codeの起動とプロジェクトの初期化
- 4. Claude Codeでのコーディング
- 5. Claude Codeの終了方法
- 5. Claude Codeでよく使うコマンド一覧
- 6. 操作の確認について
- おわりに
1. 料金の話（重要）
3つの使い方
以前はClaude Codeの使用には、API課金とMaxプラン経由となっていましたが、先日のニュースリリースでProプランでも利用ができるようになりました🥰ただしProプランではモデルの変更はできない様子。
参考
- API利用 … 使った分だけ課金
- Maxプラン … 月額$100〜$200
- 【追加！】Proプラン … 月額$20
私はProプランに加入しているので、そちらを使用していきます。
2. 環境準備
今回使用する環境
インストール手順
Node.js LTSバージョンのインストール
⚠️実はここに罠があります。一般的に以下のようにNode.jsをインストールができるのですが、 その後の手順でエラーが発生します。
NGなインストール方法
# 🈲NodeSource経由のインストール $ curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash - $ sudo apt-get install nodejs -y # 🈲snap経由のインストールも避ける $ sudo snap install node
⚠️snap経由のNode.jsもトラブルのもとです パーミッション・依存関係で詰みます。
以下の方法でnvm経由でNode.jsをインストールしてください。
# nvm経由でのNode.jsのインストール（推奨） $ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash $ source ~/.bashrc $ nvm install --lts $ nvm use --lts
Claude Codeのインストール
参考
以下を実行したところ、私の環境（WSL）ではインストール無事成功しました。
$ npm install -g @anthropic-ai/claude-code
⚠️以下のような表示が出たら、nvmを使用せずNode.jsをインストールしたためにパーミッションに問題が発生しています。必ず、nvm経由でNode.jsをインストールしましょう。
WSL環境でエラーが出た場合
WSLで問題が出た場合は以下も試してみてください。
参考
# OS検出エラーを回避 $ npm config set os linux # 強制インストール（sudoは使用しないこと） $ npm install -g @anthropic-ai/claude-code --force --no-os-check
Claude Codeの初回セットアップと認証
【重要】まず最新版に更新！
$ claude update
Claude Codeの起動
$ claude
1. テキストスタイル選択（好みで）
2. 認証方法選択（どちらか）
- 【今回はこちら】Pro/Maxプランの場合: Claudeで使っている認証情報でログイン
- API利用の場合: Anthropic Console（console.anthropic.com）でOAuth認証
今回はProプランを使用しているのでこちらを選択します。
Proプランでは認証用のリンクが表示されます。そのリンクからコードを発行し貼り付けます。
認証プロンプトが出ない場合は claude update を実行してください！
ログインできればOKです。注意事項が表示されたら、【Enter】キーを押下して進みます。
3. フォルダの信頼確認（1. Yes, proceedを選択）
やっておくべき初期設定
Claude Code起動後（こんな画面が出たら成功！）
【注意】 ホームディレクトリではなく、プロジェクトディレクトリでClaudeCodeを起動しましょう！
3. Claude Codeの起動とプロジェクトの初期化
インストール作業から行っている場合には、一度/exitコマンドでClaude Codeを終了しておきます。
プロジェクトディレクトリ作成後、Claude Codeを起動
# プロジェクトディレクトリを作成・移動 $ mkdir claude-test $ cd claude-test $ claude
/init コマンドでプロジェクトの初期化
Claude Code起動後
/init
これを実行すると以下の処理が行われます。
- コードベースを自動で分析してくれる
- CLAUDE.mdファイルを自動生成
- 今後
Claude CodeがCLAUDE.mdに記載された、ルールに従って処理を行う
CLAUDE.mdファイルの例
※言語設定は作成後に編集しておくと日本語で答えてくれるようになります。
# CLAUDE.md このファイルはClaude Codeに作業方針を教えるやつ ## 言語設定 - すべての回答は日本語で行ってください - コメントも日本語で記述してください ## プロジェクト概要 TypeScript Reactアプリケーション ## ビルドコマンド - `npm run build` - 本番ビルド - `npm run dev` - 開発サーバー起動
重要
- CLAUDE.mdファイルが生成されたら必ず中身チェックして、間違ってたら修正！
- 日本語での回答を希望する場合 CLAUDE.mdに言語設定を追加するか、プロンプトで明示的に指定する
プロンプトの例
日本語でコメント付きのPython電卓スクリプトを作成してください
4. Claude Codeでのコーディング
プロンプトに以下のようなテキストをいれて実行することでコーディングが行われます。
ソースコードが生成されて
それに合わせてCLAUDE.mdの変更も行われます。
作成されたファイルは以下のような構造となります。
5. Claude Codeの終了方法
以下のコマンドを実行するとClaude Codeが終了します。
/exit
5. Claude Codeでよく使うコマンド一覧
| コマンド | 処理内容 |
|---|---|
/help |
ヘルプ表示 |
/init |
CLAUDE.mdファイル作成（超重要） |
/model |
モデル切り替え（Maxプランのみ） |
/clear |
会話履歴をクリア |
/cost |
使用料金・時間を確認（Pro・Maxプランは料金非表示） |
/config |
設定変更（diff表示等） |
/review |
コードレビュー依頼 |
/login |
アカウント切り替え |
/logout |
ログアウト |
6. 操作の確認について
Claude Codeは危険な操作前に確認してくれます。基本はYesがいいのかなと思います。
1. Yesまたはy: OK2. Yes, and don't ask again: 今後同じコマンドは自動でOK3. Noまたはn: やっぱやめる
おわりに
正直、最初は半信半疑でしたが短時間でここまでできるようになるとは...、思ってたより敷居低いかも？Proプランから始めて、必要に応じてMaxプランにアップグレードするのが良さそうです！
公式ドキュメント: https://docs.anthropic.com/ja/docs/claude-code/overview
