未経験から実務レベルのWeb制作スキルを学ぶ基礎講座 見てみる

【もりけん塾】 JavaScriptを勉強して未経験からエンジニアを目指す!⑥

つるぴよ
つるぴよ
もりけん塾に入塾しました!

JavaScriptを勉強してフロントエンジニアを目指しています!
今回は学習ロードマップの1番目「マンガJavaScript」を読んでのまとめ、アウトプットを記事にしています。

 

あわせて読みたい
【もりけん塾】 JavaScriptを勉強して未経験からエンジニアを目指す!⑤ JavaScriptを勉強してフロントエンジニアを目指しています! 今回は学習ロードマップの1番目「マンガJavaScript」を読んでのまとめ、アウトプットを記事にしています。...

 

目次

マンガJavaScript第12話 型、オブジェクト、クラス

めっちゃ難しい‥わからない
ちい
ちい
つるぴよ
つるぴよ
ここさえ理解すればJavaScriptの基本はマスターしたことになるから、頑張ろう!

「型」「オブジェクト」「クラス」はJavaScriptというプログラミング言語の根幹に関わる部分なのでここをしっかりと理解していきましょう!

「型」について

「typeof」関数

これまでJavaScriptの変数として以下の二つの変数の種類を紹介してきました。
・「数値変数」
・「文字列変数」

実はこの2つ以外にもJavaScriptには変数の種類があり、その種類のことを「型」といいます。
その「型」は「typeof」関数を使って調べることができます。

var no =0; //「数値変数」を初期化
var str ="文字列"; //「文字列変数」を初期化

//「typeof」関数で、変数の「型」を調べる
alert(typeof(no)); //「number」(数) と表示
alert(typeof(str)); //「string」(文字) と表示

 

「boolean」型の変数

「boolean」型変数‥「真偽」を格納する変数。
「if」などで利用していた「真偽の判定結果」を、「変数」として利用できる。
「true」(真)、「false」(偽)という値で初期化することで、「真の値」「偽の値」をもった変数を作ることができる。

var bool =(1 > 0); //真偽の判定結果で変数を初期化
alert(typeof(bool)); //「boolean」(真偽)と表示
var bool = true; //真を表す「true」で変数を初期化
alert(typeof(bool)); //「boolean」(真偽)と表示

「オブジェクト」型、「function」型の変数

変数の型には「オブジェクト」型と「function」型というものが存在する。
「オブジェクト」型はJavaScriptでは特に重要です。

オブジェクト

「オブジェクト」型の変数は内部に「値」を収納しています。
内部の値が関数かどうかで区別してみましょう。
「オブジェクト」型変数内の値は「オブジェクト.要素名」
関数は「オブジェクト.要素名()」として利用できます。

object.variable; //「オブジェクト」型変数内の値を利用
object.function(); //「オブジェクト」型変数内の関数を利用

次にまとめた「document」はWebページ内でJavaScriptを利用する際に最初から用意されている「オブジェクト」です。

document.title;  //「document」オブジェクトの「title」変数
document.write(""); //「document」オブジェクトの「write」関数

オブジェクトの要素へアクセスする2つの方法
①「オブジェクト[”要素名”]」
②「オブジェクト.要素名」
どちらの方法でも同じ値を取得できます。

プロパティとメソッド

「オブジェクト」の「要素」「プロパティ」と呼ぶ
「オブジェクト」の「関数」「メソッド」と呼ぶ

クラスについて

「function」型 →「関数」を変数として格納したもの。
「関数」も「数字」や「文字列」のように変数に入れて利用できるので、下記に利用する例をまとめていきます。

//関数を作成
var func = function() {
alert("関数を変数にしたよ!");
 };

//関数を実行
func(); //変数の後に「()」をつけて実行
//配列に関数を入れて実行
var arr = new Array(1);
arr[0] = func;
arr[0](); //配列の要素の後に「()」をつけて実行
 // オブジェクトの要素に関数を入れて実行
var obj = newObject();
obj.func = func;
obj.func(); //オブジェクトの要素の後に「()」をつけて実行

 

「無名関数」とは

「無名関数」→「function() {〜}」のように「function」の後に名前がない関数のこと
※「匿名関数」と呼ぶこともある

JavaScriptでは高度なプログラムを書き出すとこの「無名関数」を多用することになります。

 

「クラス」とは

「クラス」→「共通の変数や関数を格納した変数」のこと
「function」型の変数を利用して作ります。

つるぴよ
つるぴよ
例えば生徒についての情報を扱う場合の書き方をみてみよう!

「生徒」には「名前」や「テストの点数」などの情報を格納し、いつでもその情報を呼び出せるようにします。

「生徒」変数
 ・「名前」の文字列
 ・「テストの点数」数値
 ・「情報を表示する」関数

上のような変数を「オブジェクト」型変数を使って作ると以下のようになります

var Student = new Array();
Student.name = "山田";
Student.score = 3;
Student.show = function () {
document.write("名前:" + this.name + "/ 点数:" + this.score);
 };

これで1人分の変数を作ることができたけど、30人分も書くのは大変です。
そのため1度作ったこの変数を再利用するために「クラス」を作りましょう。
「function」型変数を使って作ります!

//生徒クラスを作成
var Student = function(name,score) {
 this.name = name || "???";
 this.score = score || 0;
 this.show = function(){
document.write("名前:" + this.name + "/点数:" + this.score);
 };
};

上記は「Student」という「function」型の変数をつくるためのプログラムです。

「Student」の中には以下のような「変数」や「関数」が格納されています。
「this.name」
「this.score」
「this.show」

「関数」の「引数」として
「name」と「score」が設定されています。

この「Student」関数を利用して「生徒 山田」変数を作成します。

//生徒クラスを使って「生徒 山田」変数を作成
var sYamada = new Student("山田",3);
document.write(sYamada.name + "" +sYmada.score);
sYamada.show();

「var sYamada = new Student(“山田”,3);」←重要な部分
new Student( )」とすることで、新しい「Student」を作成して「sYamada」変数に格納しています。

この際に引数として「”山田”,3」という値を設定しています。
「Student」クラスでは引数を元にして内部の「this.name」と「this.score」の値を書き換えます。
その結果「sYamada.name」(「sYamada」内の「this.name」)が「山田」という値になり、「sYamada.score」(「sYamada」内の「this.score」)が「3」という値になった状態で、「sYamada」変数が作成されます。

新しくできた「sYamada」変数を利用した「document.write(sYamada.name + “” +sYmada.score)」の部分は「山田 3」と表示されます。
また「sYamada.show()」の行は「名前:山田 / 点数:3」と表示されます。

「クラス」の仕組みを利用すれば以下のように簡単に生徒の情報と命令を格納した変数をつくることができます。

var sTanaka = new Student("田中",95);
var sSuzuki = new Student("鈴木",92);

 

特別な値について

つるぴよ
つるぴよ
今回出てきた「boolean」型の「真」と「偽」を表す特別な値は「true」と「false」だよ

JavaScriptで扱う特別な値を表にまとめました

表記 意味 説明
true boolean型
false boolean型
null 値なし 変数の中身が空であることを示す
undefined 未定義 オブジェクトの「存在しないプロパティ」などにアクセスした際に戻る値
NaN 数値でない 計算式に文字列が紛れ込んでいた際などに戻る値
Infinity 無限 計算結果が極端に大きな場合に戻る値

オブジェクト指向とは

JavaScript言語は「オブジェクト指向」と呼ばれるプログラミング言語です。

変数はオブジェクトと呼ばれるものとして扱われます。
そのオブジェクトの値や関数(プロパティやメソッド)もオブジェクトとして扱えます。
オブジェクトは「.」で連結して下の階層へたどれます。

例)「document」の場合
「window.document」と言う「window」オブジェクト内のオブジェクト。
そのため「write()」という命令の正式な書き方は「window.document.write( )」となる。

thisとは

つるぴよ
つるぴよ
上で「クラス」をつくるときに突然出てきたよね!説明します。

「this」→オブジェクト自身を表す特殊な変数
JavaScriptはオブジェクト指向の言語であり、全ての変数はオブジェクトとして成り立っています。
そしてオブジェクトはなんらかのオブジェクトプロパティメソッドになっています。

「this」はそのオブジェクトにとって親要素的な役割があります。

関数内のthis

関数内のthis→関数が呼び出された時に、その関数が格納されていたオブジェクトを表す。

先ほど書いたプログラムを元に解説します。

//生徒クラスを作成
var Student = function(name,score) {
this.name = name || "???";
this.score = score || 0;
this.show = function () {
document.write("名前:" + this.name + "/点数:" + this.score);
  };
 }

//生徒クラスを使って「生徒 山田」変数を作成
 var sYamada = new Student("山田",3);
 sYamada.show();

「var sYamada = new Student(“山田”,3)」という行で新しくオブジェクトを作っています→「sYamada」
次の行の「sYamada.show()」で「sYamada」オブジェクト内の「show」メソッドを呼び出している。
「sYamada」の中身は「new」で初期化された時に以下のようになっています。

sYamada
.name = "山田"
.score = 3;
.show = function(){
  document.write("名前:" + this.name + "/点数:" + this.score);
      };

「sYamada.show」メソッドが呼び出された時の「this」↓
「show」が格納されている「sYamada」というオブジェクトを指す
「this.name」→「sYamada.name」の値に
「this.score」→「sYamada.score」の値になる。

コラム 例外処理

「例外処理」とは??
プログラム上でエラーが発生した際にプログラムの処理を終了させず、特別な処理を行い、処理を継続させたい場合に使う。

例外処理の書き方↓

「try {  (領域A)  } cacth(e) {  (領域B)  }」

①エラーが起きる場所を「try {  (領域A)  }」で囲む。

②エラーが発生した時の処理を「cacth(e) {  (領域B)  }」で書く

 

例外処理を実際に使ってコードを書いてみよう!

var str = "abcdef";

//substrで文字列の一部を取り出す
try {
var res = str.substr(2,3);
 document.write(res + "<br>");
 } catch(e) {
 document.write("エラー発生:" + e + "<br>");
 }

//存在しないメソッドを実行しようとする
try {
 var res = str.fake();
 document.write(res + "<br>");
 } catch(e) {
document.write("エラー発生:" + e +"<br>");
 }

(「str.substr 2,3)」は変数strで宣言した文字列「abcdef」の2番目の部分から3つ取り出すと言う意味です)

結果
cde
エラー発生:TypeError: str.fake is not a function

このように存在しないメソッド「fake()」を実行すると、そこで処理は打ち切られて、「document.write(res + “<br>”);」は実行されません。

代わりに、「document.write(“エラー発生:” + e +”<br>”);」に処理がうつります。
結果「エラー発生:TypeError: str.fake is not a function」が実行されます。

コラム「ES2015(ES6)」

「ES2015(ES6)」とは?
JavaScriptはWebブラウザで使用され、発展してきた言語なので各ブラウザによって仕様が少しずつ異なっていました。
そこで中核仕様を抜き出して標準化した『ECMAScript』が作られました。
「ES2015(ES6)」とはその「ECMAScript」の6番目の版です。

今までのJavaScriptと比べ、新しい仕様も増えているので今回はよく見かけるもの使うものを紹介していきます。

「let」「const」とは?

「let」‥ローカル変数をつくる宣言
「const」‥定数(書き換えのできない数字)をつくる宣言

これまで使ってきた「var」に似ていますがスコープを持つ範囲が違います。
「var」→スコープの範囲は「function( ) {〜}」
「let」「const」→スコープの範囲は「{〜}」

 

つるぴよ
つるぴよ
「let」のコード例を書いてみるよ!
 let hoge = 123;
document.write(hoge + "<br>");
 {
   let hoge = 456;
   document.write(hoge + "<br>");
  }
document.write(hoge + "<br>");
結果
123
456
123

つるぴよ
つるぴよ
次は「const」のコード例だよ

try {
        const PI = 3.14; //「const」で定義したときは値を代入可能
        document.write(PI + "<br>");
        PI = -3.14;  //後で値を代入しようとするとエラーになる
        document.write(PI + "<br>");
      } catch(e) {
        document.write(e + "<br>");
      }
結果
3.14
TypeError: Assignment to constant variable.

アロー関数とは

関数を簡略化して書く方法です。

アロー関数の由来→「=>」この部分が弓の矢のようだから!

実際にコードに書いてみます。
複数の引数がある場合です!

//これまでの関数
var fnc = function(a,b) {
return a + b;
 };
document.write(fnc(2,3)+ "<br>");

//アロー関数1
var arrow1 = (a,b) => {
return a + b;
 };
document.write(arrow1(3,4) +"<br>");

//アロー関数2(処理がreturnだけなら、省略可能)
var arrow2 = (a,b) => a + b;
 document.write(arrow2(4,5) + "<br>");
結果
5
7
9
次に引数が1つの場合です。
引数の「()」が省略できます。

//これまでの関数
 var fnc = function(a) {
return a*a;
 };
document.write(fnc(2) + "<br>");

//アロー関数1
var arrow1 = a => {
return a*a;
};
document.write(arrow1(3) + "<br>");

//アロー関数2(処理がreturnだけなら省略可能)
var arrow2 = a => a*a;
document.write(arrow2(4) + "<br>");
結果
4
9
16
最後に引数がない場合です。
引数がない場合は引数の「( ) 」を省略できません。
//これまでの関数
var fnc = function() {
return 3;
 };
document.write(fnc() + "<br>");

//アロー関数1
var arrow1 = () => {
return 4;
 };
document.write(arrow1() + "<br>");

//アロー関数2(処理がreturnだけなら、省略可能)
var arrow2 = () => 5;
document.write(arrow2() + "<br>");
結果
3
4
5
!注意点!
「アロー関数」を使うと「fanction」を使ったときと「this」が示す対象が変わる。
実際にコードに書いて確認してみよう!
//これまでの関数
var printName = function() {
document.write(this + "<br>");
document.write(this.myName + "<br>");
};
var human = {
myName:"yamada",
print:printName
}
human.print();

//アロー関数
var printNameArrow = () => {
document.write(this + "<br>");
document.write(this.myName + "<be>");
 };
var humanArrow = {
myName:"tanaka",
print:printNameArrow
}
humanArrow.print();
結果
[object Object]
yamada
[object Window]
undefine
「function」関数とアロー関数では「this」の直が変わってくるので上記のような結果の違いが出ます。
「this」の値の決まるタイミング

function関数の場合→関数を定義した段階では「this」の値は決まっていない。「this」の値が関数を呼び出す時に決定する。アロー関数の場合→その関数が書かれた段階で「this」の値が決定する。

そのため上で書いたコードを解説すると
「printName」関数は「human」オブジェクトの配下なので「this」は「human」(出力では[object Object])になります。
そのため「this.myName」は「”yamada”」になります。
アロー関数は、関数外で書いているので「this」の値は、ルートに当たるWindowオブジェクト(出力では『[object Window])になります。
「Window.myName 」は特に指定していないので「undefind」(未定義)となります。

 

テンプレート文字列とは

つるぴよ
つるぴよ
「`」(バッククオート)で囲むと特殊な文字列が作れるよ!

これまで文字列を囲むときは「”」や「’」を使ってきました。
「`」で文字列を囲むと改行をすることができます。
テンプレート文字列→「${変数名}」を文字列内に書くことでプログラムの変数の値を文字列に挿入することができる。

実際に書き方を見てみましょう。

var name = "山田";
var like = "勉強";
var message = `私の名前は${name}です。
好きなことは${like}です。`;
document.write(message);
結果
私の名前は山田です。
好きなことは勉強です。

分割代入とは

配列の要素をまとめて変数に代入できる方法です!
実際にコードを書いた方がわかりやすいので見ていきましょう。

var arr = [1,2,3];
var [a, b, c] = arr;
document.write(a + "<br>");
document.write(b + "<br>");
document.write(c + "<br>");
結果


関数のデフォルト引数とは

関数の引数が指定されていない場合はデフォルトの値を設定できます。
(デフォルトの値‥何も指定されていない時の初期値)
例を書いていきます。
引数の後に「=5」「=10」としている部分が、デフォルトの値の設定です。

var fnc = function(a = 5, b = 10) {
return a * b;
}
document.write(fnc(2,3) + "<br>");
document.write(fnc(2) + "<br>");
document.write(fnc() + "<br>");

 

結果
6
20
50

マンガJavaScript12話〜コラム まとめ

ここまで学んだことをまとめると

・型につて
・オブジェクトについて
・クラスについて
・オブジェクト指向について
・「this」について
・例外処理
・ES2015(ES6)
 「let 」「const」アロー関数 テンプレート文字列 分割代入 関数のデフォルト引数

 

もりけん塾を運営している森田賢二さんのブログはこちらから👇

武骨日記

Twitterフロントエンジニア(@terrace_tech)のフォローは👇

フォローはこちら

目次