LoginSignup
287
259

More than 3 years have passed since last update.

@HorieHin運営者ギルド

Reactを使うメリットとデメリット

Last updated at Posted at 2017-02-21

Reactとは？

  1. 最近はHTMLとjQueryのセットが当たり前な時代
  2. 動きのあるページを作ろうとするとjQueryのプログラム部分が複雑になってしまう
  3. それならば最初からJavaScriptがベースでいいのでは？でできたのがReact（Facebookが開発。FacebookのページはReactでできている
  4. JavaScriptでHTML(DOM)を出力する方法にJSXを使う

JSXとは？

  • ReactでHTML(DOM)を出力するための独自構文
  • HTMLの構文を知っていれば使えるレベル
    • ちょっとした違い
      • classがclassName
      • styleを使う時は {{}} を使う、「-」は使えない
        • {{margin-bottom:"1px"}} -> {{marginBottom:"1px"}}
      • 変数を使う時は {} で囲う

Reactを使うメリット

  • 脱jQuery
  • 最近のJavaScriptな書き方でかっこいい
  • サクサク動く
  • Reactの書き方がパーツ単位のため
    • 再利用性が高い
    • 保守性が高い
    • 最近流行りのアトミックデザインと相性がいい
  • Reactを覚えてしまえばReactNativeでスマホアプリが作れる

Reactのデメリット（２年前にできたのに日本であまり普及しない理由

  • 公式のドキュメントが英語
  • HTMLベースではないのでPHPとの併用はできない
  • 今まで使っていたJSライブラリが使えない場合がある
    • react-xxxx的なモジュールが作られていることが多いのでnpmでインストールすれば使える
  • バージョンアップによって書き方がちょっと変わってくる
    • 現在のバージョンは15.xx
      • ひとつ前のバージョンは0.14です
      • 最近はそこまで大きな変更はないので本腰いれて覚えても大丈夫そう
  • Reactを使える環境を作るのがめんどくさい
    • Windowsだとほぼ無理
    • Node.jsをインストールする必要がある
    • babelやwebpackなど色々なライブラリが必要
      • create-react-appというスターターキットがある
        • babelやwebpackが標準実装された環境が作れる
      • 一度環境を作ってしまえばあとは楽
  • Ajax処理が苦手
    • jQueryのajaxを使うのが一番簡単
      • React内でもjQueryを読み込んで使うことはできる
      • もちろんjQueryを使わない方法もある
  • ES6(JavaScriptの新しいバージョン)を覚える必要がある
    • いろいろあるけど変更箇所はだいたい下の２つくらい
      • var -> let、const
      • function() -> ()
    • ※今まで使ってきたJavaScriptをES6に書き換えて使おうとしてもbabelを使わないと動きません

React習得レベル

  • Lv.0 ES6の記述を学ぶ
  • Lv.1 create-react-appでReactを動かしてみる
  • Lv.2 Reactのチュートリアルかサンプルコードを使って動かしてみる
  • Lv.3 react-routerでページ切り替えを学ぶ
  • Lv.4 Reduxを覚える
  • Lv.5 react-reduxでReactとReduxの接続を学ぶ（Reduxのチュートリアル）
  • Lv.6 redux-routerでRedux時のページ切り替えを学ぶ
  • Lv.7 react-sagaでRedux時のAjax処理を学ぶ

Reduxとは？

  • プログラムの処理の流れや管理を綺麗に分割したフレームワーク
  • Reactと相性が良いためよく使われている
    • Reduxの前は同じようなものでFluxが使われていた
  • みんなが理解できればコードの保守性が上がるが、レベルが１段階上がるため学習コストなどを考えると・・・？
    • Reduxを知らない人がReduxのコードを見ると、なぜこのような書き方なのか理解できないレベル
  • Reactに限らず他の言語にも浸透/影響していっている
    • RubyでもReduxが使われ始めている
  • 小規模な開発や必要になるまでは、Reactだけでも十分
  • 使いたくなるタイミングとして、ページ間で共通のデータを使いたい時など
    • Reduxはデータやイベントなどを１箇所で管理しているため簡単にやり取りができる

まとめ

  • 静的メインなページならばjQueryの方が圧倒的に簡単
  • アプリのような動的なページを作るならばReactがいい

React勉強おすすめサイト

287
259
4

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
Sign upLogin
287
259