Javascriptの分割代入

超初心者がReactを勉強する

初めてのReact「入門編」導入から基本まで〜TODOアプリを作ってを学ぼう！ | 株式会社ウェブ企画パートナーズ の記事を参考に勉強しています。

記事の中で出てくる以下のような中かっこで括った定数の宣言方法（todos）を分割代入というらしい。

  constructor(props) {
    super(props);
    this.state = {
      todos: [],
      name: ''
    };
  }
・・・
  render() {
    const { todos } = this.state;
    return (<div>
      <input type="text" onInput={this.onInput} />
      <button onClick={this.addTodo} >登録</button>
      <ul>
        {todos.map((todo, index) => <li key={index}>
          {todo}
          <button onClick={() => { this.removeTodo(index) }}>削除</button>
        </li>)}
      </ul>
    </div>);
  }

この例ではstateにtodosとnameが存在することがコンストラクタを見ればわかるが、 分割代入によって、this.stateの要素を前から順番に定数に割り当てているらしい。 this.stateの最初の要素はthis.state.todosなので、renderメソッド内のtodos変数には this.state.todosが代入されている。

さらに以下の例では...が使われている。todosは配列なので、これにも分割代入が使われるわけだが、 ...がつくのは残余パターンと呼ばれ、分割したパターンの残余部分を表す。今回はtodos配列の すべてを残余パターンとして表すことで、todosの末尾にnameを追加している

  addTodo = () => {
    const { todos, name } = this.state;
    this.setState({
      todos: [...todos, name]
    });
  }