refirio.org

Memo

■基本文法
■変数

スコープ（有効な範囲）は関数内となる

var test1 = "テスト1";
document.write(test1);
■ブロックスコープを持つ変数

スコープはブロックの内部に限定される
変数の有効範囲を限定できるので、varを使うよりも安全なプログラムになる

let test2 = "テスト2";
document.write(test2);
■定数

定数は内容を変更できない

const TEST3 = "テスト3";
document.write(TEST3);
■関数1function hello1(name) {
    document.write("こんにちは" + name + "さん");
}
hello1("テスト4");
■関数2

書き方が変わっても意味はまった同じ

let hello2 = function(name) {
    document.write("こんにちは" + name + "さん");
}
hello2("テスト5");
■アロー関数

以下のように関数を定義することもできる

let hello3 = (getname) => {
    document.write("こんにちは" + getname + "さん");
}
hello3("テスト6");


関数を引数で渡すときに使うと、コード量を減らせる

function hello4(getname) {
    document.write("こんにちは" + getname() + "さん");
}
//hello4(function() { return "テスト7"; });
//hello4(() => { return "テスト7"; });
hello4(() => "テスト7" );
■配列

配列を使えば、複数の値をまとめて管理できる

let myArray = new Array(2, 4, 6, 8);
console.log(myArray);


以下のように「配列リテラル」と呼ばれる記号を使ってスッキリとした記述にもできる

let myArray = [2, 4, 6, 8];
console.log(myArray);
■オブジェクトのプロパティ（値）let object1 = {
    red: 255,
    green: 125,
    blue: 0
};
document.write(object1.red + ", " + object1.green + ", " + object1.blue);

// 以下のように書くこともできる
document.write(object1['red'] + ", " + object1['green'] + ", " + object1['blue']);
■オブジェクトのメソッド（関数）let object2 = {
    red: 125,
    green: 255,
    blue: 0,
    //code: function() {
    code() {
        return this.red + ", " + this.green + ", " + this.blue;
    }
};
document.write(object2.code());
■コンストラクタ関数

関数からオブジェクトを作成できる
そのための雛形となる関数を「コンストラクタ関数」と呼ぶ

function Object3(r, g, b) {
    this.red = r;
    this.green = g;
    this.blue = b;
    this.code = function() {
        return this.red + ", " + this.green + ", " + this.blue;
    }
};
let object3 = new Object3(125, 0, 255);
document.write(object3.code());
■クラス

ES2015で追加された校分
クラスベース言語の「クラス」を作成するものではなく、「プロトタイプ」の記述を分かりやすくするために実装された
constructor、getter、setter にも対応している

class Object4 {
    constructor(r, g, b) {
        this.red = r;
        this.green = g;
        this.blue = b;
    }
    /*
    setCodeRed(r) {
        this.red = r;
    }
    getCodeRed() {
        return this.red;
    }
    */
    set red(r) {
        this._red = r;
    }
    get red() {
        return this._red;
    }
    code() {
        return this.red + ", " + this.green + ", " + this.blue;
    }
};
let object4 = new Object4(0, 125, 255);
/*
object4.setCodeRed(100);
document.write(object4.getCodeRed());
*/
object4.red = 100;
document.write(object4.code());
■クラスとプロトタイプ

C++やJavaなどでは、クラスと呼ばれる「オブジェクトの設計図」を定義し、その設計図をもとに実態のあるオブジェクトを生成する
実態のあるオブジェクトとして生成されたものをインスタンスと呼ぶ
同じクラスから生成されたインスタンス（実態）は、すべて同じようにメソッド（動作）やプロパティ（値）を持っている

JavaScriptでは「クラスとインスタンス」というように状態を区別することはせず、
「そのオブジェクトがどのようなプロトタイプを持っているか」のように考える
例えば、JavaScriptの配列はすべてArrayオブジェクトのプロトタイプを備えている。言い換えると、最初からインスタンス（実態）となっている
設計図の役割をする「クラス」があるのではなく、オブジェクトそのものが設計図の役割も同時に果たす

先に記載した「Object4」をプロトタイプベースで記述すると、以下のようになる

let Object4 = function() {};

Object4.red = 100;
Object4.green = 125;
Object4.blue = 255;

Object4.prototype.code = function() {
    return Object4.red + ", " + Object4.green + ", " + Object4.blue;
};

let object4 = new Object4(0, 125, 255);
document.write(object4.code());
■クラスの継承とオーバーライドclass Object5 extends Object4 {
    code() {
        return "[" + this.red + ", " + this.green + ", " + this.blue + "]";
    }
};
let object5 = new Object5(0, 0, 0);
object5.red = 200;
document.write(object5.red);
document.write(object5.code());
■スクリプトファイルの読み込み（関数）

動的に外部ファイルを読み込める
http(s)経由でなければエラーになるので注意

Object6.js
//export default function() {
export default {
    return {
        red: 200,
        green: 200,
        blue: 200,
        code() {
            return this.red + ", " + this.green + ", " + this.blue;
        }
    };
}
<script type="module">

import Object6 from './Object6.js';
let object6 = new Object6();
document.getElementById('object6').textContent = object6.code();

</script>
<span id="object6"></span>
■スクリプトファイルの読み込み（クラス）

character.js
export default class Character {
    〜略〜
}
import Character from './character.js';

let character = new Character();
■スクリプトファイルの読み込み（補足）

エクスポートとインポート
https://ja.javascript.info/import-export
Memo

Advertisement
