Reactが難しい要因はJavaScript

Reactの難しさはJavaScriptにある

「React 難しい」でインターネットを検索すると多数ヒットします。

1. JavaScriptをしっかり勉強しなければならない
2. コンポーネントの分け方がわからない
3. JSXに慣れるのが難しい
4. Reduxが難しい
5. などなど…

中でもJavaScriptをしっかり勉強しなければならないというのがダントツで課題のようです。

そこまで言語って勉強が必要だったっけ？

JavaScriptをしっかり勉強しなければならないのは、一見すると当たり前です。ReactはJavaScriptで書かれていますので、それが読み書きできなければならないのは当然に思えます。

しかし、私を含め、多くのRuby on Rails開発者はRubyから始めていません。Ruby on Railsで一通りウェブサイトが作れるぐらいになった後に、改めてRubyをしっかり学び直す人が多いのではないかと思います。JavaScriptをしっかり勉強しないとReactの学習が始められないというのは、実はとても違和感があります。

ReactはJavaScriptのかなり難しい機能を使っている

• Reactでは高階関数を多用します
  • イベントハンドラを子コンポーネントに渡すとき、関数へのレファランスをpropsで渡します
  • useState()の返り値の２項目は（例えばconst [user, setUser] = useState(null)のsetUser）は関数へのレファランスを返します
  • useEffect()は高階関数で、中に記述するのはクロージャー（無名関数）です
• Reactはasync awaitやコールバック関数を多用します
  • サーバからデータを取得するためにfetch()を多用しますので、async awaitもしくはPromiseが必要になります
  • SSRになってくるとasyncだらけになってきます。DBとの通信もasyncです
  • Next.js v15からはそれだけではなく、ほぼすべてがasyncになります。

高階関数もasync awaitも高レベルの機能です。JavaScriptの入門書に含まれていません。あったとしても必ず最後の方です。

そして最近では、これに加えてTypeScriptも必要です。TypeScriptがわからないと、いつまでもコンパイラに怒られて先に進みません。初学者は本当に大変です

振り返ると、確かにReactに要求されるJavaScriptのレベルは高く、難しいです。

Hotwireは入門書レベルのJavaScriptで書ける

一方でHotwireはJavaScriptの入門書程度のJavaScriptで十分に書けます。これについては別記事で掘り下げています。

最後に

Hotwireの方がシンプルで、Reactの方が複雑だと言っているのではありません。熟練者にとっては、TypeScriptを含めた高度な機能を使っている方が簡単にプログラムが書けるのかもしれません。しかし入門者にとっての簡単と、熟練者にとっての簡単は異なります。

そして入門者やウェブデザイナー等にとっては、Reactは間違いなくハードルが高いフレームワークと言って良いと思います。