製造工程を可視化するためのアプリケーションに品目区分による検索機能を追加しました。追加機能の使用技術と実装内容を記載します。

　繰り返しにはなりますが、広く知られているモダンなWeb開発技術を採用していますので、今後の開発の参考にしてください。

　アプリはポートフォリオサイト📒にリンクがあります。

---

🚀アプリについてご存じない方へ

　過去の資料を掲載します（現在実装している機能のベースはコチラです）。技術スタックについて、質問がある方は聞いてください。林の知る範囲でお話しいたします。

---

〇説明資料

---

〇GUI一覧

---

🚀追加機能

🐡品目区分による検索機能

　検索メニューに、新規で品目区分の項目を追加しました。指定項目が43個もあるので、ダイアログを作成しています。darkモード・lightモードの切り替えにも対応しています。

　レスポンシブによるレイアウトを調整。

　レイアウトを整えるのも時間がかかります。

---

🐡ViewSetによる入力制御

　　ViewSet（全工場、本社・屋井PT、本社PV組立、関東工場、福岡・熊本工場、現場）の選択状況により、チェックボックスのチェック状態をリセットし、同時に入力制限がかかるようにしました。

---

🐡検索条件について（これが一番時間がかかった）

　CASE（FLUCTUATION）の品目区分については、PT、PV、MTのどの製作課で製作されるかは、製作番号ごとに異なります。CASE（FLUCTUATION）に該当する場合は、別のフィールド（製作課）を見に行くように実装する必要がありました。

ViewSet（全工場、本社・屋井PT、本社PV組立、関東工場、福岡・熊本工場、現場）の選択状態によって、PT、PV、MTのいずれの値に一致する製作課のデータが欲しいかが決まるため、条件がやや複雑となりました。

　また、品目区分そのものが１～43個と可変長であるため、該当部のクエリは配列から動的に生成しています。

　以下、イメージにはなりますが、該当クエリのコードです。

/*
 * 品目区分による条件設定
 * 製作課:A68_skd030、品目区分A68_dju120
 */
//viewIdに応じて["PT", "MT", "PV"]の可変長配列が返ってくる
const productDepartments = createFilteredStringArray(viewId);
if (items.length !== productItems.length) {
  //全選択以外の場合クエリを設定する
  if (query !== "") query += " and ";
  //targetItemsには、品目区分の数値が格納されている[9,25,11,..]
  targetItems.forEach((item, index, itemList) => {
    if (index == 0) query += "(";
    if (index > 0 && index < itemList.length) query += " or ";
    if ("FLUCTUATION" != item.department) {
      query += ' A68_dju120 = "' + item.id + '"';
    } else {
      query += "(";
      if (viewId === ALL_FACTORY_NO || viewId === SITE_NO) {
        productDepartments.forEach((dept, index, deptList) => {
          if (index > 0 && index < deptList.length) query += " or ";
          query += ' A68_dju120 = "' + item.id + '"';
        });
      } else {
        productDepartments.forEach((dept, index, deptList) => {
          if (index > 0 && index < deptList.length) query += " or ";
          query +=
            "(" +
            ' A68_dju120 = "' +
            item.id +
            '"' +
            " and " +
            ' A68_skd030 = "' +
            dept +
            '")';
        });
      }
      query += ")";
    }
    if (index === itemList.length - 1) query += ")";
  });
}

---

🚀まとめ

　いかがでしょうか。世の中に出回っているアプリのように、ユーザが間違えないように皿を引く仕組みを実装することを心掛けています。こういった作り込みを維持しやすいコード体系で素早く構築できることも良いエンジニアの要素の一つだと思っています。

←ホームに戻る