- CODING FACTORY TOPICS
- Vol.115 2018年05月号
コーディングファクトリーの海外制作拠点であるモノサスタイランドでは月に一度、制作チーム内の技術共有のために“CODER PARTY”と称したミーティングを行なっています。今回は、その中で話題にあがった「React」について取り上げます。
「React」という技術が何か、すでに知っている方もいらっしゃることでしょう。今回はReactを使うメリットについてご紹介したいと思います。
本題に入る前に、現在の私達の日常生活におけるテクノロジーの利用について考えてみましょう。
朝起きてすぐ、今日どんな事が起きているのか情報を得ようと思う人は少なくないでしょう。一番簡単な方法は、スマホでFacebookなどのSNSを起動し、友達が投稿した情報やニュース、興味を持った記事などを見ることですよね。昼になり、外出先でお腹がすいて、やむを得ず初めての店に入るという場合にも、スマホでその店を検索し情報やレビューを読んで入るか決めるでしょう。
このような行動から何がわかるでしょうか？
その答えは、「私達の身の周りにはたくさんの情報が流れている」ということです。では、この毎秒ごとに切り替わっていると言ってもよいほど膨大な情報を見るために、裏側でどのような技術が使われているか疑問に思ったことがありますか？
これには、幾つかの答えがあります。その1つが「React」なのです。では、Angular JS、Vue JS、Polymer JS、jQueryなど他にも技術の選択肢がある中で、なぜ「React」なのでしょうか？
jQueryを使ったことがある人ならば、jQueryで1,000セットのデータをその分出力するのがどれほど困難か想像できると思います。jQueryの場合、1,000セット分の表示要素を生成する仕組みなので、制作は難しくなくても、サイトのパフォーマンスには悪影響を及ぼします。結果的にサイトが固まってしまう現象が起きる可能性も高くなるのです。
一方、Reactは表示要素を1セットだけ生成し、その後「Visual DOM」というテクノロジーを利用して「Data Flow」の仕組みに任せます。
「Visual DOM」とは何か？簡単な例でたとえてみましょう。ある人が1週間、毎日違う色のTシャツを着るとします。そのとき、着る人間を7人用意してそれぞれがTシャツを着るのではなく、その人が毎日Tシャツを着替えますよね。この色の違う7枚のTシャツが「Data Flow」にあたります。実際にはData Flowの多くはAPIの形で存在します。
それでは、Reactのメリットを見ていきましょう。
① 再利用性
ReactはUI/UXを管理するもので、開発者とデザイナーの味方です。コーディングが難しいデザインの場合、ソースコードも長く複雑になりがちで、調整も困難です。例えば下記の【図1】のような商品一覧を、Reactでは3つの要素ではなく1つの要素「Component」として考えます。Componentを1つ作って何回も使い回す。つまり、デザイン（レイアウト）はそのままで、画像・文言・価格のデータだけを変えられるのです。レイアウトを調整する際も、3つとも修正する必要がなく、一括で済むので簡単です。
② コミュニティの広さ
Reactは既に世界中で使われています。今後も世界中の開発者がどんどんライブラリを開発して公開するでしょう。そうなると全て自分で一から制作する必要もなく、ライブラリを利用して制作することができます。
③ 他のプラットフォームへの拡張性
Reactには、モバイルアプリやデスクトップアプリやゲームなどの、制作用のネイティブ・アプリケーション「React Native」があります。記述方法については全て同じなので、他のプラットフォーム用の記述方法の習得にもあまり壁を感じないと思います。そのため開発時間とコストの削減に繋がります。
④ 快適なUX
Reactは、読み込みもレスポンスも早くユーザーに親切です。Facebook、Instagram、Airbnb、Uberなどのサイトを見ると分かりますが、情報が凄く多いのに操作は快適ですよね。Reactは、使い回せるcomponentの概念を基に開発された記述方法なので、処理が早くてスムーズなのです。
⑤ 大量のデータの管理に有利
Reactは、jQueryより大量のデータ管理に有利です。jQueryを使用してAjaxでデータ取り込みなど大量のデータを管理したことがあるならば、それがどれほど困難か分かると思います。HTMLマークアップと、表示するデータを管理しなければならないので、上手くソースを記述しないとパフォーマンスが悪くなります。しかしReactの場合、開発者はデータ管理だけ用意し、そのデータをpropsで送信すれば、Reactがその後の処理を行ってくれます。開発もより簡単になり、パフォーマンスも良くなるというメリットがあるのです。
⑥ オープンソース
Reactは、Facebookが開発したものです。これからもどんどん更新されていくでしょう。また、Ver.16以降は、オープンソースになったのでライセンス認証の心配をすることなく利用できます。
以上、今回はReactを使うべき理由を6つご紹介しましたが、他にも多くの技術的なメリットがあるので、私達もぜひ活用していきたいと考えています。
テクノロジーは、人間の習慣の変化に合わせて開発されてきたものです。現在、私達は情報を得るためにサイトやアプリをクリックしたりスワイプしたりするだけではなく、即時にコミュニケーションを取り合うことまで出来るようになりました。
そして、それが当たり前のようにできている裏側で「React」が広く使われているのです。
(執筆 Tae ／翻訳 Fon)
