Lesson 1: ファイルの作成と高度な編集
クラス: 初級
所要時間: 約35分
前提知識: 初心者クラス修了
1. 解説
初心者クラスからのステップアップ
初心者クラスではファイルを「作る・読む」基本を学んだ。 初級クラスではより複雑なファイル操作と、コードの品質を考慮した編集を習得する。
高度な編集指示のパターン
bash
# 関数のシグネチャだけ変える
「getUserById の引数を (id) から ({ id, includeDeleted = false }) に変更してください」
# インターフェース全体の変更
「このモジュールを CommonJS (require) から ES Modules (import/export) に変換してください」
# コーディングスタイルの統一
「このファイルのインデントをタブからスペース2つに統一してください」
# 型安全性の追加(JSDoc)
「すべての関数に @param と @returns の JSDoc タグを追加してください」大きなファイルへの対応
1000行を超えるファイルを扱う場合:
bash
# 分割して読ませる
「src/app.js の認証関連の部分だけを読んでください」
# 特定の機能に絞る
「src/utils.js の文字列操作に関連する関数だけを確認してください」
# 段階的に編集
「まず validateUser 関数だけを修正してください。
問題なければ次に processOrder を修正します。」2. 実践
Step 1: 複合的なファイル作成
bash
mkdir -p ~/claude-practice/elementary/lesson1/{src,lib,config}
cd ~/claude-practice/elementary/lesson1
claude以下の仕様で src/userManager.js を作成してください:
クラス UserManager {
- constructor(): ユーザーのMapを初期化
- createUser(name, email, role): ユーザー作成。email重複チェックあり
- findUser(id): IDでユーザー取得
- findByEmail(email): メールアドレスで検索
- updateUser(id, updates): 部分更新
- deleteUser(id): 論理削除(deleted: true フラグをセット)
- listActiveUsers(): 論理削除されていないユーザー一覧
- listByRole(role): ロール別一覧
}
バリデーション:
- email は @を含む形式チェック
- role は "admin" | "user" | "guest" のみ許可
- name は1文字以上50文字以下
エラーは throw new Error(...) で伝えるStep 2: 既存コードの構造的な変更
src/userManager.js を読んで、以下の変更をしてください:
1. エラーハンドリングを改善:カスタムエラークラスを導入
- ValidationError: バリデーション違反
- NotFoundError: ユーザーが存在しない
- DuplicateError: メールアドレスの重複
2. createUser に createdAt タイムスタンプを追加
3. 全メソッドに処理前後のバリデーションを追加
変更は段階的に行い、各ステップを説明してください。Step 3: 複数ファイルへの展開
src/userManager.js を以下の3ファイルに分割してください:
- lib/validators.js: バリデーション関数(validateEmail, validateRole, validateName)
- lib/errors.js: カスタムエラークラス
- src/userManager.js: コアロジック(validators.js と errors.js を使用)Step 4: 設定ファイルの管理
config/default.js を作成してください:
- maxUsernameLength: 50
- allowedRoles: ['admin', 'user', 'guest']
- emailRegex: メールアドレスの正規表現
UserManager がこの設定ファイルを使うよう修正してください。3. 確認課題(Assignment)
課題 1-1: リファクタリング
以下のコードをファイルに保存し、Claude Code に改善させせよ。
bash
cat > ~/claude-practice/elementary/lesson1/src/messy.js << 'EOF'
var data=[]
var id=0
function add(n,e){
var found=false
for(var i=0;i<data.length;i++){
if(data[i].email==e){found=true;break}}
if(found){throw "exists"}
var u={id:id++,name:n,email:e,active:true}
data.push(u)
return u}
function get(i){for(var j=0;j<data.length;j++){if(data[j].id==i)return data[j]}return null}
function del(i){for(var j=0;j<data.length;j++){if(data[j].id==i){data[j].active=false;return true}}return false}
module.exports={add,get,del}
EOFsrc/messy.js を読んで、以下の改善を行ってください:
- 可読性のあるコードスタイルに整形
- var を const/let に変換
- 適切な関数名・変数名に変更
- エラーハンドリングを改善達成条件: 整形後も同じ機能が動作し、コードが読みやすくなっていること
課題 1-2: JSDoc の追加
src/userManager.js の全メソッドに JSDoc コメントを追加してください。
@param, @returns, @throws タグをすべて含めてください。達成条件: すべてのパブリックメソッドに完全な JSDoc が付いていること
課題 1-3: 設定の外部化
src/userManager.js の中にハードコードされている値(文字数制限、ロール一覧など)を すべて config/default.js に移動させせよ。
達成条件: userManager.js にハードコードされた定数が残っていないこと
