React アプリケーション完成版

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My React App</title>
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div id="container"></div>

  <script type="text/babel">
    'use strict';

    {
      const Menu = (props) => {

        const decrement = () => {

          props.onDecrement(props.menuId);
        };
        const increment = () => {
          props.onIncrement(props.menuId);
        };

        return (
          <li>
            <button onClick={decrement}>-</button>
            <button onClick={increment}>+</button>
            {props.name} ({props.price}G ☓ {props.count}個)
          </li>
        );
      };

      const App = () => {
        const [counts, setCounts] = React.useState([0, 0, 0]);
        const menus = [
          { id: 0, name: 'ポーション', price: 400 },
          { id: 1, name: 'ハイポーション', price: 500 },
          { id: 2, name: 'エリクサー', price: 300 },
        ];
        const total =
          (menus[0].price * counts[0]) +
          (menus[1].price * counts[1]) +
          (menus[2].price * counts[2]);
        const decrementMenu = (menuId) => {
          if(counts[menuId] > 0){
          const newCounts = [...counts];
          newCounts[menuId]--;
          setCounts(newCounts);
          }
        };
        const incrementMenu = (menuId) => {
          const newCounts = [...counts];
          newCounts[menuId]++;
          setCounts(newCounts);
        };
        const menuItems = menus.map((menu) => {
          return (
            <Menu
              key={menu.id}
              menuId={menu.id}
              count={counts[menu.id]}
              name={menu.name}
              price={menu.price}
              onDecrement={decrementMenu}
              onIncrement={incrementMenu}
            />
          );
        });

        return (
          <>
            <h1>メニュー</h1>
            <ul className="menus">
              {menuItems}
            </ul>
            <p>合計: {total}G</p>
          </>
        );
      };

      const container = document.querySelector('#container');
      const root = ReactDOM.createRoot(container);
      root.render(<App />);
    }
  </script>
</body>

</html>

style.css

@charset "utf-8";

body{
    margin: 0;
}

#container{
    width: 400px;
    margin: auto;
}

h1{
    margin: 16px 0 0 0;
    font-size: 20px;
    text-align: center;
}

.menus{
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.menus > li{
    border: 1px solid #ccc;
    padding: 8px;
    border-radius: 8px;
    margin-top: 16px;
}

.menus button{
    margin-right: 8px;
    width: 24px;
}
p{
    margin: 0;
    text-align: right;
}

C++ search

#include <iostream>
#include <vector>
#include <algorithm>
using namespace std;

int main() {
    vector<int> v{ 2,3,5,1,4 };
    auto begin = v.cbegin();
    auto end = v.cend();

    int target = 3;
    auto pos = find(begin, end, target);
    if (pos == end)
        cout << "見つからない\n";
    else
        cout << "見つかった: " << *pos << endl; // 出力値: 見つかった: 3

    target = 6; // Correcting typo from 'traget' to 'target'
    pos = find(begin, end, target);
    if (pos == end)
        cout << "見つからない\n"; // 出力値: 見つからない
    else
        cout << "見つかった: " << *pos << endl;

    return 0;
}

React 合計金額を表示してみよう！

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My React App</title>
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div id="container"></div>

  <script type="text/babel">
    'use strict';

    {
      const Menu = (props) => {
        const decrement = () => {
        };
        const increment = () => {
        };

        return (
          <li>
            <button onClick={decrement}>-</button>
            <button onClick={increment}>+</button>
            {props.name} ({props.price}G ☓ {props.count}個)
          </li>
        );
      };

      const App = () => {
        const [counts, setCounts] = React.useState([1, 1, 1]);
        const menus = [
          { id: 0, name: 'ポーション', price: 400 },
          { id: 1, name: 'ハイポーション', price: 500 },
          { id: 2, name: 'エリクサー', price: 300 },
        ];
        const total =
          (menus[0].price * counts[0]) +
          (menus[1].price * counts[1]) +
          (menus[2].price * counts[2]);

        const menuItems = menus.map((menu) => {
          return (
            <Menu
              key={menu.id}
              count={counts[menu.id]}
              name={menu.name}
              price={menu.price}
            />
          );
        });

        return (
          <>
            <h1>メニュー</h1>
            <ul className="menus">
              {menuItems}
            </ul>
            <p>合計: {total}G</p>
          </>
        );
      };

      const container = document.querySelector('#container');
      const root = ReactDOM.createRoot(container);
      root.render(<App />);
    }
  </script>
</body>

</html>

style.css

@charset "utf-8";

body{
    margin: 0;
}

#container{
    width: 400px;
    margin: auto;
}

h1{
    margin: 16px 0 0 0;
    font-size: 20px;
    text-align: center;
}

.menus{
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.menus > li{
    border: 1px solid #ccc;
    padding: 8px;
    border-radius: 8px;
    margin-top: 16px;
}

.menus button{
    margin-right: 8px;
    width: 24px;
}
p{
    margin: 0;
    text-align: right;
}

React リスト項目にkey属性を設定する

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My React App</title>
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div id="container"></div>

  <script type="text/babel">
    'use strict';

    {
      const Menu = (props) => {
        return (
          <li>
            <button>-</button>
            <button>+</button>
            {props.name}({props.price}G X 0個)
            </li>
        );
      };

      const App = () => {
        const menus = [
          {id: 0,name: '聖剣', price: 400},
          {id: 1,name: '魔装銃', price: 500},
          {id: 2,name: '魔剣', price: 300},
        ];

        const menuItems = menus.map((menu) =>{
          return(
            <Menu
            key={menu.id}
            name={menu.name}
            price={menu.price}
            />
          );
        });
        return (
          <>
            <h1>メニュー</h1>
            <ul className="menus">
              {menuItems}
            </ul>
            <p>合計: 0円</p>
          </>
        );
      };

      const container = document.querySelector('#container');
      const root = ReactDOM.createRoot(container);
      root.render(<App />);
    }
  </script>
</body>

</html>

style.css

@charset "utf-8";

body{
    margin: 0;
}

#container{
    width: 400px;
    margin: auto;
}

h1{
    margin: 16px 0 0 0;
    font-size: 20px;
    text-align: center;
}

.menus{
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.menus > li{
    border: 1px solid #ccc;
    padding: 8px;
    border-radius: 8px;
    margin-top: 16px;
}

.menus button{
    margin-right: 8px;
    width: 24px;
}
p{
    margin: 0;
    text-align: right;
}

C++ 反復子

#include <iostream>
#include <vector>
#include <list>
#include <numeric>

template <typename T>
int total(T first, T last) {
    int sum = 0;
    for (T p = first; p != last; ++p) sum += *p;
    return sum;
}

int main() {
    std::vector<int> v{ 1, 2, 3, 4, 5 };
    std::cout << total(v.begin(), v.end()) << std::endl;
    std::cout << std::accumulate(v.begin(), v.end(), 0) << std::endl;

    int a[] = { 1, 2, 3, 4, 5 };
    std::cout << total(std::begin(a), std::end(a)) << std::endl;
    std::cout << std::accumulate(std::begin(a), std::end(a), 0) << std::endl;

    std::list<int> li{ 1, 2, 3, 4, 5 };
    std::cout << total(li.begin(), li.end()) << std::endl;
    std::cout << std::accumulate(li.begin(), li.end(), 0) << std::endl;

    return 0;
}

React 配列

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My React App</title>
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div id="container"></div>

  <script type="text/babel">
    'use strict';

    {
      const Menu = (props) => {
        return (
          <li>
            <button>-</button>
            <button>+</button>
            {props.name}({props.price}G X 0個)
            </li>
        );
      };

      const App = () => {
        const menus = [
          {name: '聖剣', price: 400},
          {name: '魔装銃', price: 500},
          {name: '魔剣', price: 300},
        ];

        const menuItems = menus.map((menu) =>{
          return(
            <Menu 
            name={menu.name}
            price={menu.price}
            />
          );
        });
        return (
          <>
            <h1>メニュー</h1>
            <ul className="menus">
              {menuItems}
            </ul>
            <p>合計: 0円</p>
          </>
        );
      };

      const container = document.querySelector('#container');
      const root = ReactDOM.createRoot(container);
      root.render(<App />);
    }
  </script>
</body>

</html>

style.css

@charset "utf-8";

body{
    margin: 0;
}

#container{
    width: 400px;
    margin: auto;
}

h1{
    margin: 16px 0 0 0;
    font-size: 20px;
    text-align: center;
}

.menus{
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.menus > li{
    border: 1px solid #ccc;
    padding: 8px;
    border-radius: 8px;
    margin-top: 16px;
}

.menus button{
    margin-right: 8px;
    width: 24px;
}
p{
    margin: 0;
    text-align: right;
}

React propsで値を受け取る

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My React App</title>
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div id="container"></div>

  <script type="text/babel">
    'use strict';

    {
      const Menu = (props) => {
        console.log(props);
        return (
          <li>聖剣</li>
        );
      };

      const App = () => {
        return (
          <>
            <h1>メニュー</h1>
            <ul className="menus">
              <Menu name="聖剣" />
              <Menu name="魔装銃" />
              <Menu name="魔剣" />
            </ul>
            <p>合計: 0円</p>
          </>
        );
      };

      const container = document.querySelector('#container');
      const root = ReactDOM.createRoot(container);
      root.render(<App />);
    }
  </script>
</body>

</html>

style.css

@charset "utf-8";

body {
  margin: 0;
}

#container {
  width: 400px;
  margin: 0 auto;
}

h1 {
  margin: 16px 0 0 0;
  font-size: 20px;
  text-align: center;
}

.menus {
  margin: 0;
  padding: 0;
  list-style: none;
}

.menus > li {
  border: 1px solid #ccc;
  padding: 8px;
  border-radius: 8px;
  margin-top: 16px;
}

p {
  margin: 16px 0 0 0;
  text-align: right;
}

React Appコンポーネント

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My React App</title>
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
  <link rel="stylesheet" href="style.css">
<body>
  <div id="container"></div>

  <script type="text/babel">
    'use strict';

    {
      const App = () => {
        return(
          <>
            <h1>アイテム</h1>
            <ul className="menus">
              <li>ポーション</li>
              <li>エリクサー</li>
              <li>ラストエリクサー</li>
            </ul>
            <p>合計: 0G</p>
          </>
        );
      };
      const container = document.querySelector('#container');
      const root = ReactDOM.createRoot(container);
      root.render(<App/>);
    }
  </script>
</body>

</html>

style.css

@charset "utf-8";

body{
    margin: 0;
}

#container{
    width: 400px;
    margin: auto;
}

h1{
    margin: 16px 0 0 0;
    font-size: 20px;
    text-align: center;
}

.menus{
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.menus > li{
    border: 1px solid #ccc;
    padding: 8px;
    border-radius: 8px;
    margin-top: 16px;
}

p{
    margin: 0;
    text-align: right;
}

React className属性

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My React App</title>
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
  <link rel="stylesheet" href="style.css">
<body>
  <div id="container"></div>

  <script type="text/babel">
    'use strict';

    {
      const container = document.querySelector('#container');
      const root = ReactDOM.createRoot(container);
      root.render(
        <>
           <h1>アイテム</h1>
           <ul className="menus">
            <li>ポーション</li>
            <li>エリクサー</li>
            <li>ラストエリクサー</li>
           </ul>
           <p>合計: 0G</p>
        </>
      );
    }
  </script>
</body>

</html>

style.css

@charset "utf-8";

body{
    margin: 0;
}

#container{
    width: 400px;
    margin: auto;
}

h1{
    margin: 16px 0 0 0;
    font-size: 20px;
    text-align: center;
}

.menus{
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.menus > li{
    border: 1px solid #ccc;
    padding: 8px;
    border-radius: 8px;
    margin-top: 16px;
}

p{
    margin: 0;
    text-align: right;
}