LoginSignup
3
3

More than 5 years have passed since last update.

JSONを静的なモジュールにする時、便利な正規表現

Last updated at Posted at 2018-10-10

経緯

JSONデータを静的なデータとして、bundleファイル内で持つことになり、
jsonをjsモジュールとして変更した際に教えて頂いた正規表現が便利だったので書き残すことにしました。

sample.json
[
  {
    "_id": "5bbdd4bab42d799bc2a0f468",
    "index": 0,
    "guid": "8f26906d-67b5-4768-9301-41065201b7c5",
    "isActive": true,
    "balance": "$3,497.04",
    "picture": "http://placehold.it/32x32",
    "age": 38,
    "eyeColor": "brown",
    "name": "Terrie Cummings",
    "gender": "female",
    "company": "INSURON",
    "email": "terriecummings@insuron.com",
    "phone": "+1 (934) 472-3270",
    "address": "292 Dearborn Court, Thermal, Tennessee, 9381",
    "about": "Tempor non elit anim non ipsum ad eu laboris nostrud ut commodo culpa. Dolor proident quis do labore magna minim quis et non esse qui quis pariatur elit. Esse ad sit deserunt reprehenderit et deserunt magna aliquip amet sit eu. Voluptate officia enim occaecat irure incididunt adipisicing adipisicing cupidatat fugiat cillum. Excepteur ad voluptate esse nisi anim consectetur deserunt dolor ad Lorem Lorem ut. Sint nisi culpa dolore eu elit ipsum nisi consectetur elit fugiat commodo fugiat sint adipisicing. Proident amet ad magna occaecat.\r\n",
    "registered": "2015-06-13T07:53:51 -09:00",
    "latitude": -62.521308,
    "longitude": -112.808762,
    "tags": ["consectetur","dolor","exercitation","sint","Lorem","non","est"],
    "friends": [
      {
        "id": 0,
        "name": "Richmond Odonnell"
      },
      {
        "id": 1,
        "name": "Rodriguez Dillon"
      },
      {
        "id": 2,
        "name": "Leann Velazquez"
      }
    ],
    "greeting": "Hello, Terrie Cummings! You have 10 unread messages.",
    "favoriteFruit": "apple"
  }
]

そのまま変数化してexportすれば良いと思っている時代があったのですが、

const module = [
  {
    "_id": "5bbdd4bab42d799bc2a0f468",
    "index": 0,
// 略

export default module;

JSONデータのままだとkey側にも""があるためそのままではimportエラーとなり使うことができず、、、
""を置換するにしても、keyだけではなくvalueの""は文字列なので、ここはそのままにしないといけない、、、
どうやら一括置換はできそうにないな、、、

そこで
editorの置換機能のRegexをオンにして

置換前の値に^(\s+)"(\w+)"をセット
置換後の値に$1$2をセット

えいやー!!!!!(ボタンポチー)

[
  {
    _id: "5bbdd4bab42d799bc2a0f468",
    index: 0,
    guid: "8f26906d-67b5-4768-9301-41065201b7c5",
    isActive: true,
    balance: "$3,497.04",
    picture: "http://placehold.it/32x32",
    age: 38,
    eyeColor: "brown",
    name: "Terrie Cummings",
    gender: "female",
    company: "INSURON",
    email: "terriecummings@insuron.com",
    phone: "+1 (934) 472-3270",
    address: "292 Dearborn Court, Thermal, Tennessee, 9381",
    about: "Tempor non elit anim non ipsum ad eu laboris nostrud ut commodo culpa. Dolor proident quis do labore magna minim quis et non esse qui quis pariatur elit. Esse ad sit deserunt reprehenderit et deserunt magna aliquip amet sit eu. Voluptate officia enim occaecat irure incididunt adipisicing adipisicing cupidatat fugiat cillum. Excepteur ad voluptate esse nisi anim consectetur deserunt dolor ad Lorem Lorem ut. Sint nisi culpa dolore eu elit ipsum nisi consectetur elit fugiat commodo fugiat sint adipisicing. Proident amet ad magna occaecat.\r\n",
    registered: "2015-06-13T07:53:51 -09:00",
    latitude: -62.521308,
    longitude: -112.808762,
    tags: ["consectetur", "dolor", "exercitation", "sint", "Lorem", "non", "est"],
    friends: [
      {
        id: 0,
        name: "Richmond Odonnell"
      },
      {
        id: 1,
        name: "Rodriguez Dillon"
      },
      {
        id: 2,
        name: "Leann Velazquez"
      }
    ],
    greeting: "Hello, Terrie Cummings! You have 10 unread messages.",
    favoriteFruit: "apple"
  }
]

よし!綺麗になった

後は、変数化して静的なモジュールにすれば完成

module.js
const module = [
  {
    _id: "5bbdd4bab42d799bc2a0f468",
    index: 0,
    guid: "8f26906d-67b5-4768-9301-41065201b7c5",
    isActive: true,
    balance: "$3,497.04",
    picture: "http://placehold.it/32x32",
//略

export default module;

実際のJSONはめちゃめちゃ行数が多かったのですごく助かりました

3
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
3