LoginSignup
35
36

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 5 years have passed since last update.

@rinimaruranran(りに まる)

ReactとjQueryの比較

Last updated at Posted at 2019-04-08

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

しかし、Reactで採用されている仮想DOMだと、既に読み込んでいた仮想DOMと新しく表示させたい
仮想DOMの差分のみ読み込んでDOMを表示させている。
image.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
$ npm install -g create-react-app
command
$ create-react-app 任意のファイル名

これで雛形ファイルが作成されます

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

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

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

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で表示させます

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
$ npm start

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

jQueryで実装する場合

①HTMLのheadタグ内でjQueryを読み込む

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

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

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

35
36
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
Sign upLogin
35
36

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?