モダンJavaScript(React・Vue.js)と従来のJavaScriptのコード比較

JavaScriptはフロントエンドからバックエンドまで用いられる、非常に人気のあるプログラミング言語の一つです。

そして近年では、ReactやVue.jsといったモダンJavaScriptの登場により、より早く、リッチな動きのあるWebサイトやアプリの制作が可能になりました。

今回は、「バニラScript」や「素のJavaScript」と呼ばれている従来のJavaScriptと、モダンJavaScriptと呼ばれているReact、Vue.jsの実際のコードを比較することにより、それぞれの特徴を解説させていただきます。

主にこれからReactやVue.jsを学ぼうと思っている方向けに、できる限りわかりやすく解説しますので、ぜひ最後までご覧ください。

クリックイベントについて

今回はクリックイベントのコードサンプルです。

クリックイベントとは、ユーザーがボタンなどの特定の要素をクリック(またはタップした)時に起きるイベントのことで、Webサイトで言えば、トップへ戻るボタンや、スマホのハンバーガーメニューなどで実装されます。

よく使うことが多いことや、コードの分かりやすいさから、今回は2つのクリックイベントを、従来のJavaScriptと、React、Vue.jsの3パターンで実装します。

では、まずはトップへ戻るボタンのコードから紹介していきます。

トップへ戻るボタン

まずはボタンを押すとページの最上部へ戻るボタンの従来の記述方法です。

従来のコード(HTMLとJavascript)

まずはHTMLでボタンを実装します。

<button id="button">トップへ戻るボタン</button>

JavaScriptでbutton要素を取得するために、id属性を付与しています。

続いてJavaScriptのコードを記述します。

const backTopButton = document.getElementById("button") //1

const backTop = () => { //2
 window.scrollTo({
 top: 0,
 behavior: "smooth", 
 });
}

backTopButton.addEventListener("click",backTop); //3

従来のJavaScriptのコードでは、工程を三つに分けることができます。

getElementByIdでボタンの要素を取得し、変数に代入
windowの一番上までスクロールする関数を定義
ボタンをクリックすると、backTop関数を実行するように設定

非常にシンプルでわかりやすいと思います。

これが従来のコードです。

続いてReactのコードを紹介します。

React

import React {useCallback} from "React"; //1 

export default function BackTopButton(){ //2

  const backTop = useCallback(() => { //3

  　　window.scrollTo({ //4
　　　　　　　　　top: 0,
　　　　　　　　　behavior: "smooth"
　　　 　});
  
　　　},[]);

  return ( 
     <button onClick={backTop}> トップへ戻るボタン </button> //5
);}

Reactはコンポーネント(部品)ごとに管理することが基本なので、従来のようにHTMLとJavaScriptに分かれているのではなく、JavaScriptの中にHTMLが書けるJSX記法での記述になっています。

では、こちらも工程に分けて解説します。

ReactとReactHooksの機能の一つのuseCallbackをインポート
BackTopButtonコンポーネントの作成
useCallbackを用いてbackTop関数を定義
windowの一番上までスクロールする関数を定義
HTMLはreturn()の中に記述。ボタンを作成し、ボタンの中にクリックするとbackTop関数を呼び出すように記述

ポイントは3のuseCallbackです。

useCallbackがなくてもボタンは機能しますが、これを使うことにより、レンダリングのたびに再定義されるのを防ぐことができます。パフォーマンスを考えるなら、useCallbackは重要ですので覚えておいてください。

Reactでは関数定義の記述が増えるため、よりプログラマー寄りのコードになっており、慣れないと少し難しく感じるかもしれません。

次はVue.jsのコードを紹介します。

Vue.js

<template> //1 
　　　<button @click="backTop">トップへ戻るボタン</button> //2
</template>
<script> //3
 export default {
　　　 methods : { //4
        backTop(){
          window.scrollTo({ 
            top: 0,
            behavior: "smooth" 
          });
       },
    },
 };
 </script>

では、解説します。

templateタグ内にhtmlを記述
ReactのonClickにあたるものが@click
scriptの中にJavaScriptを記述
methodsの中に関数を定義

Vue.jsはReactの後にリリースされたフレームワークのため、Reactと同じような機能をReactよりも簡単な記述で実装できるのが最大の特徴です。

class付与ボタン

続いて2つ目のクリックイベントを紹介します。

今度はクリックすると、他の要素にCSSのクラスを付与するコードです。

これはハンバーガーボタンなどでよく使うコードです。

従来のコード(HTMLとJavascript)

<div id="element" >クラスが付与される要素</div> 
<button id="button">ボタン</button>

続いてJavaScriptのコードを記述します。

const button = document.getElementById("button"); //1
const element = document.getElementById("element"); //1

const addClass = () => { //2
   element.classList.toggle("active");
} 

button.addEventListener("click", addClass); //3

では解説です。

button要素と、クラスが付与される要素の二つのを取得し、それぞれの変数に代入
CSSのクラス”active”が付いたり、消えたりする関数を設定
ボタンをクリックすると、addClass関数を実行するように設定

これでボタンをクリックするたびに、指定した要素(今回はid=element)に”active”クラスが付いたり、消えたりします。

ではこれをReactで書き換えます。

React

import React, { useState, useCallback } from 'react'; //1

export default function AddClassButton() { //2

  const [isActive, setIsActive] = useState(false); //3

  const addClass = useCallback(() => { //4
    setIsActive((prev) => !prev);
  }, []);

  return (
    <div>
      <div id="element" className={isActive ? 'active' : ''}> //5
        クラスが付与される要素
      </div>
      <button id="button" onClick={addClass}> //6
        ボタン
      </button>
    </div>
  );
}

では解説です。

React、useState、useCallbackの３つをインポート
AddClassButtonコンポーネントの作成
useStateを使い、状態を管理(詳細は後ほど)
addClass関数を設定
条件に応じてisOpenクラスを付与する式を設定
ボタンを作成し、ボタンの中にクリックするとaddClass関数を呼び出すように記述

ポイントは3,4のuseStateとuseCallBackのところです。

useStateはuseCallbackと同じくReactHooksの機能の一つで、状態を管理するときに使います。
定義は配列で行い、配列内の最初の要素は現在の状態を管理するための変数であり、二番目の要素は現在の状態を新しい状態に変更するための関数となっています。イコールの右側の（）の中は初期値が入っているため、今回は初期状態がfalseとなります。

4では、状態を反対にする関数を書いています。

これにより6のボタンをクリックすると、addClass関数が呼び出され、そこでsetIsActive関数が実行され、isActiveの状態がfalseからtrueに変わるということになります。

5には三項演算子があり、isActiveがfalseの時は何もない空のクラスがつき、trueの場合はactiveクラスがつくといった式になっています。

これらの設定により、クリックするたびにactiveがついたり、消えたりするといった挙動になります。

最後はVue.jsのコードです。

Vue.js

<template>
  <div>
    <div :class="{ 'active': isActive }"> // 1
      クラスが付与される要素
    </div>
    <button @click="addClass"> // 2
      ボタン
    </button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isActive: false, // 3
    };
  },
  methods: {
    addClass() {
      this.isActive = !this.isActive; // 4
    },
  },
};
</script>

では解説です。

v-bindを使い、isActiveがtrueの時はactiveクラスを付与するように設定
クリックすると、addClass関数を実行
isActiveの初期値(false)を設定
add関数が実行されたら、現在の値とは反対の値を代入するように設定

Reactと似ていますが、Vue.jsの方がかなり分かりやすいと思います。

まとめ

今回紹介したのは簡単なコードですが、基礎の押さえておくべきポイントはいくつもあるので、これからReactやVue.jsを勉強する方は、ぜひ覚えておいてください。

ReactかVue.jsでどっちを勉強したらいいか分からないという方は、とりあえず手っ取り早く実装したい方はVue.js、しっかり勉強して細かいところまで設定したい方はReactをお勧めします。

コードを見てもわかる通り、ReactよりもVue.jsの方が記述は簡単です。

日本ではReactよりもVue.jsの方が人気がありますが、この簡単さ、手軽さも大きく影響していると思います。

ただ、海外では圧倒的にReactの方が人気があります。

プログラマーでJavaScriptをゴリゴリ書いていきたい人はReactの方が楽しいと思います。

私はVue.jsから学び、ある程度分かったところでReactを学び始めました。

Reactから入ると挫折する人も多いようなので、この流れでもいいと思います。

最近弊社で制作したサービスサイト「WebRunner」では従来のJavaScript、React、Vue.jsの全てを使っています。

ぜひ一度訪問していただき、パフォーマンスの良さを実感していただければ幸いです。

WebRunner【https://webrunner.jp】

また、WebRunnerではAstroというフレームワークで制作しています。

現在、JavaScript、React、Vue.jsの共存ができるフレームワークはAstroだけだと思います。

これまでAstroに関する記事をいくつも書いているので、気になった方はぜひご覧ください。

超高速Webサイト構築用フレームワーク”Astro(アストロ)”について

モダンJavaScript(React・Vue.js)と従来のJavaScriptのコード比較

クリックイベントについて

トップへ戻るボタン

従来のコード(HTMLとJavascript)

React

Vue.js

class付与ボタン

従来のコード(HTMLとJavascript)

React

Vue.js

まとめ

ソフトウェアアーキテクチャとは？種類やそれぞれの特徴について…

フレームワークとは？ライブラリとの違いやメリット・デメリット…

転職をお考えでは
ありませんか？

クリックイベントについて

トップへ戻るボタン

従来のコード(HTMLとJavascript)

React

Vue.js

class付与ボタン

従来のコード(HTMLとJavascript)

React

Vue.js

まとめ

ソフトウェアアーキテクチャとは？種類やそれぞれの特徴について…

フレームワークとは？ライブラリとの違いやメリット・デメリット…

転職をお考えではありませんか？

転職をお考えでは
ありませんか？