UIの記述

Reactはユーザーインターフェース（UI）をレンダリングするためのJavaScriptライブラリです。UIはボタン、テキスト、画像などの小さな単位から構築されます。Reactでは、これらを再利用可能でネスト可能なコンポーネントに結合できます。ウェブサイトからモバイルアプリまで、画面上のすべての要素はコンポーネントに分解できます。この章では、Reactコンポーネントの作成、カスタマイズ、条件付き表示について学びます。

最初のコンポーネント

Reactアプリケーションは、コンポーネントと呼ばれる独立したUIの断片から構築されます。Reactコンポーネントは、マークアップを散りばめることができるJavaScript関数です。コンポーネントはボタンのように小さくても、ページ全体のように大きくても構いません。以下は、3つのProfileコンポーネントをレンダリングするGalleryコンポーネントの例です：

コンポーネントのインポートとエクスポート

1つのファイルに多くのコンポーネントを宣言できますが、ファイルが大きくなるとナビゲートが難しくなることがあります。これを解決するには、コンポーネントをエクスポートして独自のファイルにし、その後別のファイルからそのコンポーネントをインポートできます：

JSXを使用したマークアップの記述

各ReactコンポーネントはJavaScript関数であり、Reactがブラウザにレンダリングするマークアップを含む場合があります。Reactコンポーネントは、そのマークアップを表現するためにJSXと呼ばれる構文拡張を使用します。JSXはHTMLによく似ていますが、より厳格で、動的な情報を表示できます。

既存のHTMLマークアップをReactコンポーネントに貼り付けても、常に機能するとは限りません：

このような既存のHTMLがある場合、コンバーターを使用して修正できます：

JSX内でのJavaScript（中括弧の使用）

JSXを使用すると、JavaScriptファイル内にHTMLのようなマークアップを記述でき、レンダリングロジックとコンテンツを同じ場所に保つことができます。時には、そのマークアップ内に少しのJavaScriptロジックを追加したり、動的なプロパティを参照したりしたい場合があります。そのような場合、JSX内で中括弧を使用してJavaScriptへの「窓を開く」ことができます：

コンポーネントへのpropsの受け渡し

Reactコンポーネントは、互いに通信するためにpropsを使用します。すべての親コンポーネントは、子コンポーネントにpropsを渡すことで、いくつかの情報を伝えることができます。propsはHTML属性を思い起こさせるかもしれませんが、オブジェクト、配列、関数、さらにはJSXを含む任意のJavaScriptの値をそれらを通じて渡すことができます！

条件付きレンダリング

コンポーネントは、多くの場合、異なる条件に応じて異なるものを表示する必要があります。Reactでは、if文、&&、および? :演算子のようなJavaScript構文を使用して、JSXを条件付きでレンダリングできます。

この例では、JavaScriptの&&演算子を使用して、チェックマークを条件付きでレンダリングしています：

リストのレンダリング

データのコレクションから複数の類似したコンポーネントを表示したい場合がよくあります。JavaScriptのfilter()とmap()をReactと共に使用して、データの配列をフィルタリングし、コンポーネントの配列に変換することができます。

配列の各アイテムに対して、keyを指定する必要があります。通常、データベースのIDをkeyとして使用することが望ましいです。キーにより、Reactはリストが変更された場合でも、各アイテムのリスト内での位置を追跡することができます。

コンポーネントを純粋に保つ

JavaScriptの関数には純粋関数と呼ばれるものがあります。純粋関数とは：

• 自分のことだけを行う。呼び出される前に存在していたオブジェクトや変数を変更しません。
• 同じ入力、同じ出力。同じ入力が与えられた場合、純粋関数は常に同じ結果を返すべきです。

コンポーネントを純粋関数としてのみ厳密に記述することで、コードベースが成長するにつれて発生する、不可解なバグや予測不可能な動作の全クラスを回避できます。以下は、純粋でないコンポーネントの例です：

既存の変数を変更する代わりに、プロップを渡すことで、このコンポーネントを純粋にすることができます：

ツリーとしてのUI

Reactは、コンポーネントとモジュール間の関係をモデル化するためにツリーを使用します。

Reactのレンダーツリーは、コンポーネント間の親子関係を表したものです。

Reactレンダーツリーの例。

ツリーの上部、ルートコンポーネントに近いコンポーネントは、トップレベルコンポーネントと見なされます。子コンポーネントを持たないコンポーネントはリーフコンポーネントです。このコンポーネントの分類は、データフローとレンダリングパフォーマンスを理解するのに役立ちます。

JavaScriptモジュール間の関係をモデル化することは、アプリを理解するためのもう一つの有用な方法です。これをモジュール依存ツリーと呼びます。

モジュール依存ツリーの例。

依存ツリーは、クライアントがダウンロードしてレンダリングするための関連するすべてのJavaScriptコードをバンドルするために、ビルドツールによってよく使用されます。バンドルサイズが大きいと、Reactアプリのユーザーエクスペリエンスが低下します。モジュール依存ツリーを理解することは、このような問題をデバッグするのに役立ちます。

次は何をしますか？

この章をページごとに読み始めるには、最初のコンポーネントに進んでください！

または、これらのトピックにすでに精通している場合は、インタラクティブ性の追加について読んでみませんか？