２０２３年に React を使うべき理由
React はFacebookによって開発されたJavaScriptライブラリであり、Webアプリ用のインタラクティブなUI（ユーザーインターフェース）を構築するために設計されました。この時点では、「私はデザイナーだし、毎日コードを書くわけでもないのに、Reactを使うべきか？」と思っている方も多いでしょう。
そこで本記事では、デザイナーの視点からReactを紐解き、UIデザイン、UX（ユーザーエクスペリエンス）、チームとの連携においての影響についてスポットを当てていきます。
主なポイント：
- Reactは、エンドユーザーに多くのメリットがあり、開発の効率性の確保、デザインチームと開発チームのシームレスな連携の促進をもたらす。
- Reactは、柔軟性、拡張性、人気という点で、貴重な資産であり続けている。
- Reactは、デザイナーとデベロッパー間での「信頼できる唯一の情報源（Singel source of truth）」として完璧にするデータおよびステートを処理する。
Reactアプリのプロトタイプを簡単に構築してみませんか？UXPin Mergeを使うことで、ReactコンポーネントをUXPinのデザインエディタにインポートできます。実際のコンポーネントをキャンバスにドラッグ＆ドロップして、アプリのアイデアを検証するテスト可能なプロトタイプを構築しましょう。こちらからUXPin Mergeをぜひご覧ください。
Reactの用途
Reactは、React.jsとしても知られる、Facebook によって作成された JavaScriptのフレームワークおよびライブラリです。
主な目的として、デベロッパーがアプリやWebサイト、例えば入力中にポップアップするリアルタイムの検索結果のような機能や、ユーザーの好みに応じて調整されるダイナミックなフォトギャラリーなど、インタラクティブなUIを持つアプリやWebサイトの構築をサポートします。
React jsのWebサイト開発において際立った特質の１つとして、プレーンなJavaScriptを使う時に比べて、より速く、より少ないコードで、このような複雑なコンポーネントを構築できることです。
この効率性により、Reactはデザイナーにとってもデベロッパーにとっても頼れるツールとなります。これはWebサイトやReactアプリでアイデアがスピーディーで、スムーズに実現されるということにもなります。
React を使う理由
Web製品に携わるデザイナーにとって、React が Vue、Flutter、Angular といった他のツールと比べて何に使われるのかがわかると便利です。このツールの違いがわかるということは、デベロッパーとより多くの情報に基づいた会話ができるようになるということですからね。
ただ、React は単にチームワークを少し楽にしてくれるだけではありません。デザインツールの UXPin は、React の要素をデザインエディターと同期させ、プロトタイプをよりインタラクティブに、より最終製品に近づけることができます。こちらでその Merge のテクノロジーをぜひチェックしてみてください。
ここでは、React の主な機能でデザインコンセプトがどのように実現されるのかを詳しく見ていきましょう。
リッチな UI の構築
製品が持つUIの重要性は、美しさだけにとどまりません。
デジタルの世界では、第一印象がすべてです。不格好で刺激的でないデザインは、どんなに機能的な製品であっても、ユーザーはすぐに離れてしまいます。逆に、魅力的で直感的なUIは、長時間のインタラクションを促し、アプリをユーザー間でヒットさせることができます。
Reactは、魅力的なインターフェースの一貫した作成ができるツールです。その宣言的なコンポーネントはデザインのビルディングブロックのようなもので、直感的で視覚的に魅力的な UI を組み合わせることができます。インタラクション、ボタン、ビジュアル要素を全て精巧に作り上げ、カスタマイズすることができるため、ユーザーはアプリの使用体験を堪能できるのです。
コンポーネントとライブラリ
Reactでは、コンポーネントはすでに作成済みのカスタマイズできる要素です。特定の外観と動作を持つボタンの作成を想像してみてください。一度作れば、ゼロから作り直す必要はなく、そのボタンをアプリのどこにでも配置できます。そして各コンポーネントは、独自の外観と機能を持つ自己完結型のユニットとして動作します。
Reactアプリの大きなセクションを構築する際には、このような個々のコンポーネントが集まって、より広範で相互接続された構造を形成しますが、各コンポーネントは独立性を保ち、それによってシステム全体が整理されて一貫性が保たれます。
そしてこのようなコンポーネントは、単なる静的なビジュアルやモックアップではないというのが、デザイナーにとってワクワクする部分です。適切なツールを使えば、その実際にコード化されたコンポーネントを統合し、プロトタイプを作成することができます。つまり、デザインされたものは、視覚的な表現であるだけでなく、最終的なインタラクティブ製品が忠実に反映されているということです。
例えば、UXPin Mergeを挙げてみましょう。Google のマテリアルデザインの原則に基づいたライブラリである MUI など、さまざまなコンポーネントライブラリから実際のコンポーネントを使ってデザインすることができますよね。
つまり、単にアイデアをスケッチするだけでなく、デベロッパーが使うのと同じビルディングブロックを使って作業するということです。静的なイメージやデザインのアイデアをデベロッパーに渡すのではなく、最終製品に近い機能的な部分を提供するのです。
柔軟性
「なぜ Reactを使うのか」という質問に対するもうひとつの答えは、React が驚くほど柔軟であるという点です。Reactはさまざまなツールと組み合わせて使うことができ、静的な Webサイトやデスクトップアプリケーションから iOS やAndroidのモバイルアプリケーションまで、何でも作ることができます。
この柔軟性は、Reactが誕生してしばらくの間、その活発なコミュニティが機能を強化するためのツールやライブラリ、拡張機能を数多く開発してきたことにも起因しています。
そして、UXデザイナーにとって注目すべき点は、React がさまざまなプロジェクトの要件に適応できることです。さまざまなテクノロジーと簡単に統合できるため、UI のテストや改良がサッと簡単にできるようになります。
ページをリロード（再読み込み）することなく即座に更新
多くの Webサイトやアプリでは、変更や新しい入力を反映するためにページ全体のリロード（再読み込み）が必要ですが、React js による Webサイト開発では、変更された特定の要素のみの更新が必要なだけです。
例えば Facebook を思い浮かべてください。投稿やコメントに「いいね！」を押すと、ページの更新をすることなく、そのアクションが即座に表示されます。それによって、よりスムーズで迅速なユーザー体験が実現し、リアルタイムの更新と、より反応の良いインタラクションが実現します。
UXとUI の両方で使われている
Reactコンポーネントで、UIデザイナーと UXデザイナーの両方のが楽になります。UI面では、再利用可能でインタラクティブなデザイン要素によって視覚的な一貫性が確保され、UXに関しては、即座のフィードバックと読み込み時間の短縮により、シームレスなユーザー体験が促進されます。
さらに、Reactを中心に構築されたツールは、デザイナーとデベロッパーのギャップを埋め、それによって速やかなプロトタイプ、反復的な改善、リアルタイムの連携が実現します。そしてそれは最終的に、より洗練されたユーザー中心の製品につながります。
コミュニティの規模
協力的で、リソースの共有やサポートを提供してくれるデベロッパー、デザイナー、愛好家からなるReactの広大でアクティブなネットワークの規模と活動に匹敵する技術プラットフォームはありません。
このコミュニティにおいて、Stack Overflow の「React.js」スレッドでは、２０２３年後半までに４６万件以上の質問が寄せられており、同プラットフォームで最もフォローされているタグのひとつとなっていることから、このコミュニティの規模がわかると思います。
また、Reactのフレームワークが Javascript 上で行われていることも注目に値します。Javascriptは２５０万件以上の質問があり、デベロッパーのコミュニティで最も熱い話題になっています。
つまり、Reactについて質問があるとすると、それはすでにどこかで誰かが答えを出している可能性が高い（ほど広いコミュニティ）ということです。
有名テク企業が使用
Reactは、その効率性、スケーラビリティ、そしてダイナミックなユーザー体験を促進するノウハウから、ライブラリを開発および維持している Facebook をはじめ、Airbnb、Amazon、Dropbox、Netflix など、フォーチュン500に名を連ねる多くの企業で採用されています。
また、Paypalも製品開発で Reactを使っており、デザインとソフトウェアの両方の側面をカバーしています。
PayPalのUXリーダーであるエリカ・ライダー氏は、６０以上の製品を管理する小規模なUXチームの効率を高めるため、２０１９年に UXPinの Reactコンポーネントデザイン機能を使い始めました。
彼らは React Fluent UI と呼ばれるデザインシステムを開発しました。このシステムは、デザインの選択をシンプルにし、チームがユーザーのニーズへの対応に集中できるようにする既製のコンポーネントで満たされています。
その結果、１ページのプロトタイプを従来のツールで作成するよりも８倍早く作成できるようになりました。
React コンポーネントはプロトタイプに使える
React で、プロトタイプを最終製品の動的でインタラクティブなプレビューに変えることができるので、デザイナーにとって強力なツールです。他にもあります：
コンポーネント化されている
React の核心は、UI の自己完結型ユニットであるコンポーネントにあります。このアプローチは、デザイナーがボタンやスライダーなどのコンポーネントを１つ作成して、それをプロトタイプ全体で再利用できるということです。それによって、一貫性が保証され、デザインプロセスのスピードが上がり、ゼロから始めることなく簡単に微調整や変更が可能になります。
ステートフルである
React の「ステート」は、コンポーネントのメモリーと関連しています。Reactは物事を記憶するので、プロトタイプをデザインするとき、React はユーザーのアクションに基づいた変化を記憶してそれを表示することができます。
例えば、ON・OFFスイッチをデザインする場合、React はスイッチが現在「ON」なのか「OFF」なのかを記憶することができます。つまり、ポジションごとに２つのデザインを作成しなくても、誰かがスイッチを入れたときに何が起こるかを示すことができるということです。
データを処理する
React は Javascript をベースにしており、データを管理、交換、動的にレンダリングする機能があります。これは、デザイナーが実世界のシナリオを簡単に模倣できるということであり、インタラクティブなプロトタイプを作成する際に特に有用です。
UXPin Merge はプロトタイプをさらに簡単にする技術で、デザイナーはコードを１行も書くことなく、React コンポーネントを使って完全に機能するプロトタイプを構築できます。
UXPin は他のデザインツールと同じように機能し、UI コンポーネントをドラッグ＆ドロップして、洗練された UI を構築できます。唯一の違いは、UXPin コンポーネントが完全にインタラクティブであり、元のデザインシステムやライブラリで設定された色や間隔、タイポグラフィなどのプロパティを保持する点です。こちらから UXPin Merge をぜひご覧ください。
