浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【JavaScript】【React】ドット記法でオブジェクトを参照できるライブラリ dot-object の紹介

 dot-object はドット記法でオブジェクトを参照できるようするライブラリです。
dot-object – npm
rhalff/dot-object: Transform json objects using dot notation
 具体的に何ができるかというと次です。

var dot = require('dot-object');

var obj = {
 some: {
   nested: {
     value: 'Hi there!'
   }
 }
};

var val = dot.pick('some.nested.value', obj);
console.log(val); // Hi there!

 ドット区切りの”文字列”を元に探索を行うわけです。例は参照ですがこの他、copy, delete, set, などおおよそ基本的な動作はできます。例では純粋なオブジェクトですが、中間に配列を挟んでも次の様にアクセスできます。

 これは React の setState で強力に働けます。

import * as dot from 'dot-object';

class SomeComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      model: {
        name: '',
        havingItem: {
          name: '',
        },
      },
    };
    this.updateState = (event) => {
      const nextState = this.state;
      // dot-objectによってネストしていてもかまわず name だけで部分的にセット
      dot.set(event.target.name, event.target.value, nextState);
      this.setState(nextState);
    };
  }
  render() {
    return (
      <div>
        <input name="model.havingItem.name" value={this.state.model.havingItem.name} onInput={updateState}>
      </div>
    );
  }
}

 これによって state の構造が複雑でも一つの state 更新用関数で input へのバインドの様な event を元にした単純な更新の全てをまかなえます。

  • この記事いいね! (0)