投稿者: UXPin

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のデザイナーの仕事の仕方に革命をもたらしました。是非体験してみて下さい！

市場競争が激化する中、優秀なデザイン人材を採用するのは簡単なことではありませんが、経験豊富で熟練した人材を一箇所に集めるというのは、成功の一部に過ぎず、とりわけ、繁栄するプロダクトデザインチームの構築には、DesignOps（デザインオペレーション）にも投資が必要です。

DesignOps の役割を理解し、自身が DesignOps のリーダーにふさわしいかどうかを確認するのに役立つ、DesignOps に関する電子書籍が執筆されました。ぜひご覧ください（英語）：DesignOps 101: Guide to Design Operations.（DesignOps入門）

そこで本記事では、DesignOpsとは何か、そして組織内のデジタルデザインシステムを改善するために DesignOpsをどのように活用できるかについてお話します。適切なDesignOpsソフトウェアの使用とともに、チーム間の連携や目標設定、情報交換システムなどの領域について見てきましょう。

UXPinはデザイン業務をサポートする優れたソフトウェアです。UXPin Merge のテクノロジーとともに、デザインを驚異的なレベルまで拡張することができます。アプリの実際の構成要素をドラッグ＆ドロップしてプロトタイプを作成し、デザインを効率化しましょう。UXPin Merge をご覧ください。

DesignOps とは

「DevOps」については聞いたことがあるかもしれませんが、「 DesignOps 」とは何でしょうか。

DesignOps（Design Operationsの略）とは、製品デザインを効率化してビジネス価値を上げるために、デザインプロセス、人材、テクノロジーを最適化することであり、主に以下のようなことが挙げられます：

• 適切なスキルセットと共通の目的を持つ人材を集めたチームを構築する
• ミスコミュニケーションやサイロ化など、業務上の非効率を減らす
• そして、おそらく最も重要なことだが、効率的なデザインワークフローを構築する

DesignOps は比較的新しい用語であるため、どのようにして誕生したのかと疑問に思われるかもしれません。

かつてデザイナーは、UXリサーチを行ったり、UXストーリーを書いたり、ワイヤーフレームを作成したり、多くの役割を担っていました。このアプローチは一部のチームでは今でも有効かもしれませんが、規模が大きくなると非生産的になります。そこで DesignOps が登場し、チームワークをオーケストレーションし、明確な構造と役割を構築してくれます。

とはいえ、DesignOps はデザイン組織だけに許された、孤立した「デザインチームだけの」エクササイズではなく、他のステークホルダー（特にソフトウェアデベロッパー）との多くの情報共有が必要です。一連のプラクティスに従うことで、デザイナーはこれらのやりとりの質を上げ、効果的な目標の達成に集中し、他のイニシアティブのために時間を解放することができるのです。

デザインオペレーションが台頭してきた理由

まず第一に、ビジネスとユーザーの両方の要件がより複雑になってきています（これは、顧客がより厳しくなってきているということでもあります。）。PwCのレポートによると、顧客の３人に１人は、たった１度でも顧客体験がよくなかっただけでその企業を去ってしまいます。当然のことながら、顧客の期待に追いつくという課題で、製品開発のライフサイクルは加速されます。また、チームがその増大する仕事量に追いつこうとするため、デザイナー間やデザイナーとデベロッパーの間でミスコミュニケーションが発生するリスクも出てきます。

また、チームは一貫性のない要件に基づいて孤立して作業してしまう可能性があり、これは納品スケジュール、ひいては UX に悪影響を及ぼしますが、DesignOps のプラクティスで、企業はこのようなボトルネックを克服し、デザインチームと開発チームの調和を生み出すことができます。

それでは、DesignOps管理の役割を詳しく見ていきましょう。

DesignOps の役割

DesignOps 管理の主な役割は、デザインチームが障害や気が散ることなく自分の仕事に集中できるように、デザインチームの時間を守ることです。詳しくはDesignOps 101 の電子書籍をご覧ください。本記事では、DesignOps の役割について見ていきます：

運営管理

この役割には、デザインチームの長期的な目標と、それを達成するための明確なデザインロードマップを作成することが含まれます。また、デザインチームの人数を評価し、スキルギャップを特定するのも仕事です。

プロセスデザイン

DesignOps は、デザインシステムを構築し、チームが必要とするデザインツールをマッピングすることで、デザインプロセスの計画や管理を行います。また、デザインチームがプロダクトチームや組織内の他のチームとどのように連携すべきかのフレームワークを作成します。

プロジェクト管理 

DesignOps はデザインワークフローを担当し、プロジェクトを割り当て、スケジュールを設定し、ボトルネックを取り除きます。そして DesignOps チームは毎日スタンドアップミーティングを組んでデザインプロジェクトの進捗を確認します。また、デザインスプリントを計画して遂行します。

コミュニケーション戦略の策定

DesignOps のマネージャーは、デザインチームと組織の他の部分との連絡役となり、デザインの価値を伝え、チームミーティングのアジェンダを設定します。

デザインリーダーは、プロダクトマネージャーや製品開発チームとの円滑なコミュニケーションを確保し、 DesignOps は、デザインチームに必要なファイルやリソースを全て簡単に検索できるように保管するシステムを構築します。

新入社員の受け入れ

新しいスタッフのオリエンテーションやトレーニングを行い、デザインチームにフィットするようにします。UI デザイナーや UX デザイナーなど、新しいデザインスタッフを雇用することも、彼らの任務の一部です。

デザインチーム文化の構築

DesignOps チームは、デザインチームの専門的な能力開発のためにワークショップやトレーニングを開催しています。また、チーム内のデザイナーに専門的かつ精神的なサポートを提供し、デザインチーム内の共同体意識を醸成するためにチームの関係構築に向けた活動を企画します。

予算配分と管理

DesignOps は、デザインチームの運営にどれだけのコストがかかるかを設定し、そのコストの正当性を確認します。そして予算が承認されると、その予算をデザインチーム内でどのように分配するかを担います。

法務

法務チームと協力して、ユーザーテスト時に使う NDA（秘密保持契約） や参加者同意書を作成します。

調達プロセスの管理

調達部門と連携し、デザインチームが購買決定を下す方法を効率化します。

IT とセキュリティ

デザインチームの技術ロードマップを策定し、IT部門と協力してデザインツールの互換性とセキュリティを確保します。

デザインのワークフローと業務を改善するヒント

以上のことを念頭に置いて、組織で DesignOps の実践を改善するのに役立つヒントを見ていきましょう。

1. デザイナーをデザインに集中させる

当たり前のことのように思えるかもしれませんが、前述のように、デザイナーに複数の役割を期待する企業もまだ存在しており、時には、一人のデザイナーがユーザーリサーチを行い、情報アーキテクチャや UI をデザインし、UXライティングを担当することもあります。

このやり方は、小規模なチームや初期段階のスタートアップであれば効果的かもしれませんが、拡張性のある方法ではないことを覚えておいてください。長期的に見れば、デザイナーに他の仕事を負担させることは、彼らの仕事の質を下げることにもなりかねません。

2. デザインプロセスの効率をチェックする

組織では様々な製品デザイン・開発の手法が用いられ、デザイン思考プロセスに従う組織もあれば、Google のデザインスプリントが中心に据えられた組織もあると思われます。

つまり、最善の方法を適用することが重要だということです

DesignOpsによって、デザインワークフローの非効率性がわかり、それを取り除くことができます。これにより、デザインチームはより少ない時間とリソースでより多くのことを達成できるようになります。そしてその結果、作業とチームのパフォーマンスが最適化されることで、不必要な雇用の回避につながる可能性があります。

3. リモートでの製品デザインの効果的な連携にツールを使う

小規模な組織であれば、デザイナー同士の連携は自然に行われるかもしれませんが、大規模な（特に遠隔地の）チームではそうはいきません。効果的な連携を行うには、デザイナーやその他の製品開発チームメンバーに適切なツールセットを装備させることが重要です。ここで、DesignOps ソフトウェアが非常に大きな価値をもたらします。

UXPin Merge はそのようなツールの一つです。まず、デザイナーはソフトウェアデベロッパーの Git レポジトリや Storybook からインポートした UI コンポーネントを使うことができます。ゼロからプロトタイプを作るのに時間をかけるのではなく、実際のコードで作られた要素を使って直接デザインすることができ、そうすることで、チームは実際のデザイン作業や、コード化された製品との一貫性を保つことに、より多くの時間をかけることができるようになります。

とはいえ、ツールはパズルの一部に過ぎず、残りの要素は、次に述べる正しいコミュニケーション慣行に従うことにあります。

4. 連携のルーティーンを確立する

アジャイルチームで通常行われる毎日のスタンドアップや週次ミーティングなどの連携のルーティーンは、デザイナーの定期的なステータスのアップデートの共有や、（必要であれば）サポートの依頼を促します。

効果的な連携のルーティーンをどのように浸透させることができるかを示す例は、他でもない Google にあります。インターンからスタートし、現在は巨大テック企業でインタラクションデザイナーとして働くSophia Chiu氏は、ルーティーンでチームの他のメンバーとの共通の土台を見つけることができたと言っています。

「毎週、UXスペシャリストは自分のデザインイテレーションをみんなの前で発表し、ブレーンストームとフィードバックセッションを行う機会があります。その後、小規模なグループで作業した後、そのデザインを全体の部門横断的な製品開発チームと共有することもできます。」

これは、チームメンバーの間にオープンなコミュニケーションの流れを作ることができる数多くの方法のうちのほんの一例です。

5. 全デザイナーが、昇進のための明確なキャリアパスを持つようにする

適切なスキルセットがある人材を雇用するのは簡単ではありませんが、その人材を維持するのはさらに大変です。幸いなことに、DesignOps のプラクティスで、明確なキャリア開発パスの作成によって、こういった課題に取り組むことができます。デザインプロセスが成熟するにつれて、例えばチームはデザイナーが新しいスキルを習得できるような、より専門的な役割を特徴とすることができる、その一方で、より経験豊富な人材は、より上級の役割に昇進する機会を得ることができます。

6. デザイナーに連携を促す

ペアプログラミングは、バグやエラーを減らす方法としてデベロッパーの間で頻繁に使われていますが、DesignOps では、デザイナーはデザイン作業の効率を上げるために似たようなモデルを採用することができます。

そんなペアデザインのモデルを以下に３つ挙げてみましょう。

（１）ジェネレーターとシンセサイザー

このモデルでは、２人のデザイナーがペアを組み、できるだけ多くのデザインを生み出そうとして、それと同時に、その評価や統合をして、最良のものを生み出します。１人のデザイナー、すなわち「ナビゲーター」は、ブレーンストームとアイデア出しに専念し、もう一人のデザイナーは「シンセサイザー」として、そのデザインの検証のために分析して質問を投げかけます。このアプローチで、２人のデザイナーがアイデアを出し合い、それらを効果的に評価することができます。

（２）分野横断的なペアリング

この方法は、さまざまな分野を専門とする製品開発チームのメンバーに適しており、デザイナーでも非デザイナーでも使えます。例えば、極めて専門性の高い分野のデザインを行う場合、デザイナーは、デザインに貴重なインサイトを与えてくれる分野の専門家とペアを組むことができます。

また、デザイナーは、フロントエンドエンジニアとペアを組むこともできます。このようなクロスファンクショナルなチームでの演習で、デザイナーはワイヤーフレームではなく、実際にコード化された UIを試す機会が得られます。

（３）ペアスケッチ

デザイナーは「ペアスケッチ」という手法を使って、一緒にワイヤーフレームを作成することができます。このモデルでは、片方のデザイナーがナビゲーターの役割を担ってコンセプトを説明し、もう片方がそれに従ってスケッチを作成します。次に、２人は役割を交代し、同じプロセスを繰り返します。

7. デザインチームに明確な目標を設定する

会社やプロジェクトの目標を明確に伝えることは、デザインチームにとって大きな動機づけとなります。なんといっても、それで自分たちの貢献の意義を理解することができますからね。

OKR（目標と主要業績）は、より大きな、チーム横断的な目的意識を達成する１つの方法として挙げられます。

個々の（つまり、従業員ごとの）OKR で、デザイナーが、自分の仕事の目標が、より大きなデザインパズルの要素として、どのように当てはまるかを把握することができます。その結果、自分の仕事がプロジェクト全体の成果にどのように貢献しているかがわかります。

とはいえ、目標の達成状況を測ることも重要です。例えばチーム内の進捗状況を表示するメトリクスダッシュボードで、チームメンバーのモチベーションが維持され、どこで遅れをとっているかがわかります。

8. チーム横断的な情報共有システムを構築する

サイロを取り除くことは、おそらく、DesignOps 戦略の一環として情報共有システムを構築する最も重要な理由です。 その重要性を説明するために、もう一度 DevOps（ソフトウェア開発オペレーション）の世界からのアナロジーを参照してみましょう。

Samanage社 の マイケル・マジャール 氏は、「サイロの中では、開発チームは責められることを恐れてソフトウェアのバグをオペレーションに報告しない可能性があり、正直でオープンな情報共有システムがなければ、ワークフローが遅れるだけでなく、誤報の可能性も上がります。」と言っています

同じことがデザインチーム内でも起こる可能性があり、デザインチームは、進行中の状況を他のメンバーに知らせないかもしれません。例えば、ユーザビリティの不具合に遭遇した場合、デベロッパー、デザイナー、運用担当者は全員集まって、例えば以下のようなことについて話し合うべきです：

• 金銭的な損失の有無
• 全体的な UX への影響
• ユーザー離れのリスクの有無
• 修正にかかる時間と費用

チーム横断的な明確な情報伝達システムで、エンドユーザーへの影響を最小限に抑えながら、積極的に問題を特定して修正することができます。

9. 共有語彙の作成を検討する

一般的なコンテンツマーケティングチームには、編集ガイドラインがあり、それに従って効果的なコミュニケーションを行い、正しいコミュニケーションのスタンダードを保つことができます。同様に、デザインチームもガイドラインと共通のデザイン言語を取り入れて、全プロジェクトで一貫性が保たれるべきです。

一例として、Airbnb では DLS（デザイン・ランゲージ・システム）が採用されており、これは、きちんと確立された原則とパターンに準拠した一連のコンポーネントで構成されています。DLS によって、全従業員が組織内の全部署で理解できる共通の語彙を使用できるようになり、それによって、曖昧さや矛盾が排除されながら、コミュニケーションの質が大幅に上がります。

UXPin Merge で DesignOps を拡張しよう

顧客が求めるものが厳しくなったり、新製品の発売が早まったり、製品ライフサイクルが短くなるなど、今日の企業が直面する課題はどんどん増えています。このような課題に取り組む方法の１つとして、DesignOps の導入が挙げられ、それでデザインワークフローの改善だけでなく、デザイナーが最も得意とするデジタル製品のデザインに集中できるようになります。

これにより、顧客のニーズに完璧に対応し、直感的な使用が可能な製品やサービスを構築することができ、ユーザー体験にプラスの影響がもたらされます。デザイナーとソフトウェアエンジニアの連携がスムーズになり、デザインワークフローが改善されるツールとして、ぜひ UXPin Merge をご検討ください。

アプリのデザインは最高に複雑なので、よりシンプルになるなら何でもウェルカムです。そこで React の出番です。React とは何でしょうか？React は、UI（ユーザーインターフェース）の作りやすくするために設計された JavaScript のコードとコンポーネントのライブラリであり、オープンソースのフレームワークとして、Paypal、Netflix などの今日の市場における最大手のアプリの作成に使われています。

このフレームワークが広く使われている理由はいくつもありますが、おそらく最大の理由は宣言的なビューの提供でしょう。新しい情報が入ると即座に更新されるインタラクティブなアプリを作ることができます。データがアプリに届くとすぐに更新され、例えば Facebook のコメントでも、画面を更新することなく、新しいコメントが出てくるのを見ることができます。

美しくインタラクティブな React アプリのレイアウトを８.６倍速く構築しませんか。ドラッグ＆ドロップの UI ビルダーを使って、コードに裏付けされたコンポーネントで React アプリの一貫したデザインを作成しましょう。UXPin Merge をぜひ無料でお試しください。

React とは

Reactは、UI（ユーザーインターフェース）の構築向けの、広く使われている JavaScript のライブラリですが、数ある JavaScript ライブラリのひとつに過ぎません。他には Angular、Vue、Svelte がありますが、三者を比較した過去記事があります。

React は、デベロッパーが UI を再利用可能なコンポーネントに分解することを奨励しています。コンポーネントは UI の自己完結的な単位であり、それを組み合わせて複雑なインターフェースを構築することができます。そしてこのモジュラーアプローチは、再利用性、保守性、拡張性を促進します。

これは、実際のDOMの軽量な表現である仮想DOMの概念を導入したものです。React コンポーネントの状態が変更されると、React は仮想DOM と以前の状態を比較し、変更された DOM の部分のみを更新します。このアプローチは、DOM の操作と再レンダリングを最小限に抑えることによってパフォーマンスを上げます。

もともと Facebook によって開発された React は、現在 Facebook と Instagram のデベロッパーによって運営されています。そこには外部のデベロッパーも多数参加しており、その結果、非常に多用途で便利なフレームワークが誕生し、ますます多くのアプリ開発者がその使用に興味を持ち始めています。

React はフロントエンドかバックエンドか？

React はフロントエンドと考えられています。一般的には、Web アプリケーションのインタラクティブでダイナミックな UI コンポーネントを作成するために使われますが、React アプリケーションのサーバーサイド・レンダリングを可能にする Next.js のような技術を使えば、React をバックエンドで使うこともでき、フロントエンドとバックエンドの境界線はある程度曖昧になります。とはいえ、全体的には React はフロントエンド開発に関連することが多いです。

React と Vanilla JS 

バニラ JavaScript とは、追加のライブラリやフレームワークを使用しないコアな JavaScript 言語を指し、外部依存に頼ることなく、DOM（Document Object Model）を直接操作して、イベントを処理することができます。

その際、コードをどのように構造化して整理するかを完全にコントロールすることができます。ただ、柔軟性と制御を提供する一方で、複雑な Web アプリケーションをすべてバニラ JavaScript で構築するのは、特に状態の管理や UI の更新のような作業において、時間がかかり面倒くさいことになる可能性があります。

一方 React は、UI 構築のための JavaScript ライブラリであり、特に大規模で複雑なアプリケーションに対して、動的な　UI を構築するための、より構造的で効率的な方法を提供します。

React はフレームワークなのか

React はよくフレームワークと誤解されますが、正確には UI 構築のための JavaScript ライブラリに分類されます。

Angular や Vue.js のようなフレームワークでは通常、ルーティング、ステート管理やその他の機能などの、アプリケーションを構築するためのより包括的な構造を得られます。

一方、React は主にアプリケーションのビューレイヤーに焦点を当てており、それによってデベロッパーは、再利用可能な UI コンポーネントの作成や、ステートの効率的な管理ができます。

React は追加のライブラリやツールで拡張して、よりフレームワークのような機能を提供できますが、その核となる哲学は依然として UI コンポーネントの構築を中心としています。

React の仕組み

ここでは、React がどのように機能するか、ステップ・バイ・ステップで見ていきましょう。まず、React コンポーネントを確定します。コンポーネントはReact アプリケーションの構成要素であり、「クラスベース」のものと「機能コンポーネント」のものがあります。コンポーネントを確定したら、ReactDOM.render()を使って DOM にレンダリングすることができます。この関数は、レンダリングしたいコンポーネントと、それをレンダリングする DOM 要素の2つの引数を取ります。

コンポーネントをレンダリングすると、React はコンポーネントとその子の仮想 DOM 表現を作成します。仮想 DOM は、実際の DOM の軽量なコピーであり、コンポーネントのステートや props が変更されると、React はコンポーネントとその子を再レンダリングします。そして新しい仮想 DOM 表現が作成され、何が変更されたかを判断するために以前のものと比較されます。

React は、実際の DOM の効率的な更新のために、「リコンシリエーション」という処理を実行します。そして新しい 仮想DOM と以前の DOM の差分（または「差分」）を計算し、その差分を実際の DOM に適用します。

また、React は、合成イベントを使ってユーザーとのインタラクションを処理します。イベントハンドラは、ボタンのクリックやフォームの送信など、特定のイベントが発生したときに呼び出される関数であり、Reactは、さまざまなブラウザ間でイベントを処理するための一貫した API を提供します。

React コンポーネントはステートを持つことができ、これは時間とともに変化するデータを表します。そしてコンポーネント内のステートの管理には、useStateフック（機能コンポーネントの場合）または setState メソッド（クラスコンポーネントの場合）を使います。

React コンポーネントにはライフサイクルメソッドがあり、コンポーネントの作成、レンダリング、更新、破棄など、コンポーネントのライフサイクルのさまざまな段階にフックすることができます。その際、ライフサイクルメソッドを使ってて、初期化、クリーンアップ、その他のタスクを実行できます。

React の JSX とは

JSX は、 デベロッパー が HTML のようなコードを書くことができる JavaScript のための構文拡張です。JSX では、HTML のようなマークアップと JavaScript のロジックを組み合わせることで、React での UI コンポーネントの確定がしやすくなり、JSX コードは React コンパイラによって標準の JavaScript に変換されます。

JavaScript がベストな理由

React が JavaScript で書かれていることは知っていますが、なぜそれがそんなに重要なのかというと、JavaScript は世界で最も使われているプログラミング言語のひとつであるからです。実際、970万人のデベロッパーがプログラミングのニーズに JavaScript を使っており、広く普及しているビルド・プラットフォームとして最適な選択となっています。

このプログラミング言語と HTML を組み合わせれば、React に必要なことなら何でも実行させることができます。そして、すでに JavaScript に慣れている人にとっても、これはかなり習得しやすいです。つまり、React に飛び込んですぐにアプリのプログラミングを始められるということは、これまで以上に早く始められるということです。

個々のコンポーネントは単独で編集可能

大抵のプログラミングは、何かひとつを変更されればプログラム全体の変更が必要になることから、アプリの一部分を変更しようとすると多くの問題が発生し、その整理のために大混乱に陥ってしまいます。一方 React では、そのようなことはなく、ダウンフロー型のプログラミング手法なので、何かが変更されても、その上流にあるものには影響を与えません。

また、コンポーネントは、他のコンポーネントに影響を与えることなく変更や編集ができ、それによって作業スピードが飛躍的に上がります。ひとつの変更に合わせて全部のコードを調整する必要がなくなり、不具合の修正や、アプリの定期的なメンテナンスを行ったりする場合、コンポーネントが分かれているため、プロセス全体が速くなります。

JavaScript ライブラリは複数のソースから入手可能

React はオープンソースであるため、多くのデベロッパーがより良いものにしようと取り組んでいます。JavaScript のライブラリには、さまざまな機能に使えるコードが用意されており、そのライブラリには、さまざまな機能のためにあらかじめ書かれたコードがたくさんあり、それを手に入れるだけで使うことができます。

既存のコードが使えるなら、最も基本的な関数をコーディングする理由はなく、それでプロセス全体のスピードが上がり、イライラも減ります。

誰でもいつかは似たようなコードが必要になるのだから、都度いちいち作ったりとか面倒くさくするのではなく、より賢く作業することを心がけましょう。

仮想DOM で情報の読み込みが速くなる

通常、アプリや Web サイトは HTML を使って DOM（ドキュメント・オブジェクト・モデル）を更新します。これは長い間唯一の方法であり、機能的ではありますが、サイトの利用者が増えてくると、それに伴ってますます時間がかかるようになります。サイトの利用者が増えれば増えるほど、ページの更新はより複雑になるのですが、以前は、コメントやその他の即座に更新する必要があるデータを更新するには、この方法しかありませんでした。

仮想DOM は実際の DOM をコピーするだけで、ReactJS を使って即座に更新でき、ページ全体を再読み込みする代わりに、変更される情報だけを読み込みます。つまり、ページやアプリ全体の動作が格段に速くなるということです。これはちょっとした機能なので、１人か２人にとっては大きな違いはないかもしれませんが、大勢の人が同じページを使うのであれば、その差は驚くほど大きくなります。

React で、アプリやサイトの作成だけでなく、そのアプリの日常的な機能の全プロセスが劇的に速くなりました。デベロッパーは、プロトタイプアプリの作成のスピードを上げるだけでなく、フルアプリを半分の時間で立ち上げて実行することもできます。これはコードを再利用できるおかげですね。そしてアプリやサイトが公開されると、仮想 DOM のおかげで、UI の UX（ユーザーエクスペリエンス）上がります。

React にはどれくらいの Javascript が必要か

React は JavaScript に大きく依存しており、React の効果的な使用には、JavaScript の基礎についてしっかりとした理解が必要です。また、React で作業する際によく遭遇し、使うことになる JavaScript の概念には、以下のようなものがあります：

• 変数とデータ型： 変数の宣言方法 (let, const, var) とさまざまなデータ型（文字列、数値、ブーリアンなど）の理解が非常に重要。
• 関数： 関数の確定と呼び出し方を理解し、アロー関数や関数式などの概念も理解する。
• オブジェクトと配列：オブジェクトと配列は、JavaScrip tの基本的なデータ構造であり、React コンポーネントでステートとプロップを管理する際に、頻繁に使われる。
• ES6 の機能： React は、アロー関数、クラス、デストラクチャリング、スプレッド/レスト演算子、テンプレート・リテラルなどの ES6 機能を活用しており、このような機能を使いこなすことで、React のコードはよりすっきりと簡潔になる。
• スコープとクロージャ：JavaScript でのスコープとクロージャの仕組みを理解するのは、React でのステートの管理や、非同期操作の処理の上で非常に重要。
• 非同期 JavaScript： React アプリケーションは API とのやり取りや、データの取得などの非同期処理の実行が多いため、Promises、async/await、エラー処理などの扱い方を知っておくことは重要。
• DOM操作： React は直接的な DOM 操作の多くを抽象化しているが、DOM の基本的な理解とJavaScript での操作方法を理解しておくと、特定のタスクに役立つことがある。
• イベントハンドリング： React アプリケーションは、イベント処理によってユーザーとのインタラクションに反応する。JavaScript においてイベントリスナーを付ける方法やイベントを処理する方法を知っておくことが必要。
• 条件付きレンダリングとループ： Reactでは、UI要素を動的に生成するために、条件付きレンダリングとデータのループ処理ができ、それには、JavaScript の条件文 (if, else) とループ (for, while, forEach, etc.) の理解が非常に重要。
• モジュールシステム： React アプリケーションは通常、モジュール方式で構築されており、import and export statements 文などの JavaScript のモジュールを理解するのは、コードベースの整理や管理の上で重要。

React は、コンポーネントを構築し、ステートを管理するための独自の構文と機能（JSX、フック、コンテキストなど）を提供しますが、React を効果的に使ってダイナミックでインタラクティブな UI を構築するには、JavaScript をきちんと理解することが重要です。

React のための Javascript のコンセプトとは

React 開発で特に関連性が高く、よく使われるJavaScriptの概念には、以下のようなものがあります：

• 変数とデータ型： 変数の宣言方法（let、const、var）とさまざまなデータ型（文字列、数値、ブーリアン、オブジェクト、配列）を理解することは、Reactコンポーネントでの作業や、ステートの管理のための基本である。
• 関数とアロー関数： React では、コンポーネントの動作を確定するために、関数の確定と呼び出し方を知ることが非常に重要である。また、アロー関数は、コンポーネント内のイベントハンドラやコールバック関数を確定するために一般的に使用される。
• オブジェクトと配列： React では、データの保存と操作にオブジェクトと配列が頻繁に使用され、オブジェクトと配列の扱い方を理解することは、コンポーネントのステートとプロップを管理する上で不可欠。
• ES6の機能： React は、アロー関数、クラス、デストラクチャリング、スプレッド/レスト演算子、テンプレート・リテラルなどの ES6 機能を多く活用しており、これらの機能を使いこなすことで、React のコードはよりすっきりと簡潔になる。
• スコープとクロージャ：JavaScript でスコープとクロージャの仕組みを理解するのは、React コンポーネントでのステートの管理や、非同期操作の処理のために重要。
• 非同期 JavaScript： React アプリケーションは API とやり取りしたり、データの取得などの非同期処理を行うことが多いため、Promises、async/await、エラー処理などの扱い方を知っておくことは重要。
• イベントハンドリング： React アプリケーションは、イベント処理によってユーザーとのインタラクションに反応する。JavaScript においてイベントリスナーを付ける方法やイベントを処理する方法を知っておくことが必要。
• 条件付きレンダリングとループ： Reactでは、UI要素を動的に生成するために、条件付きレンダリングとデータのループ処理ができ、それには、JavaScript の条件文 (if, else) とループ(for, while, forEach, など.) を理解することが非常に重要。
• モジュール・システム： React アプリケーションは通常、モジュール方式で構築され、JavaScript のモジュール（import文 や export文など）を理解することは、コードベースの整理や管理の上で重要。
• DOM操作： React は直接的な DOM 操作の多くを抽象化しているが、DOM の基本的な理解と JavaScript での操作方法を理解しておくと、特定のタスクに役立つことがある。
• コールバックと高階関数： React では、コールバックと高階関数を頻繁に使用して、コンポーネント間でデータを渡したり、非同期操作を処理したりする。なのでコールバックと高階関数の扱い方を理解することは、React アプリケーションを構築する上で重要。

このような JavaScript の概念は、React の効果的な使用や、ダイナミックでインタラクティブな UI の構築のための基盤となり、この概念に精通することで、React 開発に習熟できるようになります。

React を学ぶのにかかる時間

おおよその目安としては、Web 開発の基礎にある程度慣れているとして、基本的な習熟には１ヶ月から３ヶ月の学習期間が必要であり、より深い専門知識を身につけるには、さらに数ヶ月かかるでしょう。

HTML、CSS、特に JavaScript の基礎がしっかりしていれば、React の基本をより早く習得できます。React はJ avaScript ライブラリなので、JavaScript は特に重要であり、プロジェクトを作って練習すればするほど、React機能をよりよく理解して使いこなせるようになります。知識を定着させるには、実践的な応用が鍵となります。

アプリ向けの React フロントエンドを作成する必要がある場合、UXPin Merge のようなプロトタイピングツールが役にお手伝いできるかもしれません。以下で詳しく見ていきましょう。

React のコンポーネントを使ってデザインできるか

はい、Reactコンポーネントでデザインできますが、適切なツールが必要です。その１つに、React コンポーネントで UI を作成するための UI ビルダー技術である UXPin Merge があり、そのコンポーネントは、MUI、Ant design などの広く使われているオープンソースライブラリから提供されています。

UXPin Merge は、コード バックアップされた React コンポーネントで React アプリのプロトタイプを作成できる唯一のデザイン テクノロジーです。Figma（Figma による React の使用方法を参照）などの他のデザイン ツールでは、React コンポーネントの視覚的な表現しか使用しませんが、UXPin は、ビジュアルレイヤーとコードレイヤーの両方を使います。UXPin の無料お試しにサインアップして、この技術をぜひご体験ください 。

多くの開発者はJavaScriptの使用経験があることから、Reactアプリの構築を初めて行う場合でも、比較的に短時間で行うことができるのではないのでしょうか。そこで、これら２つの関連性、初めて React アプリを作るために必要なもの、そして React を使う練習として使えるヒントをご紹介していきます。

主なポイント：

• CSS と JS がわかる開発者の方が、初めてでもReactアプリを作りやすい。
• React は人気であることから、ビギナー向けに React アプリを作るための役立つリソースが多い。
• UXPin Merge のテクノロジーを使って、React アプリのプロトタイプの作成およびテストができる。

UXPin Mergeテクノロジーで React アプリ第１号を効率よく構築しませんか？

Reactコンポーネントを UXPinのデザインエディタにインポートし、高度なインタラクションを追加してみて、実際のアプリと同じように機能するプロトタイプをつくってみましょう。

UXPin Merge へのアクセスのリクエストはこちら。

CSS と JS で React アプリ第１号を作る

CSS と JS がわかると仮定すると、React アプリガイドの理解や、初めてアプリを作るために必要なスキルの多くをすでに身に付けているといえるでしょう。最初は戸惑うかもしれませんが、これを何日か継続してみてください。

また、こちらの「React の流儀」をオススメします。多くの開発者から、紹介されている ５ステップのチュートリアルが非常に役立つと評判があります。

初めてのアプリ構築に React を使う最大の理由

JavaScript を使ってアプリを作るのが好きな初級開発者なら、なぜこんなにも同じ分野の人たちがReact に熱中するのか不思議に思うかもしれませんね。

しかしながら、その理由は、複雑な機能を実行するアプリケーションの構築が必要なキャリアのある段階に達するとわかるでしょう。

そして JavaScript は、今日のアプリ開発者のニーズに対応していないため、ある時点で非常に厄介なものになります。

そこで、以下のような理由から、React アプリを作るべきです：

• 再利用可能なコンポーネントを提供することで、長い目で見たら時間の節約になる。
• DOM の落とし穴を回避。
• ツールやアドバイスを惜しみなく提供する開発者たちの強固なコミュニティがある。
• React アプリが急速に業界標準になりつつある。

React を使ったビルドを学ぶと、数多くのデザインパターンにもアクセスできるようになります。

また、最初に学ぶべきおすすめのパターンには、以下のようなものがあります：

• ステートレスなコンポーネント
• 条件付きレンダリング
• レンダープロップ
• 制御コンポーネント
• React フック

React のデザインパターンについてのより深い理解に向けて、「知っておきたいReactの デザインパターン【２０２３年版】」の記事をぜひお読みください。

React と JavaScript の違い

React と JS には共通点があるものの、React を使いこなすには超えるべきハードルがいくつか出てきます。

最も顕著な違いには、以下のようなものがあります：

違い１：UIの構築法

JavaScript では、HTMLドキュメントの中にインターフェースを作成し、そのコードはサーバーに送られますが、Reactでは、ブラウザでUIを確定します。

最初は、こんな短いHTMLを追加するのは不自然に思われますが、現実的には、同じ結果が得られます。React はブラウザ内で動作し、JS はサーバーの助けが必要だという点が違いますね。

違い２：アプリ間の機能分割の方法

開発者が JavaScriptを使う方法は非常に複雑になり、JSの コードが耐えられないほど複雑に見えることがよくあります。その結果、同じアプリで作業している間に、多くのファイルを開き続けることになります。

対するReact は、機能をコンポーネントに分割することで、プロジェクトがより管理しやすくなります。

各コンポーネントには、そのコンポーネントが実行しなければいけないコードがすべて格納されており、その結果、ごちゃごちゃしたライブラリではなく、短いリストのようなコードが得られます。

違い３：アプリがユーザーデータを管理する方法

JS の場合、例えば、テキストフィールドに名前を入力すると、その情報はサーバーに転送される前に DOM に移動するといったように、ユーザーから送信されたデータは、ブラウザが扱う DOM（ドキュメントを物として扱うモデル）に格納されます。

一方 React は、ユーザーデータは変数として保存されます。ユーザーの視点からは、何も大きく変わることはありませんが、バックエンドでは、データの管理がはるかに簡単になります。

React アプリ第１号を作るのに他に必要なもの

JavaScript、CSS、HTML の経験があれば、もう React を使えるようなものです。ただし、Reactを使って何かを作る前に以下のインストールが必要です：

• Node.js：オープンソースの実行環境で、開発者はサーバーサイドで JavaScriptコードを実行できる。
• PowerShell：スクリプティングと自動化のフレームワークで、ユーザーはWindows 環境におけるさまざまなタスクの管理と自動化が可能。
• npm：再利用可能なコードモジュールやライブラリの管理および配布プロセスをシンプルにするパッケージマネージャ。
• React アプリの作成：利用可能なコーディング環境はこれだけではないが、おそらくこれがベストな選択である。

初めての React プロジェクトにツールチェーンは必要ないかもしれませんが、以下のようなオプションはチェックしておいて損はないと思います：

• Nx
• Gatsby
• Parcel
• Razzle
• Neutrino

このような開発ツールキットはどれも便利です。使わないといけないということはありませんが、これで作業が楽になるでしょうから使うべきです。

React アプリ第１号を作る前の練習

JavaScript でどれだけ多くのアプリを作ったことがあっても、React でアプリを作るには、まずは React アプリガイド以上のものが必要です。ちなみに W3Schools には、簡単なアプリケーションの作り方を教えてくれる入門書があります。

また、以下でより多くの経験を積むことができます：

• React の構文を使った ◯✕ゲームの作成
• CodePen、CodeSandbox、Stackblitz のようなサンドボックスでの実験
• React.jsコンポーネント用の UXPin Mergeでライブラリの作成
• Codecademy のコースの受講（コースには費用がかかるが、多くの公共図書館システムに、利用者が無料でアクセスできるメンバーシップがある）

UXPin で React アプリのプロトタイプを作成およびテストする

UXPin を使うと、React アプリのプロトタイプの作成およびテストが簡単です。例えば、「JSXプリセットのオーサリングと管理」で、UXPin でのコードのテストがいかに簡単かをご覧ください。UXPin Editorのキャンバスにコンポーネントをドロップするだけで、意図したとおりに機能・動作するかをみることができます。

また、UXPin Merge を使えば、React.jsでコーディングされたコンポーネントを Git レポジトリから UXPin Editor にインポートして同期させることができるので、さらに一歩進んで、React を使ってデザイン全体を構築することができます。

要するに、React でコーディングできるものは何でも、プロトタイプで見せることができます。また、デザイン部門と緊密に連携すれば、ハンドオフのプロセスが短縮され、コミュニケーションのプロセスでの摩擦がなくなるので、非常に有益です。

アプリ開発経験の有無にかかわらず、UXPinがお手伝いします。クラウドベースのツールのコラボレーション機能を使って、周りとアイデアを共有しましょう。

UXPin アカウントがなくても、あなたのプロジェクトを閲覧し、フィードバックを残すことができます。正しいリンクさえあれば、プロトタイプにアクセスできますからね。

また、UXPinを使って、コードに取り掛かる前にアイデアを検討することもできます。ビルトインライブラリを使うことで、簡単に機能をテストでき、気に入った機能があれば製品に合った微調整を加えた独自のバージョンを作成することもできます。

単なるフラットなシンボルではなく、すでに制作可能でインタラクティブなライブコーディングされたコンポーネントでデザインしましょう。UXPin Merge へのアクセスリクエストはこちら。