基本を理解！JavaScriptでclass（クラス）を使う方法【初心者向け】
プログラミング初心者向けに、JavaScriptで【class】を使う方法を解説した記事です。本記事では、classをどんな時に使うのか、書き方の例などを紹介します。実際のサンプルを書きながら解説しているので、参考にしてみてください。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
JavaScriptをプログラミング初心者向けに紹介した記事です。
今回は、JavaScriptでclass（クラス）を使う方法について解説します。クラスは、プログラミング習得を目指す上で欠かせない知識になります。最初は慣れず難しいと感じるかもしれませんが、開発現場でもよく使うので、エンジニアになりたい方は知っておく必要があるでしょう。
また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。
本記事では、テキストエディタのmiを使っていますが、JavaScriptの場合はWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発することができます。
なお本記事は、オンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）の内容をもとにしています。
田島メンター！クラスって何でしょうか？
何かの物に対しての設計図のようなものだよ。例えば家だと住むことが出来るし、車は人や荷物を載せて走ることが出来る。クラスはそれらに対する設計図のようなものなんだ。
JavaScriptではどのような書き方があるのですか？
ECMAScript2015から採用されたclassというキーワードがあるから、例を見ながら説明していくね！
class（クラス）とは
classとは、ECMAScript2015から採用された、JavaScriptでクラスを扱うためのキーワードです。
ECMAScript2015（エクマスクリプト）とは、JavaScriptの標準仕様です。国際団体で標準化され、Google Chrome や Internet Explorer 11以降等、現代のブラウザで広く採用されています。
classにより、JavaScriptでもオブジェクト指向プログラミングが簡潔に書けるようになりました。
実際の開発現場でも、今後広く使われることでしょう。
やや中級者向けのメソッドですので、説明だけでは理解が難しいかもしれません。例を見て確認していきましょう。
classの書き方
基本的なプログラムは以下のようになります。classキーワードの後に、中括弧でくくった変数やメソッドを記述します。
class {
変数や処理を記述する
}
classの書き方の例
この記事では、classの書き方について解説します。
まずは、簡単な関数を用意します。
<!DOCTYPE html>
<html lang = "ja">
<head>
<meta charset = "utf-8">
<title>JavaScriptの練習</title>
</head>
<body>
<script>
// class のサンプル
class Person {
constructor(name) {
this.name = name;
}
say() {
console.log("こんにちは。" + this.name + "です");
}
}
var soseki = new Person("夏目漱石");
soseki.say();
var osamu = new Person("太宰治")
osamu.say();
</script>
</body>
</html>
実行すると次のようになります。
では、内容を詳しく見ていきましょう。
class Person {
constructor(name) {
this.name = name;
}
say() {
console.log("こんにちは。" + this.name + "です");
}
}
classキーワードで「Person」というクラスを定義します。
中括弧でくくった中に、「constructor」というメソッドと、「say」というメソッドを定義しています。
「constructor」は、classをnewした時に呼ばれるメソッドです（後で説明します）。
var soseki = new Person("夏目漱石");
soseki.say();
var osamu = new Person("太宰治")
osamu.say();
設計書から実際の物を作るように、クラスから作った物を「インスタンス」と呼びます。
インスタンスを作るには、「new」キーワードを使います。その際、クラスの「constructor」メソッドが呼ばれます。
クラスをnewする時に、別々の名前を指定することで、それぞれsayメソッドにより「夏目漱石」、「太宰治」という文字列が出力されます。
今回の記事は以上です。
クラスは、JavaScriptだけでなくプログラミング全体が分かるためにも理解しておきたい概念です。聞き慣れない単語も多いと思うので、実際にソースコードを書いて実行結果を見ながらイメージしてみてください。
クラスって難しそうでしたが、例を見て使い方が分かりました！
それはいいね。ECMAScript2015で標準化されたキーワードだから、今後使う場面がたくさんあると思うよ。いろいろな例を見て学習しておこう。
分かりました〜。
また、TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）を開催しています。
プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
