この記事の執筆・監修
テクノロジーアンドデザインカンパニー合同会社のCEO。
日本最大級のプログラミング教育のYouTubeチャンネル「キノコード」や、プログラミング学習サービス「キノクエスト」を運営。
著書「あなたの仕事が一瞬で片付くPythonによる自動化仕事術」や、雑誌「日経ソフトウエア」や「シェルスクリプトマガジン」への寄稿など実績多数。
はじめに
こんにちは。キノコードです。
「【5分レッスン】JavaScript超入門コース#13クラス」について説明します。
クラスとは
説明する内容はこちらです。
・クラスとは
・フィールドとは
・クラスのコードの意味
・クラスの使い方（インスタンス化）
・クラスの便利なところ
まずクラスについて説明します。
クラスとは、「データ」と「処理」をまとめたものになります。
JavaScriptでは、「データ」のことをフィールドといい、「処理」のことをメソッドといいます。
メソッドとフィールドのようなクラスの要素のことをメンバーといいます。
Javaのプログラムは、このクラスを組み合わせて作るので、 Java の根幹となる仕組みです。
フィールドとは
ちなみに、メソッドについては、前のレッスンで説明をしました。
詳しく知りたい方は、前のレッスンをご覧ください。
フィールドについて説明します。
フィールドは、クラス内で定義された変数のことで、メンバー変数とも言います。
フィールドは、変数と同じように、数値や文字列を代入したり、参照したりすることができます。
クラスにフィールドを追加することを「フィールドを定義する」といいます。
クラスコードの意味
それでは、実際にコードを書いてクラスを定義していきましょう。
その前に、どんなクラスを定義するか説明します。
いつもの使っていたLessonクラスの他に、Studentというクラス名のものを作ります。
クラス名はStudentとします。
そのクラスに生徒の名前を代入する「name」というフィールドを定義します。
そして、数学と英語の点数の平均を計算するavgというメソッドを定義します。
class Student{ }
まずClassと書いて、次にクラス名を書きます。
今回はStudentというクラス名なので、Student。
クラス名の最初のアルファベットは大文字にします。これはJavaのルールなので、覚えておきましょう。
次に、コンストラクタを定義します。
クラスの初期設定には、constructorというメソッドの設定が必要です。
フィールドには、佐藤さん、鈴木さんといったような名前をを代入したいので、プロパティにnameを設定します。
this、ドット、nameで、プロパティを設定することができます。
class Student {
constructor( name ) { this.name = name;
}}
次に、平均点を計算するavgというメソッドを定義します。
数値のmathとenglishという値を渡すと、その2つの平均を出すメソッドを定義します。
2つの平均の出し方は、足してワル2です。math足すenglish、わる２です。
計算結果が表示されるようにコンソールログを書きます。
class Student {
constructor( name ) {
this.name = name;
}
avg(math,english) {
console.log((math + english)/2);
}
}
これでフィールドとメソッドの定義はおわります。
クラスの使い方（インスタンス化）
実際に使ってみたいと思いますが、クラスはこのままでは使うことはできません。
クラスは、変数のようなオブジェクトというものに代入をしてから使います。
オブジェクトを作ることを「インスタンス化」「オブジェクト生成」といったりします。
わかりにくいと思うので、コードを書いてみましょう。
まず、変数名を書きます。
aという学級の出席番号001番としておきましょう。
イコールを書いて、new演算子という「new」を書いて、クラス名に丸括弧をつけておわりのコロン。
インスタンス化が終わり、クラスを使えるようになりました。
フィールドに値を代入してみましょう。
代入方法は、オブジェクト名のあとにピリオド、フィールド名です。
a学級の出席番号001番は、佐藤さんとします。
satoと代入しましょう。
class Student {
constructor( name ) {
this.name = name;
}
avg(math,english) {
console.log((math + english)/2);
}
}
var a001 = new Student();
a001.name = ""sato"";
a001というオブジェクトのnameには、satoが入っているはずです。
表示させてみましょう。
class Student {
constructor( name ) {
this.name = name;
}
avg(math,english) {
console.log((math + english)/2);
}
}
var a001 = new Student();
a001.name = ""sato"";
console.log(a001.name);
satoと表示されました。
次に、avgメソッドを使ってみましょう。
90点と80点の平均点を計算してみましょう。答えは85となるはずです。
引数に90と80を代入。実行してみます。
class Student {
constructor( name ) {
this.name = name;
}
avg(math,english) {
console.log((math + english)/2);
}
}
var a001 = new Student();
a001.name = ""sato"";
console.log(a001.name);
a001.avg(90,80); //ここを追加
85と表示されました。
次に、a002というオブジェクト名を作って、nameフィールドにsuzukiと代入してみましょう。
class Student {
constructor( name ) {
this.name = name;
}
avg(math,english) {
console.log((math + english)/2);
}
}
var a001 = new Student();
a001.name = ""sato"";
console.log(a001.name);
a001.avg(90,80); //ここを追加
var a002 = new Student();
a002.name = ""suzuki"";
console.log(a002.name);
a001というオブジェクトには佐藤さん、a002には鈴木さんが入っているはずです。
表示させてみましょう。
suzukiと代入されています。
a002オブジェクトのavgメソッドも使えるか確認してみましょう。
class Student {
constructor( name ) {
this.name = name;
}
avg(math,english) {
console.log((math + english)/2);
}
}
var a001 = new Student();
a001.name = ""sato"";
console.log(a001.name);
a001.avg(90,80); //ここを追加
var a002 = new Student();
a002.name = ""suzuki"";
console.log(a002.name);
a002.avg(70,80);
75点も表示されました。a002のavgメソッドも使えるようです。
以上がクラスの使い方です。
クラスの便利なところ
クラスの便利なところはどんなところでしょう？
クラスは一度、定義しておけば、あとからいくらでもオブジェクトを作ることができます。
イメージとしては、パソコンで使うコピペです。
コピペでどんどんオブジェクトを作ることができます。
もしクラスがなければ、生徒ひとりひとりのためにStudentクラスを書かなければいけないので面倒です。
ちなみに、このようにオブジェクトを取り入れてプログラムを構築することをオブジェクト指向プログラミングといいます。
オブジェクト指向を取り入れることで、プログラムの開発が効率的になります。
オブジェクト指向は奥が深いので、別のコースを作ります。そちらもご覧ください。
