LoginSignup
4
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@GleapPostin株式会社Gakken LEAP

ClaudeCode初体験_不具合修正からリファクタリングまで

Last updated at Posted at 2025-06-26

はじめに

こんにちは、Gakken LEAPのフロントエンドエンジニアのkouです。

米国時間2025年6月4日、Anthropicは「Pro」プランにてClaude Codeの提供を開始しました。これにより、月額20ドルでClaudeとClaude Codeの両方を利用できるようになりました。

私自身も月額20ドルのProプランを契約していたため、さっそくClaude Codeをインストールし、フロントエンドコンポーネントの最適化という具体的な要件を通じて、分析からコードリファクタリングまでの開発プロセス全体を経験し、そのプロセスでの成果をここに記録します。

なお、Proプランに含まれるClaude Codeは、「Max」プランに比べていくつか制限があります。たとえば、小規模なコードベースであっても、連続利用は制限され、トークン上限に達した後はClaude本体との連携もできなくなります。今回の検証ではコード量が少なかったため支障はありませんでしたが、大規模開発を想定する場合はMaxプランへのアップグレードも検討が必要です。

1. Claude Code環境構築

クイックスタート

npm install -g @anthropic-ai/claude-code
claude init

実行するとClaude Codeが自動的にプロジェクト構造を分析し、CLAUDE.mdファイルを生成します。このファイルにはプロジェクトの構成、技術スタック、開発方針などが記述され、Claude Codeにとっては「プロジェクトの理解」に不可欠な文脈情報となります。

Claude CodeはCLIベースのツールで、IDEに依存せずコマンドラインのみで使用可能です。VSCodeやCursor向けの拡張も用意されています。

2. 進捗バーのインジケーター位置ズレ問題

問題の概要

学習進捗コンポーネントにおいて、黒色のインジケーターがカラーバーと正しく揃っていないという問題があります。

問題画像1

<template>
  <div class="progress-container">
    <div class="indicators">
      <div class="indicator">10</div>
      <div class="indicator">3</div>
      <div class="indicator">107</div>
    </div>
    <ProgressBar :correct="10" :incorrect="3" :unanswered="107" />
  </div>
</template>

主な課題

  • ProgressBarコンポーネントを修正できない（複数箇所で再利用されている）
  • 内部コンポーネントには複雑な最小幅処理ロジックが存在する
  • 数値が小さい場合、インジケーターが重なったりずれたりする

他のAIアシスタントとの議論の結果、この明確な目標を持つタスクをClaude Codeに任せてみることにしました。

3. Claude Codeでの初実践

要件の入力

TopProgress.vueの黒色インジケーターとProgressBarの位置ズレを修正してください。
ProgressBarコンポーネントの最小幅ロジックを完全に再現し、
インジケーターの位置がピッタリ揃うようにしてください。

Claude Codeによる提案:

// ProgressBarの計算ロジックを再現
const correctBarWidth = computed(() =>
  correctPercent.value < 3 ? 2 : correctPercent.value
);

const incorrectBarWidth = computed(() =>
  incorrectPercent.value < 3
    ? correctPercent.value + 3
    : totalAnsweredPercent.value
);

// インジケーターの位置計算
const correctPosition = computed(() => correctBarWidth.value / 2);

image.png

初期結果

重なりは解消できたものの、まだ中央揃えにはなっていません。

初期結果

4. 問題の特定と精密修正

Claude Codeによる構造分析

通常であればconsole.logを使ってデバッグしますが、Claude Codeは説明さえ明確であれば、コードを解析してバグ原因を調査・テスト・修正案まで提示してくれます。

ProgressBarのDOM構造を分析させたところ、以下のような構造が判明しました。

<!-- ProgressBarのDOM構造 -->
<div class="relative">
  <span class="bg-gray w-full"></span>            <!-- グレー背景 -->
  <span class="bg-orange" :style="width1"></span>  <!-- オレンジ -->
  <span class="bg-blue" :style="width2"></span>    <!-- ブルー（上に重ねる） -->
</div>

重要な発見：これらは「横並び」ではなくレイヤーで重ねて表示されている！

精密な位置補正

// DOM構造を考慮した正確な位置計算
const correctPosition = computed(() => correctBarWidth.value / 2);
const incorrectPosition = computed(() =>
  correctBarWidth.value + incorrectActualWidth.value / 2
)

CSSの調整

<!-- インジケーター中央揃え -->
<div :style="{
  left: `${position}%`,
  transform: 'translateX(-50%)'
}">

image.png

5. リファクタリング

ここまでの作業を踏まえ、Claude Codeにコードのリファクタリングも依頼してみました。結果は期待以上で、他のLLMやIDEアシスタント（Cursorなど）を凌ぐパフォーマンスでした。

リファクタリング前の問題

  • 173行のコード、多くの重複ロジック
  • ほぼ同一の3つのindicatorテンプレート
  • 可読性とメンテナンス性の低さ

要件入力はシンプルに一言

リファクタリングしてください

Claude Codeの解決策

1. 共通関数の抽出

// 共通化前
const correctPercent = computed(() => Math.floor((correct / total) * 100));
const incorrectPercent = computed(() => Math.floor((incorrect / total) * 100));

// 共通化後
const getPercentage = (count) => Math.floor((count / total) * 100);
const correctPercent = computed(() => getPercentage(correct));

2. データ構造の統一

const indicators = computed(() => [
  { type: 'correct', count: correctCount.value, position: correctPosition.value },
  { type: 'incorrect', count: incorrectCount.value, position: incorrectPosition.value },
  { type: 'notLearned', count: notLearnedCount.value, position: notLearnedPosition.value },
]);

3. テンプレートの簡略化

<template v-for="indicator in indicators" :key="indicator.type">
  <div v-if="indicator.count > 0" class="indicator"
       :style="{ left: `${indicator.position}%` }">
    {{ indicator.count }}
  </div>
</template>

効果

  • 行数：173行 → 132行（約24%削減）
  • 重複ロジック：完全排除
  • 保守性・可読性：大幅改善

6. まとめ

Claude Codeの強み

  • 複雑なコードの即時理解
  • バグ調査や構造分析の卓越した能力
  • リファクタリング精度の高さ
  • コーディングマシンのような一貫性とスピード

注意点

  • 高価格
  • ときに「独断的」な修正を提案することがある（レビュー必須）

経験からの学び

  1. Proプランの使用量は限られているため、他のAIツール（例えば会社提供のGemini 2.5 Proなど）を使って調査文書を先に作成し、修正の概要とどのファイルから検索を始めるべきかを説明すると、Claude Codeの効率が大幅に向上できる。
  2. コーディングしない時は、まずplanモードで調査（ショートカットはshift+tab+tab）。開発セクションが完了したら、/compactでコンテンツを圧縮。セッションを閉じても/continueで再開可能。
  3. 問題は一つずつ段階的に修正し、完了したらすぐにコミット。次の作業に影響させない。
  4. 完了後は必ず人間の目でコードレビューを行うこと。Claude Codeは優れた駿馬のような存在であり、手綱をしっかり握ることで真価を発揮する。

image.png

おわりに

Claude Codeを使用して最も強く感じたのは、未熟な提案をしたり自分の意見に固執したりする他のAIツールと比較して、Claude Codeは優れたコード実装能力を持ち、誰よりも複雑なビジネスロジックを理解し、アドバイスを提供できる経験豊富なエンジニアのようだということです。ただし、細部においては人間の確認・補完が必要です。

現在のところClaude Codeはまだ高額なサービスですが、将来的には「トークンを効率的に使いながら適切に指示を出す自然言語力」と「AIが出力したコードの安全性を見極めるレビュー力」が、開発者としての価値を左右するかもしれません。

エンジニア募集中

Gakken LEAP では教育をアップデートしていきたいエンジニアを絶賛大募集しています！！
ぜひお気軽にカジュアル面談へお越しください！！

4
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
4
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?