3章既存コードを"神コード"に進化させる

INDEX

前の章に戻る次の章に進む

3章既存コードを"神コード"に進化させる

この章の目安学習時間：60分

この章で到達できるゴール：

読みにくいコードや冗長なコードを、AIの力で美しく、効率的なコードに改善（リファクタリング）できる。
初めて見るコードでも、AIに解説させることで処理内容を素早く理解できる。

【3-1】もう怖くない！AIリファクタリング術

目安の学習時間：30分

リファクタリングとは？なぜ重要なのか？

リファクタリングとは、Webサイトやアプリの外部から見た振る舞いを変えずに、内部のコード構造を改善することを指します。
車で言えば、外装や乗り心地は変えずに、エンジン内部の部品をより効率的なものに交換するようなイメージです。

なぜリファクタリングが重要なのでしょうか？

可読性の向上：コードが読みやすくなり、他の人（そして未来の自分）が理解しやすくなる。
メンテナンス性の向上：修正や機能追加が容易になり、開発スピードが上がる。
バグの防止：複雑なコードをシンプルにすることで、バグが潜む余地を減らす。

動けば良い、というだけでなく、「綺麗で読みやすいコード」を書くことは、プロのWeb制作者にとって非常に重要なスキルです。
このリファクタリングという、経験が問われる作業も、AIが強力にサポートしてくれます。

読みにくいコードを美しく整形しよう

例えば、以下のような少し冗長なCSSコードがあったとします。

.card-title {
  font-size: 24px;
  font-weight: bold;
  color: #333333;
  margin: 0 0 10px 0;
  margin-bottom: 10px;
  line-height: normal;
  display: block;
}

.card-text {
  font-size: 16px;
  line-height: 1.6;
  color: #555555;
  margin: 0;
  display: block;
}

.card-button {
  display: inline;
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
  background-color: #007bff;
  color: #ffffff;
  text-decoration: none;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  text-align: center;
  line-height: 1;
  transition: all 0.3s ease-in-out;
}

.card-button:hover {
  background-color: #0056b3;
  text-decoration: none;
  color: #ffffff;
}

CSS

このコードをまるごと選択し、Copilot Chatに「このCSSコードを、より簡潔で読みやすくリファクタリングしてください。」と指示してみましょう。
AIは、コードの意図を理解し、例えば同じカードコンポーネント内のセレクタをまとめる、プロパティの順番を揃えるなど、より見通しの良いコードを提案してくれます。

例えば、以下のように出力されるはずです。

.card-title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

.card-text {
  font-size: 16px;
  color: #555;
  line-height: 1.6;
}

.card-button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
}

.card-button:hover {
  background-color: #0056b3;
}

CSS

練習問題

問題
以下の非効率なJavaScriptコードは、level の値に応じて異なるメッセージを返します。
この if...else if...else 文で書かれた処理を、より見通しの良いswitch文を使って書き換えるよう、Copilotに指示してみましょう。

function getTitle(level) {
  if (level === 'beginner') {
    return '初心者向けガイド';
  } else if (level === 'intermediate') {
    return '中級者向けテクニック';
  } else if (level === 'advanced') {
    return '上級者向け応用編';
  } else {
    return 'Web制作をはじめよう';
  }
}

JavaScript

解答例
上記のコードをCopilot Chatに貼り付け、「このif文をswitch文を使ってリファクタリングしてください」と指示します。
Copilotは以下のような、同じ処理を行うswitch文のコードを生成します。

function getTitle(level) {
  switch (level) {
    case 'beginner':
      return '初心者向けガイド';
    case 'intermediate':
      return '中級者向けテクニック';
    case 'advanced':
      return '上級者向け応用編';
    default:
      return 'Web制作をはじめよう';
  }
}

JavaScript

【3-2】AIは最高のコード解説者

目安の学習時間：30分

AIにコードの「意味」を解説させる裏技

Web制作では、他人の書いたコードや、ライブラリ、フレームワークのコードを読む機会が頻繁にあります。
しかし、初めて見るコードの処理内容を理解するのは、時に困難を伴います。

そんな時、Copilot Chatは最高のコード解説者になります。
使い方は簡単です。

意味を知りたいコードを選択します。
Copilot Chatを開き、「/explain」と入力するか、あるいは「このコードは何をしていますか？一行ずつ詳しく解説してください」とプロンプトを入力します。

AIは、選択されたコードの目的、処理の流れ、各行が果たしている役割などを、自然言語で丁寧に説明してくれます。
これにより、技術記事を読んだり、英語のドキュメントと格闘したりする時間を大幅に削減し、コードの理解を加速させることができます。

解読するコード例

/*
 * @param {Array<Object>} items - 商品オブジェクトの配列。
 * @param {string} propertyName - 合計を計算したい数値プロパティの名前。
 * @returns {number} 指定されたプロパティの合計値。
 */
function calculateTotalOfProperty(items, propertyName) {
  if (!Array.isArray(items) || items.length === 0) {
    return 0;
  }

  return items.reduce((total, item) => {
    if (typeof item[propertyName] === 'number') {
      return total + item[propertyName];
    }
    return total; // 数値でない場合は加算しない
  }, 0);
}

// 使用例：
// const products = [
//   { name: 'Laptop', price: 1200, quantity: 1 },
//   { name: 'Mouse', price: 25, quantity: 2 },
//   { name: 'Keyboard', price: 75, quantity: 1 }
// ];
// const totalPrice = calculateTotalOfProperty(products, 'price');
// console.log(totalPrice); // 1300

JavaScript

このコードは、配列内のオブジェクトから指定した数値プロパティの合計値を
計算する関数 calculateTotalOfProperty を定義しています。

主な処理内容
引数のチェック

items が配列でない、または空の場合は 0 を返します。
合計値の計算

Array.prototype.reduce を使い、各オブジェクトの propertyName で指定された
プロパティが数値の場合のみ合計します。
使用例

商品リストから price の合計を計算する例がコメントで示されています。
ポイント
数値以外の値は合計に含めません。
配列が空の場合や不正な場合は 0 を返します。
この関数は、商品リストなどから価格や数量の合計を求める際に便利です。

出力例

AIアシストコーディング実践 3-1

考えてみよう

AIのコード解説が少し専門的で分かりにくかった場合、どうすればもっと分かりやすい説明を得られるでしょうか？

解答例
自分の知識レベルをAIに伝え、説明のレベル感を調整してもらうのが効果的です。
例えば、「ありがとうございます。もう少し初心者にも分かるように、専門用語の『コールバック関数』や『アロー関数』を使わずに、たとえ話などを交えて説明し直してください。」のように依頼します。

AIはこちらの要求に応じて、より平易な言葉で説明を試みてくれます。
分からないことを「分からない」と伝え、対話を重ねることが、AIを家庭教師として活用するコツです。

【3-3】3章 -章末課題- [JQueryをピュアJSに書き換える]

目安の学習時間：30分

問題

Web業界では、古い技術で書かれたコードを現代的な技術に書き換える（モダン化する）作業が頻繁に発生します。

今回は、かつて広く使われていたJavaScriptライブラリ「JQuery」で書かれた短いコードスニペットを、ライブラリを使わない現代的なJavaScript（ピュアJavaScript）に書き換えてください。

この時、あなた自身はJQueryの文法を知っている必要はありません。
AIの力を借りて、以下の2ステップで課題を解決してください。

まず、AIにJQueryのコードが何をしているのかを解説させる。
次に、その処理内容をピュアJavaScriptで書き換えるようAIに指示する。

【対象のJQueryコード】

$('#show-button').on('click', function() {
  $('.hidden-box').fadeIn();
});

JavaScript

解答手順

操作手順

Copilot Chatを開き、問題のJQueryコードを貼り付け、「このJQueryコードが何をしているのか、詳しく解説してください。」と指示します。
AIの解説を読み、コードの目的を理解します。（例：「IDが`show-button`の要素がクリックされたら、`hidden-box`というクラスを持つ要素をフェードイン（じわっと表示）させる処理です」といった回答が得られます）
続けて、チャットで「ありがとうございます。この処理をJQueryを使わずに、ピュアJavaScriptで書き換えてください。フェードインのアニメーションもCSSで再現してください。」と指示します。
AIが生成したピュアJavaScriptのコードと、アニメーション用のCSSコードを確認します。元のJQueryコードの処理内容と一致していることを確認し、完成したコードを課題として提出します。

解答例

<button id="show-button">表示</button>
<div class="hidden-box">ここが隠れているボックスです</div>
<!-- ...既存のHTML... --

HTML

.hidden-box {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s;
}

.hidden-box.show {
  opacity: 1;
  visibility: visible;
}
/* ...既存のCSS... */

CSS

// ...既存のコード...
document.getElementById('show-button').addEventListener('click', function() {
  var box = document.querySelector('.hidden-box');
  box.classList.add('show');
});
// ...既存のコード...

JavaScript

この章のまとめ

これで「3章：既存コードを"神コード"に進化させる」の解説を終わります。

コードを「書く」だけでなく、「読み解き」「改善する」という、プロとして極めて重要なスキルをAIと共に実践しました。
これで、どんなコードを前にしても臆することはありません。

次の章では、開発者にとって最大の敵とも言える「エラー」との戦い方を学びます。
AIを最強のデバッグパートナーにする方法を習得しましょう。

前の章に戻る次の章に進む