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

つるぴよ

もりけん塾に入塾しました！

あわせて読みたい

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

JavaScriptの学習方法

1. マンガJavaScript読む
2. 改訂新版JavaScript本格入門読む
3. Webページで使われているような部品をJSで作る(タブ、フォーム、ドロワーメニュー、スライドショー、オリジナルゲームを作る、検索ボックス、ページネーション)
4. APIリクエストで得たデータでコンテンツを作る

— フロントエンドエンジニア (@terrace_tech) June 30, 2020

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

めっちゃ難しい‥わからない

ちい

つるぴよ

ここさえ理解すれば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);
 };

これで１人分の変数を作ることができたけど、３０人分も書くのは大変です。
そのため１度作ったこの変数を再利用するために「クラス」を作りましょう。
「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」)が「３」という値になった状態で、「sYamada」変数が作成されます。

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

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

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

特別な値について

つるぴよ

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

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

オブジェクト指向とは

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

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

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)  }」で書く

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

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」の２番目の部分から3つ取り出すと言う意味です）

コラム「ES２０１５(ES6)」

今までの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>");

つ

つるぴよ

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

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

アロー関数とは

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

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

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

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

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

//アロー関数２（処理がreturnだけなら、省略可能)
var arrow2 = (a,b) => a + b;
 document.write(arrow2(4,5) + "<br>");

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

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

//アロー関数２（処理がreturnだけなら省略可能）
var arrow2 = a => a*a;
document.write(arrow2(4) + "<br>");

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

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

//アロー関数２（処理がreturnだけなら、省略可能）
var arrow2 = () => 5;
document.write(arrow2() + "<br>");

//これまでの関数
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();

そのため上で書いたコードを解説すると
「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>");

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

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

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>");

マンガJavaScript１２話〜コラム　まとめ

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

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

武骨日記

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

フォローはこちら