JavaScriptの魅力的なクリーンコード: 基本ガイド

// あまりクリーンでない
const x = 42;

// クリーンで明確
const age = 42;

// 一貫性のないフォーマット
function initGreeting() {
  console.log('Viva Nicaragua Libre');
}

// 一貫性のあるフォーマット
function initGreeting(): void {
  console.log('Viva Nicaragua Libre');
}

// 無名関数
const initGreeting = (): void => {
  console.log('Viva Nicaragua Libre');
};

// 関数を呼んで挨拶を表示
initGreeting();

// コールバック地獄
getUser((user) => {
  getProfile(user, (profile) => {
    displayProfile(profile);
  });
});

// プロミスでクリーナー
getUser()
  .then(getProfile)
  .then(displayProfile);

const calculateTotal = (): number => {
  const total: number = arrSales.reduce((acc: number, currentValue: number) => acc + currentValue, 0);
  return total;
};

const arrSales: number[] = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];

// コメントされたコード
const total = calculateTotal(); // 合計金額を計算

// クリーンなコード
const total: number = calculateTotal();
console.log("合計:", total);

interface Developer {
  fullName: string;
  age: number;
}

const developer: Developer = {
  fullName: "Alvison Hunter",
  age: 45,
};

// 分割代入を使用しない場合
const fullName: string = developer.fullName;
const age: number = developer.age;

// 分割代入を使用する場合
const { fullName, age }: { fullName: string; age: number } = developer;

// マジックナンバー
const status = 3;
if (status === 3) {
  console.log(`現在のステータス: ${status}`)
}

// 名前付き定数
const STATUS_COMPLETED = 3;
if (status === STATUS_COMPLETED) {
 console.log(`現在のステータス: ${status}`)
}

type Order = {
  id: number;
  products: string[];
};

// 複雑な関数
function processOrder(order: Order): void {
  processPayment(order);
  updateInventory(order);
  dispatchOrder(order);
}

// クリーンで簡潔
function processPayment(order: Order): void {
  console.log(`注文${order.id} の支払いを処理中`);
}

function updateInventory(order: Order): void {
  console.log(`注文${order.id} の在庫を更新中`);
}

function dispatchOrder(order: Order): void {
  console.log(`配送中 ${order.id} - ${order.products}`);
}

// さあ、この関数を呼んでみましょう
processOrder({id:"McDon-23EAT45", products:["フライドチキン","パン","ケチャップ"]});

interface JokeResponse {
  id: number;
  type: string;
  setup: string;
  punchline: string;
}

//荒いエラーハンドリング
try {
  // fetchなどの操作をここで呼び出します
} catch (e) {
  // すべてのエラーを処理
}

// asyncを使用した正確なエラーハンドリング
async function fetchRandomProgrammingJoke() {
  try {
    const response = await fetch('https://official-joke-api.appspot.com/jokes/programming/random');

    if (!response.ok) {
      throw new Error(`データ取得に失敗しました。ステータス: ${response.status}`);
    }

    const data: JokeResponse[] = await response.json();

    if (data.length === 0) {
      // 空のレスポンスを処理
      throw new Error('ジョークが見つかりません');
    }

    const joke = data[0];
    console.log(`セットアップ: ${joke.setup}`);
    console.log(`オチ: ${joke.punchline}`);
  } catch (specificError) {
    // エラーを優雅に処理
    console.error('エラーが発生しました:', specificError);
  }
}

// ジョークをフェッチして表示する関数を呼び出す
fetchRandomProgrammingJoke();

const x: number = 5
const y: number = 10

// 過度に複雑
const complexResult:number = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));

// 単純化
const simplifiedResult: number = Math.hypot(x, y);
console.log(complexResult, simplifiedResult);

// TypeScript無し
function add(a, b) {
  return a + b;
}

// TypeScript
function add(a: number, b: number): number {
  return a + b;
}