【デザイナーのためのReact入門】p5.jsと併用してアプリ作成フローもチェックしよう！

Web開発において急速に普及しつつあるReact。現在では、NetflixやAirbnbなどのウェブサイトでも活用されています。今回はReactの特徴や使い方をまとめてみました。

Reactに興味、関心がある方、これから学び始めるIoTデザイナーやUI/UXデザイナーの方は必見です。

Reactとは？

Reactは、Facebookが開発し、2015年からオープンソースコードとして公開したライブラリです。コンポーネントを組み合わせたものがひとまとまりになっているため、保守性の高いアプリケーションを制作できます。

Reactの使い方

Reactを使ったWeb開発では、PropsとStateという2つのオブジェクトが登場します。Propsは、コンポーネントの作成時に親から渡されるオブジェクトで、コンポーネントが画面から取り除かれるまで、不変の値を保持するのに対して、Stateはコンポーネント内で保持されるプライベートなオブジェクトで、可変の変数を保持します。

Reactをインストールしてからの使い方の詳細は、公式サイトの”Hello World“をご参照ください。

Reactの特徴とメリット

1. 応答が早い

Reactの特徴のひとつは、仮想DOMです。実際のDOMではなく、仮のDOMを定義して比較することで高速化を実現しています。

2. コードがシンプル

次に、データ設計によるコードが複雑にならないこと。データが書き換えられた際には、適切なコンポーネントだけを効率的に更新してレンダリングします。これにより、開発者にとってコードをより予測しやすく、さらにデバッグしやすくなります。

3. UI向けライブラリがある

コンポーネント指向をベースにしているので、UIを部品化して管理を行いやすいです。そのため、Angular.jsやBackbone.jsと一緒に使用することが可能です。

なぜデザイナーにReactをおすすめするのか

主な理由はふたつです。ひとつは、ReactがUI制作のためのライブラリであること。数々のコンポーネントがまとまっており、デザイナーにとっては管理しやすく、容易に関連付けられます。

そしてもうひとつは、「デザインシステム」が今後さらに重要視されていくだろうということ。Reactは、デザインシステムにおいてこれから重要なポジションを築いていくでしょう。

Reactでアプリを作る方法

ここからは、実際に簡単なアプリを作る方法を見ていきましょう。

1. フォルダーの構成を設定する

まずフォルダの構成が必要です。はじめから1人ですべて構成するとかなりの時間がかかるため、開発者からアドバイスをもらうといいでしょう。

2. NPMをインストールする

はじめにすべてのフォント、プラグイン、および拡張機能をインストールするのと同じように、アプリフォルダにはさまざまなNPMモジュールをインストールしておく必要があります。

3. p5.jsでアプリをデザインする

デザイナーにとっては、一番の力の見せどころです。

Reactはあらゆるモーションに対応する巨大なライブラリのため、アニメーションやさまざまなインタラクションを組み合わせたクリエイティブなアプリが作れるということを覚えておきましょう。

コードの例は、p5.jsをご覧ください。

4. Reactのコードにデザインを取り込む

<P5Wrapper>を使用すれば、先ほど作成したすべてのjavascriptコーディングを簡単にReactに取り込むことができます。

5. ardunioにつなげる

IoTデバイスからライブデータを取得するには、ポート名の入力が必要です。下の画像の例は、端末のシリアルポートへのパスを見つける方法です。

6. データベースに取り込み、公開する

オープンソースソフトウェアRobomongoを使用して、Arduinoまたはraspberry pie上のライブデータをデータベースに保存し、リアルタイムで公開しましょう。

Robo Mogoは、デザイナーがデータベースを見せるのに役立つといいます。

Reactjs

RoboMongo3T

7. Meteorでホスティングする

もしアプリ作成で行き詰ってしまったら、Javascriptによるアプリ開発を支援するプラットフォーム「Meteor」に頼ってみましょう。「Creating your first app」では12のステップで配信や購読の仕組みを説明してくれています。

まとめ

先述した通り、Reactはさまざまなコンポーネントが組み合わさったオープンソースです。アプリの制作はイチから作る必要がなく、デザインの自由度が高いという特徴を兼ね備えているため、今後使う人はさらに増えていくのではないでしょうか。

あなたもこの機会にぜひReactとp5.jsを使ってみてはいかがですか？

（翻訳：Kelala）