ReactとjQueryの比較

Reactを学び始める際に、「ReactはjQueryの上位互換」的な記事を見つけたので、違いを調べてみました




# 結論
jQueryが向いている場合もあれば、Reactが向いている時もある




# 概要
・ ReactとjQueryのいいとこよくないとこ
・ DOMの仕組み
・ 学習コスト（IE8以下への対応）
・ 実装方法(JSX)




##ReactとjQueryのいいとこよくないとこ
### Reactいいとこよくないとこ
▶︎ 高速な運用
　仮想DOMを用いているので、高速なDOM処理ができる

▶︎ 学習コスト
　習得までの時間がかかる
　ES6に対応する必要がある
　Reactを覚えてしまえばReactNativeでスマホアプリが作れる

▶︎ 環境構築が面倒

▶︎ Reactの書き方がパーツ単位のため
　　- 再利用性が高い
　　- 保守性が高い
　　- 最近流行りのアトミックデザインと相性がいい

Ajax処理は苦手（react-sagaを使えばできる）




### jQueryいいとこよくないとこ
・ 手軽に効果を入れられる
・ 学習コストがかからない
・ Ajax処理が簡単に実装できる
・ 動きのあるページを作ろうとするとjQueryのプログラム部分が複雑になる




## リアルなDOMと仮想DOM
jQueryではDOMを表示させる場合、必要なDOMの全てを読み込んでから表示させる必要がある。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/382709/7423f3aa-e015-e26b-b271-637ed63190aa.png)

しかし、Reactで採用されている仮想DOMだと、既に読み込んでいた仮想DOMと新しく表示させたい
仮想DOMの差分のみ読み込んでDOMを表示させている。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/382709/8bf31f80-4e9d-8e94-f5a1-75d95c46226d.png)








## 学習コスト
### 情報量の違い
Amazonでの検索結果　・・・　Reactは171件ヒット, jQueryでは1000件以上ヒット
Qiitaの記事数　・・・　Reactは8052件, jQueryは10489件

大規模なプロジェクトで使っている訳ではなく、サクッと学んで実装まで持って行くならjQueryはやっぱり便利
情報量が多く、書籍も充実していて、新しい情報も多くある

しっかり学ぶ時間的な余裕があるのであれば、速度・見た目の観点からReactを選択する
書籍の数も少なく、まとまった情報を習得し難い
新しい情報も少なく、良著もES5で書かれているものが多い

### ES6への対応
ReactではES6に対応した情報が少ない

### スマホアプリへの応用
Reactを覚えてしまえば、ReactNativeでスマホアプリが作れる







## 実装方法
ReactとjQueryで同じドロップダウンメニューを作っていきます
### Reactで実装する場合
①何はともあれ、プロジェクトを立ち上げます
まずはnode.jsのインストールから
https://github.com/hokaccha/nodebrew#install

```command:command
$ npm install -g create-react-app
```
```command:command
$ create-react-app 任意のファイル名
```
これで雛形ファイルが作成されます

②DropDownMenu.jsを作っていきます
既にあるapp.jsで表示させるドロップダウンメニューを作成していきます
作成するjsファイルは、src下にcomponentsフォルダを作成してその中に入れます

```command:command
$ mkdir src/components
$ touch src/components/DropDownMenu.js
```

DropDownMenu.jsに以下を記述します
JSXというFacebookが開発した独自構文が使われています

```React:DropDownMenu.js
import React from 'react'
 
class DropDownMenu extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      listOpen: false,
    }
  }
 
  toggleList() {
    this.setState(prevState => ({
      listOpen: !prevState.listOpen,
    }))
  }
 
  handleClickMenu(val) {
    alert(val)
  }
 
  render() {
    const { listOpen } = this.state
    return (
      <div style={styles.dropDownMenu}> {/* 定義したスタイルを呼び出す */}
        <div onClick={this.toggleList.bind(this)} style={styles.menuButton}> {/* ES6だとbind(this)がないとtoggleList()がundifined */}
          menu
        </div>
        {listOpen && ( /* listOpenがtrueの場合に下記を表示させる */
          <div style={styles.menuBox}>
            <div style={styles.menuContent}>
              <div onClick={this.handleClickMenu.bind(this, 1)}>menu 1</div>
            </div>
            <div style={styles.menuContent}>
              <div onClick={this.handleClickMenu.bind(this, 2)} style={{color:"red"}}>menu 2</div> {/* スタイルはベタ書きでも */}
            </div>
            <div style={styles.lastMenuContent}>
              <div onClick={this.handleClickMenu.bind(this, 3)}>menu 3</div>
            </div>
          </div>
        )}
      </div>
    )
  }
}
 
const styles = {
  dropDownMenu: {
    fontSize: '30px',
    position: 'relative',
    margin: '20px 0 0 20px',
  },
  menuButton: {
    display: 'inline',
    cursor: 'pointer',
    border: '1px solid black',
    padding: '3px 5px',
  },
  menuBox: {
    position: 'absolute',
    top: '40px',
    width: '120px',
    zIndex: 1,
    cursor: 'pointer',
    border: '1px solid black',
  },
  menuContent: {
    padding: '3px 5px',
    borderBottom: '1px solid black',
  },
  lastMenuContent: {
    padding: '3px 5px',
  },
}
 
export default DropDownMenu
```

③App.jsで表示させます

```React:App.js
import React, { Component } from 'react'
import DropDownMenu from './components/DropDownMenu'
 
class App extends Component {
  render() {
    return (
      <div>
        <DropDownMenu />
      </div>
    )
  }
}
 
export default App
```

④ブラウザ上で確認します
プロジェクトのディレクトリで下記コマンドを叩いてサーバーを起動します
（VisualStudioCodeのターミナルから起動）

```command:command
$ npm start
```
すると、chromeで一旦見れるようになります。
（http://localhost:3000/ で見れます）

### jQueryで実装する場合
①HTMLのheadタグ内でjQueryを読み込む

```jQuery:index.html
<head>
:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
:
</head>
```

②HTMLにスタイルやJSを追加します

```jQuery:index.html
<html>
    <head>
：
        <script>
            $(function () {
                $('span').click(function() { 
                    if ($(this).attr('class') == 'selected') {
                    $(this).removeClass('selected').next('ul').hide();
                    } else {
                    $('span').removeClass('selected');
                    $('ul').hide();

                    $(this).addClass('selected').next('ul').show();
                    }    
                });
                
                $('span,ul').hover(function(){
                    over_flg = true;
                }, function(){
                    over_flg = false;
                });  
                
                $('span').click(function() {
                    if (over_flg == false) {
                    $('span').removeClass('selected');
                    $('ul').slideUp('fast');
                    }
                });

                $('#button1').on('click',function() {
                    alert("1");
                });
                $('#button2').on('click',function() {
                    alert("2");
                });
                $('#button3').on('click',function() {
                    alert("3");
                });
            });
        </script>
        <style>
            #menu {
                margin:18px 0 0 12px;
                font-size:30px;
            }
            #menu div {
                position: relative;
            }
            span {
                cursor: pointer;
                border:solid #000 1px;
                padding:4px 4px;
            }
            ul {
                display: none;
                position: absolute;
                list-style: none;
                margin-top:0px;
            }
            ul li {
                margin-left:-40px;
                border:solid #000 1px;
                padding:0 3px;
                height:40px;
            }
            ul li a {
                text-decoration: none;
                padding-right:20px;
                color:#000;
            }
        </style>
    </head>
    <body>
        <div id="menu">
            <div>
                <span>menu</span>
                <ul>
                    <li><a id="button1">menu 1</a></li>
                    <li><a id="button2" style="color:red;">menu 2</a></li>
                    <li><a id="button3">menu 3</a></li>
                </ul>
            </div>
        </div>
    </body>
</html>
```

③ブラウザ上で確認します
今回はVisualStudioCodeの拡張機能「Live Server」で確認しました







# 結論
jQueryが向いている場合もあれば、Reactが向いている時もある







###参考URL
＜React＞
立ち上げ　https://qiita.com/chibicode/items/8533dd72f1ebaeb4b614
実装　https://joppot.info/2018/11/16/4271
デバッグ　https://qiita.com/iewori/items/c28a2a415bb3553157c0
いいとこよくないとこ　https://qiita.com/HorieH/items/87e155a16ad847354e71

＜jQuery＞
全部　https://makasete-web.net/dropdown-menu