AIコードをDRY/KISSで徹底リファクタ！
コードレビュー道場 #1：DRY/KISS

公開日：2025年12月13日

最終更新日：2026年02月22日

このページでは、AIが生成しがちな冗長・重複・やりすぎなコードを題材に、DRY / KISSを武器にしたコードレビュー形式の4択クイズで実戦力を鍛えます。理屈を読むだけでなく、「どこがまずい？どう直す？」を自分の判断として身につけるのが狙いです。

4択クイズ（10問・全問解説付き）で腕試し → 解説でなぜその修正が効くのかを腹落ち。「読む→解く→わかる」で、AIコードをスリムに整えるリファクタの勘所を鍛えていきましょう！

今すぐクイズに挑戦
（10問・約3分・解説つき）

プリンシプルオブプログラミング
AI時代を生き抜く「101の設計原則」

#1 DRY/KISS：AIコードをリファクタせよ！目次

クイズに挑戦する(10問)

参考文献・出典
このページの著者
シェア

コードレビュー道場 #1～DRY/KISSで太りすぎた関数を救え！～

1. 次のコードでは、配列のフィルタリングとマッピングが重複しています。DRYとKISSの両方を意識した改善として、最もよいものはどれでしょうか？

const activeUserNames = users
  .filter(user => user.active)
  .map(user => user.name);

const activeUserEmails = users
  .filter(user => user.active)
  .map(user => user.email);

A. filter と map を1行にまとめて三項演算子で処理する
B. active なユーザー一覧を一度変数に格納し、それを元に name と email をそれぞれ map する
C. active プロパティを削除する
D. map の代わりに forEach を使う

2. 次の関数は、画面ごとにほぼ同じローディング表示ロジックをコピペしています。DRYの観点から、最も適切な改善はどれでしょうか？

function showUserLoading() {
  const el = document.getElementById('user-section');
  el.innerHTML = '読み込み中...';
}

function showOrderLoading() {
  const el = document.getElementById('order-section');
  el.innerHTML = '読み込み中...';
}

A. innerHTML を textContent に変える
B. 'loading' クラス名を変える
C. ローディング表示用の共通関数を定義し、IDだけ引数で渡す
D. ローディング表示をやめる

3. 次の関数は、複数のモードに応じて処理を切り替えています。KISSの観点から、最も問題になりやすい点はどれでしょうか？

function handleAction(mode, data) {
  if (mode === 'create') {
    // 作成処理
    // ...
  } else if (mode === 'update') {
    // 更新処理
    // ...
  } else if (mode === 'delete') {
    // 削除処理
    // ...
  } else if (mode === 'copy') {
    // コピー処理
    // ...
  } else if (mode === 'archive') {
    // アーカイブ処理
    // ...
  } else {
    throw new Error('Unknown mode');
  }
}

A. mode を文字列で管理していること
B. 例外を投げていること
C. 1つの関数で多くのモードを扱い、if-else が増え続ける設計になっていること
D. data を引数に取っていること

4. 次のコードでは、同じ「合計金額のフォーマット処理」が重複しています。DRYの観点から、最も適切な改善はどれでしょうか？

function showCartTotal(cart) {
  const total = cart.items.reduce((sum, item) => sum + item.price * item.quantity, 0);
  const label = total.toLocaleString() + '円（税込）';
  document.getElementById('cart-total').textContent = label;
}

function showOrderTotal(order) {
  const total = order.items.reduce((sum, item) => sum + item.price * item.quantity, 0);
  const label = total.toLocaleString() + '円（税込）';
  document.getElementById('order-total').textContent = label;
}

A. 円マークを削除する
B. toLocaleString() をやめてそのまま表示する
C. 合計計算とフォーマット処理を共通のヘルパー関数として切り出す
D. document.getElementById を querySelector に変える

5. 次のコードは、API呼び出しのオプションを毎回ベタ書きしています。DRYの観点から、最も効果的な改善はどれでしょうか？

function fetchUsers() {
  return fetch('/api/users', {
    method: 'GET',
    headers: { 'Content-Type': 'application/json' },
    credentials: 'include'
  });
}

function fetchOrders() {
  return fetch('/api/orders', {
    method: 'GET',
    headers: { 'Content-Type': 'application/json' },
    credentials: 'include'
  });
}

A. method を 'POST' に変更する
B. 'Content-Type' をヘッダーから削除する
C. 共通の fetch オプションを変数や関数にまとめ、URLだけ変えるようにする
D. fetch を axios に置き換える

6. 次の関数は、かなり多くの責務を抱えて太りすぎています。DRY/KISS の観点から、最も問題がある点はどれでしょうか？

function handleCheckout(cart, user) {
  // 合計計算
  // クーポン適用
  // 在庫チェック
  // 配送先住所チェック
  // 支払情報チェック
  // 決済API呼び出し
  // 注文レコード作成
  // メール送信
  // 画面遷移
}

A. コメントが多すぎること
B. 引数が2つあること
C. チェックアウトに関するすべての処理を1つの巨大な関数に詰め込んでいること
D. 関数名に handle が含まれていること

7. 次のコードは、ユーザー名ラベルを作る処理です。DRYの観点から、最も問題がある部分はどこでしょうか？

function createUserLabel(user) {
  return user.lastName + ' ' + user.firstName + '（' + user.id + '）';
}

function createOrderLabel(order) {
  const user = order.user;
  return user.lastName + ' ' + user.firstName + '（' + user.id + '）';
}

A. lastName と firstName をスペースでつなげていること
B. createUserLabel と createOrderLabel で同じラベル生成ロジックをコピペしていること
C. ユーザーIDをカッコで囲んでいること
D. 変数 user を再代入していないこと

8. 次の関数は、条件分岐が深くネストしています。KISSの観点から、どのような改善が最も効果的でしょうか？

function process(user) {
  if (user) {
    if (user.isActive) {
      if (!user.isBanned) {
        // メイン処理
        doSomething(user);
      }
    }
  }
}

A. user をグローバル変数にする
B. ネストした if をガード節（早期 return）に変えて、ネストを浅くする
C. doSomething の中にすべての条件チェックを移動する
D. isActive と isBanned のプロパティ名を変える

9. 次のコードは、「とりあえずなんでも詰め込んだユーティリティ関数」です。KISSの観点から、どのような改善方針がよいでしょうか？

function doMagic(obj, options) {
  // ログ出力
  console.log('start', obj, options);

  // バリデーション
  // ...

  // データ変換
  // ...

  // API呼び出し
  // ...

  // 画面更新
  // ...
}

A. さらに多くの処理を足して、アプリ全体をここから呼ぶ
B. doMagic の中身を、責務ごとに小さな関数に分割し、意味のある名前を付ける
C. すべての処理をコメントアウトしておく
D. 関数名だけ doEverything に変える

10. 次の2つの関数は、ほとんど同じログ出力を行っています。DRYとKISSの観点から、より良い設計はどれでしょうか？

function logUserLogin(user) {
  console.log('[LOGIN]', new Date().toISOString(), user.id, user.name);
}

function logUserLogout(user) {
  console.log('[LOGOUT]', new Date().toISOString(), user.id, user.name);
}

A. ログ出力をすべて削除する
B. 日付の出力を削除する
C. 共通の logUser(eventType, user) 関数を作り、[LOGIN]/[LOGOUT] だけを引数で変える
D. console.log の代わりに alert を使う

次のクイズ(#2 凝集度/結合度：疎結合へリファクタ！)へ

NEW SPECIAL

2026.03.28 公開

『AI時代のエンジニアタイプ診断』を新規公開！
全16タイプで設計スタイル・強み・相性が分かります！

抽象派/具現派、品質重視/速度重視、AI協働派/自力精査派など4つの指標から診断し、強み・弱み・相性のいいタイプや今読むべき記事まで分かるようにしました！

診断してみる

今すぐクイズに挑戦プログラミングクイズ一覧へ

参考文献・出典

プリンシプルオブプログラミング～3年目までに身につけたい一生役立つ101の原理原則～
上田勲（著）／秀和システム／第1版14刷／2025年／ISBN978-4-7980-4614-3

※本ページは学習支援を目的とした要約です。実務適用時は原典もご参照ください。

このサイトの運営者

もちもちみかん（社内SE）

運営者は、グループ企業向けの業務アプリを要件定義から運用まで担当している社内SEです。PHP・JavaScript・MySQL・CSSを使った実務経験をもとに、一次情報や実際の運用で得た気づきを整理しています。

AIにコードを書かせて終わりではなく、どこで迷ったか・どこを人がレビューすべきかまで含めて、やさしく噛みくだいてまとめています。

経験：Webアプリ・業務システム

得意：PHP・JavaScript・MySQL・CSS

制作・運用中：フォーム生成基盤・クイズ学習プラットフォーム・htmx逆引きレシピ等

AI時代のエンジニアタイプ診断：CSPF/とろとろみかん

詳しいプロフィールはこちら！　　もちもちみかんのプロフィール

AIコードをDRY/KISSで徹底リファクタ！
コードレビュー道場 #1：DRY/KISS

#1 DRY/KISS：AIコードをリファクタせよ！目次

コードレビュー道場 #1～DRY/KISSで太りすぎた関数を救え！～

8. 次の関数は、条件分岐が深くネストしています。KISSの観点から、どのような改善が最も効果的でしょうか？

`function process(user) { if (user) { if (user.isActive) { if (!user.isBanned) { // メイン処理 doSomething(user); } } } }`

『AI時代のエンジニアタイプ診断』を新規公開！
全16タイプで設計スタイル・強み・相性が分かります！

DRY/KISSで太りすぎた関数を救え！
採点結果

参考文献・出典

このサイトの運営者

もちもちみかん.comとは

AIコードをDRY/KISSで徹底リファクタ！コードレビュー道場 #1：DRY/KISS

#1 DRY/KISS：AIコードをリファクタせよ！ 目次

コードレビュー道場 #1～DRY/KISSで太りすぎた関数を救え！～

8. 次の関数は、条件分岐が深くネストしています。KISSの観点から、どのような改善が最も効果的でしょうか？ function process(user) { if (user) { if (user.isActive) { if (!user.isBanned) { // メイン処理 doSomething(user); } } } }

『AI時代のエンジニアタイプ診断』を新規公開！ 全16タイプで設計スタイル・強み・相性が分かります！

参考文献・出典

このサイトの運営者

シェアしてね

AIコードをDRY/KISSで徹底リファクタ！
コードレビュー道場 #1：DRY/KISS

#1 DRY/KISS：AIコードをリファクタせよ！目次

8. 次の関数は、条件分岐が深くネストしています。KISSの観点から、どのような改善が最も効果的でしょうか？

`function process(user) { if (user) { if (user.isActive) { if (!user.isBanned) { // メイン処理 doSomething(user); } } } }`

『AI時代のエンジニアタイプ診断』を新規公開！
全16タイプで設計スタイル・強み・相性が分かります！