0Pricing
JavaScript Academy · レッスン

命名、可読性、よくある落とし穴

命名と可読性の指針を学び、shadowing、magic number、混在した宣言を避けます。

「命名、可読性、よくある落とし穴」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン3/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全3レッスンが含まれています。

導入

目標: 読みやすいコードを書きます。わかりやすい名前を使い、マジックナンバーを避け、シャドーイングに注意します。

  • 説明的な名前
  • 固定値の定数化
  • 意図しないシャドーイングの防止
命名、可読性、よくある落とし穴 — イラスト1

わかりやすい命名の例

変数には、その使い方ではなく、保持するものを表す名前を付けてください。短くても明確な名前が適しています。

// Use descriptive names
// Avoid single letters or vague words
const itemCount = 3;
const unitPrice = 5;

const totalPrice = itemCount * unitPrice;

console.log("Items:", itemCount);
console.log("Unit price:", unitPrice);
console.log("Total price:", totalPrice);
命名、可読性、よくある落とし穴 — イラスト2

命名ガイドライン

命名のヒント:

  • データには名詞を使います（userName、totalPrice）
  • 関数には動詞を使います（computeTotal）
  • 大文字と小文字の使い方を統一します（camelCase）
命名、可読性、よくある落とし穴 — イラスト3

マジックナンバーを使わない

固定値は定数に移してください（UPPER_CASEが一般的です）。意図が伝わり、後から変更しやすくなります。

// Replace magic numbers with named constants
const TAX_RATE = 0.08;
const SUBTOTAL = 20;

const tax = SUBTOTAL * TAX_RATE;
const finalTotal = SUBTOTAL + tax;

console.log("Tax:", tax);
console.log("Final total:", finalTotal);
命名、可読性、よくある落とし穴 — イラスト4

シャドーイングの例

シャドーイング: 内側の変数が同じ名前を使い、外側の変数を隠すことです。スコープが入れ子になる場合は、異なる名前を優先してください。

// Shadowing: inner variable hides an outer one
let score = 10;

function addBonus() {
  // The next line creates a new "score" only inside this function
  let score = 5;
  console.log("Inner score:", score);
}

addBonus();
console.log("Outer score:", score);
命名、可読性、よくある落とし穴 — イラスト5

可読性チェックリスト

チェックリスト:

  • 1行につき1つの考え
  • 短い関数
  • 固定値には定数を使う
  • スコープをまたいだ名前の再利用を避ける
命名、可読性、よくある落とし穴 — イラスト6

命名のベストプラクティスクイズ

クイックチェック: わかりやすい命名です。

命名、可読性、よくある落とし穴 — イラスト7

まとめ

まとめ: 説明的な名前を使い、固定値を定数に移し、シャドーイングを避けることで、読みやすく保守しやすいコードにできます。

命名、可読性、よくある落とし穴 — イラスト8

よくある質問

「命名、可読性、よくある落とし穴」レッスンは無料ですか？

はい。「命名、可読性、よくある落とし穴」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全3レッスンが含まれています。

「命名、可読性、よくある落とし穴」で何を学びますか？

命名と可読性の指針を学び、shadowing、magic number、混在した宣言を避けます。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

JavaScript Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/3です。

「命名、可読性、よくある落とし穴」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このJavaScript Academyレッスンでコードを書いて実行できますか？

はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. let、const、varを避ける理由
  2. Block／Function／Module ScopeとTDZ
  3. 命名、可読性、よくある落とし穴
← JavaScript Academyに戻る