ロゴ | PARAFT [パラフト]
clear
  1. 気になる求人情報にエントリーできる
  2. 柔軟な働き方の企業からスカウトを受け取れる
  3. コメント投稿とめくれバ!投票に参加できる


clear
ロゴ | PARAFT [パラフト]

上記メールアドレス宛に
仮登録完了のお知らせ
メールを送りましたので、内容を確認し
記載されているURLから本登録にお進みください。

もしメールが来なかった場合は

  1. ご入力いただいたメールアドレスが間違っている
  2. お送りしたメールが迷惑メールフォルダに届いてしまっている
  3. 登録済みのメールアドレスである
clear

clear
ロゴ | PARAFT [パラフト]

パスワード再設定

アカウントの登録メールアドレスをご入力ください。パスワードリセット用のメールをお送りします。


clear
ロゴ | PARAFT [パラフト]

パスワード再発行

ご入力いただいたメールアドレス宛に、パスワードのリセットのご案内をお送り致しました。
メールに記載されているURLからパスワードの再発行を行ってください。

メールが届かない場合、ご入力いただいたメールアドレスをご確認いただき、再度パスワードのリセット手続きを行ってください。

パラフト パラフトロゴ

Reactの記事

主な特徴やVue.jsとの違いなどを徹底解説:r000021003620 | PARAFT [パラフト]

2021.04.06

Reactの記事2021.04.06

【初心者向け】Reactとは?

主な特徴やVue.jsとの違いなどを徹底解説

keyword: React とは 入門 Vue違い できること

このエントリーをはてなブックマークに追加
ReactはFacebook社が開発したJavaScriptの代表的なフレームワークのひとつです。本記事では、Reactの特徴やVue.jsとの違い、そしてReactを採用するメリット・デメリットや実際にReactを使用したサービスの例をご紹介します。ぜひご一読いただき、エンジニアとしてのスキルアップにご活用ください。

2021.04.06 文章 / PARAFT編集部

Reactとは?3つの特徴とVue.jsとの違い

Reactが急速に伸びている理由は、ほかでは真似できないReactならではの特徴が非常に優れているからだと考えられます。Reactの公式サイトに挙げられている挙げられている3つの特徴は以下の通りです。
  • 宣言的(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のメリット


まず、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を実際に使用しているアプリケーションをいくつかご紹介します。
Reactを使用した主なアプリケーションとして以下のようなものがあります。
  • Facebook
  • Instagram
  • Skype
  • Wix

それぞれ見ていきましょう。

Facebook


Facebook(https://www.facebook.com/)はReactの開発元であるFacebook社の代表的サービスです。Facebookの創業者であるマーク・ザッカーバーグ氏によって開発されたSNSで、世界中で多くのユーザが利用しています。インターネット上で実名での社会的な繋がりを構築していくことができ、企業や著名人などもページを持っていたりします。実名で繋がることでコメントが荒れたりすることを防ぐことができ、Facebook上で繋がったユーザ同士でビジネスを行ったりするケースもあるようです。

Instagram


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億人以上のユーザーが利用していると言われています。

WRITER

編集部チーム

PARAFT編集部

フリーランス専門のエージェントPROsheetの活用 Reactを習得し実際に開発の現場に参加していきたいとお考えの方は、ぜひPROsheetをご活用ください。 IT系の職種としてフリーランスになる人は、PROsheetなどの専門のエージェントを活用することで、フリーランスとしてのスタートアップをサポートしてもらうことができます。今回解説をした税金面だけではなく、案件の獲得方法やご稼働後のサポートを受けることができます。特にIT系の職種の案件が多くなっており、活用することで得られるメリットはたくさんあるので、まずは下記URLから登録面談にてお気軽にご相談ください。 PROsheetの会員登録ページへ飛びます

ー 「生きる」と「働く」を もっと楽しく。
主な特徴やVue.jsとの違いなどを徹底解説:r000021003620 | PARAFT [パラフト]

CAREER CHANGE

【初心者向け】Reactとは?

RELATED POST

フリーランス向け、週2~5日のお仕事紹介:PROsheet[プロシート] | PARAFT [パラフト]