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

2024年3月14日 14:51

Reactの第一印象は「簡単」

Reactを一度でも触ったことのある人や、私の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は難しい」というハードルです。

やっぱりReactは難しい

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

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

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

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

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

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

• イベントの記法

Reactをマスターする方法

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

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

これはReactでも同じです。

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

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

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

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

本記事は長くなったのでここで一旦終わりますが、続編の【その２】では上記の「functionの記法」、【その３】では「イベントの記法」について紹介します。

この2つが分かれば、Reactに感じる難しさは大きく減ります。

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

https://monotein.base.shop/p/00001

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

◆ 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

この記事が気に入ったらサポートをしてみませんか？