長留裕平のブログ - http://www.tyosuke20xx.com/

Ｑ＆Ａサイト

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Q&A Site</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f4f4f4;
        }

        h1, h2, h3 {
            color: #333;
        }

        #question-list, #add-question, #question-detail {
            margin-bottom: 20px;
        }

        #questions {
            list-style-type: none;
            padding: 0;
        }

        .question, .answer {
            background-color: #fff;
            padding: 10px;
            margin-bottom: 10px;
            border-radius: 5px;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
        }

        .answer {
            margin-left: 20px;
        }

        form {
            display: flex;
            flex-direction: column;
        }

        form input, form textarea {
            margin-bottom: 10px;
            padding: 10px;
            border-radius: 5px;
            border: 1px solid #ccc;
        }

        form button {
            padding: 10px;
            border: none;
            border-radius: 5px;
            background-color: #333;
            color: #fff;
            cursor: pointer;
        }

        form button:hover {
            background-color: #555;
        }

        .hidden {
            display: none;
        }

        .action-buttons {
            display: flex;
            gap: 10px;
        }
    </style>
</head>
<body>
    <h1>Q&A Site</h1>
    <div id="question-list">
        <h2>Questions</h2>
        <ul id="questions"></ul>
    </div>
    <div id="add-question">
        <h2>Add a Question</h2>
        <form id="question-form">
            <input type="text" id="question-title" placeholder="Title" required>
            <textarea id="question-body" placeholder="Question" required></textarea>
            <button type="submit">Add Question</button>
        </form>
    </div>
    <div id="question-detail" class="hidden">
        <h2 id="detail-title"></h2>
        <p id="detail-body"></p>
        <div class="action-buttons">
            <button id="edit-question-button">Edit</button>
            <button id="delete-question-button">Delete</button>
        </div>
        <div id="edit-question" class="hidden">
            <h3>Edit Question</h3>
            <form id="edit-question-form">
                <input type="text" id="edit-question-title" required>
                <textarea id="edit-question-body" required></textarea>
                <button type="submit">Save Changes</button>
            </form>
        </div>
        <h3>Answers</h3>
        <ul id="answers"></ul>
        <h3>Add an Answer</h3>
        <form id="answer-form">
            <input type="text" id="answer-name" placeholder="Your name" required>
            <textarea id="answer-body" placeholder="Your answer" required></textarea>
            <button type="submit">Add Answer</button>
        </form>
        <button id="back-button">Back to Questions</button>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            let questions = [];
            let currentQuestionIndex = null;

            const questionForm = document.getElementById('question-form');
            const questionTitle = document.getElementById('question-title');
            const questionBody = document.getElementById('question-body');
            const questionsList = document.getElementById('questions');

            const questionDetail = document.getElementById('question-detail');
            const detailTitle = document.getElementById('detail-title');
            const detailBody = document.getElementById('detail-body');
            const answersList = document.getElementById('answers');
            const answerForm = document.getElementById('answer-form');
            const answerName = document.getElementById('answer-name');
            const answerBody = document.getElementById('answer-body');
            const backButton = document.getElementById('back-button');

            const editQuestionButton = document.getElementById('edit-question-button');
            const deleteQuestionButton = document.getElementById('delete-question-button');
            const editQuestionForm = document.getElementById('edit-question-form');
            const editQuestionTitle = document.getElementById('edit-question-title');
            const editQuestionBody = document.getElementById('edit-question-body');

            questionForm.addEventListener('submit', (e) => {
                e.preventDefault();

                const newQuestion = {
                    title: questionTitle.value,
                    body: questionBody.value,
                    answers: []
                };

                questions.push(newQuestion);
                displayQuestions();

                questionTitle.value = '';
                questionBody.value = '';
            });

            answerForm.addEventListener('submit', (e) => {
                e.preventDefault();

                const newAnswer = {
                    name: answerName.value,
                    body: answerBody.value
                };

                questions[currentQuestionIndex].answers.push(newAnswer);
                displayQuestionDetail(currentQuestionIndex);

                answerName.value = '';
                answerBody.value = '';
            });

            editQuestionButton.addEventListener('click', () => {
                editQuestionForm.classList.remove('hidden');
                editQuestionTitle.value = questions[currentQuestionIndex].title;
                editQuestionBody.value = questions[currentQuestionIndex].body;
            });

            editQuestionForm.addEventListener('submit', (e) => {
                e.preventDefault();
                questions[currentQuestionIndex].title = editQuestionTitle.value;
                questions[currentQuestionIndex].body = editQuestionBody.value;
                displayQuestionDetail(currentQuestionIndex);
                displayQuestions();
                editQuestionForm.classList.add('hidden');
            });

            deleteQuestionButton.addEventListener('click', () => {
                questions.splice(currentQuestionIndex, 1);
                questionDetail.classList.add('hidden');
                document.getElementById('question-list').classList.remove('hidden');
                document.getElementById('add-question').classList.remove('hidden');
                displayQuestions();
            });

            backButton.addEventListener('click', () => {
                questionDetail.classList.add('hidden');
                document.getElementById('question-list').classList.remove('hidden');
                document.getElementById('add-question').classList.remove('hidden');
            });

            function displayQuestions() {
                questionsList.innerHTML = '';

                questions.forEach((question, index) => {
                    const li = document.createElement('li');
                    li.className = 'question';
                    li.innerHTML = `
                        <h3>${question.title}</h3>
                        <p>${question.body}</p>
                        <button onclick="viewQuestion(${index})">View Details</button>
                    `;
                    questionsList.appendChild(li);
                });
            }

            window.viewQuestion = (index) => {
                currentQuestionIndex = index;
                displayQuestionDetail(index);
                document.getElementById('question-list').classList.add('hidden');
                document.getElementById('add-question').classList.add('hidden');
                questionDetail.classList.remove('hidden');
            };

            function displayQuestionDetail(index) {
                const question = questions[index];
                detailTitle.textContent = question.title;
                detailBody.textContent = question.body;
                displayAnswers(index);
            }

            function displayAnswers(index) {
                const question = questions[index];
                answersList.innerHTML = '';

                question.answers.forEach((answer, answerIndex) => {
                    const li = document.createElement('li');
                    li.className = 'answer';
                    li.innerHTML = `
                        <p><strong>${answer.name}:</strong> ${answer.body}</p>
                        <button onclick="editAnswer(${index}, ${answerIndex})">Edit</button>
                        <button onclick="deleteAnswer(${index}, ${answerIndex})">Delete</button>
                    `;
                    answersList.appendChild(li);
                });
            }

            window.editAnswer = (questionIndex, answerIndex) => {
                const answer = questions[questionIndex].answers[answerIndex];
                const newBody = prompt("Edit your answer:", answer.body);
                if (newBody) {
                    answer.body = newBody;
                    displayAnswers(questionIndex);
                }
            };

            window.deleteAnswer = (questionIndex, answerIndex) => {
                questions[questionIndex].answers.splice(answerIndex, 1);
                displayAnswers(questionIndex);
            };

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

C++ 純粋仮想関数

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

struct Character {
    virtual void action() = 0;
};

struct Warrior : public Character {
    void action() { cout << "Warrior attacks with a sword!" << endl; }
};

struct Mage : public Character {
    void action() { cout << "Mage casts a fireball!" << endl; }
};

int main() {
    Warrior w;
    w.action();
    Mage m;
    m.action();

    vector<Character*> characters = { &w, &m };
    for (auto c : characters) {
        c->action();
    }
}

C++ デストラクタ

#include <iostream>
#include <string>
#include <memory>
using namespace std;

struct Person {
	string name;
	Person(const string& newName) : name(newName) {}
	~Person() {
		cout << name << "は解体された\n";
	}
};

int main() {
	Person a1("Taro");
	Person* pA2 = new Person("Jiro");
	Person* pA3 = new Person("Saburo");
	auto pA4 = make_shared<Person>("Shiro");
	cout << a1.name << endl;
	cout << pA2->name << endl;
	cout << pA3->name << endl;
	cout << pA4->name << endl;

	delete pA2;
}

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

C++ sort

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

int main() {
	vector<int> v{ 2 ,3 , 5, 1, 4 };
	sort(v.begin(), v.end());
	for (auto i : v) cout << i << ", ";
	cout << endl;

	int a[] = { 2,3,5,1,4 };
	sort(begin(a), end(a));
	for (auto i : a) cout << i << ",";
	cout << endl;
}

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