見出し画像

React 事始め

kaiso

Next.js のドキュメントには「React Foundations」というコースが用意されています。
JavaScript から React へ。React から Next.js に発展するかたちで展開するのでフロントエンド初心者にも優しいですね。
（最新のJavaScriptに精通していない人向けのコースも用意されていますが、それはまた別のお話。）

全10章から構成されるコースなのでゴールが分かりやすくてとても始めやすいのが特徴ですが、内容はすべて英語です。

コード部分はともかく、私はChrome の翻訳機能とDeep Lの力を全面的に借りて進めました。

そう、Reactならね

実際にコードを扱うのは第3章からですが、ほんとにとっつきやすいところから始めてくれます。

<html>
	<body>
		<div id="app"></div>
		<script type="text/javascript">
			const app = document.getElementById('app');
			const header = document.createElement('h1');
			const text = 'Develop. Preview. Ship.';
			const headerContent = document.createTextNode(text);
			header.appendChild(headerContent);
			app.appendChild(header);
		</script>
	</body>
</html>

このコードで伝えたいことは「jsで要素追加するの面倒ぃよね。」ということです。

Reactを知らない私としては「こんなもんでしょ？そもそも js で要素追加するような面倒な真似しませんよ。」くらいに思っていましたし、今でもちょっと思ってる節があるくらいです。

そして、React 使うとこんなにコード短縮できまっせ。というコードになっていきます。

<html>
	<body>
		<div id="app"></div>
		<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
		<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
		<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
		<script type="text/jsx">
			const app = document.getElementById('app');
			ReactDOM.render(<h1>Develop. Preview. Ship. 🚀</h1>, app);
		</script>
	</body>
</html>

React 本体、React DOM 、Babel を読み込めば、要素の追加なんて簡単！「そう、React ならね。」と言わんばかりの出来栄えです。

HTMLに慣れているコーダーにとっては馴染みが薄いですが、Webアプリケーションを開発しているエンジニアにとってはきっと都合が良いんでしょう。

Reactの中心に据えられている3つの概念

  1. Components（コンポーネント）

  2. Props（プロップス）

  3. State（ステート）

コースの中ではコードと併せて重要な概念も同じく説明してくれているところがありがたいですね。第5章から第9章までは上記概念をコードも交えながら丁寧に教えてくれます。

Components（コンポーネント）についての雑な解釈

以下、詳しい解説はコースに任せるとして、コンポーネントは次のような特徴があります。

  • コンポーネントはネストしてUIをつくる。

  • コンポーネントは関数みたい。

  • return の中に JSX でコンポーネントを記述していく。

  • コンポーネントは大文字で始まり、`< />`で閉じる。

  • コンポーネントにはクリック処理のようなイベントを仕込むことができ、処理はコンポーネント関数の中に関数として記述する。

Props（プロップス）についての雑な解釈

  • プロップスを使えば、同じコンポーネントにバリエーションを持たせられる。

  • プロップスは、コンポーネントに属性のようなかたちで記述する。

  • プロップスは、コンポーネント関数の引数。

  • プロップスの記述の仕方は4つある。

プロップスとは少し違うかもしれませんが、コンポーネント関数の中で配列を定義すれば、`.map()`メソッドで中身の違うリスト要素がつくれます。ただし、要素を一意に特定するための`key`を指定する必要があります。

このあたりから JavaScript を使ってプログラマブルに要素を扱うメリットを感じることができるかもしれません。「それなら emmetの方が扱い慣れていますし…。」という頭の中の古い考え方にそろそろトドメを刺しにいきたいところですね。

State（ステート）についての雑な解釈

Reactには、フックとよばれる関数が用意されていて、コンポーネントにステートのような仕組みを追加することができます。

たとえば、`button` 要素が押された回数をカウントするような場合、ステートを使って`button` 要素が押された回数を保存し、`button` 要素が押されるたびに回数を更新していくようなことができます。

  • ステートは要素にまつわる状態を保持し、イベント処理によって状態を更新できる。

  • ステートは、`React.useState()`で追加する。

  • ステートを宣言するとき、ステート名とステートを更新する関数、ステートの初期値を定義することができる。例）`const [value, setValue] = React.useState(0)`

  • ステートを更新する関数を呼び出して、ステートの更新処理を行う。

古のコーダーとしては、クリックイベントで要素にクラスを追加したり外したりすることはありましたが、ステートがそれこそ「リアクティブ」に要素を更新していくような機能はけっこうインパクトがありますね。

このあたりでようやく「 js で要素を追加するだけでヒーヒー言ってたのに、要素をプログラマブルに扱えて、イベント処理による更新をリアクティブに画面に反映できるって… React 良いのかもっ」という気持ちになってきました。

さすがにステートの汎用性の高さを知ると、老いたコーダー脳も刺激されるくらいのインパクトはあるのですが、汎用性が高すぎて思わず思考停止してしまいます。

Show must go on. ※

実際にコースを試していて気になるところに、コンソールで必ず出てくるワーニング（警告）があります。プロダクション用の Babel を使えよ。と、とにかく言われ続けます。
また、cdn として読み込んでいる React と React DOM のライブラリも開発用のものだから必ず本番用のものを使えよと言われてしまいます。

じゃあ、本番運用に耐えうる開発環境ってどんなもんなの？という話になるのですが、このコースではそのまま Next.js へ進んでいきます。（第9章から第10章では Next.js でページを構築していきますが、Next.js については別の機会に書こうと思います。）

しかし実際のところは、Remix や Astro といったフレームワークや webpack や Vite といった開発環境の選択肢があるらしく「ちょっとしたアプリつくるのに Next.js ってデカくね？ Vite でよくね？」とか「Next.js のアップデートの頻度高いし、運用考えたら Remix の方が良くね？」みたいな声もあるようです。知らんけど。

React を始めたのは良いものの、どのような環境で構築するべきなのか？フレームワークをどう選ぶべきなのか？という疑問が残ってしまって、スッキリと「完全に理解したっ」とはなりませんでしたね。

少なくとも、HTMLほど簡単なものではなく、実際の開発現場からは程遠いところにいるのだろうということは痛感させられました。

始めちゃったし、もう React のこと知っちゃったんだから、勉強あるのみですね。

今回も長いエッセイにお付き合いいただき、ありがとうございました。

※ "Show must go on." って調べたらジャニーさんとかキムタクさんが出てきたんですけど、映画「雨に唄えば」のセリフのつもりです。

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