Reactを難しく感じる理由と、その解決法【その２】

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

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

具体的には次の2つの項目です。

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

• イベントの記法

本記事は前半が【function編】、後半が【イベント編】です。

この2つがわかれば、Reactに感じる苦手意識がぐっと減ります。

【function編】なぜfunctionの理解がReactの理解につながるのか

まず最初に丸暗記してもらいたいのは、次のことです。

◆ Reactのコンポーネント = JavaScriptのfunction

例えば下記のコードはReactのコンポーネントです。

const List = () => {
    return (
        <div>
            <h1>こんにちは</h1>
        </div>
    )
}

export default List

これは「Reactのコンポーネントである」と同時に、「JavaScriptのfunctionである」ともいえます。

JavaScriptのfunctionを理解することは、Reactのコンポーネントを理解することとまったく同じなのです。

なぜでしょうか？

具体的に見ていきましょう。

【function編】functionの構造

functionの記法、つまり構造は次のようになっています。

function 名前(){

    実行したい操作
    
    return 操作後のデータ
}

「名前」は好きなものが使えます。

しかし、書き方はこれだけではありません。

【function編】functionの記法いろいろ

いま見たfunctionは、constを使って次のようにも書けます。

const 名前 = function(){

    実行したい操作
    
    return 操作後のデータ
}

さらに2015年のJavaScriptのアップデートで導入された「アロー関数／arrow function」を使うと、次のようにも書けます。

const 名前 = () => {

    実行したい操作
    
    return 操作後のデータ
}

functionという文字が=>に変わり、場所が右に移動しています。

ここまで見た3つはすべて同じ働きです。

ただ記法が違うだけです（*厳密には細かな違いがありますが、当面重要ではありません）。

functionには、この3つ以外にもさまざまな書き方があります。

次のような、カッコと矢印だけのものも立派なfunctionです。

() => 実行したい操作

以上紹介した以外にも、まだバリエーションがあります。

そのようなfunctionの記法を覚えることが、Reactをより深く理解することに直結するのです。

次は、もうひとつのポイント「イベントの記法」を見てみましょう。

【イベント編】イベントとは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)}

【イベント編】イベントの記法いろいろ

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

import { useState } from "react"

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

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

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

export default List

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

ここで思い出してもらいたいのが、本記事の最初で紹介したfunctionの構造です。

const 名前 = () => {

    実行したい操作
    
    return 操作後のデータ
}

これをいま見たReactのコードに当てはめてみると、次のようになります。

import { useState } from "react"

const List = () => {
    
    // ▼ 実行したい操作
    const [data, setData] = useState("") 
 
    const handleChange = (e) => {
        setData(e.target.value)
    }
    // ▲ 実行したい操作


    return (

        // ▼ 操作後のデータ
        <input onChange={handleChange}/>

    )
}

export default List

ここから、Reactのコンポーネントとはfunctionであり、「操作後のデータ」として<input>、あるいは<div>などのHTMLタグをreturnしているのがわかります。

以上見てきたように、Reactのコンポーネントの実態はfunction、さらにReactで使うイベントもfunctionなのです。

様々なfunctionの記法を覚えることは、Reactを難しく感じる原因を取り除くいちばんの近道です。

HTML／CSSだけでReact入門する方法

現在、HTML／CSSだけでReact入門ができる入門書を特別価格で販売中です（通常1080円 → 現在190円）。

はじめてつくるReactアプリ

【2025年3月改訂版発売。HTMLとCSSの知識だけで始められるReact開発。好評なハンズオン形式でスイスイ進める。最新のReact 19の情報もあり。】

1080 → 190円

Amazonのページに移動する

JavaScriptの知識・経験は不要です。

4年以上に渡り読まれ続けている入門書なので、ぜひ手にとってみてください。

▼【無料フロントエンド・ガイド】は下記ページで受け取れます。

https://monotein.com/present-for-readers