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を難しく感じる原因を取り除くいちばんの近道です。