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

Reactの第一印象は「簡単」

Reactを一度でも触った人や、私の記事「3分で使えるようになるVite + React入門」を読まれた人は、「Reactって思ってたほどは難しくないな」と感じる人が多いようです。

その理由は下記コードのように、Reactのreturn内はほとんどHTMLと同じように書けてしまうからです。

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

export default App

return以下のコードを取り出してみましょう。

<div>
    <h1>こんにちは</h1>
</div>

これだけ見ればHTMLとまったく同じです。

index.htmlにコピペしたら機能します。

CSSを書くときも、HTMLのclassがReactではclassNameになるだけで、他はまったく同じです。

// HTMLの場合
<div class="container">

// Reactの場合
<div className="container">

「Reactは難しい」と思っている人の多くは、実はまだReactを触っていない人たちで、一度でもReactを触れば「自分にもできそうだ」と思えるでしょう。

しかしそうやってReact入門が無事成功したあとに待っているのが、「やっぱりReactは難しい」というハードルです。

どういうことでしょうか？ 少し説明します。

• monotein.com/present

やっぱりReactは難しい

実は私も、使い始めの時は「Reactって意外に簡単だな」と思ったものの、「いや、やっぱり難しい……」と意見を変えた人間です。

この理由は「JavaScriptの理解が足りてない」というありがちなものでした。

ReactはJavaScriptをベースに作られているので、その基礎部分の知識がないとすぐに壁にぶつかってしまうのです。

なので私はJavaScriptにもどって勉強をしました。

その中で気がついた「Reactを理解する上でもっとも足りていなかったJavaScriptの知識」、逆からいうと「Reactを構成するもっとも重要なJavaScriptの項目」は次の2つです。

---

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

• イベントの記法

---

まだReactに触れていない方は、React + Viteのセットアップから始めてみましょう▼

Reactをマスターする方法

HTML／CSSでもそうですが、同じ結果を得るための方法は一つではなく複数あります。

たとえばCSSを適用するときには、style.cssと別ファイルに書く方法もあれば、<div style="color: red;">のようにインラインで書く方法もあります。

これはReactでも同じです。

たとえばReactコンポーネントの下記2つは、記法が違っていても働きは同じです。

// 書き方 1
const App = () => {
    return(
        ...

// 書き方 2
function App(){
    return(
        ...

しかし、「書き方（記法）が違うだけで、働きや結果は同じなんだ」ということを知らないと、自分の書くコードに自信が持てません。

「なんとなく」の感覚では書けても、本当にそれが正しいのかという確信を得られないからです。

本記事は長くなったのでここで一旦終わりますが、本記事の後編では「functionの記法」と「イベントの記法」について紹介します▼

「functionの記法」と「イベントの記法」が分かれば、Reactに感じる難しさはグッと減ります。

Reactを難しく感じる理由と乗り越え方を、全体像としてまとめたガイドはこちらです▼

• monotein.com/present

よくある質問

Q1. JavaScriptを一から学び直す必要がありますか？

必要ありません。

本記事で触れた「functionの記法」と「イベントの記法」のように、Reactの理解に直結する部分だけをピンポイントで押さえるのが効率的です

Reactを使う場面に絞って知識をつなげていく方が近道になります。

Q2. 「なんとなく」書けるようになったコードに、自信を持てるようになりますか？

本記事で触れたように、書き方が違うだけで働きが同じ場合、その仕組みを知らないままだと「これで合っているのか」という不安がつきまといます。

逆に言えば、仕組みを理解しさえすれば、その不安はなくなります。

「なんとなく動く」から「なぜ動くか分かる」への変化は、知識の量ではなく、つながりが見えるかどうかで決まります。

Q3. functionとイベント以外に、Reactを理解する上で重要なポイントはありますか？

あります。

state、props、コンポーネント設計など、Reactにはまだいくつも重要な概念があります。

これらを一つずつ断片的に学んでいくよりも、正しい順番で一本につなげて学ぶ方が、結果的に早く「使える理解」に到達します。

Q4. 自分がどこでつまずいているのか、はっきりしません

つまずきの原因は人によって異なり、自分では気づきにくいものです。

今の状況を教えていただければ、どこでつまずいているのか、次に何をすればいいかを個別にお答えします。

「この理解で合っているのかな？」という確認だけでも大丈夫です。

下のフォームからご連絡いただければ、三好アキが直接、目を通してお返事します（無料）。