【JavaScript】が嫌いな13の理由。

// 例：①ユーザー情報を取得、②そのユーザーの投稿を取得、③最初の投稿のコメントを取得
function getUser(userId, callback) {
  setTimeout(() => {
    console.log(`ユーザー ${userId} を取得中...`);
    const user = { id: userId, name: 'Taro Yamada' };
    if (user) {
      callback(null, user);
    } else {
      callback(new Error('ユーザーが見つかりません'));
    }
  }, 500);
}

function getPosts(userId, callback) {
  setTimeout(() => {
    console.log(`ユーザー ${userId} の投稿を取得中...`);
    const posts = [{ id: 1, title: '最初の投稿' }, { id: 2, title: '二番目の投稿' }];
    if (posts.length > 0) {
      callback(null, posts);
    } else {
      callback(new Error('投稿が見つかりません'));
    }
  }, 500);
}

function getComments(postId, callback) {
  setTimeout(() => {
    console.log(`投稿 ${postId} のコメントを取得中...`);
    const comments = [{ id: 101, text: '素晴らしい！' }, { id: 102, text: '同感です' }];
    if (comments.length > 0) {
      callback(null, comments);
    } else {
      callback(new Error('コメントが見つかりません'));
    }
  }, 500);
}

// コールバック地獄が発生！
getUser(1, (err, user) => {
  if (err) {
    console.error('エラー:', err.message);
    return;
  }
  console.log('ユーザー取得成功:', user);
  getPosts(user.id, (err, posts) => {
    if (err) {
      console.error('エラー:', err.message);
      return;
    }
    console.log('投稿取得成功:', posts);
    if (posts.length > 0) {
      getComments(posts[0].id, (err, comments) => {
        if (err) {
          console.error('エラー:', err.message);
          return;
        }
        console.log('コメント取得成功:', comments);
        console.log('最初のコメント:', comments[0]);
      });
    } else {
      console.log('投稿がありませんでした。');
    }
  });
});

/*
出力例:
ユーザー 1 を取得中...
ユーザー取得成功: { id: 1, name: 'Taro Yamada' }
ユーザー 1 の投稿を取得中...
投稿取得成功: [ { id: 1, title: '最初の投稿' }, { id: 2, title: '二番目の投稿' } ]
投稿 1 のコメントを取得中...
コメント取得成功: [ { id: 101, text: '素晴らしい！' }, { id: 102, text: '同感です' } ]
最初のコメント: { id: 101, text: '素晴らしい！' }
*/

function getUserP(userId) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log(`ユーザー ${userId} を取得中 (Promise)...`);
      const user = { id: userId, name: 'Taro Yamada' };
      if (user) {
        resolve(user);
      } else {
        reject(new Error('ユーザーが見つかりません'));
      }
    }, 500);
  });
}

function getPostsP(userId) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log(`ユーザー ${userId} の投稿を取得中 (Promise)...`);
      const posts = [{ id: 1, title: '最初の投稿' }, { id: 2, title: '二番目の投稿' }];
      if (posts.length > 0) {
        resolve(posts);
      } else {
        reject(new Error('投稿が見つかりません'));
      }
    }, 500);
  });
}

function getCommentsP(postId) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log(`投稿 ${postId} のコメントを取得中 (Promise)...`);
      const comments = [{ id: 101, text: '素晴らしい！' }, { id: 102, text: '同感です' }];
      if (comments.length > 0) {
        resolve(comments);
      } else {
        reject(new Error('コメントが見つかりません'));
      }
    }, 500);
  });
}

// Promiseチェーンでコールバック地獄を解消
getUserP(1)
  .then(user => {
    console.log('ユーザー取得成功 (Promise):', user);
    return getPostsP(user.id); // 次のPromiseを返す
  })
  .then(posts => {
    console.log('投稿取得成功 (Promise):', posts);
    if (posts.length > 0) {
      return getCommentsP(posts[0].id); // 次のPromiseを返す
    } else {
      console.log('投稿がありませんでした。');
      return []; // 後続処理のために空配列を返すか、別の処理へ
    }
  })
  .then(comments => {
    if (comments.length > 0) {
        console.log('コメント取得成功 (Promise):', comments);
        console.log('最初のコメント (Promise):', comments[0]);
    }
  })
  .catch(err => {
    // チェーンのどこかで発生したエラーを一括で捕捉
    console.error('エラー (Promise):', err.message);
  });

/*
出力例:
ユーザー 1 を取得中 (Promise)...
ユーザー取得成功 (Promise): { id: 1, name: 'Taro Yamada' }
ユーザー 1 の投稿を取得中 (Promise)...
投稿取得成功 (Promise): [ { id: 1, title: '最初の投稿' }, { id: 2, title: '二番目の投稿' } ]
投稿 1 のコメントを取得中 (Promise)...
コメント取得成功 (Promise): [ { id: 101, text: '素晴らしい！' }, { id: 102, text: '同感です' } ]
最初のコメント (Promise): { id: 101, text: '素晴らしい！' }
*/

async function fetchUserData() {
  try {
    const user = await getUserP(1); // Promiseが解決されるまで待機
    console.log('ユーザー取得成功 (async/await):', user);

    const posts = await getPostsP(user.id); // Promiseが解決されるまで待機
    console.log('投稿取得成功 (async/await):', posts);

    if (posts.length > 0) {
      const comments = await getCommentsP(posts[0].id); // Promiseが解決されるまで待機
      console.log('コメント取得成功 (async/await):', comments);
      console.log('最初のコメント (async/await):', comments[0]);
    } else {
      console.log('投稿がありませんでした。');
    }
  } catch (err) {
    // await中のPromiseがrejectされると、ここでエラーが捕捉される
    console.error('エラー (async/await):', err.message);
  }
}

fetchUserData();

/*
出力例:
ユーザー 1 を取得中 (Promise)...
ユーザー取得成功 (async/await): { id: 1, name: 'Taro Yamada' }
ユーザー 1 の投稿を取得中 (Promise)...
投稿取得成功 (async/await): [ { id: 1, title: '最初の投稿' }, { id: 2, title: '二番目の投稿' } ]
投稿 1 のコメントを取得中 (Promise)...
コメント取得成功 (async/await): [ { id: 101, text: '素晴らしい！' }, { id: 102, text: '同感です' } ]
最初のコメント (async/await): { id: 101, text: '素晴らしい！' }
*/

async function fetchMultipleData() {
  try {
    // ユーザー情報と設定情報を並列で取得
    const [user, settings] = await Promise.all([
      getUserP(2), // getUserP(2) を実行
      new Promise(resolve => setTimeout(() => resolve({ theme: 'dark' }), 300)) // 設定情報を模倣
    ]);
    console.log('並列取得成功:', { user, settings });
  } catch (err) {
    console.error('並列取得エラー:', err.message);
  }
}
fetchMultipleData();
/*
出力例:
ユーザー 2 を取得中 (Promise)...
並列取得成功: { user: { id: 2, name: 'Taro Yamada' }, settings: { theme: 'dark' } }
*/

// ブラウザ環境での実行を想定
const myButton = document.createElement('button');
myButton.textContent = 'クリックしてね';
document.body.appendChild(myButton);

function Greeter(name) {
  this.name = name;
  this.message = `こんにちは、${this.name}さん！`;
}

Greeter.prototype.greet = function() {
  console.log(this.message); // ここでのthisはGreeterインスタンス
};

Greeter.prototype.greetLater = function() {
  // setTimeoutのコールバック関数内では、thisはwindowオブジェクト(非strictモード)
  // またはundefined(strictモード)を指してしまう
  setTimeout(function() {
    // 'use strict'; を付けると TypeError: Cannot read property 'message' of undefined
    try {
      console.log(this.message); //期待通りに動作しない！
    } catch (e) {
        console.error("エラー:", e);
        console.log("このコンテキストのthis:", this); // window オブジェクトが出力されることが多い
    }
  }, 1000);
};

const greeter = new Greeter('花子');
greeter.greet(); // "こんにちは、花子さん！" (期待通り)
greeter.greetLater(); // エラー または undefined が出力される

// イベントリスナーの場合も同様
myButton.addEventListener('click', function() {
    // この関数内での this は myButton 要素を指す
    console.log("ボタンがクリックされました！ this:", this);
    // greeter.greet(); // これはOK
    // greeter.greetLater(); // greetLater 内の setTimeout コールバックの this はやはり問題
});

// メソッドを直接イベントリスナーに渡した場合
const counter = {
    count: 0,
    increment: function() {
        this.count++;
        console.log("カウント:", this.count);
    }
};

// この場合、increment内のthisはmyButton要素を指してしまう！
// myButton.addEventListener('click', counter.increment);
// クリックすると NaN (Not a Number) になることが多い
// なぜなら myButton.count が undefined で、undefined++ が NaN になるため

Greeter.prototype.greetLater_Solution1 = function() {
  const that = this; // thisをthatに退避
  setTimeout(function() {
    console.log(that.message); // that経由でアクセス
  }, 1000);
};

const greeter1 = new Greeter('一郎');
greeter1.greetLater_Solution1(); // "こんにちは、一郎さん！"

Greeter.prototype.greetLater_Solution2 = function() {
  // setTimeoutに渡すコールバック関数のthisを現在のthis(Greeterインスタンス)に束縛
  const boundFunction = function() {
    console.log(this.message);
  }.bind(this);
  setTimeout(boundFunction, 1000);
};

const greeter2 = new Greeter('二郎');
greeter2.greetLater_Solution2(); // "こんにちは、二郎さん！"

// イベントリスナーでの利用例
myButton.addEventListener('click', counter.increment.bind(counter));
// これでクリック時に counter.increment 内の this は counter オブジェクトを指す

Greeter.prototype.greetLater_Solution3 = function() {
  // アロー関数を使うと、外側のgreetLater_Solution3のthisがそのまま使われる
  setTimeout(() => {
    console.log(this.message); // thisはGreeterインスタンスを指す
  }, 1000);
};

const greeter3 = new Greeter('三郎');
greeter3.greetLater_Solution3(); // "こんにちは、三郎さん！"

// イベントリスナーでアロー関数を使う例
const counterArrow = {
    count: 0,
    increment: function() { // メソッド自体は通常関数でも良い
        myButton.addEventListener('click', () => {
            // このアロー関数内のthisは外側のincrementメソッドのthis、
            // つまり counterArrow オブジェクトを指す
            this.count++;
            console.log("アロー関数カウント:", this.count);
        });
    }
};
// counterArrow.increment(); // これを実行するとボタンクリックでカウントアップされる
// ただし、上記のようにメソッド内でリスナーを登録するのは一般的ではない。
// 通常はクラスのコンストラクタなどでbindするか、
// フレームワークのイベントハンドリング機能を使うことが多い。

class Counter {
  constructor() {
    this.count = 0;
    // イベントハンドラで使うメソッドはコンストラクタでbindしておくのが定石
    this.handleClick = this.handleClick.bind(this);
  }

  increment() {
    this.count++;
    console.log("クラスカウント:", this.count);
  }

  handleClick() {
    // bindされているので、thisはCounterインスタンスを指す
    this.increment();
  }

  setupButton(button) {
    button.addEventListener('click', this.handleClick);
  }

  // または、クラスフィールド構文 + アロー関数 (BabelやTypeScriptが必要な場合あり)
  // handleClickArrow = () => {
  //   this.increment();
  // }
  // setupButtonArrow(button) {
  //   button.addEventListener('click', this.handleClickArrow);
  // }

}

const classCounter = new Counter();
classCounter.setupButton(myButton); // ボタンクリックでカウントアップ

for (var i = 0; i < 3; i++) {
  setTimeout(function() {
    // ループが終了した時点の i (つまり 3) が参照されてしまう
    console.log(`var ループ: ${i}`);
  }, 100 * i);
}
// 出力:
// var ループ: 3 (約0ms後)
// var ループ: 3 (約100ms後)
// var ループ: 3 (約200ms後)

// 期待する出力 (0, 1, 2) とは異なる！

for (var i = 0; i < 3; i++) {
  (function(j) { // 即時実行関数で新しいスコープを作成し、iの値をjにコピー
    setTimeout(function() {
      console.log(`IIFE ループ: ${j}`);
    }, 100 * j);
  })(i); // ループの各反復でiの現在の値を渡す
}
// 出力:
// IIFE ループ: 0
// IIFE ループ: 1
// IIFE ループ: 2

for (let i = 0; i < 3; i++) { // letを使うだけでOK
  setTimeout(function() {
    // 各反復のiの値がクロージャーに保持される
    console.log(`let ループ: ${i}`);
  }, 100 * i);
}
// 出力:
// let ループ: 0
// let ループ: 1
// let ループ: 2

function setupHeavyObjectListener() {
  const largeData = new Array(1000000).fill('some data'); // 大きなデータ
  const element = document.getElementById('myElement'); // DOM要素への参照

  if (element) {
    // イベントリスナー（クロージャー）が largeData と element を参照し続ける
    element.addEventListener('click', function handler() {
      console.log(`Clicked! Data length: ${largeData.length}`);
      // もしこのリスナーが解除されないまま element がDOMから削除されても、
      // handler クロージャーが largeData と element への参照を持ち続けるため、
      // メモリが解放されない可能性がある。
    });

    // 本来は、element が不要になったらリスナーを解除する必要がある
    // 例: cleanup 関数を用意し、適切なタイミングで呼び出す
    // function cleanup() {
    //   element.removeEventListener('click', handler);
    //   console.log('Listener removed, memory can be freed.');
    // }
    // return cleanup;
  }
}

// const cleanupListener = setupHeavyObjectListener();
// ... アプリケーション実行 ...
// 不要になったら cleanupListener(); を呼び出す

// Optional Chaining (?.) は比較的新しい機能
const user = {
  name: "Alice",
  address: null // 住所情報がない場合がある
};

// ?. を使うと address が null や undefined でもエラーにならない
const city = user.address?.city; // 古いブラウザ (例: IE11) では SyntaxError
console.log("都市:", city); // undefined (エラーにならない)

// ?. を使わない場合、エラーハンドリングが必要
let city_old;
if (user.address) {
  city_old = user.address.city;
}
console.log("都市 (旧):", city_old); // undefined

# プロジェクトにBabelを導入 (Node.js環境が必要)
npm install --save-dev @babel/core @babel/cli @babel/preset-env
# または yarn add --dev @babel/core @babel/cli @babel/preset-env

{
  "presets": [
    ["@babel/preset-env", {
      "targets": "> 0.25%, not dead" // 対象ブラウザを指定 (例: シェア0.25%以上、サポート終了でないブラウザ)
      // "targets": "defaults" // Babelのデフォルト設定
      // "targets": "ie 11" // 特定のブラウザを指定
    }]
  ]
}

npx babel src.js --out-file dist.js

// Babelによる変換後のイメージ (Optional Chaining)
var _user$address;
const user = {
  name: "Alice",
  address: null
};

// ?. が存在チェックに変換される
const city = (_user$address = user.address) === null || _user$address === void 0 ? void 0 : _user$address.city;
console.log("都市:", city);

npm install --save core-js regenerator-runtime
# または yarn add core-js regenerator-runtime

import 'core-js/stable'; // core-jsの安定版機能をすべて読み込む (ファイルサイズが大きくなる)
// または必要な機能だけを import 'core-js/features/promise'; のように読み込む
import 'regenerator-runtime/runtime'; // async/await を使う場合に必要

// これ以降のコードで Promise や async/await などが古いブラウザでも使えるようになる
async function fetchData() {
    const response = await fetch('/api/data'); // fetchもポリフィルが必要な場合がある
    const data = await response.json();
    console.log(data);
}

// 初期データ
let items = ['りんご', 'ばなな', 'みかん'];
const listElement = document.getElementById('myList');

// 初期リスト表示関数
function renderList() {
  // 都度リスト全体をクリアして再描画（非効率）
  listElement.innerHTML = ''; // 簡単だがパフォーマンスが悪い場合がある
  items.forEach((item, index) => {
    const li = document.createElement('li');
    li.textContent = item;
    // 削除ボタンを追加
    const deleteButton = document.createElement('button');
    deleteButton.textContent = '削除';
    deleteButton.onclick = function() {
      deleteItem(index);
    };
    li.appendChild(deleteButton);
    listElement.appendChild(li);
  });
  console.log('リストを再描画しました');
}

// アイテム追加関数
function addItem(newItem) {
  items.push(newItem);
  renderList(); // 変更があるたびに全体を再描画
}

// アイテム削除関数
function deleteItem(index) {
  items.splice(index, 1);
  renderList(); // 変更があるたびに全体を再描画
}

// 初期描画
// renderList(); // HTMLに <ul id="myList"></ul> がある想定

// addItem('ぶどう');
// addItem('いちご');
// 削除ボタンをクリックすると該当アイテムが消え、リストが再描画される

import React, { useState } from 'react';

function ItemList() {
  const [items, setItems] = useState(['りんご', 'ばなな', 'みかん']);
  const [newItem, setNewItem] = useState('');

  const addItem = () => {
    if (newItem.trim() === '') return;
    setItems([...items, newItem.trim()]); // 状態を更新
    setNewItem('');
  };

  const deleteItem = (indexToDelete) => {
    setItems(items.filter((_, index) => index !== indexToDelete)); // 状態を更新
  };

  return (
    <div>
      <h2>アイテムリスト (React)</h2>
      {/* 状態 (items) に基づいてリストが自動的にレンダリングされる */}
      <ul>
        {items.map((item, index) => (
          <li key={index}> {/* key は差分検出に重要 */}
            {item}
            <button onClick={() => deleteItem(index)}>削除</button>
          </li>
        ))}
      </ul>
      <input
        type="text"
        value={newItem}
        onChange={(e) => setNewItem(e.target.value)}
        placeholder="新しいアイテム"
      />
      <button onClick={addItem}>追加</button>
    </div>
  );
}

export default ItemList;

// Debounce関数の簡単な例
function debounce(func, delay) {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

const handleInput = (event) => {
  console.log('API検索:', event.target.value); // この処理を高頻度で実行したくない
};

const debouncedHandleInput = debounce(handleInput, 500); // 500ms待ってから実行

// inputElement.addEventListener('input', debouncedHandleInput);

<!DOCTYPE html>
<html>
<head>
  <title>旧式管理</title>
  <script src="utils.js"></script>
  <script src="main.js"></script>
  </head>
<body>
  </body>
</html>

// グローバルスコープに関数を定義
function utilityFunction(message) {
  console.log('Utility:', message);
}

var globalVariable = "これはグローバル変数";

// グローバルスコープの関数や変数に依存
utilityFunction("メインスクリプトから呼び出し");
console.log(globalVariable);

// もし他のスクリプトで同じ名前の関数や変数が定義されると、上書きされてしまう可能性がある
// function utilityFunction(msg) { /* 別の実装 */ }

// 公開したい関数や変数に export をつける
export function utilityFunction(message) {
  console.log('Utility (ESM):', message);
}

export const PI = 3.14159;

// モジュール内部でのみ使う変数 (公開されない)
const internalValue = "内部データ";

// 必要なものだけを import で読み込む
import { utilityFunction, PI } from './utils.js';
// 別名でインポートも可能: import { utilityFunction as utilFunc } from './utils.js';
// モジュール全体をオブジェクトとしてインポート: import * as Utils from './utils.js';

utilityFunction("メインスクリプトから呼び出し (ESM)");
console.log("円周率:", PI);

// internalValue はこのスコープからは参照できない
// console.log(internalValue); // ReferenceError

// 他のモジュールで同じ名前が使われていても衝突しない
const myPI = 3; // OK

<!DOCTYPE html>
<html>
<head>
  <title>ES Modules</title>
  <script type="module" src="main.js"></script>
</head>
<body>
  </body>
</html>

// main.js (外部ライブラリ lodash を利用する例)
import { utilityFunction } from './utils.js';
import _ from 'lodash'; // npm install lodash でインストールしたライブラリ

utilityFunction("Lodashを使ってみる");

const numbers = [1, 2, 3, 4, 5];
const shuffledNumbers = _.shuffle(numbers); // lodashの関数を利用
console.log("シャッフルされた配列:", shuffledNumbers);

button.addEventListener('click', async () => {
  // ボタンがクリックされた時に初めて large-module.js を読み込む
  const { largeFunction } = await import('./large-module.js');
  largeFunction();
});

function taskA() {
  console.log('Task A 開始');
  setTimeout(() => {
    console.log('Task A 内部処理');
    // ここでエラーが発生したとする
    throw new Error('Task A でエラー発生！');
  }, 100);
  console.log('Task A 終了');
}

function taskB() {
  console.log('Task B 開始');
  taskA(); // taskAを呼び出す
  console.log('Task B 終了');
}

try {
  taskB();
} catch (error) {
  // このcatchブロックでは setTimeout 内のエラーは捕捉できない！
  console.error('同期エラー捕捉:', error);
}

// グローバルなエラーハンドラで捕捉されるか、コンソールにエラーが表示される
window.addEventListener('error', function(event) {
    console.error('グローバルエラーハンドラ:', event.error);
});
// または unhandledrejection (Promiseの場合)
window.addEventListener('unhandledrejection', function(event) {
    console.error('Promise 未処理の拒否:', event.reason);
});

/*
出力例:
Task B 開始
Task A 開始
Task A 終了
Task B 終了
(約100ms後)
Task A 内部処理
Uncaught Error: Task A でエラー発生！
グローバルエラーハンドラ: Error: Task A でエラー発生！ at ...
*/

myPromiseFunction()
  .then(result => { /* 成功時の処理 */ })
  .catch(error => {
    console.error('Promiseエラー:', error);
    // エラーに応じた処理 (ユーザーへの通知など)
  });

async function myAsyncFunctionWrapper() {
  try {
    const result = await myAsyncFunction();
    // 成功時の処理
  } catch (error) {
    console.error('async/awaitエラー:', error);
    // エラーに応じた処理
  }
}

const userInput = '<img src="invalid-image" onerror="alert(\'XSS攻撃成功！\');">'; // 悪意のある入力例
const commentElement = document.getElementById('comment');

// 脆弱な例: innerHTML に直接ユーザー入力を代入
// commentElement.innerHTML = userInput;
// → onerror属性のJavaScriptが実行されてしまう！

// これにより、攻撃者はユーザーのCookieを盗んだり、
// 意図しない操作を実行させたりできる可能性がある。

// 安全な例: textContent を使う
commentElement.textContent = userInput;
// → "<img src="invalid-image" onerror="alert('XSS攻撃成功！');">" という文字列がそのまま表示される
// スクリプトは実行されない

// サニタイズライブラリの利用例 (DOMPurify)
// npm install dompurify
// import DOMPurify from 'dompurify';
// const cleanHTML = DOMPurify.sanitize(userInput);
// commentElement.innerHTML = cleanHTML; // 安全化されたHTMLを挿入

// 簡単なエスケープ関数の例
function escapeHTML(str) {
  return str.replace(/&/g, '&')
            .replace(/</g, '<')
            .replace(/>/g, '>')
            .replace(/"/g, '"')
            .replace(/'/g, ''');
}

const escapedInput = escapeHTML(userInput);
// commentElement.innerHTML = `コメント: ${escapedInput}`; // エスケープされた文字列を埋め込む

Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted-scripts.com; img-src 'self' data:; style-src 'self' 'unsafe-inline';

npm audit
# または
yarn audit

// Reactでの例 (概念)
function App() {
  const [user, setUser] = useState({ name: "ゲスト", theme: "light" });

  return <Layout user={user} setUser={setUser} />; // Layoutに渡す
}

function Layout({ user, setUser }) {
  // Layout自体はuserやsetUserを使わないかもしれないが、子に渡すために受け取る
  return (
    <div>
      <Header user={user} /> {/* Headerに渡す */}
      <MainContent user={user} setUser={setUser} /> {/* MainContentに渡す */}
    </div>
  );
}

function Header({ user }) {
  return <header>ようこそ、{user.name}さん</header>;
}

function MainContent({ user, setUser }) {
  // MainContentも直接は使わないかもしれない
  return <UserProfile user={user} setUser={setUser} />; // UserProfileに渡す
}

function UserProfile({ user, setUser }) {
  // やっとここでuserとsetUserを使う
  const toggleTheme = () => {
    setUser({ ...user, theme: user.theme === "light" ? "dark" : "light" });
  };

  return (
    <div>
      <p>名前: {user.name}</p>
      <p>テーマ: {user.theme}</p>
      <button onClick={toggleTheme}>テーマ切り替え</button>
    </div>
  );
}

import React, { useState, useContext, createContext } from 'react';

// 1. Contextを作成
const UserContext = createContext();

function App() {
  const [user, setUser] = useState({ name: "ゲスト", theme: "light" });

  // 2. Providerでラップし、valueとして状態と更新関数を渡す
  return (
    <UserContext.Provider value={{ user, setUser }}>
      <Layout /> {/* 中間コンポーネントはpropsを受け取る必要なし！ */}
    </UserContext.Provider>
  );
}

function Layout() {
  return (
    <div>
      <Header />
      <MainContent />
    </div>
  );
}

function Header() {
  // 3. useContextフックで値を取得
  const { user } = useContext(UserContext);
  return <header>ようこそ、{user.name}さん</header>;
}

function MainContent() {
  return <UserProfile />;
}

function UserProfile() {
  // 3. 必要なコンポーネントでuseContextを使って値を取得
  const { user, setUser } = useContext(UserContext);

  const toggleTheme = () => {
    setUser({ ...user, theme: user.theme === "light" ? "dark" : "light" });
  };

  return (
    <div>
      <p>名前: {user.name}</p>
      <p>テーマ: {user.theme}</p>
      <button onClick={toggleTheme}>テーマ切り替え</button>
    </div>
  );
}

import React from 'react';
import { create } from 'zustand'; // npm install zustand

// 1. ストアを作成 (フックとして利用できる)
const useUserStore = create((set) => ({
  user: { name: "ゲスト", theme: "light" },
  setUser: (newUser) => set({ user: newUser }),
  toggleTheme: () => set((state) => ({
    user: { ...state.user, theme: state.user.theme === 'light' ? 'dark' : 'light' }
  })),
}));

// Appコンポーネントはストアを知らなくても良い
function App() {
  return <Layout />;
}

function Layout() {
  return (
    <div>
      <Header />
      <MainContent />
    </div>
  );
}

function Header() {
  // 2. ストアから必要な状態をセレクターで取得
  const userName = useUserStore((state) => state.user.name);
  return <header>ようこそ、{userName}さん</header>;
}

function MainContent() {
  return <UserProfile />;
}

function UserProfile() {
  // 2. ストアから必要な状態とアクションを取得
  const user = useUserStore((state) => state.user);
  const toggleTheme = useUserStore((state) => state.toggleTheme);

  return (
    <div>
      <p>名前: {user.name}</p>
      <p>テーマ: {user.theme}</p>
      <button onClick={toggleTheme}>テーマ切り替え</button>
    </div>
  );
}

// 悪い例: 元のオブジェクトを直接変更
// state.user.theme = 'dark';

// 良い例: 新しいオブジェクトを作成
// setUser({ ...user, theme: 'dark' });
// または Zustand の例のように set((state) => ({ user: { ...state.user, theme: 'dark' } }))

function setupTemporaryElement() {
  const element = document.createElement('div');
  element.textContent = 'クリックして消える要素';
  document.body.appendChild(element);

  const largeData = new Array(100000).fill('一時データ'); // リスナーが参照するデータ

  function handleClick() {
    console.log('要素がクリックされました！データサイズ:', largeData.length);
    // 要素自身をDOMから削除
    element.remove();
    console.log('要素を削除しました');
    // ★★★ 問題点: イベントリスナーが解除されていない！ ★★★
    // element 変数自体はこの関数のスコープを抜けるが、
    // リスナー関数 (handleClick) がまだ存在し、
    // largeData や、場合によっては削除されたはずの element への参照を
    // 保持し続けてしまう可能性がある (ブラウザの実装による)。
  }

  element.addEventListener('click', handleClick);

  // 解消するには、削除前にリスナーを解除する必要がある
  // function handleClickAndRemove() {
  //   console.log('要素がクリックされました！データサイズ:', largeData.length);
  //   element.removeEventListener('click', handleClickAndRemove); // ★ 解除する
  //   element.remove();
  //   console.log('要素とリスナーを削除しました');
  // }
  // element.addEventListener('click', handleClickAndRemove);
}

// setupTemporaryElement();

function createLeakyClosure() {
  const largeObject = { data: new Array(100000).fill('重いデータ') };

  // この内部関数 (クロージャー) は largeObject を参照する
  // この関数がどこか別の場所 (例: グローバル変数、別のオブジェクトのプロパティ)
  // に保持され続けると、largeObject も解放されなくなる。
  return function() {
    // 例: largeObject の一部だけが必要だったとしても、全体への参照を保持
    return largeObject.data.length;
  };
}

// leakyFunction がどこかで使われ続ける限り、largeObject もメモリに残り続ける
// const leakyFunction = createLeakyClosure();
// window.myGlobalLeakyFunction = leakyFunction; // グローバルに保持

// 解消するには:
// 1. leakyFunction が不要になったら参照を切る (例: window.myGlobalLeakyFunction = null;)
// 2. クロージャーが必要なデータだけを持つようにする
function createCleanClosure() {
  const largeObject = { data: new Array(100000).fill('重いデータ') };
  const dataLength = largeObject.data.length; // 必要な情報だけを抽出
  // largeObject への参照はここで不要になる

  return function() {
    return dataLength; // 抽出した値だけを参照
  };
}
// const cleanFunction = createCleanClosure();

function calculateTotalPrice(price, quantity, discountRate) {
  // discountRate が 0 から 1 の間の数値であることを期待しているが、
  // 呼び出し側で文字列 "10%" などが渡される可能性がある
  if (typeof discountRate !== 'number' || discountRate < 0 || discountRate > 1) {
      // 実行時にチェックしてエラーを投げることはできるが、事前に防げない
      console.warn('不正な割引率:', discountRate, '割引なしで計算します。');
      discountRate = 0;
      // throw new Error("割引率は0から1の間の数値である必要があります。");
  }

  const discountedPrice = price * (1 - discountRate);
  return discountedPrice * quantity;
}

const price1 = calculateTotalPrice(100, 2, 0.1); // 期待通り: 180
console.log(price1);

const price2 = calculateTotalPrice(100, 2, "0.2"); // "0.2" は number ではない
// → 実行時チェックがなければ NaN になったり、意図しない結果になる
// 上記のチェックがあれば警告が出て 200 になる
console.log(price2);

const price3 = calculateTotalPrice(50, "3", 0.05); // quantity が文字列
// → 暗黙の型変換で意図せず計算されるか (150 * 0.95 = 142.5)、NaN になる可能性がある
console.log(price3);

// null や undefined のチェック漏れによる TypeError
function getUserName(user) {
    // user が null や undefined の場合にエラーになる
    return user.name.toUpperCase();
}
// const userName = getUserName(null); // TypeError: Cannot read property 'name' of null

/**
 * 合計金額を計算します。
 * @param {number} price - 単価
 * @param {number} quantity - 数量
 * @param {number} discountRate - 割引率 (0から1の間)
 * @returns {number} 合計金額
 */
function calculateTotalPriceWithJSDoc(price, quantity, discountRate) {
  // JSDocコメントがあっても、実行時の型チェックは別途必要になる場合がある
  if (typeof price !== 'number' || typeof quantity !== 'number' || typeof discountRate !== 'number') {
      console.error("引数の型が不正です。");
      return NaN;
  }
   if (discountRate < 0 || discountRate > 1) {
      console.warn('不正な割引率:', discountRate, '割引なしで計算します。');
      discountRate = 0;
  }

  const discountedPrice = price * (1 - discountRate);
  return discountedPrice * quantity;
}

/**
 * @typedef {object} User - ユーザーオブジェクト
 * @property {string} name - ユーザー名
 * @property {number} [age] - 年齢 (オプション)
 */

/**
 * ユーザー名を大文字で返します。
 * @param {User | null | undefined} user - ユーザーオブジェクト または null/undefined
 * @returns {string | undefined} 大文字のユーザー名、またはユーザーが無効な場合はundefined
 */
function getUserNameWithJSDoc(user) {
    // 型ガード
    if (user && typeof user.name === 'string') {
        return user.name.toUpperCase();
    }
    return undefined;
}

const user1 = { name: 'Alice', age: 30 };
console.log(getUserNameWithJSDoc(user1)); // "ALICE"
console.log(getUserNameWithJSDoc(null)); // undefined

// 型を明示的に指定
function calculateTotalPriceTS(price: number, quantity: number, discountRate: number): number {
  // コンパイラが discountRate が 0-1 の範囲かはチェックしないので、
  // 必要なら実行時チェックも加える
  if (discountRate < 0 || discountRate > 1) {
    console.warn('不正な割引率:', discountRate, '割引なしで計算します。');
    discountRate = 0;
  }

  const discountedPrice = price * (1 - discountRate);
  return discountedPrice * quantity;
}

const priceTS1 = calculateTotalPriceTS(100, 2, 0.1);
console.log(priceTS1);

// const priceTS2 = calculateTotalPriceTS(100, 2, "0.2"); // コンパイルエラー！ Argument of type 'string' is not assignable to parameter of type 'number'.
// const priceTS3 = calculateTotalPriceTS(50, "3", 0.05); // コンパイルエラー！

interface User {
    name: string;
    age?: number; // ? はオプショナルプロパティ
}

// 引数の型とnull/undefinedの可能性を明示
function getUserNameTS(user: User | null | undefined): string | undefined {
    // Optional Chaining (?.) と Nullish Coalescing (??) を使うと簡潔
    return user?.name?.toUpperCase() ?? undefined;
    // または型ガード
    // if (user && typeof user.name === 'string') {
    //     return user.name.toUpperCase();
    // }
    // return undefined;
}

const userTS1: User = { name: 'Bob' };
console.log(getUserNameTS(userTS1)); // "BOB"
console.log(getUserNameTS(null)); // undefined
// console.log(getUserNameTS({})); // コンパイルエラー！ Property 'name' is missing in type '{}' but required in type 'User'.

// webpack.config.js の一例 (比較的シンプルな構成)
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development', // or 'production'
  entry: './src/index.js', // エントリーポイント
  output: {
    filename: 'bundle.[contenthash].js', // 出力ファイル名 (キャッシュ対策でハッシュ付与)
    path: path.resolve(__dirname, 'dist'), // 出力ディレクトリ
    clean: true, // ビルド前にdistフォルダをクリーンアップ
  },
  module: {
    rules: [
      {
        test: /\.js$/, // .js ファイルを対象
        exclude: /node_modules/, // node_modules は除外
        use: {
          loader: 'babel-loader', // Babel を使ってトランスパイル
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'] // Babelのプリセット指定
          }
        }
      },
      {
        test: /\.css$/i, // .css ファイルを対象
        use: ['style-loader', 'css-loader'], // CSSを読み込んで<style>タグとして注入
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i, // 画像ファイルを対象
        type: 'asset/resource', // ファイルとして出力
      },
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({ // HTMLファイルを生成し、バンドルされたJSを自動で読み込む
      template: './src/index.html'
    })
  ],
  devServer: { // 開発用サーバーの設定
    static: './dist',
    hot: true, // ホットリロード有効化
  },
  devtool: 'inline-source-map', // ソースマップの設定 (デバッグ用)
};

# Create React App (Webpackベース、現在はVite推奨の流れも)
npx create-react-app my-react-app
cd my-react-app
npm start

# Vite (React, Vue, Svelteなど対応、高速な開発サーバーが特徴)
npm create vite@latest my-vue-app --template vue-ts
cd my-vue-app
npm install
npm run dev

# Next.js (Reactフレームワーク、SSR/SSGなど機能豊富)
npx create-next-app@latest my-next-app
cd my-next-app
npm run dev