前回、Windows11にWSL2とUbuntuを導入してLinux環境を構築しました。

Windows11にWSL2とUbuntuを導入してみた
WSL(Windows Subsystem for Linux)を使ってUbuntu環境を構築してみました。
環境ができたので、最近話題になっているClaude Codeを導入してみることにします。
Claude Codeとは
Claude CodeはAnthropicが提供しているAIコーディング支援ツールです。
コードの作成や修正、ファイルの解析などを依頼できます。
Claude Codeをインストール
WSLを起動し、まずは、インストールするディレクトリを作成しておきます。
cd ~
mkdir claudecode
cd claudecode
Claude Code本体をインストールします。
curl -fsSL https://claude.ai/install.sh | bash
インストールが完了しました。
念のためバージョンを確認します。
claude --version

問題なくバージョン情報が表示されたので、インストールは成功しているようです。
参考↓
概要 – Claude Code Docs
Claude Code は agentic coding ツールで、コードベースを読み取り、ファイルを編集し、コマンドを実行し、開発ツールと統合します。ターミナル、IDE、デスクトップアプリ、ブラウザで利用できます。
初回起動
それではClaude Codeを起動してみます。
claude
何やらテキストスタイルを選択できるようです。

次に進むとログイン方法の選択が出来ます。


ゆるユーリ
私はProプランを契約したアカウントがあるので1.を選択しました。
次に進むとブラウザが起動し認証を行います。
完了するとセキュリティに関する注意事項が出てくるので読み進めて、
ターミナルからClaude Codeを利用できるようになりました。
実際に触ってみる
試しに簡易的なTODOアプリを作ってみました。
仮でディレクトリを作成し、そこでClaude Codeを起動します。
mkdir test01
cd test01
claude
実行したプロンプト
# TODOアプリを作成してください
HTML・CSS・JavaScriptのみを使用して、シンプルなTODOアプリを作成してください。
## 要件
### ファイル構成
```
todo-app/
├── index.html
├── style.css
├── script.js
└── README.md
```
### 動作
ブラウザで `index.html` を開くだけで動作するようにしてください。
追加の環境構築やライブラリのインストールは不要です。
---
## 機能
以下の機能を実装してください。
### TODO追加
- 入力欄を用意する
- 「追加」ボタンを押すとTODOを追加する
- Enterキーでも追加できる
---
### TODO一覧
一覧表示してください。
各TODOには
- チェックボックス
- タイトル
- 編集ボタン
- 削除ボタン
を表示してください。
---
### 完了
チェックを付けると
- 打ち消し線
- 色を薄くする
---
### 編集
編集ボタンを押すとタイトルを変更できます。
---
### 削除
削除ボタンを押すとTODOを削除してください。
---
### データ保存
ブラウザの localStorage を使用してください。
ページをリロードしてもTODOが残るようにしてください。
---
## 入力チェック
- 空文字は禁止
- 前後の空白は削除
- 最大100文字
エラー時は画面にメッセージを表示してください。
---
## デザイン
シンプルで見やすいデザインにしてください。
条件
- 白背景
- カード風
- 角丸
- 適度な余白
- レスポンシブ対応
---
## コード品質
- HTML・CSS・JavaScriptを分離する
- JavaScriptはES6以降で記述する
- コメントは必要最低限
- 可読性を重視する
---
## README
README.mdには
- アプリ概要
- 機能一覧
- 使い方
を記載してください。
---
## 出力
必要なファイルをすべて生成してください。
コードは省略せず、完成した状態で出力してください。
生成されたindex.htmlを開くとTODOアプリが出来ていました。



ゆるユーリ
実用的かはさておき、3分ほどでTODOアプリが作れました。
まとめ
今回はWSL2上のUbuntu環境にClaude Codeを導入してみました。
インストール自体はいくつかのコマンドで完了し、思っていたより簡単でした。
実際にClaude Codeを使ってWeb制作やプログラム開発を行ってみた感想も記事にしていけたらと思います。
