【React】JSの小さなTips

2019年3月19日 11:23

React を通して JavaScript に触れていた際、なるほど便利だなと思える構文などがあったので書いておこうと思います。

State を immutable に扱う

React では State を immutable に扱うため、常に新しいオブジェクトを返す必要がある。その方法として Object.assign()、オブジェクトのスプレッド構文の利用がある。

Object.assign()

Object.assign(target, ...sources)

ES2015で追加されたメソッド。
target は常に {} 空オブジェクトを指定し、sources の方に State、および更新したいプロパティを指定する。sources に同名のプロパティがあった場合は上書きされていきます。これにより、常に新しい空オブジェクトが生成された上で、更新された内容がマージされます。

const addTodoReducer = (state = initial_state, action) => {
 switch (action.type) {
   case "RESET":
     return initial_state
   case "CHANGE_TITLE":
     return Object.assign({}, state, {
         title: action.payload.title
       })
   default:
     return state
 }
}

スプレッド構文

ES2015で追加された仕様。
※2015では配列へのサポート。下記のオブジェクトへのサポートは2018のようです。

let objClone = { ...obj };

「...」をオブジェクトの前に記述することで、オブジェクトのプロパティを展開します。

var obj1 = { foo: 'bar', x: 42 };
var clonedObj = { ...obj1 };
// Object { foo: "bar", x: 42 }

State の更新も、Object.assign() を使うより簡易な記述で実装出来ます。

# src/reducers/addTodo.js
const addTodoReducer = (state = initial_state, action) => {
 switch (action.type) {
   case "RESET":
     return initial_state
   case "CHANGE_TITLE":
     return { ...state, title: action.payload.title }
   default:
     return state
 }
}

配列の State の更新も同様に記述できます。

return [...state, action.payload.todo]

オブジェクトの Key に変数を使う

オブジェクトプロパティの名前には、あらゆる有効な JavaScript 文字列 (空文字列を含む) か、文字列に変換できるものが使用できます。しかしながら、 JavaScript 識別子として有効ではないプロパティ名 (例えば空白やダッシュを含んでいたり、数字で始まったりするプロパティ名) には、ブラケット (角括弧) 表記法でのみアクセスできます。この表記法はプロパティ名を動的に決める場合 (プロパティ名が実行時に決まる場合) に便利です。

Reducer でアクションを発行する構造をまとめて扱う際の、キー名を動的に変更したい場合に使えそうです。
Todo の例では、「title」「description」「priority」それぞれでアクションを作らずに、キー名を与えることでまとめることが出来ます。

const mapDispatchToProps = dispatch => {
 return {
   changeParam: (key, value) => {
     dispatch({
       type: `CHANGE_${key.toUpperCase()}`,
       payload: { [key]: value },
     })
   },
 }
}

引数を指定して受け取る

ES2015から追加されたオブジェクトの分割代入の構文。
メソッドの引数がオブジェクトの場合に、分割代入を用いることで何を利用するかが明示的になります。
React や Redux で、コンポーネントに props を渡す際に使います。

const AddTodo = ({
 title,
 description,
 priority,
 handleOnChange,
 handleOnSubmit,
}) => {
 return (
   <div>
     <h2>AddTodo</h2>
   </div>
 )
}

また、普通のメソッドの中でも「this.props.hoge」の冗長な書き方を短くすることが出来ます。

  render() {
   const { todos, addTodo, deleteTodo } = this.props
   return (
     <div>
       <AppPresenter
         todos={todos}
         handleSubmitAddTodo={addTodo}
         handleOnClickDeleteTodo={deleteTodo}
       />
     </div>
   )
 }

import 文も同様

import { loadTodo, addTodo, deleteTodo } from "../actions/App"