Google Bardがサブルーチンにまとめてくれた例

 $(function() {

// onload時にSelect要素の値を取得して、 // `other-element`要素の表示状態を変更する var selectValue = $("#project_custom_field_values_2").val(); if (selectValue == "従事していない") { $('p').each(function () { var p = $(this); var labels = $(this).find('label'); var label = labels.first(); var innerText = label.text(); //console.log(innerText); switch (innerText) { case "test": p.hide(); var inputs = p.find('input'); inputs.hide(); break; case "test2": p.hide(); break; case "症状": p.hide(); break; default: console.log(""); } }); } else { $('p').each(function () { var p = $(this); var labels = $(this).find('label'); var label = labels.first(); var innerText = label.text(); //console.log(innerText); switch (innerText) { case "test": p.show(); break; case "test2": p.show(); break; case "症状": p.show(); break; default: console.log(""); } }); } $("#project_custom_field_values_2").on("change", function() { if ($(this).val() == "従事していない") { $('p').each(function () { var p = $(this); var labels = $(this).find('label'); var label = labels.first(); var innerText = label.text(); //console.log(innerText); switch (innerText) { case "test": p.hide(); var inputs = p.find('input'); inputs.hide(); break; case "test2": p.hide(); break; case "症状": p.hide(); break; default: console.log(""); } }); } else { $('p').each(function () { var p = $(this); var labels = $(this).find('label'); var label = labels.first(); var innerText = label.text(); //console.log(innerText); switch (innerText) { case "test": p.show(); break; case "test2": p.show(); break; case "症状": p.show(); break; default: console.log(""); } }); } }); }); 上記のコードに重複しているif とelse の間のコードをサブルーチンにできますか？書き直してください。

【Google Bardの回答】

はい、重複しているifとelseの間のコードをサブルーチンにすることができます。

書き直したコードは、次のようになります。

JavaScript

$(function() {

  // onload時にSelect要素の値を取得して、
  // `other-element`要素の表示状態を変更する
  var selectValue = $("#project_custom_field_values_2").val();
  if (selectValue == "従事していない") {

    // サブルーチンを呼び出す
    hideElements();

  } else {

    // サブルーチンを呼び出す
    showElements();

  }

  // onChangeイベントをハンドリングする
  $("#project_custom_field_values_2").on("change", function() {
    if ($(this).val() == "従事していない") {

      // サブルーチンを呼び出す
      hideElements();

    } else {

      // サブルーチンを呼び出す
      showElements();

    }
  });
});

// サブルーチン
function hideElements() {
  // p要素をすべて取得する
  var ps = $("p");

  // p要素ごとに処理を行う
  ps.each(function() {
    // ラベル要素を取得する
    var label = $(this).find("label").first();

    // ラベルのテキストを取得する
    var innerText = label.text();

    // switch文で処理を行う
    switch (innerText) {
      case "test":
        // p要素を非表示にする
        $(this).hide();
        break;
      case "test2":
        // p要素を非表示にする
        $(this).hide();
        break;
      case "症状":
        // p要素を非表示にする
        $(this).hide();
        break;
      default:
        // 何もしない
        break;
    }
  });
}

function showElements() {
  // p要素をすべて取得する
  var ps = $("p");

  // p要素ごとに処理を行う
  ps.each(function() {
    // ラベル要素を取得する
    var label = $(this).find("label").first();

    // ラベルのテキストを取得する
    var innerText = label.text();

    // switch文で処理を行う
    switch (innerText) {
      case "test":
        // p要素を表示する
        $(this).show();
        break;
      case "test2":
        // p要素を表示する
        $(this).show();
        break;
      case "症状":
        // p要素を表示する
        $(this).show();
        break;
      default:
        // 何もしない
        break;
    }
  });
}

コードは注意してご使用ください。詳細

この書き直したコードでは、重複しているifとelseの間のコードを、hideElements()とshowElements()という2つのサブルーチンに分離しました。

hideElements()サブルーチンは、p要素を非表示にする処理を行います。showElements()サブルーチンは、p要素を表示する処理を行います。

onLoadイベントとonChangeイベントのハンドリングも、サブルーチンを呼び出すように変更しました。

この書き直したコードにより、コードの可読性と保守性が向上します。また、コードの重複を排除することで、パフォーマンスの向上も期待できます。