JavaScriptデザインパターンを学ぶ 第2版

第12章. React.jsのデザインパターン

この作品はAIを使って翻訳されている。ご意見、ご感想をお待ちしている：[e-mail]

ここ数年、JavaScriptを使ってUIを構成する簡単な方法に対する 需要が増加している。フロントエンド開発者は、さまざまなライブラリやフレームワークが提供する、すぐに使えるソリューションを求めている。この分野でのReactの人気は、2013年にリリースされて以来、長い間続いている。この章では、Reactの世界で役立つデザインパターンを見ていく。

ReactはReact.jsとも呼ばれ、FacebookがUIやUIコンポーネントを構築するために設計したオープンソースのJavaScriptライブラリだ。もちろん、UIライブラリはこれだけではない。 Preact、Vue、Angular、Svelte、Lit、その他多くのライブラリも、再利用可能な要素からインタフェースを構成するのに適している。しかし、Reactの人気を考慮し、この10年のデザインパターンに関する議論にはReactを選んだ。

React入門

フロントエンド開発者がコードについて語るとき、 、それはWebのインタフェース設計の文脈で語られることがほとんどだ。そして、インタフェースの構成を考える方法は、ボタン、リスト、ナビゲーションなどの要素である。Reactは、これらの要素でインタフェースを表現する最適化され簡素化された方法を提供する。また、インターフェイスをコンポーネント、プロップ、ステートという3つの重要な概念に整理することで、複雑でトリッキーなインターフェイスを構築するのに役立つ。

Reactは構成に重点を置いているため、デザインシステムの要素に完璧にマッピングすることができる。そのため、Reactのためのデザインは、モジュール方式で考えることで報われる。ページやビューを組み立てる前に個々のコンポーネントを開発し、各コンポーネントのスコープと目的を完全に理解することができる。

使用される用語

この章では以下の用語を頻繁に使う。それぞれの意味を簡単に説明しよう：

React/React.js/ReactJS

2013年にFacebookによって作成されたReactライブラリ。

リアクトドム

react-dom パッケージは、クライアント、サーバ・レンダリングのための DOM 固有のメソッドを提供する。

JSX

JavaScriptの構文拡張

リダックス

中央集中型ステートコンテナ

フック

クラスを書かずにステートやその他のReact機能を使う新しい方法

リアクトネイティブ

JavaScriptでクロスプラットフォームのネイティブアプリを開発するためのライブラリである。

ウェブパック

Reactコミュニティで人気のJavaScriptモジュールバンドルラー

シングルページ・アプリケーション（SPA）

ページ全体をリフレッシュ／リロードすることなく、同じページに新しいコンテンツをロードするWebアプリ。

基本概念

Reactのデザインパターンについて説明する前に、Reactで使われるいくつかの基本概念を理解しておくと役に立つだろう：

JSX

JSXはJavaScript の拡張で、XMLのような構文を使ってテンプレートHTMLをJSに埋め込む。JSXは有効なJavaScriptに変換されることを意図しているが、その変換のセマンティクスは実装に依存する。JSXはReactライブラリで人気になったが、他の実装も見られる。 ...