Reactの記事2021.04.06
【初心者向け】Reactとは?
主な特徴やVue.jsとの違いなどを徹底解説
keyword: React とは 入門 Vue違い できること
2021.04.06 文章 / PARAFT編集部
Reactとは?3つの特徴とVue.jsとの違い
- 宣言的(Declarative)
- コンポーネントベース(Component-Based)
- 一度学べばどこでも使える(Learn Once, Write Anywhere)
宣言的(Declarative)
jQueryの場合、イベントに対する処理を記述するという形をとるため、デバッグしにくく少し読みにくいコードになりがちです。それに対してReactでは宣言的(条件と結果が明確にソースコード上から読み取れる)と言って、「こういう状態のときはこのような見た目になります」と宣言するようにソースコードを記述します。書き方がある程度定まっている分、読みやすいソースコードになるため、他人が書いたソースでも比較的簡単に読み込むことができ、デバッグやテストといった作業を効率的に進めることができます。また、データの変更を検知し、関連するコンポーネント(パーツ)だけを再描画してくれるので、パフォーマンスの高いアプリケーションを開発することができます。
コンポーネントベース(Component-Based)
Reactでは、アプリケーションの構成要素を小さな部品(コンポーネント)の集合として考えて設計することで、状態の管理がしやすい、拡張性が高く部品の使い回しがしやすいなどの特徴があります。AngularやjQueryの場合、一部を変更するといった対応でも、広い範囲のソースに手を加える必要があるのですが、Reactは部品ごとにソースが分かれていることで、ソースの回収や管理、再利用といった対応がスムーズに行えるようになっています。また、大規模なJavaScriptのソースコードでも部品化することで保守性を高め、既存のReactコンポーネントを再利用することで、開発工数を減らすことができます。
一度学べばどこでも使える(Learn Once, Write Anywhere)
Reactでは、一度書き方を習得することでWebアプリケーションの開発だけでなくモバイルアプリの開発なども行うことができるようになります。モバイルアプリ開発においてはReact Nativeと呼ばれるReactを基盤としたプラットフォームを使うことで、Reactの書き方はそのままに、モバイルアプリが作れるようになります。また、VR(仮想現実)の開発においても、React VRというフレームワークを用いることでReactの知識を活用することができるという特徴があります。一度Reactを習得してしまえば、Webアプリケーション、モバイルアプリ、VRアプリなど様々な分野の開発を行うことができるようになるというのはReactの大きな利点といえます。
ReactとVue.jsの違い
Reactの比較対象としてよく取り上げられるフレームワークとしてVue.jsがあります。
ReactとVue.jsには以下のような類似点があります。
- 仮想DOMを実装している
- コンポーネントの機能を有している
類似する特徴として、軽量・高速という部分が挙げられます。Vue.jsはWebデザイナーやフロントエンドエンジニアが馴染みやすく、ルールに従って記述することで細かい部分を補助してくれるのに対して、Reactは自由度が高く、その分自分で書かなければいけない部分も多いため、サーバサイドエンジニアの方が馴染みやすいかと思います。
どちらもフロント部分(UI)の構築のために開発されたフレームワークで、似ている部分も多いため、ReactとVue間での乗り換えは比較的しやすいと言えます。
Reactのメリット・デメリットを紹介
Reactのメリット
まず、Reactのメリットとして以下の5つが挙げられます。
- パフォーマンスの高いアプリケーションを作成できる
- SPAの作成に最適
- スマホ向けアプリの作成も可能
- 大規模アプリケーションの構築に適している
- フロントエンドの実装が簡単にできる
ひとつずつ見ていきましょう。
パフォーマンスの高いアプリケーションを作成できる
Reactでは、仮想DOM(Virtual Document Object Model)というレンダリング機構が用意されています。この仮想DOMというのは、実際のDOMではなく、React内部で保持しているDOM情報を指します。これによって仮想DOMと実際のHTML上のDOMを比較した際の差分のみを再描画することができ、画面表示の高速化、パフォーマンスの向上といったメリットがあります。
SPAの作成に最適
近年のトレンドとして、SPA(Single Page Application)と呼ばれる形式のWebアプリケーションが多く開発されています。SPAのメリットとして、ページ遷移を少なくすることで画面描画の効率化、高速化が可能という特徴がありますが、開発の際にはJavaScriptを多用しなければなりません。そこで前述したReactの3つの特徴を活用することで、SPAの構築がスムーズに行えるようになります。
スマホ向けアプリの作成も可能
Reactの書き方をベースとして、iOS/Androidのスマホアプリ開発をできるようにしたのがReact Nativeという仕組みです。従来はiOSアプリならSwiftやObjective-C、AndroidアプリならJava、Kotlinなど、それぞれ異なる言語での開発が主流でした。このReact Nativeは簡単に言えば、Reactのお作法でコードを書くと、iOS/Androidそれぞれのネイティブコードに変換してどちらにも対応してくれる仕組みになります。これにより、一度書いたコードを変更することなくiOS/Android両方に対応したスマホアプリを作成することができます。
大規模アプリケーションの構築に適している
大規模なアプリケーションを構築する際には、可能な限りパーツを共通化し、開発・テストにかかるコストを下げる必要があります。Reactはコンポーネントベースという考え方を採用しており、コンポーネントの共通化や効率的な管理が可能なフレームワークと言えます。そのため、共通部品の作成やテストを効率的に行うことができ、コンテンツ間のページ遷移や条件分岐などの複雑な処理にも耐えられる構成となっています。これらの特徴からReactは大規模なWebアプリケーションの構築にも適していると言えます。
フロントエンドの実装が簡単にできる
Reactは世界中で利用されているフロントエンド構築の代表的なフレームワークです。あらかじめボタンやフォーム等のパーツをコンポーネントとして整理し、標準で用意してくれています。この標準のコンポーネントをもとにカスタマイズをしたり、その他必要なパーツを自分で作ったりすることで、開発を効率化することができ、様々なWebアプリケーションの構築が可能となります。
Reactのデメリット
次に、Reactを利用するデメリットをご紹介します。
- 公式ドキュメントが英語である
- 環境構築に手間がかかる
- 非同期処理(Ajax)が不得意
- 最新のJavaScript記法を習得する必要がある
こちらもひとつずつ見ていきましょう。
公式ドキュメントが英語である
Reactは海外のユーザが多く、日本てはまだそこまで広く普及していないというのが現状です。そのため、公式のドキュメントなどは英語のものが多く、ネット上で情報を探す際にはある程度英語が読めた方が効率的な部分もあります。日本語のドキュメントが普及するにはもう少し時間がかかるかもしれませんが、翻訳などを使いながら検索すれば問題なく情報を探すことはできるので、メリットの方が大きいと言えます。
環境構築に手間がかかる
Reactでアプリケーション開発を行う際には、開発環境の準備に少し手間がかかります。少しだけ例を挙げると、以下のようなツールをダウンロード、インストールする必要があります。
- 基盤→Node.js、npm
- 本体→react、react-dom
- コンパイル→Babel
- ビルド→Browserify、webpack
- 構文チェック→ESLint
- テスト→Jest、enzyme
- タスクランナー→gulp、Grunt
これらのセットアップをひと通り行うのは手間がかかりますが、一度セットアップしてしまえばReact環境として繰り返し利用することができるので、頑張って設定を行いましょう。
非同期処理(Ajax)が不得意
Reactの特徴としてAjax(Ansynchronous JavaScript + XML)と呼ばれる非同期処理が不得意という側面もあります。逆にjQueryなどは非同期処理が得意だったりするため、構築したいアプリケーションの特性なども踏まえてフレームワークの選定を行うことが大切になります。
最新のJavaScript記法を習得する必要がある
Reactの記述ルールは基本的にJavaScript最新版のES6に沿って決められています。長い間旧バージョンのJavaScriptしか使ってこなかったエンジニアがReactを扱う場合、ES6の書き方を習得するのに少し手間がかかるかもしれません。少し面倒ではありますが、Reactを使うことのメリットの方がはるかに大きいので、我慢して習得しておくべきと思います。
Reactを使用したアプリケーションの実例
Reactを使用した主なアプリケーションとして以下のようなものがあります。
- Skype
- Wix
それぞれ見ていきましょう。
Facebook(https://www.facebook.com/)はReactの開発元であるFacebook社の代表的サービスです。Facebookの創業者であるマーク・ザッカーバーグ氏によって開発されたSNSで、世界中で多くのユーザが利用しています。インターネット上で実名での社会的な繋がりを構築していくことができ、企業や著名人などもページを持っていたりします。実名で繋がることでコメントが荒れたりすることを防ぐことができ、Facebook上で繋がったユーザ同士でビジネスを行ったりするケースもあるようです。
Instagram(https://www.instagram.com/)は2010年にケビン・サイストロム氏、マイク・クリーガー氏によって開発・リリースされた写真や動画共有をメインとしたSNSです。後にFacebook社が買収し、自社SNSであるFacebookと連動を強化したことにより世界的に流行しているサービスとなります。ユーザーが撮影した写真に簡単なフィルター加工をしたり、フォロワーと繋がって互いの投稿写真に「いいね!」をするなど、交流を図ることができます。
Skype
Skype(https://www.skype.com/)はマイクロソフト社が所有するクロスプラットフォーム対応のコミュニケーションツールです。Skypeという名前の元は「Sky-peer-to-peer」で、ユーザー同士で音声通話やチャット、ビデオ通話などを行うことができます。ビジネス用途での利用も盛んで、昨今の在宅勤務事情もあり需要が高まっているサービスと言えます。
Wix
Wix(https://www.wix.com/)はドラッグ&ドロップで簡単にキレイなホームページを作成することができるノーコードサービスです。Webサイトの制作に関する知識がほとんどなくても、使用したい画像をドラッグ&ドロップで画面上に配置したり、テキストを入力することで誰でも簡単にホームページを作成でき、非常に人気のサービスです。世界中で1億人以上のユーザーが利用していると言われています。

![主な特徴やVue.jsとの違いなどを徹底解説:r000021003620 | PARAFT [パラフト]](/files/alias_m1/000021003620/knebzrx80ft6ac8f60dt42yp.jpg)
【初心者向け】Reactとは?
この記事が気に入ったらいいね!しよう
PARAFTの最新記事をお届けします。
┳CAREER CHANGE┻
【初心者向け】Reactとは?
WRITER
編集部チーム
PARAFT編集部
フリーランス専門のエージェントPROsheetの活用 Reactを習得し実際に開発の現場に参加していきたいとお考えの方は、ぜひPROsheetをご活用ください。 IT系の職種としてフリーランスになる人は、PROsheetなどの専門のエージェントを活用することで、フリーランスとしてのスタートアップをサポートしてもらうことができます。今回解説をした税金面だけではなく、案件の獲得方法やご稼働後のサポートを受けることができます。特にIT系の職種の案件が多くなっており、活用することで得られるメリットはたくさんあるので、まずは下記URLから登録面談にてお気軽にご相談ください。 PROsheetの会員登録ページへ飛びます