投稿者: chosuke

趣味はゲームやアニメや漫画などです

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;
}

React CSSでスタイリングしていこう

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>
            <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;
    background: pink;
}

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

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

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

React JSX記法

<!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>

<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>
            <li>ポーション</li>
            <li>エリクサー</li>
            <li>ラストエリクサー</li>
           </ul>
           <p>合計: 0G</p>
        </>
      );
    }
  </script>
</body>

</html>

Reactでh1要素を描画してみよう

<!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>

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

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

    {
      const container = document.querySelector('#container');
      const root = ReactDOM.createRoot(container);
      root.render(
        React.createElement('h1', null, 'メニュー')
      );
    }
  </script>
</body>

</html>

『ドラクエ3』HD-2Dリメイクがついに登場！11月14日発売決定！

リメイク版『ドラクエ3』の特徴

HD-2Dグラフィックとは

　『ドラクエ3』HD-2Dリメイクは、従来のドット絵と3DCGを融合させた「HD-2Dグラフィック」が特徴的です。この手法は、過去のドット絵の魅力を保ちながらも、現代のゲームに求められる美しさや奥行きを加えています。背景やキャラクターの描写は非常に細かく、光と影の表現も豊かで、プレーヤーに新しい視覚体験を提供します。このHD-2Dグラフィックは、『オクトパストラベラー』などで採用されており、懐かしさと新しさが融合した美しいゲーム世界が広がっています。

過去作との違い

　リメイク版『ドラクエ3』は、原作のストーリーやキャラクターを忠実に再現しつつ、現代のプレーヤーに合わせた新たな要素がいくつか追加されています。例えば、バトルシステムや操作性が改良されており、より快適にプレイできるようになっています。また、グラフィックの進化に伴い、ゲーム内の風景やダンジョンがよりリアルに感じられるようになっています。『ドラクエ3』の往年のファンはもちろん、初めてプレイする方にも楽しんでもらえる内容となっています。

発売日についての詳細

予約開始日と特典

　『ドラクエ3』HD-2Dリメイクの予約は2024年8月1日から開始されます。予約特典として、限定のアートブックやサウンドトラックが用意されており、これらはファンにとって見逃せない豪華なアイテムです。また、特定の店舗や公式オンラインストアでの予約では、追加のデジタルアイテムやゲーム内で使用できる特典も提供される予定です。これにより、リリース前から多くのファンが興奮し、予約を急ぐこと間違いありません。

発売日の発表イベント

　『ドラクエ3』HD-2Dリメイクの発売日である2024年11月14日は、Nintendo Direct 2024年6月18日の配信で発表されました。この発表イベントでは、シリーズの生みの親である堀井雄二氏も登場し、リメイク版の特徴や『ドラゴンクエストIII』の位置づけについて語りました。また、「1・2のリメイクは2025年に発売で映像公開【ニンダイ】」というサプライズも盛り込まれ、ファンたちの期待がさらに高まりました。このリメイク版の新情報が詰め込まれたイベントは、視聴者にとっても非常に充実した内容となりました。

『ドラクエI・II』のリメイク情報

リメイク版の特徴

　『ドラクエI・II』のリメイク版は、シリーズファンの間で待望されていた作品です。このリメイク版も『ドラクエ3』HD-2Dリメイクと同様に、ドット絵と3DCGを融合させたHD-2Dグラフィックを採用しています。これにより、昔ながらの懐かしい雰囲気を保ちつつも、現代の美しい映像表現が実現されています。また、ゲームシステムや操作性も現代風にアップデートされており、初めてのプレーヤーでも楽しめる内容となっています。

リリース予定日

　『HD-2D版 ドラゴンクエストI＆II』の発売は、2025年に予定されています。11月14日に発売決定が発表された『ドラクエ3』HD-2Dリメイクと共に、シリーズ全体が再び注目を集めています。これにより、新しいファン層を取り込みつつ、長年のファンにも新鮮な体験を提供します。リメイク版の詳細は、今後のNintendo Directなどの公式発表で明らかにされる予定です。

ファンの反応と期待

SNSでの声

　『ドラゴンクエストIII』のHD-2Dリメイクに関するSNSでの反応は非常に活発です。リメイク版の発売日が11月14日に決定したことや、HD-2Dグラフィックの美しさに関する期待感が多くのファンから寄せられています。「待ちに待ったリリース、絶対に買う！」や「HD-2Dのグラフィックが本当に素晴らしい」といったコメントが多く見られます。また、リメイク版の発表イベント後には、SNSで「#ドラクエ3リメイク」がトレンド入りするなど、ファンの興奮が伝わってきます。

専門家の評価

　ゲーム評論家や業界の専門家も、『ドラゴンクエストIII』のHD-2Dリメイクについて高く評価しています。特に注目されているのは、ドット絵と3DCGが融合したHD-2Dグラフィックの美しさです。多くの専門家は、「クラシックなドラクエ3の魅力を残しつつ、現代的なビジュアルが新旧ファンに響く」と評価しています。また、2025年に発売予定の『HD-2D版 ドラゴンクエストI＆II』にも期待が集まっており、リメイク版の成功が今後のシリーズ展開にどのような影響を与えるかについて議論が行われています。

まとめ

リメイク版の意義と期待

　『ドラクエ3』HD-2Dリメイクの発売が11月14日に決定し、ファンの間で大きな話題となっています。ドット絵と3DCGが融合したHD-2Dグラフィックにより、美しく生まれ変わった世界を再び冒険する楽しみが広がります。また、『ドラゴンクエストI・II』のリメイクも2025年に控えており、最新の映像が公開される場面も【ニンダイ】で見られました。

　このリメイク版は、シリーズの魅力を新しい世代にも伝える大きな意義を持っています。長年愛されてきた『ドラゴンクエスト』シリーズの中で特に人気の高い『DQIII』が、最新技術で蘇ることにより、新旧ファンが共に楽しめる作品となるでしょう。このようなリメイクによって、オリジナル版をプレイしたことがない若い世代にも、その魅力を伝えることができます。

　さらに、堀井雄二氏が語ったように、『ドラクエIII』はシリーズの中でも特別な位置付けを持つ作品です。そのリメイクに期待が高まるのは当然のことでしょう。今後の『ドラゴンクエスト』シリーズの発展を見据える本作の成功に、ファンや専門家からの期待も非常に高まっています。11月14日の発売日が待ち遠しいですね。