// 配列の処理でよく使用
const numbers = [1, 2, 3, 4, 5];

// 従来の書き方
const doubled1 = numbers.map(function(num) {
return num * 2;
});

// アロー関数を使った書き方
const doubled2 = numbers.map(num => num * 2);

// フィルタリング
const evenNumbers = numbers.filter(num => num % 2 === 0);

// 合計計算
const sum = numbers.reduce((total, num) => total + num, 0);

console.log(doubled2); // [2, 4, 6, 8, 10]
console.log(evenNumbers); // [2, 4]
console.log(sum); // 15

const name = “田中太郎”;
const age = 25;
const city = “東京”;

// 従来の書き方
const message1 = “こんにちは、” + name + “さん。年齢は” + age + “歳、” + city + “在住ですね。”;

// テンプレートリテラルを使った書き方
const message2 = `こんにちは、${name}さん。年齢は${age}歳、${city}在住ですね。`;

// 複数行の文字列も簡単
const htmlTemplate = `
<div class=”user-card”>
<h2>${name}</h2>
<p>年齢: ${age}歳</p>
<p>居住地: ${city}</p>
</div>
`;

// オブジェクトの分割代入
const user = {
name: “田中太郎”,
age: 25,
email: “tanaka@example.com”,
address: {
city: “東京”,
country: “日本”
}
};

// 従来の書き方
const userName = user.name;
const userAge = user.age;

// 分割代入を使った書き方
const { name, age, email } = user;

// ネストしたオブジェクトの分割代入
const { address: { city, country } } = user;

// 配列の分割代入
const colors = [“red”, “green”, “blue”];
const [primary, secondary, tertiary] = colors;

// 関数での分割代入
function greetUser({ name, age }) {
return `こんにちは、${name}さん（${age}歳）`;
}

console.log(greetUser(user)); // “こんにちは、田中太郎さん（25歳）”

// Promiseを返す関数
function fetchUserData(userId) {
return new Promise((resolve, reject) => {
// 模擬的な非同期処理（実際はAPI呼び出しなど）
setTimeout(() => {
if (userId > 0) {
resolve({
id: userId,
name: “田中太郎”,
email: “tanaka@example.com”
});
} else {
reject(new Error(“無効なユーザーIDです”));
}
}, 1000);
});
}

// Promiseの使用
fetchUserData(123)
.then(user => {
console.log(“ユーザー情報:”, user);
return user.name; // 次の.then()に渡される
})
.then(name => {
console.log(“ユーザー名:”, name);
})
.catch(error => {
console.error(“エラー:”, error.message);
})
.finally(() => {
console.log(“処理完了”);
});

// async関数の定義
async function getUserProfile(userId) {
try {
// await でPromiseの結果を待つ
const user = await fetchUserData(userId);
console.log(“ユーザー情報:”, user);

// 複数の非同期処理を順次実行
const posts = await fetchUserPosts(userId);
const followers = await fetchUserFollowers(userId);

return {
user,
posts,
followers
};

} catch (error) {
console.error(“プロフィール取得エラー:”, error);
throw error;
}
}

// 複数の非同期処理を並列実行
async function getAllUserData(userId) {
try {
// Promise.all で並列実行（高速）
const [user, posts, followers] = await Promise.all([
fetchUserData(userId),
fetchUserPosts(userId),
fetchUserFollowers(userId)
]);

return { user, posts, followers };

} catch (error) {
console.error(“データ取得エラー:”, error);
}
}

// 使用例
async function main() {
const profile = await getUserProfile(123);
console.log(“完了:”, profile);
}

main();

// 天気情報を取得する関数
async function getWeatherInfo(city) {
const API_KEY = ‘your-api-key’; // 実際のAPIキーが必要
const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=metric&lang=ja`;

try {
// ローディング表示
showLoading(true);

const response = await fetch(url);

if (!response.ok) {
throw new Error(`HTTP エラー: ${response.status}`);
}

const data = await response.json();

// UI更新
updateWeatherDisplay(data);

} catch (error) {
console.error(“天気情報取得エラー:”, error);
showError(“天気情報を取得できませんでした”);

} finally {
showLoading(false);
}
}

// UI更新関数
function updateWeatherDisplay(weatherData) {
const weatherContainer = document.getElementById(‘weather-container’);

weatherContainer.innerHTML = `
<h3>${weatherData.name}の天気</h3>
<p>気温: ${weatherData.main.temp}°C</p>
<p>天候: ${weatherData.weather[0].description}</p>
<p>湿度: ${weatherData.main.humidity}%</p>
`;
}

// ローディング表示の制御
function showLoading(isLoading) {
const loader = document.getElementById(‘loading’);
loader.style.display = isLoading ? ‘block’ : ‘none’;
}

// エラー表示
function showError(message) {
const errorContainer = document.getElementById(‘error-container’);
errorContainer.textContent = message;
errorContainer.style.display = ‘block’;
}

// 使用例
document.getElementById(‘search-button’).addEventListener(‘click’, async () => {
const cityInput = document.getElementById(‘city-input’);
const city = cityInput.value.trim();

if (city) {
await getWeatherInfo(city);
}
});

// utils.js ファイル
export function formatDate(date) {
return date.toLocaleDateString(‘ja-JP’);
}

export function validateEmail(email) {
const pattern = /^[^s@]+@[^s@]+.[^s@]+$/;
return pattern.test(email);
}

export const API_BASE_URL = ‘https://api.example.com’;

// デフォルトエクスポート
export default class ApiClient {
constructor(baseUrl) {
this.baseUrl = baseUrl;
}

async get(endpoint) {
const response = await fetch(`${this.baseUrl}${endpoint}`);
return response.json();
}
}

// main.js ファイル
import ApiClient, { formatDate, validateEmail, API_BASE_URL } from ‘./utils.js’;

// 使用例
const client = new ApiClient(API_BASE_URL);
const data = await client.get(‘/users’);

if (validateEmail(‘test@example.com’)) {
console.log(‘有効なメールアドレスです’);
}

console.log(‘今日の日付:’, formatDate(new Date()));

// 1. 遅延読み込み（Lazy Loading）
const LazyComponent = React.lazy(() => import(‘./HeavyComponent’));

// 2. メモ化による計算結果のキャッシュ
const memoizedExpensiveFunction = useMemo(() => {
return expensiveCalculation(data);
}, [data]);

// 3. デバウンス（連続実行を防ぐ）
function debounce(func, delay) {
let timeoutId;
return function(…args) {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => func.apply(this, args), delay);
};
}

// 4. 仮想スクロール（大量データの効率表示）
const VirtualList = ({ items, itemHeight, containerHeight }) => {
const [scrollTop, setScrollTop] = useState(0);

const visibleStart = Math.floor(scrollTop / itemHeight);
const visibleEnd = Math.min(
visibleStart + Math.ceil(containerHeight / itemHeight),
items.length
);

return (
<div style={{ height: containerHeight, overflow: ‘auto’ }}>
{items.slice(visibleStart, visibleEnd).map(item => (
<div key={item.id} style={{ height: itemHeight }}>
{item.content}
</div>
))}
</div>
);
};