7
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Reactの紹介

Posted at

はじめに

仕事や趣味の開発でReactを使用してみたので簡単に紹介してみようと思います。

Reactとは

  • ReactはWebアプリケーションのUIを作るためのライブラリ(※フレームワークではない)
  • Facebookがオープンソースとして公開している
  • FacebookやNetflixやAtlassianなど色々なサイトが利用している

Reactを使うメリット

パフォーマンスが良い

DOMとは

DOMはページを表示する際に作られるもの、ブラウザはこれをもとにページを描画している
パフォーマンスが良い(DOMとは).png
※jQueryはこのDOMを操作している

既存の仕組みが遅い理由

既存の仕組みだと受け取った情報を元に毎回DOMを1から構築し、ブラウザに描画しているため遅い
パフォーマンスが良い(既存の仕組みが遅い理由) .png

Reactの仕組み

Reactでは先に仮想DOMを作成し、仮想DOMからDOMを作成する仕組みになっている
※最初に仮想DOMを作っているのが大事
パフォーマンスが良い(Reactの仕組み) .png

仮想DOMとは

実際のDOMと対になるもので、DOMよりはやく作ることができるように設計されたもの
※HTMLを構築する木構造データでJavascript内でDOMを仮想的に作っているらしいです
パフォーマンスが良い(仮想DOMとは).png

画面が更新されるまでの流れ

Reactでは画面に更新があった際、1つ前の仮想DOMと差分を確認し、差分だけDOMに反映させる
パフォーマンスが良い(画面が更新されるまでの流れ) .png

jQueryより見やすい

人によるかもだけど項目の出し分けなどはjQueryよりReactの方が見やすいと思います
例えば以下はボタンを押すとpタグが表示されるコードをjQueryで書いた例になります。
jQueryより見やすい.png
これをReactで書くと以下のようになると思います。これはクラスで書いてありますが、関数で書くともう少しシンプルになると思います。
jQueryより見やすい2.png

プロジェクトを作るのが簡単

プロジェクトの作成は「npm」で提供されている「create-react-app」コマンドを使えるようにしておけば、1コマンドで作れる。
このコマンドが出るまでは自分でディレクトリを作る必要があった模様。
プロジェクトを作るのが簡単.png

プロジェクトにNodeJSのサーバーが含めれているので、デバッグが楽

ReactのプロジェクトにはNodeJSサーバーが入っているので「npm start」とコマンドを叩くだけで動作確認をすることができる。
NodeJSサーバーが立ち上がっている状態で編集を加えると自動でコンパイルされ画面に反映される。
image.png

記法が間違っている場合はコンパイル時にエラーとなる

NodeJSサーバーが立ち上がっている状態で間違った記法で書いて保存するとエラーが表示される
image.png

書き方がパーツ単位のため再利用しやすい

Reactでは画面のパーツ(一覧とか)を別のファイルに定義することができるのでヘッダーなど画面ごとに定義する必要がなく再利用がしやすい。
書き方がパーツ単位のため再利用しやすい.png

ビルドするとNodeJSが入っていない環境でも動く

ビルドすると動かすのに必要なJSファイル等が生成されるため、NodeJSが入っていない環境でも動く
image.png

AndoridアプリやIOSアプリも作ることができる(ReactNative)

別途ライブラリ(react-native)を入れる必要があるが、Reactの記述方法でアプリを作ることもできる
アプリを作る際、動作確認をする度に毎回コンパイル等の作業が発生するがReactNativeの場合は保存したタイミングでデバック用のスマホに反映されるので楽
image.png

Reactを使うデメリット

デプロイする際はapache等のドキュメントルートをプロジェクトのエンドポイントに指定する必要がある

Reactはビルドを行うとドキュメントルートに配置する前提でパスを生成するため、サブディレクトリ等に配置するとJSやCSSなどが404となってしまうので注意!
image.png
※サブディレクトリに配置する場合は別途ライブラリが必要

MVC的な書き方はできない

Reactはあくまで画面を作るライブラリなのでMVC的な書き方をすることができない
※データを取りに行く場合はAPIから取得するような形になる
MVC的な書き方はできない.png

JSXがわかりにくい

JSXとはReactでHTML(DOM)を出力するための独自構文のこと
他の言語と違ってhtmlとかがそのまま代入できたりするので気持ち悪いと思う人もいる模様
JSXがわかりにくい.png

まとめ

  • 簡単な静的ページ(htmlが1枚のページとか)を作るならjQuery、動的なページを作るならReactの方が向いてそう
  • MVC形式で作るならReactは向いていない(フレームワークによっては埋め込めるものあるらしい)
  • 高速なページを作るなら仮想DOMが使われているReactの方が良さそう
7
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?