はじめに

前回こちらの記事都道府県を地方ごとに配列を組みかえてみたを投稿させていただいたのですがあまりにもコードが長く単調なものだったので会社の上司にリファクタリングしてもらい、ちょっと自分でもいじってリファクタリングしてみた。

area.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/css/style.css">
  <title>地方ごとにタイトルを出力</title>
</head>
<body>

  <div class="container">

  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="/js/area.js"></script>
</body>
</html>

area.json

[
  {
    "hoge": "田中",
    "title": "",
    "image": "",
    "parent_category": "architecture",
    "category_slug": "production",
    "address": "北海道",
    "link": "",
    "topics": "0"
  },
  {
    "hoge": "山田",
    "title": "",
    "image": "",
    "parent_category": "civil",
    "category_slug": "train",
    "address": "北海道",
    "link": "",
    "topics": "0"
  },
  {
    "hoge": "池田",
    "title": "",
    "image": "",
    "parent_category": "civil",
    "category_slug": "architecture",
    "address": "北海道",
    "link": "",
    "topics": "0"
  },
{},
{},
{},
{}
]

area.js

$(function(){
  const region_prefs = {
    北海道地方: ["北海道"],
    東北地方: ["青森県", "岩手県"],
    関東地方: ["茨城県", "栃木県", "群馬県", "埼玉県", "千葉県", "神奈川県", "東京都"],
    中部地方: ["新潟県", "富山県", "石川県", "福井県", "山梨県", "長野県", "岐阜県", "静岡県", "愛知県"],
    近畿地方: ["三重県", "滋賀県", "京都府", "大阪府", "兵庫県", "奈良県", "和歌山県"],
    中国地方: ["鳥取県", "島根県", "岡山県", "広島県", "山口県"],
    四国地方: ["徳島県", "香川県", "愛媛県", "高知県"],
    九州地方: ["福岡県", "佐賀県", "長崎県", "熊本県", "大分県", "宮崎県", "鹿児島県", "沖縄県"]
  };

  Object.keys(region_prefs).forEach(function (region) {
    $(".container").append(
      `<section data-region="${region}"><h3>${region}</h3><ul class="entries" /></section>`
    );
  });

  $.ajax({
    type: "GET",
    url: "/json/area.json",
    dataType: "json",
  })
  .done(function (data) {
    $.each(data, function (index, value) {
      Object.keys(region_prefs).some(function (region) {
        if (region_prefs[region].includes(value.address)) {
          $(`[data-region='${region}'] ul`).append(`<li>${value.title}</li>`);
        }
      });
    });
  }).
  fail(function () {
    window.alert("通信に失敗しました")
  });
})

改善ポイント

前回都道府県の配列の初期化で長文で書いていたものを連想配列でまとめた。
連想配列のキーを使い
連想配列にまとめたことで前回の長いif文まとめることが出来た。
htmlも長かったのでsectionに地方ごとのdataを持たせてこちらも動的に生成するようにした。
some関数を使った。

結果

jsのコード量も半分以下になった。section以下を動的に生成できるようになった。

まとめ

まとめられるところを探す癖をつけるのが大事なんだと再確認出来ました。

都道府県を地方ごとに出力をした（改善版）

はじめに

改善ポイント

結果

まとめ