Zenn
🙆

jQueryを知っているひとがVue, React, Angular完全に理解しましたぞ

2021/01/26に公開
Angular
jQuery
React
Vue.js
tech

動機

業務で基本的にjQueryを10年ほど利用してきたひと（私）がスキルマップ作成とやらでVue, React, Angular の経験を問われたため、知ったかぶりしたいので調べた。

Hello Vue world のために以下を読め

Vue.jsでできること8選。凄さが分かる実用例スニペット集
Vue.jsで Hello World!

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <title>Title</title>
</head>
<body>
<div id="app">
    <!-- testValの内容を表示 -->
    {{ testVal }}
</div>
</body>
<script>
    const app = new Vue({
        el: '#app',

        data: {
            testVal: 'Hello World!'
        }
    });
</script>
</html>

Vue.jsで湯婆婆を実装してみる
公式（日本語）
*Vue.js は公式を読めと随所に書いてある。

Hello React World のために以下を読め

ReactでHello Worldをする前に...
ReactでHelloWorldをしてみよう！
React (JavaScript) で湯婆婆を実装してみる
公式（日本語）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>React 湯婆婆</title>
  <script src="https://unpkg.com/react/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
    (() => {
      'use strict';

      const {useState} = React;

      function Yubaba() {
        const [name, setName] = useState('');
        const newName = name.substr(Math.floor(Math.random() * name.length), 1);

        return (
          <div>
            <p>契約書だよ。そこに名前を書きな。</p>
            <input type='text' value={name} onChange={e => setName(e.target.value)}/>
            <p>フン。{name}というのかい。贅沢な名だねぇ。</p>
            <p>今からお前の名前は{newName}だ。いいかい、{newName}だよ。分かったら返事をするんだ、{newName}!!</p>
          </div>
        );
      }

      ReactDOM.render(
        <Yubaba/>,
        document.getElementById('root')
      );

    })();
  </script>
</body>
</html>

Hello Angular World のために以下を読め

AngularJSでHello World
とほほのAngular入門
公式（日本語）

で、jQueryとどう違うの？

JavaScriptが辿った変遷

jQuery愛好家のためのVue.js、React入門（いずれAngularも）
jQuery から Vue.js へのステップアップ

Vue.jsとjQueryで同じ機能を作成し、コードを比較する
Vue.jsとjQueryで同じ機能を作成し、コードを比較する - その２

ReactとjQueryの比較

最後に我らのjQuery

jQueryの基礎

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Progate</title>
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
  $(function(){
    $('#hide-text').click(function(){
      $('#text').slideUp();
    });  
  });
</script>	
</head>
<body>
  <!-- このボタンを押すと -->
  <div class="btn" id="hide-text">説明を隠す</div>
  <!-- この表示が隠れる -->
  <h1 id="text">Hello, World!</h1>
  <script src="script.js"></script>
</body>
</html>

Discussion