JavaScript入門講座|クラスついて学ぼう

JavaScript
うさタブ
うさタブ

今回はJavascriptのクラスを学ぶッピよ~!

ユウキ
ユウキ

クラスって??

うさタブ
うさタブ

クラスとは、リストの配列に名前をつけてデータを取り出しやすくしたものッピ!

クラスの使い方を覚えれば、プログラミングがとってもラクになるッピ!

ユウキ
ユウキ

おお~!そりゃすげーな!

JavaScript入門|クラスついて学ぼう

クラスの書き方

うさタブ
うさタブ
必要なもの
  • メモ帳

が必要になるッピ!

うさタブ
うさタブ

まずクラスをどんなふうに使うかざっくりコードを見るッピ!

元になるコード

<script>
 class seiseki{ //seisekiというクラスを作りますという宣言
    constructor(namae,sugaku,kokugo) { //どんな風にクラス分けするのか?
        this.namae = namae;//名前を記録します
        this.sugaku = sugaku;//数学
        this.kokugo = kokugo;//国語
    }
 }

 let minnano_seiseki = [];//みんなの成績まとめ
  minnano_seiseki[0] = new seiseki("田中",70,65);//[0]番.田中さん,数学70点,国語65点
  minnano_seiseki[1] = new seiseki("佐藤",90,45);//[1]番.佐藤さん,数学90点,国語45点

 document.write(minnano_seiseki[0].namae);//みんなの成績[0]番の名前を表示してください
</script>
ユウキ
ユウキ

 お、田中って出たぞ!

うさタブ
うさタブ

これは、

document.write書き出してください(minnano_seiseki[0].namaeminnano_seiseki[0].namaeの部分を);

minnano_seiseki[0]
つまり、リストの[0]番.田中さん,数学70点,国語65点というデータの名前の部分だけを取り出したからッピ!

うさタブ
うさタブ

ちなみに、minnano_seiseki[0].namaenamaeを、
sugakuにすると、数学の点数が出てくるッピ!

ユウキ
ユウキ

 おお! 70点になった!

うさタブ
うさタブ

 どうしてこんなふうなことができるのか、詳しく解説するッピよ~

クラスの宣言とコンストラクタの書き方

 クラスを使うには、クラス宣言とコンストラクタ(どんなふうに名前をつけてデータを保存するか)を設定できます。
 クラスを宣言するには

class seiseki{ 

}

 と入力します。 seisekiの部分は変更可能です。
 コンストラクタを設定するには、クラス宣言の中に設定を入力してあげる必要があります。

class seiseki{ //seisekiというクラスを作りますという宣言
    constructor(namae,sugaku,kokugo) { //どんな風にクラス分けするか?
        this.namae = namae;//名前を記録します
        this.sugaku = sugaku;//数学
        this.kokugo = kokugo;//国語
    }
}

 このnamae,sugaku,kokugoは好きな名前を入力することができます。

データの組み込み方

 次にデータの組み込み方です。

let minnano_seiseki = [];//みんなの成績まとめ
 minnano_seiseki[0] = new seiseki("田中",70,65);//[0]番.田中さん,数学70点,国語65点
 minnano_seiseki[1] = new seiseki("佐藤",90,45);//[1]番.佐藤さん,数学90点,国語45点

 まず、let minnano_seiseki = [];で、リストを作ります。 この中にクラスのデータを入力します。

 minnano_seiseki[0] = new seiseki("田中",70,65);//[0]番.田中さん,数学70点,国語65点
 minnano_seiseki[1] = new seiseki("佐藤",90,45);//[1]番.佐藤さん,数学90点,国語45点

  new seiseki() で、クラスの中にデータを入力していきます。 入力データは[ , ]で区切ります。  constructor(namae,sugaku,kokugo) に入力した順番で、名前付けされてされていきます。

 constructor(namae,sugaku,kokugo) { 
        this.namae = namae;//名前を記録します
        this.sugaku = sugaku;//数学
        this.kokugo = kokugo;//国語
    }

クラスのデータを引き出す

 document.write(minnano_seiseki[0].namae);

 で、minnano_seiseki[0].namae…、リスト0番の名前「田中」さんが表示できます。 
 minnano_seiseki[0].sugakuですと、田中さんの数学の点数「70」。
 minnano_seiseki[1].kokugoですと、リスト1番「佐藤」さんの国語の点数「45」と表示されます。

ユウキ
ユウキ

うーん…わかったような、わからないような…

うさタブ
うさタブ

少しずつ覚えていくッピよ~!

全体のコードの確認

<script>
class seiseki{//seisekiというクラスを作りますという宣言
    constructor(namae,sugaku,kokugo) { 
        this.namae = namae;//名前を記録します
        this.sugaku = sugaku;//数学
        this.kokugo = kokugo;//国語
    }
}

let minnano_seiseki = [];//みんなの成績まとめ
 minnano_seiseki[0] = new seiseki("田中",70,65);//[0]番.田中さん,数学70点,国語65点
 minnano_seiseki[1] = new seiseki("佐藤",90,45);//[1]番.佐藤さん,数学90点,国語45点

document.write(minnano_seiseki[0].namae);//みんなの成績[0]番の名前を表示してください
</script>
学習のまとめ
  • クラスはリストのデータに名前をつけて取り出しやすくしたもの
  • クラスを書くにはクラスの宣言が必要
  • コンストラクタでデータの受け皿を作る
  • new 名前(数字または,”文字”,)でクラスのデータを入力する

うさタブ
うさタブ

上手くできたッピか?

これからも色んなゲーム作りやプログラムの解説をしていくッピ!

次回も楽しみにしているッピよ~~!

スポンサーリンク
スポンサーリンク
スポンサーリンク

どうしてもわからない、そんなときは?

ユウキ
ユウキ

うーん・・・

やっぱり、どうしてこーなるか良くワカンナイな~

説明を聞いたすぐはわかったつもりなんだけどさ

アイカ
アイカ

そうね・・・わたしも

すぐに復習できる環境じゃないから

宿題とか困っちゃうわ・・・

ユウキ
ユウキ

他に気軽に教えてくれる先生とかいるといいんだけどな~

うさタブ
うさタブ

フムフム!

そんなときは、プログラミング講座がオススメッピね~

アイカ
アイカ

そんなのあるのか?

ていうかドコいけばいいんだよ

うさタブ
うさタブ

それなら、やっぱり一番安心自宅でできる動画教材がよいッピ!

うさタブ
うさタブ
テレビCMでも話題の有名教材
Udemyとかどうッピか?

 

うさタブ
うさタブ
Udemyは、HTMLからJavaScript
人気の機械学習からUnityゲーム講座まで選び放題ッピ!

うさタブ
うさタブ

買い切り講座だから
いつでも勉強し放題、動画制作や難しいマーケティングなんかも勉強できるッピ~!

ユウキ
ユウキ

へえ~、こんなのがあるのか

うさタブ
うさタブ

ちびっこのみんなは、キュレオプログラミング教室がオススメッピ!

実際の教室で自分以外の同い年と一緒に勉強することで、自分も負けないゾ!と思えておサボりを防ぐことができるッピ!
さらに、クラスのみんなと差をつけてすごいプログラムが作れちゃうッピ

教室名 対象 学習言語 教室場所 無料体験・カウンセリング
Udemy 学生~社会人 Unity
HTML/CSS
JavaScript
MySQL
Python等
オンライン講座
コース買い切り
講座によってサンプル○
Unityゲーム講座アリ
 

「QUREOプログラミング教室」

小学2年生〜中学3年生 Scratch 全国各地
2500教室
無料体験◯
【LITALICOワンダー】 小学1年生〜高校生 Scratch
Unity C#
HTML / CSS
JavaScript
東京都,神奈川,埼玉県,千葉
オンライン
無料体験◯
3Dプリントなどの講座によっては別途料金

ユウキ
ユウキ

よーし、ちょっと体験だけでもやってみるか!

アイカ
アイカ

わたしもさっそくチェックしてみようかな♪

スポンサーリンク

どうしてもわからない、そんなときは?

ユウキ
ユウキ

うーん・・・

やっぱり、どうしてこーなるか良くワカンナイな~

説明を聞いたすぐはわかったつもりなんだけどさ

アイカ
アイカ

そうね・・・わたしも

すぐに復習できる環境じゃないから

宿題とか困っちゃうわ・・・

ユウキ
ユウキ

他に気軽に教えてくれる先生とかいるといいんだけどな~

うさタブ
うさタブ

フムフム!

そんなときは、プログラミング講座がオススメッピね~

アイカ
アイカ

そんなのあるのか?

ていうかドコいけばいいんだよ

うさタブ
うさタブ

それなら、やっぱり一番安心自宅でできる動画教材がよいッピ!

うさタブ
うさタブ
テレビCMでも話題の有名教材
Udemyとかどうッピか?

うさタブ
うさタブ
Udemyは、HTMLからJavaScript
人気の機械学習からUnityゲーム講座まで選び放題ッピ!

うさタブ
うさタブ

買い切り講座だから
いつでも勉強し放題、動画制作や難しいマーケティングなんかも勉強できるッピ~!

ユウキ
ユウキ

へえ~、こんなのがあるのか

うさタブ
うさタブ

ちびっこのみんな、キュレオプログラミング教室を受けて
自分以外の同い年と一緒に勉強することで、自分も負けないゾ!と思えて
おサボりを防ぐことができるッピ!
さらに、クラスのみんなと差をつけてすごいプログラムが作れちゃうッピ

先生やパパママにほめられて、学習効率が最高にグングン↑↑ッピよ~~♪

うさタブ
うさタブ

未来都市キュレオを舞台に、魅力的なキャラクターがたくさん登場する・ゲーム感覚で楽しく学べるプログラミング教室ッピ!

困ったことも先生に直接聞けるのが最高ッピ~!

うさタブ
うさタブ

全国2500教室もあるから、

きっとみんなの近くにも教室があるッピ。

公式サイト近くに教室があるかチェックしてみるとよいッピ!

ユウキ
ユウキ

なんだこれ! スゲーなっ

ゲームみたいにやってるうちに、自然と勉強できてるみたいな感じ?

アイカ
アイカ

そんなものがあるのねっ!

うさタブ
うさタブ

ロボットをプログラミングしてみるなら

LITALICOワンダーがオススメッピ!

JavaScriptも勉強できるッピよ~!

教室名 対象 学習言語 無料体験/教室場所
Udemy 学生~社会人 Unity
HTML/CSS
JavaScript
MySQL
Python等
オンライン講座
講座によってサンプル○
「QUREOプログラミング教室」
小学2年生〜中学3年生 Scratch 教室によって無料体験◯
全国各地の教室
【LITALICOワンダー】 小学1年生〜高校生 Scratch
Unity C#
HTML / CSS
JavaScript
無料体験◯
3Dプリントなどの講座によっては別途料金
東京周辺
オンライン

ユウキ
ユウキ

よーし、ちょっと体験だけでもやってみるか!

アイカ
アイカ

わたしもさっそくチェックしてみようかな♪

JavaScriptJS基礎プログラミング
学んで遊んでジャンケンポン!
タイトルとURLをコピーしました