コーダーがReact公式チュートリアルを読んだ初日

2026年7月21日

はじめに

Webコーダーとして2年、WordPressやSCSSを使った案件を積み重ねてきました。フロントエンドエンジニアへの転向を決めて、最初の一歩に何を選ぶか少し迷いましたが、結局いちばんシンプルなところから始めることにしました。React公式サイトのQuick Startを、上から順に読んでみる。それだけです。

今日はまだ手を動かしていません。読んだだけです。それでも、頭の中で起きたことを記録しておきたいと思いました。

HTMLとJSが同じ場所にいる違和感

最初に面食らったのはJSXでした。HTMLのようなタグとJavaScriptが、同じファイルの中に並んでいます。

コーダーとして働いてきた感覚では、HTML・CSS・JSは分けるのが当たり前でした。役割ごとにファイルを分離するのが、きれいな設計だと教わってきたからです。JSXはその前提を平然とひっくり返してきます。最初の数分は「これでいいのか」という戸惑いのほうが強く残りました。

className がキャメルケースになっている理由も、読み進めて納得しました。class はJavaScriptの予約語だから、という理屈です。理由は理解できても、見た目の違和感が消えるまでにはもう少し時間がかかりそうです。

コンポーネントという「ハコ」

次に出てきたのがコンポーネントの概念でした。export default をつけて、外から呼び出せるようにする。説明を読みながら、頭の中では「ハコを作って、それを組み合わせていく仕事なんだな」というイメージが浮かびました。

マークアップの仕事では、ページ全体を1枚の絵として考えることが多かったので、パーツを独立した単位として切り出していく発想は新鮮でした。

地味に便利なFragment、地味に厳しい自閉じタグ

<></> というFragmentの書き方は、素直に「便利だ」と思いました。意味のないdivを増やさずに複数の要素をまとめられる仕組みは、マークアップ時代に感じていた小さなストレスを直接解消してくれる感覚がありました。

一方で、<br /> や <img /> のような自閉じタグが必須になっている点は、HTMLよりも厳密だと感じました。普段のHTMLでは多少雑に書いても表示されてしまう部分が、Reactでは許されない。書き方の緩さに慣れていた分、姿勢を正される思いでした。

いちばん引っかかったのは「宣言的UI」

今日読んだ中で、いちばん立ち止まったのが宣言的UIという考え方です。DOM操作を自分の手で書かない。「こうあってほしい状態」だけを書けば、Reactが裏側で画面を更新してくれる。

これまでの仕事は、目の前の要素に対して直接指示を出すような感覚に近かったので、状態を書くだけで結果がついてくるという発想には、まだ実感が追いついていません。分かったつもりで、分かっていない。そんな感触が今日の時点での正直なところです。

マークアップとプログラミングは、頭の使い方が違う

一通り読んでみて感じたのは、マークアップは「並べる仕事」で、Reactは「データの流れを設計する仕事」だということです。似ているようで、頭の使い方がまったく別物でした。

難しく感じたのは、たぶん正しい反応だったのだと思います。今日1日で全部理解しようとしなくていい、というのが率直な結論です。まずは読んで、違和感の場所だけ拾っておく。次は動画教材で実際に手を動かしてみて、そのあとにもう一度この文章を読み返す。そうやって二周目で理解が追いついてくるはずだと、今は考えています。