Reactってなに？開発されたアプリや特徴を紹介

Reactを学ぶにあたって、そもそも「Reactとは何か」について把握しておきましょう。
今回の記事では、これからReactを学んでいく方へ向けて、Reactでなにができるのか簡単に紹介していきます。

Reactとは

ひとことで言えば、「UIを構築するためのJavaScriptライブラリ」です。

UIとは「ユーザーインターフェース」の略称であり、私たちが普段利用しているWebアプリケーションやシステムの画面のことです。 ここでは、HTML, CSS, JavaScriptで構成している見た目の部分（フロントエンド）を指します。

Facebook（現在のMeta）社が2011年に開発してFacebookやInstagramで使用されたのち、2013年にはオープンソース化され、一般に使われるようになりました。

React

そんなReactを、アプリケーションの「ユーザー」「開発者」「業界」の３つの視点から紹介していきたいと思います。

【ユーザー視点】なぜReactが必要なのか？

SPA（シングルページアプリケーション）による、高速で快適なUX

SPAはその名の通り、単一のWebページ（1つのHTMLファイル）で構成するアプリケーションです。その最大の利点は、表示を高速化し快適なユーザー体験（UX）を届けられることにあります。

そこで、SPAを実現できるReactのようなJavaScriptライブラリが世界的に注目されています。

【開発者視点】なぜReactが選ばれるのか？

次に、実際にReactでアプリケーションを開発していく目線で考えてみましょう。大きく分けて3つの特徴があります。

1. 画面へのデータの反映が簡単になる
2. UIが分かりやすいコーディング
3. 大規模開発でも管理しやすい

1. 画面へのデータの反映が簡単になる（仮想DOM）

Reactではデータが変更されると、変更された部分だけを効率的に更新します。これを実現するのが「仮想DOM（Vertual DOM）」という技術です。

まず、DOM（Document Object Model, ドム）とは、JavaScriptでHTMLなどのドキュメントを操作するための仕組みであり、その仕組みによって表現されたドキュメントの要素の集合です。仮想DOMというのは、実際のDOMの軽量なコピーと考えるとわかりやすいです。

データが変更されると、Reactはまず仮想DOMに対して変更を適用します。次に、新しい仮想DOMと以前の仮想DOMとを比較して、実際に変更が必要な部分だけを特定します。最後に、この変更を実際のDOMに適用することでUIを更新します。この手法により、パフォーマンスが向上し、ユーザー体験が改善されます。

2. UIが分かりやすいコーディング（JSX）

Reactコンポーネントでは、「JSX（JavaScript XML）」というJavaScriptの拡張言語を使用します。

JSXでは、JavaScriptの中にHTMLのような記述をすることができます。これにより、視覚的にも分かりやすくコーディングを進めることが可能になります。

サンプルコード（HTML, JavaScript）

<div>
  <h1>
    Hello, <span id="js_name"></span>!
  </h1>
</div>

const name = document.getElementById("js_name");
name.innerHTML = "Jordan";

サンプルコード（React）

const Sample = () => {
  let name = "Jordan";
  return (
    <div>
      <h1>Hello, {name}!</h1>
    </div>
  );
};

「HTMLとJavaScriptを合体させたような見た目をしているな」という理解ができればOKです！

JavaScriptによる開発には、以下のような課題があります。

• DOMをセレクタで指定して書くため、コードが長くなってしまう
• JavaScriptファイルの変更に合わせて、HTMLファイルでもidやclassを追加する必要がある

しかし、JSXによる記述方法はそれらを解消し、コードをより簡潔にすることが可能です。

3. 大規模開発でも管理しやすい（コンポーネント）

Reactアプリケーションはページではなく、「コンポーネント」で構成されます。

前項で触れたJSXでは、もちろんHTMLのような見た目だけではなくJavaScriptのコードも記述できました。つまり、ReactコンポーネントはUIとプログラムがひとまとめになったパーツなのです。

これにより、今まではページごとに何度も書いていた共通のヘッダーやボタンを1つ書き換えれば、すべての場所に反映されるのです。

Reactアプリケーションはページではなく、コンポーネントで構成されるため、パーツの追加や修正が簡単になり、大規模開発でも管理がしやすくなります。

また、コンポーネントごとにまとめることで、「このファイルはどんな役割があるのか（どのようなUIの部品で、どのようなプログラムなのか）」が明確になり、コード全体の見通しが良くなります。

【業界視点】Reactの普及とその結果

Reactのシェア拡大

現在、世界中のWeb開発現場で最も多く利用されているフロントエンドフレームワークになっています。（「State of JavaScript 2023」より）

Reactのフレームワークの発展

登場から10年以上が経ち、Reactはさらに拡張され、幅広い場面で使用されるようになっています。

サーバー機能やURLルーティングもサポートする、ReactのWebフレームワーク「Next.js」や、Reactの原則を活用しながらiOSとAndroidの両方のプラットフォームでネイティブアプリケーションを構築する、モバイルフレームワーク「React Native」といった広がりを見せています。

Next.js by Vercel - The React Framework

React Native · Learn once, write anywhere

開発チームが掲げる "Learn Once, Write Anywhere"（一度学習すれば、どこでも使える）というメッセージの通り、Reactを学ぶことで、そのスキルを様々なシチュエーションに活かすことが可能になります。

Reactが使用されているWebサービスの例（2024年7月時点）

フロントエンド開発にReactが用いられている、身の回りのWebサービスをいくつかご紹介します。 これらのサービスを真似たアプリを開発するための教材も多く存在しますので、今後の開発の参考にするのもよいでしょう。

まとめ

技術、特にフロントエンドは移り変わりが激しいです。

こちらは、Yahoo! JAPANが2019年10月にReactで刷新したという記事です。

Yahoo! JAPAN トップページを Atomic Design と React・Redux・TypeScript で作り変えたお話

前項で紹介したサービスもいつか新しい技術を使うかもしれませんし、ほかにも著名なサービスがReactを採用するかもしれません。使用率の高まりは新規サービスの開発によるものだけでなく、このように既存サービスの刷新にも活用されている背景に裏付けされています。

この記事では、Reactの概要や使用されているサービス、選ばれている理由についてご紹介してきました。

• ユーザー視点、開発者視点それぞれで需要のあるReactを扱えるようになる
• 技術の移り変わりにも対応できるように「JavaScriptライブラリの学び方」を身につける

という二軸を持ちながら、Reactを学習していきましょう。

\ 学んだことをSNSでシェアしよう /

facebook

X

LINE

ハテブ

Pocket

URL
copy

コピー