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

三好アキ（プログラミング教本執筆）

2024年3月14日 14:59

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

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

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

• イベントの記法

本記事で紹介するのは、1つ目の「function（コンポーネント）の記法」です。

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

2つ目の「イベントの記法」は、続編の【その３】を見てください。

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

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

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

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

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

export default List

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

functionの構造

functionの役割はデータを操作することです。

「どのように？」「どうやって？」という点はすぐあとで見るので、最初にfunctionの構造を確認しましょう。

function 名前(){

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

これがfunctionの構造です。

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

functionの記法いろいろ

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

const 名前 = function(){

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

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

const 名前 = () => {

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

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

ここまで見た3つはすべて同じ働きです。ただ記法が違うだけです（*厳密には細かな違いがありますが、当面重要ではありません）。

このアローfunctionを使ったものは、上で見たReactコンポーネントで使われているものと同じだと気がついたと思います。

さて、この3つ以外にもまだ記法があります。

ここで一度、最初に見たfunctionを思い出しましょう。

function 名前(){

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

この「名前」は省略できます。

function(){

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

これは名前がないので「無名function（無名関数）」とも呼ばれますが、これもアローの記法で書き換えられます。

「function」という文字を「=>」に変え、場所を右に移動しましょう。

() => {

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

さらに、もし「実行したい操作」が1行で済むコードの場合は、「{　 }」と「return」を省略して次のようにも書けます。

() => 実行したい操作

ここまで来ると、もはやこれが一体なにをしているコードなのか推測するのも難しくなります。

しかしReactでは、この記法のコードがよく使われるのでビギナーは混乱してしまうのです。

ここまでfunctionの記法を見てきたので、次はこれらを実際のReactコンポーネントに当てはめていきましょう。

Reactコンポーネントの構造

先ほど見たReactコンポーネントを思い出してください。

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

export default List

このReactコンポーネント、つまりJavaScriptのfunctionでは、「操作後のデータ」が書かれるreturn以下に<div>などのタグがあります。

つまりこのReactコンポーネントにとっては、これらのタグこそが「操作後のデータ」なのです。

もしこのコンポーネントでなんらかの処理を実行したい場合は、次のように{　とreturnの間に書きます。

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

export default List

注目してもらいたいのは、いま書き加えたaddItemもfunctionであることです。

つまり「functionの中にfunctionを置く」という入れ子ができるのです。

ReactコンポーネントもJavaScriptのfunctionと同じ構造だと分かったので、次は記法を見ていきましょう。

Reactコンポーネントの記法いろいろ

まず「function」の文字を使った記法です。

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

export default List

Reactコンポーネントの記法でやや混乱を招くのは、「export default」の位置です。

これは次のように1行目に書いても、働きはまったく同じです。

export default function List(){
    return (
        <div>
            <h1>こんにちは</h1>
        </div>
    )
}

constを使った記法でも書けます。

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

export default List

次はアローfunction（アロー関数）で書いてみましょう。

「function」を「=>」に変えて、右にずらします。

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

export default List

これは最初に見たものと同じ記法です。私はこの記法が好きなので、私の本でもいつもこれを使っています。

次はreturn内の要素がひとつだけの場合を見てみましょう。下記のように、タグがひとつだけのケースです。

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

export default List

この時は「{　 }」と「return」を省略して、次のように書けます。

const List = () => <h1>こんにちは</h1>

export default List

先ほど見たように「名前」は省略できます。

「名前」を省略するとconstも書く必要がなくなるので、次のようになります。

() => <h1>こんにちは</h1>

ここに「export default」をつけると、次のようになります。

export default () => <h1>こんにちは</h1>

しかしこの記法はほとんど目にしないので、覚えておく必要はありません。

以上が多くのReactビギナーが混乱するfunctionの記法です。

次の記事【その３】では、もうひとつのポイント「イベントの記法」を説明します。

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

この記事の著者については下記リンクをチェック

◆ Amazon著者ページ：https://www.amazon.co.jp/stores/author/B099Z51QF2

公式サイト：https://monotein.com
Twitter：https://twitter.com/monotein_

◆ React、Next.js、TypeScriptなどのお役立ち情報や実践的コンテンツを、ビギナー向けにかみ砕いて無料配信中。メルマガ登録はこちらから → https://monotein.com/register-newsletter