1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. JavaScript
  6. »
  7. 【JavaScript】クラスの概念をしっかりと理解しよう! 小学生からのプログラミング入門

【JavaScript】クラスの概念をしっかりと理解しよう! 小学生からのプログラミング入門

小学生からのプログラミング講座こうざ、第12弾です。

前回はマップ上をキャラクターが自由に動くことができるようにしました。

今回はES6から使われるようになった「クラス」という機能を使ってみたいと思います。ちょっとだけむずかしくなりますので、みなさん頑張ってください。

山田

前回までの記事でも、ゲームのようなものはできるだべけど、今回からはちょっとプログラミングのやりやすさも考えて作っていくべ

りこ

やりやすさ?

山田

そうだべ。プログラミングは後になればなるほど、お願いごとが増えて、大変になっていくべ。 ちゃんとプログラムが動くかも大切なんだべけど、後になっても分かりやすいというのも、大切なことなんだべ

アル

そっか。じゃあ今日は、どうやるとプログラムを分かりやすく書けるのか学ぶんだね!

山田

今回はクラスという機能を使って、プログラムを分かりやすく書いていくべ

さて、今回はクラスについて学んでいきたいのですが、その前に……。

これまでの講座ではES5と呼ばれる古いJavaScriptを使って紹介してきました。
これは一昔前のJavaScriptを知ってから今のJavaScriptを覚えないと、混乱こんらん原因げんいんとなる可能性があるからです。

というのも、今のネットの情報じょうほうでは、様々なバージョンのJavaScriptの記述きじゅつが入り混じっています。
サイトによって書き方が全然違う!」ということになるんです。

また新しいJavaScriptのバージョンはブラウザに対応していない可能性もあります。
そのため、新しいバージョンのJavaScriptでソースコードを書いた場合、それを「多くのブラウザが対応したバージョンのJavaScriptに書き換える」といった作業をしたりします。
最新のブラウザを使っていれば気にする必要はありませんが、「こんな作業もするんだなー」程度(ていど)に覚えておくといいでしょう。

もしも作ったゲームを公開するときは、人によってブラウザが違いますので、書き換える作業が必要になります。

山田

ES5からES6へのバージョンアップはかなり大きなもので、書き方も全然変わったべから、この違いを知っておかないと混乱するんだべ

アル

そうなんだ。でもバージョンが上がったんだから、もっと便利になったんだね!

さてさて、何やらむずかしい話はやめておきましょう。
今は書き換えとかメンドくさい話は考えなくて大丈夫です。

今私が言いたいのは、これからは「新しいJavaScriptの機能きのう(ES6以降)も使っていきますよ」ということです。

目次
  1. クラスとは
  2. クラスを作ってみよう!
  3. いろんなクラスがあるよ!
  4. ねこクラスを使ってみよう
  5. まとめ

クラスとは

クラスはES6からの機能きのうです。

ひと昔前のJavaScriptにはクラスという機能はありませんでした。
そのため、クラスのような機能を無理やり使うというのが一般的なやり方でした。

しかしES6からはクラス機能が使えるようになりました。
今回はそのクラスを使ってみましょう!

クラスはよく、オブジェクト作成のための設計図せっけいずなどといわれます。
クラスという設計図をもとに、なにかを作ります。

……なにを言っているのかさっぱりですよね。

それはクラスと設計図なんて全く無関係むかんけいの言葉なので、混乱こんらんしてしまうんです。

アル

じゃあクラスってなんなの?

りこ

学校のクラスとかのクラス?

山田

そうだべ。学校のクラスで考えると分かりやすいべよ

設計図、なんてむずかしく考えてはいけません。
学校のクラスで考えてみましょう!

あなたは魔法学校に通っています。
その学校にはクラスがあり、攻撃魔法こうげきまほうを勉強する「攻撃魔法クラス」、回復魔法かいふくまほうを勉強する「回復魔法クラス」があります。

魔法学校攻撃魔法クラス回復魔法クラス

魔法学校の生徒せいとは、クラスごとに覚える魔法が違います。
ではこのようなクラスを作って、なにが便利になるのでしょうか。

例えばアルくんは「攻撃魔法クラス」の生徒だとします。
あらかじめ攻撃魔法クラスを作っておき、アルくんをそのクラスのメンバーにすれば、アルくんは攻撃魔法「メラ」が使えるようになります。

また、例えばりこちゃんは「回復魔法クラス」の生徒だとします。
りこちゃんを回復魔法クラスのメンバーにすれば、りこちゃんは回復魔法「ホイミ」を使えるようになります。

さらにそれぞれのクラスによって、攻撃力こうげきりょく守備力しゅびりょくにも影響えいきょうがあります。

魔法学校攻撃魔法クラス攻撃魔法が使える! 守備力より攻撃力が高い!回復魔法クラス回復魔法が使える! 攻撃力より守備力が高い!

最初に設計図といったのは、クラスという設計図からなにかを作成するからです。
つまり「攻撃魔法クラス」から「アルくん」を、「回復魔法クラス」から「りこちゃん」を作り出すという考え方なんです。

この設計図って考え方はもちろん、分かりやすいと思うのですが、下手すると混乱こんらんしてしまうかもしれません。
クラスなのに設計図……? という感じです。

なので設計図ではなく、
アルくんは「攻撃魔法クラス」にいるから、攻撃魔法が使える
りこちゃんは「回復魔法クラス」にいるから、回復魔法が使える
と考えた方がしっくりくるかと思います。

さらに、そこに転校生てんこうせいA君がやってきました。
そのA君がもしも「攻撃魔法クラス」に入れば攻撃魔法が、「回復魔法クラス」に入れば回復魔法が使えるようになり、その攻撃力と守備力が反映はんえいされます。

百聞ひゃくぶん一見いっけんにしかずです。では、実際にそのクラスを作ってみましょう!

クラスを作ってみよう!

「攻撃魔法クラス」と「回復魔法クラス」のプログラムを作ってみると、このようになります。

class KougekiMahouClass {
	constructor(name) {
		this.name = name;
		this.kougeki = 280;
		this.bougyo = 120;
	}
	mahou() {
		alert( this.name + 'はメラを使った!' );
	}
}

class KaihukuMahouClass {
	constructor(name) {
		this.name = name;
		this.kougeki = 160;
		this.bougyo = 240;
	}
	mahou() {
		alert( this.name + 'はホイミを使った!' );
	}
}

2、13行目の、constructorコンストラクタは、そのクラスが呼ばれたときに動くものです。
今回の場合、nameなまえkougeki攻撃力bougyo防御をそれぞれ初期化しています。

攻撃魔法クラスの生徒は、攻撃力こうげきりょくが280、防御力ぼうぎょりょく120です。(3〜4行目)
さらに7〜9行目で、魔法を使った時にどうしたいのかを書いています。
やはり使えるのは攻撃魔法で「メラ」です。

回復魔法クラスの生徒は、攻撃力が160、防御力が240です。(15〜16行目)
18〜20行目は魔法を使ったときにどうしたいのかです。
回復魔法の「ホイミ」を使うことができます。

アル

メラとか、ホイミってドラクエみたいだ……

りこ

メラが炎の攻撃で、ホイミが回復だったよね

魔法学校でアルくんは攻撃魔法クラスです。
ここでは攻撃魔法を専門せんもんに教わります。

では、攻撃魔法クラスからアルくんのオブジェクトを作成してみましょう!

let aru = new KougekiMahouClass( 'アルくん' );
aru.mahou();

aru.mahou();とすると、攻撃魔法クラスの魔法が使えます。

アルくんはメラを使った!

りこちゃんのオブジェクトも作ります。
りこちゃんは回復魔法クラスにしたいですね。

let rico = new KaihukuMahouClass( 'りこちゃん' );
rico.mahou();

するとりこちゃんはホイミが使えます。

りこちゃんはホイミを使った!

また、以下のようにすると、攻撃力防御力を表示することも可能です。

let rico = new KaihukuMahouClass( 'りこちゃん' );
alert( rico.kougeki );

このように生徒を作ったらクラスに振り分けることで、その能力が反映されるのです。

アル

すごい! 僕がメラ使って戦ってるよ!

りこ

私がホイミで回復してあげるね!

いろんなクラスがあるよ!

……では勇者ゆうしゃはどのクラスでしょうか?
魔法学校に勇者のクラスはありません。そうなると「勇者学校」を作らなくてはならなくなってしまいます。

魔法学校
   ├ 攻撃魔法クラス
   └ 回復魔法クラス
勇者学校

学校はクラスじゃないし……と、だんだんわけが分からなくなってきますね。
でもよく考えてみると「学校」も「クラス」も特定とくていの人たちの集まりです。
そこでクラスを別の言い方に直してみます。

魔法学校は、言い換えれば「魔法使い」の集まりです。
さらに攻撃魔法クラスも、言い換えれば「攻撃魔法使い」の集まりです。
同じように、勇者学校は「勇者」の集まりです。

魔法使い
   ├ 攻撃魔法使い
   └ 回復魔法使い
勇者

いかがでしょうか。
いままで学校だと思っていた部分もクラスと大差ないですよね。
つまり学校もクラスにすることができるのです。

魔法使い」も「攻撃魔法使い」も「回復魔法使い」も「勇者」も、みんなクラスにすることができるのです。

もちろん、クラスにできるのは魔法使いや勇者のような人間だけではありません

のクラスも作れますし、生き物じゃなくても大丈夫です。

ねこクラスを使ってみよう

クラスの作り方が分かったところで、今度はねこクラスを使ってみましょう。
ねこ(Cat)クラスです。

class Cat {
	constructor(name, age) {
		this.name = name;
		this.age = age;
	}
	profile() {
		alert('わだずは猫だべ。名前は' + this.name + 'っていうべ。としは' + this.age + 'さいだべ');
	}
}

let yamada = new Cat( '山田', 5 );
yamada.profile();

まず1〜9行目でねこクラスを作っています。

11行目で、山田先生(yamada)のオブジェクトを作っています。
これはつまり、山田先生をねこクラスに入れた、ということになります。

ブラウザで確認すると、このようになります。

今度は山田先生以外のキャラクターのオブジェクトも作ってみましょう!
ねこクラスの一員として、グッバイキティちゃんを作ります。

let kitty = new Cat( 'グッバイキティ', 3 );
kitty.profile();

これでグッバイキティちゃんのオブジェクトを作ることができました。

アル

こうやってねこクラスを作っておけば、いろんなキャラクターに当てはめて、使うことができるんだね!

まとめ

今回はプログラミングにおけるクラスについて理解を深めました。

山田

どうだべ、クラスについて理解できたべか?

アル

つまりクラスごとに機能をつくって、新しい物を作ったときは、使いたい機能があるクラスにそれを入れてあげればいいんだね

りこ

でも、実際にゲーム開発かいはつに役立てようと思うと難しいな

山田

そうだべな。プレイヤーのクラス、敵キャラのクラスなど、いろんなクラスが考えられるべよ。 とにかくしっかりと構成を考えて作っていかないと、後でプログラムを見たときにわけが分からなくなってしまうんだべ

りこ

やっぱり難しいんだね

アル

使わなくても動くなら、使わないほうが……

山田

てやんでぇ、べらぼうめだべ! アル君はみんなでポケモンを作りたいと言ったべな。 みんなでプログラムを作るときに大切なのは、プログラムの見やすさだべ。 クラスは絶対に使うべきなんだべよ

アル

そっか……

山田

さて、クラスは難しい部分だから、しっかりと復習しておくべよ!

りこ

はーい!

アル

はーい!

この企画の一覧はこちら

  1. 小学生からのプログラミング入門。プログラミングってなぁに?
  2. Scratchの使い方と、ゲーム作りの基礎知識を学ぼう! 小学生からのプログラミング入門
  3. Scratchでじゃんけんゲームを作ろう! 小学生からのプログラミング入門
  4. Scratchでシューティングゲームを作ろう! 小学生からのプログラミング入門
  5. Scratchでピアノ鍵盤を作って音を鳴らそう! 小学生からのプログラミング入門
  6. JavaScriptでおみくじを作ろう! 小学生からのプログラミング入門
  7. JavaScriptで今月の残り日数を計算してみよう! 小学生からのプログラミング入門
  8. JavaScriptで画像を表示してみよう! 小学生からのプログラミング入門
  9. JavaScriptで画像を移動してみよう! 小学生からのプログラミング入門
  10. 【JavaScript】キー入力でキャラを動かしてみよう! 小学生からのプログラミング入門
  11. 【JavaScript】ファイルを分けて管理してみよう! 小学生からのプログラミング入門
  12. 【JavaScript】オブジェクトを使ってみよう! 小学生からのプログラミング入門
  13. 【JavaScript】ゲームのメインループを作ってみよう! 小学生からのプログラミング入門
  14. 【JavaScript】キャラを決まった間隔ずつ動かす! 小学生からのプログラミング入門
  15. HTML5とCanvasを使ってみよう! 小学生からのプログラミング入門
  16. 【JavaScript】迷路やRPGで使えるマップを作ってみよう! 小学生からのプログラミング入門
  17. 【JavaScript】マップでキャラを動かせるようにしよう! 小学生からのプログラミング入門
  18. 【JavaScript】クラスの概念をしっかりと理解しよう! 小学生からのプログラミング入門
  19. 【JavaScript】プログラム全体をクラスを使って作ってみよう! 小学生からのプログラミング入門
  20. 【JavaScript】文字を表示するクラスを作ってみよう! 小学生からのプログラミング入門
  21. 【JavaScript】改行と一文字ずつ画面に表示する方法! 小学生からのプログラミング入門
  22. 【JavaScript】ノベルゲーム風にキー入力で文字を切り替える方法! 小学生からのプログラミング入門
  23. JavaScriptでRPGを作ろう!スマホにも対応したゲームの作り方

スポンサードリンク

関連コンテンツ

オススメ記事

これまでのプログラム全体をクラスを使って作るべ!

【JavaScript】プログラム全体をクラスを使って作ってみよう! 小学生からのプログラミング入門

小学生からのプログラミング講座《こうざ》、第13弾です。 前回はプログラミングにおける、クラスの使い方を学びました。しかし、まだクラスをどうやって使えばいいのか、ピンときていないかもしれません

【CSS設計】ボタンを作って覚える。機能ごとに分けて作る重要性。

手が回らない、頭が回らない、口が回らない。@It_is_Rです。 CSSはある程度大雑把に書いても動かすことができます。しかし、CSSを覚える上で一番難しい部分と言えばCSS設計でしょう。 パ

メインループを作ってみよう!

【JavaScript】ゲームのメインループを作ってみよう! 小学生からのプログラミング入門

小学生からのJavaScript《ジャバスクリプト》入門講座《にゅうもんこうざ》、第7弾です。 突然《とつぜん》ですが、ゲーム開発《かいはつ》の基本として大切なことってなんだったか覚えています

Android Studio

【Android Studio】新規プロジェクトを作成する方法

前回、 Android Studio のインストールが完了しました。 その続きから始めていきましょう。 今回は新規プロジェクトを作成する方法です。 新規プロジェクトの作成 それ

HTML5とCanvasを使うべ!

HTML5とCanvasを使ってみよう! 小学生からのプログラミング入門

小学生からのプログラミング講座《こうざ》、第9弾です。 これまでの講座《こうざ》では、JavScriptの基本《きほん》について学び、キャラクターの操作《そうさ》ができるようになりました。ここ

【Xcode7】Storyboardを使ってMacアプリ開発に挑戦。

何だか今日はトイレが近い。@It_is_Rでございます。 現在開発中の人魚のゲームは今ストーリーを練っている所です。まだまだ時間がかかりそうです。 さて、Rは今、Macアプリ開発を勉強中なので

JavaScriptでRPGを作ろう!スマホにも対応したゲームの作り方

みなさんこんにちは。今日も楽しくプログラミングを学んでいきましょう! これまでの講座《こうざ》で、JavaScript《ジャバスクリプト》によるゲーム開発《かいはつ》の方法が、なんとなくでも分

.zshrc で zsh をカスタマイズしてみよう。(プラグイン無し)

昔、車に幽霊が乗っていたので、じっと目を凝らして見ていたら、ただの人だったことがあります。@It_is_Rです。 あの時は気まずかった。。。女性の方でした。 さて、今回はターミナルをかっこよく

カスタムロゴの使い方。 WordPress サイトのタイトルを画像に変更!

笑いたい時に笑えず、笑っちゃいけない時に笑えてくる@It_is_Rです。 今回はカスタムロゴの使い方を紹介したいと思います。 このシリーズの前回の記事はこちらです。 【 WordPres

KSSでスタイルガイドを作る方法。インストールと使い方。

そのうちWordPressのテーマを作る方法の解説とかしたいなーと思っている@It_is_Rです。 いま準備中ですので、もうちょっとお待ちくださいねー。 そして今回ですが、KSSを使ったスタイ

コメントをどうぞ!(コメントは承認後に反映されます)

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です