Skip to content

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}
EOF
src/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 にハードコードされた定数が残っていないこと


自己チェックリスト


次の型

Lesson 2: コードの読み取りと理解 →

Claude Code Dojo