Reactをむずかしく感じる理由と、その解決法【その３】

Reactが難しい原因は知識不足

【その１】に書きましたが、React入門に成功して、最初のハードルを超えた人が感じるReactの難しさの原因はJavaScriptの知識不足です。

具体的には次の2点です。

• function（コンポーネント）の記法

• イベントの記法

本記事で紹介するのは、2つ目の「イベントの記法」です。

イベントの記法がわかれば、Reactに感じる苦手意識はぐっと減ります。

1つ目の「functionの記法」は【その２】に書いてあるので、そちらをまだ読んでいない人は先に目を通してください。

本記事で説明する「イベント」の実態はfunctionだからです。

イベントとはfunctionのこと

Reactではさまざまな「イベント」が出てきます。

「イベント」とはユーザーがアプリ上でするアクションのことですが、React開発で出てくる90%以上は次の3つです。

• <button>を押す

• <input>に文字を入力する

• <form>を提出（submit）する

これらのユーザーのアクションを検知するために、Reactでは次の専用コードを使います。

• <button>を押す => onClick

• <input>に文字を入力する => onChange

• <form>を提出（submit）する => onSubmit

さて、ユーザーがこれらのアクションをしてくれたら、アプリは何らかの反応を返さないといけません。

もし「<input>に文字を入力する」なら、その入力してくれた文字を表示することが反応になりますし、「<button>を押す」なら「ポップアップを出す」といった反応です。

これらを担うのはfunctionなので、Reactの「イベント」とは常にfunctionと一緒であると想像できます。

具体的にコードで見てみましょう。

import { useState } from "react"

const List = () => {
     const [data, setData] = useState("")
    
    return (
        <input onChange={(e) => setData(e.target.value)}/>
    )
}

export default List

これは<input>に入力した文字が、stateのdataに書き込まれるコードになります。

ここで注目してもらいたいのは、<input>タグ内の次のコードです。

onChange={(e) => setData(e.target.value)}

functionの記法いろいろ

このようにタグ内に書く記法（インライン方式）とともに、次のように別の場所で書いたものを持ってくる記法もあります。

import { useState } from "react"

const List = () => {
     const [data, setData] = useState("")

    const handleChange = (e) => {
        setData(e.target.value)
    }

    return (
        <input onChange={handleChange}/>
    )
}

export default List

このように他所から持ってきても、最初のようにインラインで書いても、働きはまったく同じです。

ここで、なぜインラインでは下記の記法になるのかを説明します。

onChange={(e) => setData(e.target.value)}

まず最初に思い出してもらいたいのは、【その２】で解説したfunctionの記法のバリエーションです。

上のhandleChangeは、functionを使って次のように書いても働きは同じです。

import { useState } from "react"

const List = () => {
    const [data, setData] = useState("")

    function handleChange(e){
        setData(e.target.value)
    }

    return (
        <input onChange={handleChange}/>
    )
}


export default List

onChangeのカッコ内に、このfunctionを丸ごと持ってくることもできます

import { useState } from "react"

const List = () => {
    const [data, setData] = useState("")

    function handleChange(e){
        setData(e.target.value)
    }

    return (
        <input onChange={function handleChange(e){
                                setData(e.target.value)
                            }   
        }/>
    )
}


export default List

ここからは<input>タグにだけ注目します。現時点では次のようになっています。

<input onChange={function handleChange(e){
                    setData(e.target.value)
                }   
}/>

これも【その２】で解説しましたが、functionの「名前」は省略できます。

次のようになります。

<input onChange={function(e){
                    setData(e.target.value)
                }   
}/>

ここで再びアローfunction（アロー関数）で書いてみましょう。functionを=>に変えて、右にずらします。

<input onChange={(e) => {
                    setData(e.target.value)
                }   
}/>

アローfunctionでは{ }を省略して1行で書けるので、次のようにも書けます。

<input onChange={(e) => setData(e.target.value)}/>

ここで、最初に見たインラインの記法とまったく同じになったと気がつきます。

さらにfunctionでは()で渡されるもの（ここではe）がひとつだけの場合は()を省略できるので、次のようにも書けます。

<input onChange={e => setData(e.target.value)}/>

もし一つでない場合は()が必要です。

<input onChange={(e, user) => setData(e.target.value)}/>

以上見てきたように、Reactのイベントもfunctionであり、functionの記法のルールが当てはまるとわかりました。

() => というコードだけ見ると、これが一体なにをしているコードなのかわかりませんが、その実態は名前を省略したアローfunctionなのです。

【その２】で解説したfunctionの記法、そして今回解説したイベントの記法をマスターすると、Reactのコードをより自信をもって書くことができるでしょう。

なお、先月リリースした新刊書『Reactマスター Zero To Hero：自信をもってReactコードが書けるようになる本』では、JavaScript／Reactの基礎の基礎から解説をしています。ぜひご覧ください。

Reactマスター Zero To Hero：自信をもってReactコードが書けるようになる本

【JavaScript／Reactの基礎から発展的内容まで全範囲を網羅。自信をもってReactを書けるようになる本】

販売ページに移動する