投稿者: UXPin

React（リアクト）とは、WebサイトやWebアプリケーションのユーザーインターフェース（UI）を構築するためのオープンソースのJavaScriptライブラリです。

Reactの大きな特徴は、UIを再利用可能な「コンポーネント」に分けて開発できることです。ボタン、フォーム、ナビゲーション、カードなどのUI要素をコンポーネントとして作成し、それらを組み合わせて複雑な画面を構築できます。

ReactはMeta（旧Facebook）で開発され、現在もオープンソースプロジェクトとして発展しています。現在のReactは、WebアプリケーションのUI構築だけでなく、サーバーコンポーネントやActionsなど、よりインタラクティブで複雑なアプリケーションを開発するための機能も提供しています。

この記事では、Reactとは何か、どのような特徴があるのか、JavaScriptやフレームワークとの違い、コンポーネントやJSXの仕組み、Reactを使うメリットについて初心者にもわかりやすく解説します。

Reactとは？

Reactは、ユーザーインターフェースを構築するためのJavaScriptライブラリです。

Reactでは、Webページ全体を一つの大きなコードとして作るのではなく、UIを小さな再利用可能なコンポーネントに分割して開発します。

例えば、ECサイトであれば、

• 商品カード

• 検索ボックス

• ナビゲーション

• カートボタン

• ログインフォーム

などをそれぞれコンポーネントとして作成できます。

一度作成したコンポーネントは、同じアプリケーション内の複数の場所で再利用できます。

このコンポーネントベースの設計によって、コードの再利用性を高めながら、大規模なUIを整理して開発しやすくなります。

Reactはフレームワーク？

Reactは一般的に「フレームワーク」と呼ばれることがありますが、正確にはUI構築のためのライブラリです。

ReactそのものはUIの構築に重点を置いています。一方、Webアプリケーション全体を構築する場合は、Reactと組み合わせてフレームワークを利用することがあります。

例えば、Next.jsなどのReactベースのフレームワークを使うことで、ルーティング、サーバーサイドの処理、データ取得など、より幅広いアプリケーション開発の機能を利用できます。

そのため、ReactとNext.jsは競合するものではありません。

React：UIを構築するライブラリ

Next.js：ReactをベースにWebアプリケーションを構築するためのフレームワーク

というように考えると分かりやすいでしょう。

Reactの主な特徴

Reactが広く利用されている理由には、いくつかの特徴があります。

コンポーネントでUIを構築できる

Reactでは、UIを独立したコンポーネントに分けて設計できます。

例えば、以下のようなコンポーネントを作成できます。

• Button

• Header

• Navigation

• ProductCard

• Modal

• Form

これらを組み合わせることで、複雑な画面も整理して構築できます。

コンポーネントを再利用できるため、同じUIを複数の場所で使用する場合にも便利です。

また、コンポーネントごとに責任を分けることで、コードの保守や変更もしやすくなります。

宣言的なUIを構築できる

Reactでは、UIを「どのように操作して変更するか」を細かく記述するのではなく、現在の状態でUIがどう表示されるべきかを記述します。

例えば、ボタンがクリックされたことで状態が変化した場合、開発者はその状態に応じたUIを定義します。Reactが必要なUI更新を処理するため、DOMを一つひとつ手動で操作する必要が少なくなります。

この考え方により、複雑なインタラクションを持つUIでもコードを整理しやすくなります。

インタラクティブなUIを作りやすい

Reactでは、ユーザーの操作やデータの変化に応じてUIを更新できます。

例えば、

• ボタンをクリックするとメニューが開く

• フォームへの入力内容に応じてメッセージを表示する

• 商品をカートに追加すると数量を更新する

• 検索条件に応じて結果を表示する

といったインタラクションを実装できます。

Reactの状態管理やイベント処理を利用することで、ユーザーの操作に応答する動的なUIを構築できます。

Reactのコンポーネントとは？

コンポーネントは、Reactを理解する上で最も重要な概念の一つです。

コンポーネントとは、UIを構成する再利用可能な部品のことです。

例えば、以下のようなコンポーネントを考えてみましょう。

function Button() {
  return <button>登録する</button>;
}

このようなコンポーネントを別の画面でも利用できます。

<Button />

より複雑なUIでは、複数のコンポーネントを組み合わせます。

例えば、

ページ

↓

Header

ProductList

↓

ProductCard

↓

Button

というように、UIを階層的なコンポーネントとして構成できます。

この方法によって、UIを小さな単位に分解し、再利用や変更を行いやすくなります。

ReactのPropsとState

Reactコンポーネントを理解するには、**Props（プロップス）とState（ステート）**も重要です。

Propsとは？

Propsは、親コンポーネントから子コンポーネントへデータを渡すために使用します。

例えば、商品カードに商品名を渡す場合、

<ProductCard name="UXPin" />

のように指定できます。

コンポーネント側では、その値を利用してUIを表示します。

Propsを利用することで、同じコンポーネントを異なるデータで再利用できます。

Stateとは？

Stateは、コンポーネントが管理する状態を表します。

例えば、

• メニューが開いているか

• カウンターがいくつか

• フォームに何が入力されているか

などをStateとして管理できます。

Stateが変化すると、Reactはその状態に応じてUIを更新します。

この仕組みによって、ユーザー操作に応じて変化するインタラクティブなUIを構築できます。

ReactのHooksとは？

Hooksは、Reactの関数コンポーネントでStateなどのReactの機能を利用するための仕組みです。

代表的なHooksには、

• useState

• useEffect

• useContext

• useMemo

• useCallback

などがあります。

例えば、useStateを使うとコンポーネント内で状態を管理できます。

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      {count}
    </button>
  );
}

現在のReact開発では、関数コンポーネントとHooksが基本的な開発パターンになっています。

そのため、Reactを学ぶ場合は、古いクラスコンポーネントよりも関数コンポーネント、Props、State、Hooksを優先して理解するとよいでしょう。

ReactのJSXとは？

JSXは、JavaScriptの中にHTMLに似たマークアップを記述できる構文です。

例えば、

function Welcome() {
  return <h1>ようこそ！</h1>;
}

のように書くことができます。

JSXを使うことで、UIの構造とJavaScriptのロジックを近い場所に記述できるため、コンポーネントの内容を理解しやすくなります。

JSXはHTMLそのものではありません。

Reactでは、JSXを使ってコンポーネントがどのようなUIを返すのかを記述します。

ReactはJavaScriptをどのくらい知っていればいい？

Reactを学ぶには、JavaScriptの基本を理解しておくことをおすすめします。

特に以下の概念は、React開発で頻繁に使用します。

• 変数とデータ型

• 関数

• アロー関数

• オブジェクトと配列

• 配列メソッド

• 分割代入

• スプレッド構文

• 条件分岐

• import / export

• Promise

• async / await

• イベント処理

すべてを完璧に理解してからReactを始める必要はありません。

ただし、JavaScriptの基本的な構文やデータの扱い方を理解していると、ReactのコンポーネントやStateをより早く理解できます。

ReactとVanilla JavaScriptの違い

Vanilla JavaScriptとは、Reactのような追加ライブラリやフレームワークを使わず、JavaScriptそのものを使ってWebページを開発することを指します。

Vanilla JavaScriptでは、開発者がDOMを直接操作してUIを変更できます。

一方、Reactでは、アプリケーションの状態とUIの関係を宣言的に記述し、Reactが必要なUI更新を処理します。

小規模でシンプルなWebページであれば、Vanilla JavaScriptで十分な場合もあります。

一方、複数の画面や複雑なインタラクション、再利用可能なUIコンポーネントを必要とする大規模なアプリケーションでは、Reactのコンポーネントベースのアプローチが役立ちます。

Reactを使うメリット

Reactには、Webアプリケーション開発を効率化するさまざまなメリットがあります。

UIを再利用できる

コンポーネントを一度作成すれば、複数の画面で再利用できます。

同じボタンやフォーム、カードなどを何度も一から作る必要がないため、開発効率を高められます。

大規模なUIを整理しやすい

複雑な画面を小さなコンポーネントに分割できるため、アプリケーションの構造を整理しやすくなります。

豊富なエコシステムを利用できる

Reactには長年にわたって多くの開発者が参加してきたため、Reactと組み合わせて利用できるライブラリ、フレームワーク、開発ツールが豊富に存在します。

プロジェクトの要件に応じて、ルーティング、フォーム、データ取得、テストなどのツールを組み合わせられることもReactのメリットです。

デザインシステムと相性が良い

Reactのコンポーネントベースの設計は、デザインシステムとの相性も良い特徴があります。

例えば、企業独自のButton、Input、ModalなどをReactコンポーネントとして作成し、複数の製品や画面で再利用できます。

これによって、UIの一貫性を維持しながら開発を進めやすくなります。

Reactはどのような開発に向いている？

Reactは、特にインタラクティブなUIを持つWebアプリケーションに適しています。

例えば、

• SaaSアプリケーション

• ダッシュボード

• ECサイト

• 管理画面

• ソーシャルメディア

• データ入力システム

• インタラクティブなWebサービス

などで利用できます。

ただし、すべてのWebサイトにReactが必要なわけではありません。

非常にシンプルな静的Webサイトであれば、HTML、CSS、JavaScriptだけで十分な場合もあります。

プロジェクトの規模や要件、チームの経験を考慮して技術を選択することが重要です。

React 19で何が変わった？

React 19では、Reactの開発体験や非同期処理を改善するための新しい機能が追加されました。

代表的なものには、Actions、useActionState、useOptimistic、use APIなどがあります。

また、React 19では関数コンポーネントにrefを通常のPropsとして渡せるようになり、従来のforwardRefの利用を減らせるようになりました。

現在Reactを学ぶ場合は、React 19以降の考え方をベースに、公式ドキュメントで最新のAPIや推奨される開発方法を確認することをおすすめします。

なお、現在のReact公式ドキュメントではReact 19.2が最新バージョンとして案内されています。

Reactを学ぶにはどのくらい時間がかかる？

Reactを習得するまでの期間は、JavaScriptやWeb開発の経験によって大きく異なります。

JavaScriptやHTML、CSSの基礎をすでに理解している場合は、数週間から数か月程度でReactの基本概念を学べるでしょう。

ただし、「Reactを理解する」ことと「Reactを使って本格的なアプリケーションを開発できる」ことは別です。

実際のプロジェクトでは、

• コンポーネント設計

• State管理

• データ取得

• エラー処理

• パフォーマンス

• テスト

• アクセシビリティ

• TypeScript

• フレームワーク

など、React以外の知識も必要になります。

そのため、学習期間を決めるよりも、小さなアプリケーションを実際に作りながらReactの概念を身につけることが重要です。

Reactコンポーネントを使ったプロトタイピング

Reactのコンポーネントベースの設計は、開発だけでなくプロトタイピングにも活用できます。

従来のデザインツールでは、Reactコンポーネントを視覚的に再現してプロトタイプを作成することが一般的でした。

一方、UXPin Mergeでは、開発で使用しているReactコンポーネントをデザイン環境で利用し、実際のコードに近いUIを使ってプロトタイプを作成できます。

これにより、デザイナーと開発者が同じコンポーネントを使ってデザインを検証し、デザインと実装の差を小さくできます。

特にデザインシステムを運用しているチームでは、実際のReactコンポーネントを使ってプロトタイプを作成することで、最終製品に近いUIを早い段階で検証できます。

まとめ：ReactはUIを効率的に構築するためのライブラリ

Reactは、WebサイトやWebアプリケーションのUIを構築するためのJavaScriptライブラリです。

Reactの主な特徴をまとめると、

• 再利用可能なコンポーネントでUIを構築できる

• PropsやStateを使って動的なUIを作成できる

• Hooksによって関数コンポーネントでReactの機能を利用できる

• JSXによってUIの構造を分かりやすく記述できる

• 大規模なUIを整理して開発しやすい

• デザインシステムやReactベースのフレームワークと組み合わせられる

という点が挙げられます。

Reactは万能な技術ではありません。プロジェクトの規模、必要な機能、チームのスキル、使用するフレームワークなどを考慮して採用することが重要です。

Reactを使ったプロダクト開発では、コードを書く前にUIやユーザーフローを検証することも重要です。

UXPinでは、Reactコンポーネントを活用した高精度なプロトタイプを作成し、デザイナーと開発者が同じUIを使ってデザインを検証できます。

Reactベースのプロダクトをより効率的にデザイン・検証したい場合は、UXPinをお試しください。

カラーコントラストチェッカーを使用することで、視覚障害者にとってより魅力的で利用しやすいデザインにすることができます。世界には約3億人の色覚異常者がいます。また、約22億人の人々が視覚に問題を抱えており、デジタル製品の使用が困難になっている可能性があります。

色の組み合わせによるプラスとマイナスの効果を理解することで、ウェブやアプリのデザインをより多くの人に届けることができるようになります。

 カラーコントラスト がデジタル製品をより良くする理由

カラーコントラストチェッカーは、少なくとも2つの重要な点でデジタル製品をより良いものにします。

WCAG 2のガイドラインに沿って製品をよりアクセシブルにする

WCAG 2.1（ウェブコンテンツ・アクセシビリティ・ガイドライン）と成功基準には、幅広い視覚障がい者が製品にアクセスできるようにするためのルールが定められています。

文字色と調和する背景色を使用すると、製品を使用できない人が出てきます。また、色弱の方は、一般的な色とは異なる色を選択した場合、文字や画像が見えにくくなることがあります。

そのような場合には、色を変えるだけで認識しやすくなることがあります：

• ユーザー・インターフェース・コンポーネント
• ウェブページのコンテンツ
• ナビゲーショナル・メニュー
• ロゴマーク

アクセシビリティに配慮したカラーピッカーを使えば、より多くの人に使ってもらえるデザインを簡単に作ることができます。WCAG 2ガイドラインのすべてに準拠したデザインを、内蔵の色覚異常シミュレータやコントラストチェッカーでチェックできます。

このテーマについては、「アクセシビリティについてデザイナーが知っておくべきこと」を読むと、より詳しく知ることができます。この記事では、大きな文字やその他の機能を使用してユーザーを支援する方法について説明しています。

カラーコントラストでより多くのユーザーにアピール

デザインをよりアクセシブルにすることで、より多くの人に製品を使ってもらえるようになります。倫理的には、できるだけ多くの人に製品を使ってもらいたいと思うでしょう。経済的にも、より多くの人に製品を使ってもらうことは、ビジネスの収益向上につながります。

色のコントラストを使うことで、より多くのユーザーを惹きつけることができ、それが広告収入の増加や売り上げの増加につながります。倫理的にもビジネス的にも理にかなっていると思います。

おすすめの読み物: New e-book: Web UI Design for the Human Eye (Colors, Space, Contrast)

WCAGの3つのレベルを知る

WCAGには3つのレベルがあります。最高レベルを目指すことで、デザインを可能な限りアクセシブルにすることができます。

以下の説明では、視覚に基づくアクセシビリティのみを取り上げています。他のアクセシビリティ制限のある人に対応するには、他の機能について考える必要があります。

Level A (Beginner)

色だけに頼らないプレゼンテーションです。

Level AA (Intermediate)

テキストと背景色の間のカラーコントラスト比が4.5対1以上である。

ユーザーインターフェースの構成要素、グラフィックス、および周辺色のコントラスト比が3対1以上である。

文字の大きさが2倍になっても、機能や文脈を損なわない。

Level AAA (Advanced)

テキストと背景の間のカラーコントラスト比が7対1以上である。

カラーコントラストチェックツールのご紹介

色を識別できないような視覚障がいがなければ、カラーコントラストチェッカーを使わなければ、最低限のコントラストに達しているかどうかを確認することはできないでしょう。以下のツールは、より多くの人にとってアクセシビリティが向上する色を選択するのに役立ちます。

カラーコントラストアナライザー (CCA)

Colour Contrast Analyserは、コンピュータにダウンロードできる無料のツールです。16進コードやCSSカラーフォーマットを入力したり、カラーピッカーツールを使ってコントラスト比を求め、AAまたはAAA規格に合格しているかどうかを判断します。

内蔵のコントラストチェックツール 

お使いのデザインツールにコントラストチェッカーが内蔵されているかどうかを確認すると、使用した色を簡単に評価することができます。UXPinでは、それを助けてくれるプラグインを探す必要はありません。エディターの中にすでに備わっているからです。

カラー・コントラスト・チェック

 カラーコントラストチェックは、あなたのデザインがWCAG 2 AAまたはWCAG AAAに準拠しているかどうかを簡単に知ることができます。背景色と前景色の16進数を入力してください。結果として、コントラスト比が表示され、準拠しているかどうかを簡単に「はい」「いいえ」で表示します。

アクセシブルカラージェネレーター

 アクセシブルカラージェネレーターでは、色を16進数で入力したり、カラーパレットを使って入力することができます。入力された色を分析し、AAまたはAAAガイドラインに準拠したコントラストの高い色を、小さい文字サイズ、大きい文字サイズ、通常の文字サイズで提供します。

カラーラボ

カラーラボラトリーツールでは、色を選択して隣り合う色の見え方を確認することができます。また、選択した色を増強して、色弱の人が見るのと同じように見えるようにします。これにより、色弱者が製品をどのように感じるかについて、かなりの洞察を得ることができます。

カラーセーフ

カラーセーフは、WCAGガイドラインに基づいてカラーパレットを生成します。色、テキストサイズ、フォントファミリーを選択すると、WCAG基準に準拠したカラーパレットが作成されます。

APCAコントラスト計算機

APCAコントラスト計算機は、American College Personnel Associationが策定したガイドラインに準拠するように設計されたツールです。APCA Contrast Calculatorの特徴は、シンプルかつフルフォントマトリックスバージョンのツールを提供していることです。文字サイズと色のコントラストがAPCAの基準を満たしているかどうかだけを知りたい場合は、シンプルなバージョンを使用できます。より多くの変数を加えたい場合は、フルフォントマトリックスバージョンをお試しください。

UXPinで適切なカラーコントラストを確保する

UXPinでは、最終製品と同様の外観と性能を持つプロトタイプを作成することができます。そのため、プロトタイピングと製品リリースの段階でカラーコントラストが変わることを心配する必要はありません。

14日間の無料トライアルでは、コントラクトチェッカーを内蔵したエディターやその他多くの機能をお試しいただけます。ご登録はこちらから。クレジットカードは不要です。

ReactとFlutterの両方が話題になっています。どちらもサイトやアプリの構築を容易にするフレームワークですが、すべてのソリューションが万人に通用するわけではないので、自分にとって最適な選択肢を調べることが重要です。今日は、 ReactとFlutter の比較をしてみましょう。あなたにとって最適なフレームワークはどちらでしょうか？

今やアプリは、私たちの生活のほぼすべてを管理するために使われています。Global Web Indexによると、人々は自分の時間やその他すべてのことを把握するために、ますますモバイルアプリを利用するようになっています。

React NativeがFlutterよりも優れている理由

この2つのプラットフォームを比較する際には、さまざまな要素を考慮する必要があります。しかし、最終的に得たい結果は、意思決定プロセスにおいて大きな役割を果たします。扱いやすく、高速で、必要な機能を備えた安定したアプリを実現できるフレームワークが必要です。もちろん、アプリの更新やコードの管理も簡単に行いたいところですが、一番の目的は、機能的で問題のない製品を最終的に手に入れることです。

では、この2つのフレームワークにはどのような特徴があるのでしょうか。

React Nativeは2015年にFacebookがリリースしたもので、React（2013年から利用可能）を使ってネイティブアプリケーションを作るためのフレームワークです。Flutterもネイティブアプリの構築を目的としていますが、ポータブルなUIツールキットです。Flutterは2018年に、Googleからリリースされました。

どちらのフレームワークも無料で、どちらもオープンソースですが、エンジニアは開発を続けています。

ユーザーインターフェースのバリエーションが増える

アプリのフレームワークを選ぶ際に重要なのは、ユーザーインターフェイスです。ユーザーは、異なるプラットフォームであなたのアプリをどのように体験するでしょうか？

React Nativeは、AndroidとiOSのネイティブコンポーネントを提供しているので、プラットフォームを問わず同じ体験ができます。コンポーネント、ボタン、ウィジェットなどはすべてプラットフォーム間で同じで、OSのUIを更新すると、アプリのコンポーネントもすべて即座に更新されます。React Nativeには、多種多様な外部UIキットが用意されており、その中から選ぶことができます。iOSスタイルのコンポーネントや、他のいくつかのキットからニーズに合わせて選ぶことができます。

Flutterには、インタラクティブなウィジェット、プラットフォーム、ビジュアルデザインなど、独自のデザインを持つ柔軟で高速なレンダリングのUIがあります。これらは、誰もが望んでいるわけではありませんが、ネイティブのコンポーネントを置き換えることができます。また、Flutterはピクセルレンダリングを採用しており、どのデバイスでもUIがピクセル単位で同一になるようになっています。

 多様性とオプションを求めるなら、React Nativeが必要です。Flutterは柔軟性に優れていますが、種類は少なくなります。

よりシンプルなプログラミング言語

React NativeがJavaScriptを使用していることは、すでにご存知かもしれません。これは、ほとんどの開発者がすでに慣れ親しんでいる有名なプログラミング言語です。実際、Stack Overflowによると、プロの開発者の70％以上がJavaScriptに精通しています。以前にJavaScriptを使用したことがあれば、直感的に操作できます。

Flutterは、Googleがほぼ独占しているDartというプログラミング言語を使用しています。Dartを使うことで、ネイティブコードをより高速にコンパイルすることができますが、Google以外の人にとっては学習曲線が急になるということです。

この場合、多くの人はすでに知っているものにこだわりたいので、React Nativeが選ばれる傾向にあります。

開発に必要な時間が少ない

開発者は常に、アプリを完成させ、完璧にして送り出すことを急いでいます。つまり、Flutterよりもはるかに高速なReact Nativeが必要なのです。このフレームワークは、モバイルアプリを非常に迅速に作成できるように設計されています。これには、Dartの代わりにJavaScriptを簡単にプログラミングできることなど、さまざまな要因があります。

Flutterは、各セクションを個別にコーディングする必要があるため、時間がかかります。React Nativeでは、必要に応じて配置や調整ができる既製のコンポーネントが用意されています。また、アプリ内の他のコンポーネントに影響を与えることなく、必要に応じてこれらのコンポーネントを再利用することができます。

異なるコーディングスタイル

React Nativeはより複雑なコード構造を持っていますが、Webアプリ、Android、iOS、Windows OSなどを通して同じコードを使用することができます。そのため、無償で提供されているサードパーティのライブラリでコードを共有することが可能です。開発者であるあなたは、互換性があるかどうかを気にすることなく、実際のコードに集中することができます。

一方、Flutterは、よりシンプルなコードの選択肢に傾いています。すべてのコードを一箇所に集めて、すべてにアクセスすることができます。テンプレート、データ、スタイルは分離されていません。この方が使いやすいのですが、コードの共有は、AndroidとiOSの間でしかできません。これは変更されることが予想されますが、今のところ、FlutterはReactよりもはるかに制限されています。

全体として、React Nativeは42％の開発者に、Flutterは39％の開発者に選択されており、React Nativeが好まれていることがわかります。アプリの作成にはどちらのオプションも使用されますが、FlutterではなくReactを選択する明確な理由があります。

UXPinは、世界中の製品チームがアイデアをより早く製品にするためのデザインプロセスツールです。

UXPinの革新的なテクノロジーであるMergeにより、PayPalはDesignOpsの課題を簡単に解決することができました。UXPin Mergeでは、Reactコンポーネントを使ってデザインし、最終製品との完全な一貫性を実現することができます。

React の絶大な人気と実用性は否定できません。長い間、ほとんどのWebデザインは CSS、HTML、JavaScript で構築されていましたが、Reactはその使いやすさで、多くのデベロッパーから愛されています。Reactの最も魅力的な機能としては、再利用可能なコンポーネント、優れたデベロッパーツール、広範なエコシステムなどが挙げられます。

そして、DOMを直接操作するという従来のアプローチの代わりに、React は仮想 DOM コンセプトという形で有用な抽象化レベルを導入しました。

このライブラリは、技術大手である FacebookのReact開発者たちによって積極的に開発および保全されているため、他のフレームワークやライブラリよりもずっと優位に立っており、JavaScript コミュニティの大勢の貢献者も、React改善に貢献しています。

このような要因のおかげで、Reactは、常に新しいフレームワークが登場してフロントエンドデベロッパーの間で評価を競っているにも関わらず、デベロッパーの間で変わらず人気です。

React.js には数多くのデザインパターンが存在しますが、本記事では、Web アプリを構築する際にぜひ知っておきたい、Reactのおすすめパターンをいくつか見ていきます。

Git レポジトリ、Storybook、または npm からコンポーネントを使ってプロトタイプを構築しましょう。コンポーネントをデザインエディタにインポートすれば、デザイナーなしでも魅力的なレイアウトを作成できます。こちらから UXPin Merge へのアクセスをリクエストして、ぜひお試しください。

React のデザインパターンに従うべき理由

まず、デザインパターンが果たす役割を簡単に振り返ってみましょう。簡単に言うと、デザインパターンとは、ソフトウェア開発でよく起こる問題に対する再現可能なソリューションのことです。

それは与えられた要件に応じてプログラムの機能を構築できる基本テンプレートとして機能します。

ちなみに「デザインパターン」を「デザインシステム」と混同してはいけません。デザインシステムについては別の記事でお話ししています。

デザインパターンで、開発プロセスのスピードが上がるだけでなく、コードの解読や維持しやすくなります。

デザインパターンの一般的な例としては、Singletonパターンや Gang-of-Fourパターンなどが挙げられます。

ソフトウェア開発において、デザインパターンは以下のように２つの一般的な役割に関連付けられています。

• デベロッパーに共通のプラットフォームを提供する
• React のベスト プラクティスが確実に適用されるようにする

もっと詳しく見てみましょう。

役割１：デベロッパーに共通のプラットフォームを提供する

デザインパターンは、既知の問題に対する標準的な用語とソリューションを提供します。前述した Singleton パターンを例に挙げてみましょう。

このパターンは単一のオブジェクトを使うことを前提としており、このパターンを実装するデベロッパーは、特定のプログラムがシングルトンパターンに従っていることを他のデベロッパーに簡単に伝えることができ、そのデベロッパー達もその意味を理解できます。

役割２：React のベストプラクティスを確実に適用する

デザインパターンは、広範な調査とテストの結果として作成されたものであり、これでデベロッパーは開発環境に簡単に慣れることができるだけでなく、ベストプラクティスが遵守されるのを保証できるようになります。

その結果、エラーが減り、デバッグの時間が節約され、適切なデザインパターンが実装されていれば簡単に回避できたはずの問題の解明もできるようになります。

他のよくできたプログラミングライブラリのように、React はデザインパターンを広範に活用して、デベロッパーに強力なツールを提供しています。そしてデベロッパーは、React の哲学に適切に従うことで並外れたアプリケーションを作ることができます。 

デザインパターンについてご理解していただけたところで、React.js で最も広く使われているデザインパターンを見ていきましょう。

関数コンポーネントとクラスコンポーネント

コンポーネントには、「関数コンポーネント」と「クラスコンポーネント」の２種類がありますが、両者の違いについては、以下のブログ記事で説明しています： 関数コンポーネント と クラスコンポーネントの違いとは？

クラスコンポーネント

クラスコンポーネントは、JavaScript のクラスに基づいて構築され、それでReact.Component クラスを拡張します。これは React コンポーネントの構築のための従来のアプローチであり、ステートとライフサイクルイベントを管理するための強固な構造を提供します。また、クラスコンポーネントは、ステートとライフサイクルの動作の正確な制御が非常に重要であるような複雑な場面で特に有利です。

クラスコンポーネントでは、React.Component を継承するクラスが定められます。このクラスには、状態を初期化するためのコンストラクタ、コンポーネントの存在のさまざまな段階を処理するためのライフサイクル メソッド、およびコンポーネントの UI を定めるためのレンダリングメソッドが含まれることがあります。この構造化されたアプローチは、内部状態とライフサイクルイベントの細心の注意を払った管理が必要な複雑なコンポーネントを処理する場合に有用です。

以下は、React のクラスコンポーネントの例です：

import React, { Component } from 'react';

class MyClassComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };

    // Binding 'this' context to the method
    this.incrementCount = this.incrementCount.bind(this);
  }

  incrementCount() {
    this.setState((prevState) => ({
      count: prevState.count + 1,
    }));
  }

  render() {
    return (
      <div>
        <h1>Count: {this.state.count}</h1>
        <button onClick={this.incrementCount}>Increment</button>
      </div>
    );
  }
}

export default MyClassComponent;

関数コンポーネント

一方、関数コンポーネントは、典型的な JavaScript 関数に似ています。プロパティ（props）を引数として受け取り、レンダリングのために React 要素を返します。当初はクラス コンポーネントにある一部の機能が欠けていましたが、React Hooks の導入により関数コンポーネントが注目されるようになりました。

関数コンポーネントは、より単純な場面に適しており、それによってより関数型プログラミングのアプローチが促進されます。また、フックの出現により、関数コンポーネントは「ステート」のイベントと「ライフサイクル」のイベントを処理できるようになり、それで多くの場合、クラスコンポーネントが不要になりました。関数コンポーネントは、その簡潔な構文とわかりやすさにより、単純な UI 要素に最適です。

以下は、フックを使った React の関数コンポーネントの例です：

import React, { useState } from 'react';

const MyFunctionalComponent = () => {
  const [count, setCount] = useState(0);

  const incrementCount = () => {
    setCount(prevCount => prevCount + 1);
  };

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={incrementCount}>Increment</button>
    </div>
  );
};

export default MyFunctionalComponent;

複合パターン

React 開発者が連携して動作するコンポーネントが２つ以上ある場合、１つが親で、残りが子である可能性が高くなりますが、状態を共有してロジックを一緒に処理できることをご存知ですか?

それが複合コンポーネント React パターンの目的です。複合コンポーネント API で、コンポーネント間の関係が示され、コンポーネントが柔軟な方法で通信できるようになります。

詳しくは、LogRocket の React 複合コンポーネントの理解に関する記事をお読みください。

以下は、シンプル化されたAccordion component: を使った複合コンポーネントパターンの例です。

import React, { useState, createContext, useContext } from 'react';

// Create a context to share state between compound components
const AccordionContext = createContext();

const Accordion = ({ children }) => {
  const [openIndex, setOpenIndex] = useState(null);

  const toggleIndex = (index) => {
    setOpenIndex(openIndex === index ? null : index);
  };

  return (
    <AccordionContext.Provider value={{ openIndex, toggleIndex }}>
      <div className="accordion">{children}</div>
    </AccordionContext.Provider>
  );
};

const AccordionItem = ({ children, index }) => {
  const { openIndex, toggleIndex } = useContext(AccordionContext);
  const isOpen = openIndex === index;

  return (
    <div className={`accordion-item ${isOpen ? 'open' : ''}`}>
      <div className="accordion-header" onClick={() => toggleIndex(index)}>
        {children[0]}
      </div>
      {isOpen && <div className="accordion-body">{children[1]}</div>}
    </div>
  );
};

// Usage
const App = () => {
  return (
    <Accordion>
      <AccordionItem index={0}>
        <div>Header 1</div>
        <div>Content 1</div>
      </AccordionItem>
      <AccordionItem index={1}>
        <div>Header 2</div>
        <div>Content 2</div>
      </AccordionItem>
      <AccordionItem index={2}>
        <div>Header 3</div>
        <div>Content 3</div>
      </AccordionItem>
    </Accordion>
  );
};

export default App;

条件付きレンダリング

条件は、ソフトウェアデベロッパーにとって最も重要なツールです。

React のコンポーネントを書く過程で、状態に基づいて特定の JSX コードのレンダリングが必要になることがよくありますが、これは条件付きレンダリングによって実現されます。

条件付きレンダリングは、ニーズに基づいて個別のコンポーネントを作成し、アプリケーションで必要なコンポーネントのみをレンダリングできるため、非常に便利です。

たとえば、条件付きレンダリングを使って、ユーザーのログイン状態に基づいてユーザーにさまざまなメッセージを表示できます。そしてそのメッセージは isLoggedIn プロパティの値に従います。

レンダリングプロップ

よくある問題を解決するのにデザインパターンがどのように存在するかについてお話しました。React では、ロジックの繰り返しの問題を解決するのにレンダリングプロップを使うことができます。

React の公式ドキュメントによると、Render propsは「値が関数である prop を使って React コンポーネント間でコードを共有するための手法」と定義されています。

レンダリングプロップは、さまざまなコンポーネント間で同じ状態を共有できることから非常に便利であり、各コンポーネント内のロジックをハードコーディングする代わりに、関数 prop を使ってレンダリングする内容を決定できます。

Render props を利用するライブラリは、Formik、React Router、Downshift などがよく使われています。

以下は、Render Props パターンを示す例です：

import React, { Component } from 'react';

// Component using the Render Props pattern
class Mouse extends Component {
  constructor(props) {
    super(props);
    this.state = { x: 0, y: 0 };

    this.handleMouseMove = this.handleMouseMove.bind(this);
  }

  handleMouseMove(event) {
    this.setState({
      x: event.clientX,
      y: event.clientY
    });
  }

  render() {
    return (
      <div style={{ height: '100vh' }} onMouseMove={this.handleMouseMove}>
        {this.props.render(this.state)}
      </div>
    );
  }
}

// Usage of the Mouse component with render props
const App = () => {
  return (
    <div>
      <h1>Move the mouse around!</h1>
      <Mouse render={({ x, y }) => (
        <h2>The mouse position is ({x}, {y})</h2>
      )}/>
    </div>
  );
};

export default App;

制御コンポーネント

Web フォームは多数のアプリケーションでのよくある要件であり、制御されたコンポーネントは、フォームの状態を処理するための React の答えです。

制御コンポーネントは、props を介して状態を取得し、onChange などのコールバックを使って変更を通知できます。

親コンポーネントはコールバックを処理し、独自の状態を管理することでそれを制御できます。その間、新しい値は制御対象のコンポーネントにプロパティとして渡されます。

デフォルトでは、React フォームは制御コンポーネントと非制御コンポーネントの両方に対応していますが、制御コンポーネントの使用を強くお勧めします。

次のコード スニペットは、制御コンポーネントを示しています。

<input type = “text” value = {value} onChange = {handleChange} />

React フックパターン

フックは React に比較的新しく追加されたもので、React 16.8 で導入されました。

このような関数により、デベロッパーはクラスなしで React を使うことができ、エフェクトフック（useEffect）や State フックなど、さまざまなフックが事前構築されています。

利用可能なフックの完全なリストについては、フック API のリファレンスを参照してください。

また、React の事前構築済みのフックとは別に、独自のフックを作成することもでき、これにより、コンポーネントロジックを抽出し、再利用可能な関数を作成できます。

フックは Reactの追加機能であり、デベロッパーコミュニティではこの新しい追加が非常に熱心に高く評価されました。

ただし、引数がオブジェクト、配列、または関数の場合、フックの操作が少し難しい場合があることを覚えておかないといけません。これはやや混乱する可能性がありますからね。

一方、カスタムフックは使いやすく、デベロッパーにも計り知れないメリットをもたらします。

以下は、フックを使った React の関数コンポーネントの例です：

import React, { useState, useEffect } from 'react';

const Counter = () => {
  // useState hook to manage the counter state
  const [count, setCount] = useState(0);

  // useEffect hook to perform a side effect: updating the document title
  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]); // Only re-run the effect if count changes

  // Function to handle incrementing the count
  const increment = () => {
    setCount(prevCount => prevCount + 1);
  };

  // Function to handle decrementing the count
  const decrement = () => {
    setCount(prevCount => prevCount - 1);
  };

  return (
    <div>
      <h1>Counter: {count}</h1>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

export default Counter;

高階コンポーネントパターン

より高度な React パターンに関しては、「HOC」という高階コンポーネントパターンがあり、これは、React デベロッパーがアプリケーション内でロジックを再利用したいときに適用されます。

HOC はコンポーネントを引数として受け取り、それを返すときに、コンポーネントにデータと機能を追加します。

たとえば、Redux で React を使う場合、connect関数を介してコンポーネントを渡すと、Reduxストアからデータが挿入されます。そして取得した値は Props として渡されます。

HOC はコアの React API の一部ではなく、JavaScript 関数です。ですが、 継承よりも構成を重視する React 関数コンポーネントの性質と一致しています。

以下は React の HOC パターンの例です：

import React from 'react';

// Higher-Order Component
const withLogging = (WrappedComponent) => {
  class WithLogging extends React.Component {
    componentDidMount() {
      console.log(`Component ${WrappedComponent.name} is mounted.`);
    }

    componentWillUnmount() {
      console.log(`Component ${WrappedComponent.name} is unmounted.`);
    }

    render() {
      return <WrappedComponent {...this.props} />;
    }
  }

  return WithLogging;
};

// Example component
const MyComponent = (props) => {
  return <div>{props.text}</div>;
};

// Wrap MyComponent with withLogging HOC
const MyComponentWithLogging = withLogging(MyComponent);

// Usage
const App = () => {
  return <MyComponentWithLogging text="Hello, world!" />;
};

export default App;

最も一般的な React デザインパターンを使う

React は非常によく使われているライブラリであることが証明されており、このコミュニティは、オンラインで最も急速に成長しているデベロッパーコミュニティのうちの１つになっています。

また、react.js を簡単に学習して適応できる、便利な Web 開発リソースもオンラインで多数見つかります。

React のパワーは、その驚くべき機能とそれが提供する強固なアーキテクチャによるものであり、React の最も顕著で広く愛されている機能の１つに、そのデザイン パターンが挙げられます。

実際、デザインパターンで、このライブラリには並外れた実用性と有用性があり、コードの最適化とメンテナンスがしやすくなります。

そして、これでデベロッパーは本質的に柔軟性があり、パフォーマンスが上がり、保全がしやすいコードベースを生成できるアプリを作成できます。

これまで、ステートレス関数、レンダリングプロパティ、制御されたコンポーネント、条件付きレンダリング、反応フックなど、一般的な React デザインパターンについていくつかお話しました。

ただ、React デザインパターンは本記事で挙げたパターンだけに限定されるものではなく、実装できるデザインパターンがいくつかあることに注意が必要です。

よくあるデザインパターンの使い方に慣れてしまえば、他のパターンに移りやすくなるでしょう。

UXPin Mergeで React ベースのプロトタイプを構築しよう

React アプリケーション開発の本質を捉えるのは、適切なテクノロジーを使うことで簡単になります。UXPin Mergeでは、Reactコードコンポーネントを使って、強力なプロトタイプを構築でき、純粋なコードであるコードベースのプロトタイプを簡単にまとめることができます。こちらからぜひ無料でお試しください。

一般的な製品モデリングプロセスは、部門間の行き来が多く、非効率なコースを辿ります。従来の製品設計・開発モデルのライフサイクルでは:

• プロジェクトマネージャーがアイデアを出し、それを文章化してデザインチームに送ります。
• デザイナーは、プロジェクトマネージャーが書いた指示を解釈し、それをイメージに変える。
• デザイナーは、開発者にそのイメージを伝える。
• 開発者は、コーディングの経験を生かしてイメージを再現し、機能を追加する。
• プロジェクトマネージャーは、開発者が作った製品の機能を確認し、修正を依頼する。

このプロセスは、プロダクトマネージャーのビジョンを実現するまで繰り返されます。

PayPalのデザインチームは、このような従来の方法論に問題があることを認識していました。PayPal社のデザインチームは、このような従来の手法の問題点を認識し、会社のニーズに合った、より合理的なアプローチを生み出しました。ここでは、PayPal社のアプローチが、自社のプロセスを改善するためのヒントになることをご紹介します。

製品モデルのプロセスを、コードベースのシステム的なアプローチに移行する

従来の製品モデルプロセスがビジネスモデルを阻害し、収益性を低下させることは、少し考えればわかることです。PayPalは、より効率的な製品を開発するためにサイロ化をなくし、開発者やプロダクトマネージャーが自分の仕事をよりコントロールできるようなオペレーションモデルを構築しました。

PayPalはこのアプローチをDesignOps 2.0と名付けました。デザイナーは、PayPalのステークホルダーが期待する美観や機能から逸脱することなく、誰もがさまざまな製品を構築するために使用できる資産を作成しました。コードベースアプローチにより、製品設計にかかる時間を半分に短縮することができました。

プロダクトマネージャーとチームにデザインをさせる

PayPalには、例外的な課題に取り組むことを厭わない素晴らしいデザイナーチームがあります。社内でUX開発者の数が増えるのを見て、小さなデザイナーチームは適応することを決めました。彼らは、デザインチーム以外の人ができることの範囲を広げ、プロセス全体を改善しました。製品の設計・開発モデルを改善するために、彼らのステップをいくつか参考にしてみてください。

再利用可能なテンプレート、ビジュアルアセット、およびインタラクティブコンポーネントのライブラリを構築する

PayPalのデザインチームは、誰もが利用できるオリジナルのデザインシステムを構築しました。物事を効率化するためには、このプロセスにデザイナーと開発者が必要ですが、彼らはそれほどハンズオンな役割を果たす必要はありません。プロダクトマネージャーは、ツールのワイヤーフレームを作るためにデザインチームにアプローチする必要はありません。その代わりに、デザインシステムを使って既存のテンプレートを探します。ロゴやボタンなどのビジュアルアセットも、デザイナーが独自に作成する必要はありません。

マネージャーがデザイナーや開発者に頼らずに製品を作るために必要なテンプレート、ビジュアルアセット、インタラクティブコンポーネントを含むデザインシステムを構築します。例えば、マネージャーが不具合を追跡するデジタルツールを追加したい場合、テンプレートを開き、ツールの目的を反映させるために変更を加え、プロトタイプをテストして意図したとおりに機能するかを確認することができます。

おすすめの読み物: プロジェクトでReact.jsコンポーネントを使用する7つの最適な理由

開発者を軌道に乗せるための重要なガードレールを確立する

コードベースのデザインコンポーネントは、マネージャーと開発者にある程度の柔軟性を与える必要があります。しかし、優れた製品管理は、人々が会社の美的感覚や期待される機能から大きく逸脱することを防ぐ必要があります。新しいIT製品が類似製品と同じように機能しなければ、ユーザーを混乱させることになります。

おすすめの読み物: コードでデザインする

新製品の開発者がデザイナーとの時間を確保しやすいようにする

PayPalのデザインチームは、開発者ステージで製品開発の80％以上を終えることができることを発見しました。しかし、多くの従業員が使用する製品や顧客に送る製品には、デザインチームの意見が必要です。彼らは、開発者やプロダクトマネージャーが必要な指示を簡単に得られるようにしています。

まず、デザインチームは、デザイナーではない人たちができるだけ多くの作業を行えるよう、優れたトレーニングツールを提供しています。社員は3時間を超えるトレーニングビデオにアクセスできます。また、以下のこともできます:

• 60種類以上のプロトタイピングコンポーネントへのアクセス
• オフィスアワーを設定して、デザイナーと直接またはバーチャルでミーティングができる
• フィードバックや指示を得るためにSlackチャンネルを利用する

最終的には、デザインチームが製品をリリースする前に確認します。これは、デザインの正確性と機能性を確保するための最終ステップです。デザイナーがチームメイトを成功させるためのお膳立てをしているので、変更で追加作業が多くなることはほとんどありません。

おすすめの視聴方法: PayPal のプロダクトマネージャーである Sandeep Yeole 氏が UXPin Merge を使用して製品を構築する様子をご覧ください

製品開発を効率化するために UXPin Merge を採用する

UXPin Merge は PayPal のデザインチームの成功に重要な役割を果たしています。UXPin Merge がなければ、プロダクトマネージャーや開発者が製品を作るのを容易にするコードベースのコンポーネントで溢れたデザインシステムを構築することができませんでした。

承認されたすべてのデジタルアセットが目の前にあれば、数分から数秒でデザインの変更ができます。一定の経験を積めば、デザイン部門以外の社員でも1時間以内に自分の製品を作れるようになります。

また、UXPinのプロトタイピング機能は、PayPalが完全な製品を市場に出すことをより簡単かつ迅速にしました。UXPinのプロトタイプは、完成した製品と同じように機能します。プロトタイプは実際のデータを使用し、テスターがコンポーネントと対話し、複雑な製品のように動作します。UXPinのプロトタイプはほとんど微調整の必要がありません。

UXPin Mergeへのアクセスをリクエストすると、コードベースのデザイン、効果的なデザインシステム、完全に機能するプロトタイプの利点を発見することができます。このツールは、PayPalのデザイナーの仕事の仕方に革命をもたらしました。是非体験してみて下さい！