多態性とstatic
多態性とstatic とは
多態性の考え方とstaticメソッド・プロパティを活用しよう。本レッスンでは、多態性とstatic の基本から実際の使いどころまでを整理し、現場で迷わず使える形に落とし込みます。
多態性とstatic
異なるオブジェクトが同じインターフェースで異なる動作をする「多態性」と、クラスに属する「staticメソッド」を学びましょう。
多態性（ポリモーフィズム）
JavaScript
// 同じ calcArea() でも、図形によって計算が異なる
class Circle {
calcArea() { return Math.PI * this.radius ** 2; }
}
class Rectangle {
calcArea() { return this.width * this.height; }
}instanceof
JavaScript
const dog = new Dog("ポチ");
console.log(dog instanceof Dog); // true
console.log(dog instanceof Animal); // trueこの問題では、図形のタイプに応じて面積を計算し、多態性を実践しましょう。
よくある質問
Q. 実務ではどんな場面でこの知識を使いますか？
A. API クライアントの実装、フロントエンドのフレームワーク内ロジック、Node.js のサーバーサイドなど幅広く登場します。React/Vue などのフレームワークもこの基礎の上に成り立っているため、ここで身につけた知識は資産になります。
Q. コードレビューで指摘されやすいポイントは？
A. var の使用、== の使用、無駄なネストの深さ、命名の曖昧さなどが頻出指摘です。Linter（ESLint）と Prettier を導入すれば機械的に防げる指摘が多いため、まずはツールで自動化するのが効率的です。
Q. 次に学ぶべき内容は何ですか？
A. Promise・async/await が理解できたら、fetch を使った API 連携、Web フレームワーク（React/Vue/SvelteKit）、ビルドツール（Vite/Webpack）に進むのがおすすめです。実プロジェクトでアウトプットしながら学ぶと定着が早まります。
次のレッスン
次は モジュールとは で、import/exportによるモジュール分割の基本を学びます。
事前確認 — 進む前に次の 3 つができることを確認しましょう。
- 多態性とstatic の要点を自分の言葉で説明できる
- このレッスンの最小コード (または操作手順) を見ずに書ける
- 練習問題やクイズで間違えた箇所を読み直して理解した
理解度チェック (30 秒)
Q. 多態性とstatic とは何か、1 文で説明してください。
A. 本文の「このレッスンで分かること」または冒頭の説明文を見直し、自分の言葉で要約できれば OK。詰まったら本レッスンの最初の H2 セクションを読み返してみましょう。
関連レッスン
入出力例
test-cases.txt
calculateShapeAreas([{"radius":5,"type":"circle"},{"height":6,"type":"rectangle","width":4}]) → {"shapes":[{"area":78.54,"type":"circle"},{"area":24,"type":"rectangle"}],"totalArea":102.54}
calculateShapeAreas([{"base":10,"height":5,"type":"triangle"},{"radius":1,"type":"circle"}]) → {"shapes":[{"area":25,"type":"triangle"},{"area":3.14,"type":"circle"}],"totalArea":28.14}
calculateShapeAreas([{"type":"unknown"}]) → {"shapes":[{"area":0,"type":"unknown"}],"totalArea":0}