JavaScriptの関数を基礎から応用まで完全マスターしよう🧑‍💻

function sayHello() {
  console.log("Hello!");
}
sayHello(); // 出力: Hello!

const sayHello = function() {
  console.log("Hello!");
};
sayHello(); // 出力: Hello!

let globalVar = "グローバル変数"; 

function exampleFunction() {
  let localVar = "ローカル変数";
  console.log(globalVar); // 出力: グローバル変数
  console.log(localVar); // 出力: ローカル変数
}

exampleFunction();
console.log(globalVar); // 出力: グローバル変数
console.log(localVar); // ReferenceError: localVarは定義されていない

{
  // ブロックスコープの始まり
  let blockScopeVar = 'ブロックスコープの変数';
  console.log(blockScopeVar); // 出力: ブロックスコープの変数

  if (true) {
    let insideIfVar = 'ifブロック内の変数';
    console.log(insideIfVar); // 出力: ifブロック内の変数
  }

  console.log(insideIfVar); // ReferenceError: insideIfVarは定義されていない
}
// ブロックスコープの終わり

console.log(blockScopeVar); // ReferenceError: blockScopeVarは定義されていない

for (let i = 0; i < 3; i++) {
  let forBlockVar = `forループ内の変数 ${i}`;
  console.log(forBlockVar);
}

console.log(forBlockVar); // ReferenceError: forBlockVarは定義されていない

console.log(varVariable); // 出力: undefined
var varVariable = "varで宣言された変数";
console.log(varVariable); // 出力: varで宣言された変数 

console.log(letVariable); // ReferenceError: letVariableは初期化されていない  
let letVariable = "letで宣言された変数";
console.log(letVariable); // 出力: letで宣言された変数

sayHello();

function greet(name = "Guest") {
  console.log("Hello, " + name + "!");
}
greet(); // 出力: Hello, Guest!
greet("Anna"); // 出力: Hello, Anna!

function sum(...numbers) {
  return numbers.reduce((acc, current) => acc + current, 0);
}
console.log(sum(1, 2, 3)); // 出力: 6

function add(x, y) {
  return x + y;
}
console.log(add(5, 7)); // 出力: 12

const add = (x, y) => x + y;
console.log(add(10, 5)); // 出力: 15

// 通常の関数
function normalFunction() {
  console.log(this); // window オブジェクト
}
normalFunction(); // 出力: window オブジェクト

// アロー関数
const arrowFunction = () => {
  console.log(this); // 外側のスコープの this (この場合はwindow)
};
arrowFunction(); // 出力: window オブジェクト

// メソッドとしての呼び出し
const obj = {
  prop: 'value',
  normalMethod: function() {
    console.log(this.prop); // 'value'
  },
  arrowMethod: () => {
    console.log(this.prop); // undefined (外側のスコープの thisを参照するため)
  }
};
obj.normalMethod(); // 出力: 'value'
obj.arrowMethod(); // 出力: undefined

(() => {
  const message = "即時実行";
  console.log(message);
})(); // 出力: 即時実行

const higherOrderFunction = callback => {
  const data = { name: "JavaScript" };
  callback(data);
};

higherOrderFunction(data => {
  console.log("コールバック関数が呼ばれました:", data);
}); // 出力: コールバック関数が呼ばれました: { name: 'JavaScript' }

const counter = (() => {
  let count = 0;
  return () => {
    count += 1;
    return count;
  };
})();

console.log(counter()); // 出力: 1
console.log(counter()); // 出力: 2

setTimeout(() => {
  console.log("1秒後に表示");
}, 1000); // 出力: 1秒後に表示

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("成功");
  }, 1000);  
});

promise.then(result => {
  console.log(result); // 出力: 成功
}).catch(error => {
  console.error(error);  
});

const fetchData = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("データ取得完了"); 
    }, 1000);
  });
};

const processData = data => `${data} -> 処理済み`;

const displayData = processedData => console.log(processedData);

fetchData()
  .then(processData) 
  .then(displayData)
  .catch(error => console.error(error));
// 出力: データ取得完了 -> 処理済み

async function fetchData() {
  try {
    const response = await fetch('<https://api.example.com/data>');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error("エラーが発生しました:", error);
  }
}

fetchData();

async function fetchMultipleData() {
  try {
    const [data1, data2] = await Promise.all([
      fetch('<https://api.example.com/data1>').then(res => res.json()),
      fetch('<https://api.example.com/data2>').then(res => res.json()), 
    ]);
    console.log(data1);
    console.log(data2);
  } catch (error) {
    console.error("エラーが発生しました:", error);
  }
}

fetchMultipleData();

// リクエストの上限を1秒間に3回までに設定
const MAX_REQUESTS_PER_SECOND = 3;

// 最後のリクエスト時間を記録する変数
let lastRequestTime = 0;

// レート制限を実装したAPIアクセス関数
async function fetchWithRateLimit(url) {
  // 1秒間に上限を超えていないかチェック
  const currentTime = Date.now();
  if (currentTime - lastRequestTime < 1000 / MAX_REQUESTS_PER_SECOND) {
    // 上限を超えている場合は一定時間待機
    const timeToWait = (1000 / MAX_REQUESTS_PER_SECOND) - (currentTime - lastRequestTime);
    await new Promise(resolve => setTimeout(resolve, timeToWait));
  }

  // APIにリクエストを送信
  lastRequestTime = Date.now();
  const response = await fetch(url);
  return response.json();
}

// 使用例
fetchWithRateLimit('<https://api.example.com/data>')
  .then(data => console.log(data))
  .catch(error => console.error('エラーが発生しました:', error));

async function fetchData() {
  try {
    const response = await fetch('<https://api.example.com/data>');
    if (!response.ok) {
      throw new Error(`HTTP error ${response.status}`);
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('エラーが発生しました:', error);
  }
}

fetchData();

const fetchData = async (url) => {
  const response = await fetch(url);
  return await response.json();
};

async function* getDataAsync(urls) {
  for (const url of urls) {
    const data = await fetchData(url);
    yield data;
  }
}

(async () => {
  const urls = ['<https://api.example.com/data1>', '<https://api.example.com/data2>'];
  const asyncIter = getDataAsync(urls);
  for await (const data of asyncIter) {
    console.log(data);
  }
})();
// 出力: 
// { データ1の内容 }
// { データ2の内容 }