blog-hero-img

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

pen-icon2024.3.13

この記事は約2分で読めます

Profile Pic

この記事の筆者:三好アキ


🔹 専門用語なしでプログラミングを教えるメソッドに定評があり、1200人以上のビギナーを、最新のフロントエンド開発入門に成功させる。

🔹 Amazonベストセラー1位を複数回獲得している『はじめてつくるReactアプリ with TypeScript』著者。


Amazon著者ページはこちら → amazon.co.jp/stores/author/B099Z51QF2



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

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

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

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


• function(コンポーネント)の記法

• イベントの記法


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

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

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

なぜ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の基礎の基礎から解説をしています。ぜひご覧ください。

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

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

販売ページに移動する

Profile Pic

メルマガ配信中
(from 三好アキ/エンジニア)


React、Next.js、TypeScriptなど最新のウェブ開発のお役立ち情報を、ビギナー向けにかみ砕いて無料配信中。
(*配信はいつでも停止できます)