Reactとは？メリット・デメリット基本的な書き方、開発事例を解説
こんにちは。
Webディレクターの安藤です。
以前にモダンなweb技術の解説シリーズとして、Vue.jsの解説をお送りしました。今回はReact.jsについて解説しようと思います。
前回のVue.jsの解説同様、jQueryくらいしか触ったことがないデザイナー、コーダーの方でも大丈夫です！
デモコードを見ながら、特徴とメリットについて紹介していきますので、ぜひこの機会にチェックしてみてください。
●開発リソースの不足にお悩みなら●
＞＞＞Wakka.Inc独自の海外子会社設立サービスがおすすめ！
無料でサービス資料をダウンロードできますのでぜひご覧ください。
Reactとは
Reactとは、Javascriptを用いたView（UI・見た目）に作用するライブラリです。FacebookやInstagramを運営するMeta社（当時Facebook社）が開発し、今ではオープンソースとして世界中で使われています。
ちなみに、Reactをベースに開発されたJavascriptフレームワークがNext.jsです。
Reactでできること
Reactは多くのサービスで採用されており、国内でも需要が高まっています。
下記にて、具体的にReactでできることを紹介します。
| できること | 具体的な内容 |
| Webアプリ・WebサイトのUI開発 | ReactのReact.jsを使用すれば、手軽にWebアプリ・WebサイトのUI開発が可能です。Webページ内で操作が完結できる使いやすさが強みです。 |
| 描画処理の高速化 | 仮想DOMの採用により、処理が速くなります。仮想DOMによってDOM構造をメモリに保存できて、Webページを描画する際には変更点だけ反映させられます。 |
| 洗練されたUIが作れる | Reactは世界で広く活用されているため、洗練されたUIパーツがReactのライブラリに多数用意されています。 |
| VR開発 | Reactには、React360といったツールがあるためWebベースのVRアプリ開発が可能です。 |
Reactは多くの場面において使いやすさや保守性の高さを誇り、世界でも人気が高いライブラリです。
Reactの3つの特徴
Reactが持つ特徴として、公式サイトでは、以下の3つが挙げられています。
ただ、これがちょっとわかりづらいので、噛み砕いて解説していきます。
- 宣言的なView（Declarative）
- コンポーネントベース（Component-Based）
- 一度学習すれば、どこでも使える（Learn Once, Write Anywhere）
宣言的なView（Declarative）
いきなりちょっと馴染みのない言葉がでてきました。
言い換えると、「《こうしたい状態を定義する》だけで実装できる」という感じです。
もう少し順序立てて説明します。
《Declarative》の対義語は《Imperative》になります。これは《命令的・指示的》という意味です。
「従来のJavascriptが命令的であり、それに対しReactは宣言的である」、ということになります。
コンポーネントベース（Component-Based）
Reactでは、部品ごとにコンポーネントとして分けて定義することで、管理やカスタマイズがしやすくなっています。
従来のJavaScriptでは一部を変更したいだけなのに全体に手を入れなければいけなかった面倒な作業が解消され、改修や管理、再利用性を高めることができます。
例えば、公式サイトのチュートリアルにある、こちらのデモをみてみましょう。
https://codepen.io/gaearon/pen/oWWQNa?editors=0010
まず、四角ボタンをSquareというコンポーネントとして定義しています。
class Square extends React.Component {
render() {
return (
<button className="square">
{/* TODO */}
</button>
);
}
}実際の見た目では、Squareは3×3で配置されていますね。
下の記述をみてみましょう。
Squareを中で繰り返すBoardコンポーネントを定義し、
class Board extends React.Component {
render Square(i) {
return <Square />;
}そして、Boardコンポーネントの中に再利用した四角ボタン（Square）を、3×3で配置しています。
render() {
const status = 'Next player: X';
return (
<div>
<div className="status">{status}</div>
<div className="board-row">
{this.renderSquare(0)}
{this.renderSquare(1)}
{this.renderSquare(2)}
</div>
<div className="board-row">
{this.renderSquare(3)}
{this.renderSquare(4)}
{this.renderSquare(5)}
</div>
<div className="board-row">
{this.renderSquare(6)}
{this.renderSquare(7)}
{this.renderSquare(8)}
</div>
</div>
);
}
}このように再利用性を高められるということは、大規模な開発の際には、保守性を高め、開発負担を下げるということにもつながります。
一度学習すれば、どこでも使える（Learn Once, Write Anywhere）
React.jsを学ぶことで、スマホアプリ開発にも使われるフレームワーク「React Native」にも応用ができます。
また、開発の途中から利用されることを想定して作られているため、新しい機能を追加する場合でも、既存のソースコードとの干渉を避けて開発することが可能です。
Reactの基本的な書き方
ここではReactの基本的な書き方を解説します。
JavascriptとReactの書き方の違い
前述のとおり、Reactの特徴は宣言的であること。ひとつひとつ順序立てて記述しなければならないJavascriptとは記述方法が大きく異なります。
そこで、同じ実装を従来のJavascriptとReactの書き方を比較してみてみましょう。
以下は、ブラウザでh1タグで囲った「Hello World!」のテキストを表示する、というデモです。
参考：From JavaScript to React | Learn Next.js
従来のJavaScript
<!— index.html —>
<html>
<body>
<div id=“app”></div>
<script type=“text/javascript”>
// JSが動作する範囲div#appを定義する
const app = document.getElementById(‘app’);
// h1を作る
const header = document.createElement(‘h1’);
// h1の中にいれるテキストを定義する
const headerContent = document.createTextNode(
'Hello World!',
);
// h1の中にテキストをいれる
header.appendChild(headerContent);
// app#devの中に、テキストが入ったh1をいれる
app.appendChild(header);
</script>
</body>
</html>React
<!— index.html —>
<html>
<body>
<div id=“app”></div>
//Reactを読み込む
<script src=“https://unpkg.com/react@17/umd/react.development.js”></script>
<script src=“https://unpkg.com/react-dom@17/umd/react-dom.development.js”></script>
//ReactのJSX記法をブラウザが理解できる記法に変換する"Babel"を読み込む
<script src=“https://unpkg.com/@babel/standalone/babel.min.js”></script>
//JSX記法でReactの記述
<script type=“text/jsx”>
//Reactが動作する範囲dev#appを定義する
const app = document.getElementById(‘app’);
//dev#appの中にh1で囲ったテキストをいれる
ReactDOM.render(<h1>Hello World!</h1>, app);
</script>
</body>
</html>いかがでしょうか。
従来のJavascriptでは、一つ一つ順序立てて記述しなければなりません。これが《命令的・指示的》ということになります。
対してReactでは、動作そのものの記述はたった2行です。
1行目の動作する範囲の指定は、従来のJavascriptと変わりませんが、
2行目の状態を定義する記述だけで、実装は完結しています。
このデモはシンプルなので、従来のJavaScriptの記述でも理解できる範疇ですが、実際の開発はもっと複雑です。
そうなると、
- 長文化して他人が理解しづらくなる
- 実装・テスト工数が増える
- 後からの変更が大変
というデメリットが想像できるかと思います。
対してReactの記述はシンプルになり、従来のJavaScriptにおける上記のデメリットが大幅に改善できます。
Reactを導入するメリット
Reactを導入する具体的なメリットは下記の6つです。
- 導入コストがかからない
- 仮想DOMにより、差分のみをレンダリングするから高速
- SPA開発ができる
- 規模が大きい開発ほど、再利用性・開発効率が向上できる
- 応用の幅が広い
- JavaScriptの知識で開発が可能
順番に解説します。
導入コストがかからない
Reactは導入コストがかからない点も大きな魅力です。
Reactはオープンソースとして公開されているため、コストをかけず手軽に導入できます。
Meta社による定期的なアップデートもあるため、常に新しい状態で使えてセキュリティ面でも安心感があります。
導入の手軽さや、品質の良さから今後も需要は高まっていくでしょう。
仮想DOMにより、差分のみをレンダリングするから高速
ReactもVue.jsと同様に仮想DOMを使って動く仕組みです。
仮想DOMは、《DOMをJavascriptの要素として扱い、管理するもの》です。
DOMとは、《JavascriptでHTML・CSSの状態を操作し、ブラウザに描画する仕組み》です。
仮想DOMはDOMの仮想版ですから、実際に描画まではしません。
ユーザーが画面操作を行うと、Reactは変更前・変更後の2つの仮想DOMを用意して比較し、変更した差分のみを実際のDOMに渡して反映します。
そのため、ブラウザの描画は差分のみで済むのでパフォーマンスが向上、高速化することができるというわけです。
SPA開発ができる
仮想DOMを駆使することで、SPA（＝シングル・ページ・アプリケーション）開発が可能です。
シングル・ページ・アプリケーションとは、同じURLのままで、他のページに遷移しているような画面表示を提供する技術です。
従来はコンテンツを切り替える際に都度サーバーがHTMLをブラウザに返していましたが、SPAの場合は初回のページ表示地のみで、以降のコンテンツの切り替えは、仮想DOMを駆使することで、差分のデータだけを反映します。
規模が大きい開発ほど、再利用性・開発効率が向上できる
先程の特徴でも触れた通り、Reactはコンポーネントベースで開発されています。
従来では、同じようなパーツを複数のページに実装する場合、何度も同じ記述を書かなければなりませんでしたが、既存のコンポーネントを使い回すことで、再利用性、開発効率を高めることができます。
小規模な開発ではコンポーネントを利用しなくても大きな差は出ないかもしれませんが、規模が大きい開発ではコンポーネントを利用しないと複雑化し、実装・テスト工数が増えてしまいます。
またReactの特徴である宣言的な書き方は、従来のJavascriptの書き方より記述が短くて済み、どのような動きをするのかが理解しやすいため、規模が大きい開発ほど、開発効率の向上に一役買ってくれるでしょう。
応用の幅が広い
Reactを学習すれば、スマホアプリ開発にも使われるフレームワーク「React Native」にも応用ができますし、Reactは世界でシェアの多いライブラリなので、それ以外でもNext.jsを筆頭に、さまざまなフレームワークを利用できるようになります。
その点では、Vue.jsやAngularよりも応用の幅が広いといえるでしょう。
JavaScriptの知識で開発が可能
JavaScriptの経験があればあまり学習コストをかけず習得できます。
ReactはJavaScript内で機能するライブラリの一種であるため、JavaScriptの基本知識があれば開発が可能です。
学習コストや導入コストの低さだけでなく、品質の良さからも多くのフロントエンジニアから支持されています。
今後日本でも導入されるケースが増えるでしょう。
Reactのデメリット
Reactを活用するフロントエンジニアは増えており、多くのメリットが注目を集めています。
よりReactについて理解を深めるために、UI開発におけるReactの注意点も紹介します。
具体的なデメリットは下記の3つです。
- 日本語のドキュメントが少ない
- 仮想DOMが適さないアプリ・Webページもある
- Reactの環境構築に手間がかかる
Reactを導入する際の参考にして下さい。
日本語のドキュメントが少ない
日本でReactの活用事例は増えているものの、参考になるドキュメントはまだまだ少ない現状です。
海外と比較して日本でReactを扱えるエンジニアが少なく、使用実績が乏しいためです。
日本では jQueryの人気が高かったり、参照できるドキュメントが英語のため学習に手間がかかったりする点も影響しています。
Reactは世界的にも評価が高く、日本でも利用するエンジニアが増加傾向であるため、日本語のドキュメントも今後増える見込みです。
仮想DOMが適さないアプリ・Webページもある
仮想DOMは処理速度が向上する便利な仕組みですが、適さないアプリやWebページも存在します。
仮想DOMは多くのメモリを使用するため、画面の切り替えが少ない場合かえって読み込み速度が遅くなる特性があります。
ユーザー操作で画面が頻繁に切り替わるアプリやWebページでは仮想DOMが有効ですが、ニュースサイトのような特定の画面を見続けるケースでは読み込み速度がかえって遅くなります。
Reactの特性を理解したうえで、利用する際には適したアプリ・Webページかを事前に確認しましょう。
Reactの環境構築に手間がかかる
Reactを利用するには環境構築への対応が必要です。
Reactを使う際には、Node.jsやbabelなどのプログラムをインストールする必要があります。
プログラムのバージョンアップにも対応が必要であるため、手間に感じる方も多いでしょう。
Reactは開発効率がよい便利なUI作成ライブラリですが、利用開始までの環境構築も考慮して導入を検討しましょう。
Reactで開発された3つのサービス事例
Reactで開発されたサービスは数多く存在しますが、今回はよりイメージを持っていただくために3つの事例を紹介します。
下記の3事例です。
- Uber Eats
- Netflix
事例1.Instagram
InstagramはMeta社が運営する写真・動画共有SNSアプリです。
InstagramではReact Nativeを利用して様々な機能が実装されました。
コメントモデレーションやプッシュ通知機能は、React Nativeで実装された機能の一例です。
Reactで開発されたため、写真の頻繁な切り替えにもスムーズな処理が可能です。
事例2.Uber Eats
Uber Eatsは近所の飲食店の料理を手軽に注文できる、フードデリバリーサービスのWebアプリです。
Uber EatsのWebアプリでも、React Nativeが採用されています。
具体的にはレストラン用のダッシュボードや、ユーザーが料理を検索するページでReactの特性が発揮されています。
事例3.Netflix
Netflixは手軽に映画やドラマを楽しめる配信登録制のストリーミングサービスです。
世界190を超える地域で配信されており、収益モデルはサブスクリプションを採用しています。
NetflixでもReactが使われており、過去にはReactエンジニアを募集していた時期もあります。
Netflixのような世界的な企業も採用しているため、Reactの信用性の高さが伺えます。
まとめ：Reactを使い、Webサイトやアプリを開発しよう
今回は、デモを交えてReactの特徴や導入するメリットをご紹介しましたが、いかがでしたでしょうか。
Wakka Inc.はWeb・アプリ・業務系のシステムのラボ型開発が得意な会社です。今回ご紹介したReactの知識豊富なメンバーも多数在籍しています。
UI・UXにこだわりながら開発したい、フロントエンドからサーバーサイドまで対応できる会社を探している、DXや新規事業で伴奏してくれる開発パートナーが欲しい等のニーズがございましたら、お力になれるかと思いますので、まずはお気軽にお問合せください。
【あわせて読みたい】おすすめ関連資料
●すぐに使えるRFPテンプレート｜システム開発用
＞システム開発のRFPについて、情報を埋めるだけで簡単に作成ができるテンプレートです。
●すぐに使えるRFPテンプレート｜サイトリニューアル用
＞サイトリニューアルの際に、テンプレートの情報を埋めるだけで簡単にRFPが作成できます。
●DX進め方ガイドブック
＞DXプロジェクトを検討している担当者の方に向けて、失敗しない社内体制の構築から開発リソース確保までを網羅して解説しています。
学生時代にWebサイトを自作したことがきっかけでWebの世界に。制作会社でデザイン、WordPressテーマ開発の実務を経て、テクニカル・ディレクターとして大規模サイト構築のディレクションを経験。2021年からWakka Inc.の日本拠点でWebディレクターとして参画。最近はブロックエディタになったWordPressをもう一度、勉強しています。
