# 闇の言語 JavaScript入門

## まず見るべき参考文献

* uhyoさんの記事 [これ](https://uhyohyo.net/javascript/)
* 中級編と書かれているが, 一応基礎からの説明アリ.
* 基礎編, 1章, 9章, 11章, 16章でどんな言語かわかる
* 残りの章はJavaScriptでいじれるWebAPIのお話とかになる.
* 53代oguniの記事[これ](https://misw.github.io/py_js/index.html)
* N予備校のプログラミング2019入門記事[これ](https://www.nnn.ed.nico/courses/497/chapters)
* このご時世で無料公開されている

## JavaScriptの動作環境
* **ブラウザ上**!! (おすすめはChrome or FireFox)
* html経由でjavascriptを読み込むと動く!
* 検証ツールのコンソールでも動かせる
* mac: cmd + shift + C
* windows: F12 or ctrl + shift + i
* **NodeJS** [公式ページへ]( https://nodejs.org/ja/)
* JavaScriptを動かせる環境
* サーバーを立てられる
* npmというパッケージマネジャーが付いてくる.
* コマンドラインで操作
* さまざまな簡単にJSを動かせるWebページ
* https://codepen.io/
* HTML, CSS, JS
* https://glitch.com/
* nodejsも動かせる
* ほかにもいろいろいろアルっぽい

## どういう用途に使えるか(ライブラリ, フレームワーク)
* ウェブページに機能を追加, サーバーとの通信などのフロントエンドのロジックの実装
* ブラウザに備え付けのWebAPIを操作
* https://developer.mozilla.org/ja/docs/Web/API
* 音を出すAPI, 動画を流すAPI, 通信するAPI, 全画面にするAPIなどなど.
* 単純にHTMLやCSSを操作
* jQuery
* 強力なUIフレームワーク
* React
* Vue
* 2Dのアニメーションなどの描画
* canvas
* canvas, WebGLを操作するライブラリたち
* p5.js
* PIXI.js
* CreateJS
* 3D描画やVR/ARなど
* three.js
* A-frame
* サーバー(NodeJS)
* Express (ウェブフレームワーク)
* Koa.js https://koajs.com/

## 基礎文法
ブラウザがあれば, CodePen https://codepen.io/pen
のJS欄にソースコードを書いて, 左下のconsoleで実行結果を確認することができる.

nodejsでもいいし, ブラウザの検証ツールのコマンドラインでもいい.

## 基本
基本的にプログラムは上から順に文ごとに実行される.
文の終わりは改行やセミコロンが入る. 改行さえすればセミコロンはつけてもつけなくてもいい.

### 変数
なにか(なんでも)入れられる箱

const year = 2020; // 数字
const message = "Hello, world!"; // 文字を入れるときは""で囲む
const v = 4 / 3 * 3.14 * 3 * 3 * 3; // 半径3の球の体積

// 四則演算(普通に計算したら実数の計算になる)
// 和 => +
// 差 => -
// 積 => *
// 商 => /
// あまり => %

;はつけてもつけなくても動きはする.

`const`で宣言すると, 後から中身そのものを変えられない (再代入不可).
(※ただし, その子プロパティは変更できる(後述))

const a = 1;
a = 2; // Error 変えられない
a = "hoge"; // Error 変えられない

後から中身を変更できる変数を作りたい場合は`let`を使って宣言する.

let a = 1;
a = 2; // 変更された
console.log(a);

// 文字列も入れられる
a = "勝ち取りたいものもない無力なバカにはなれない";
console.log(a);

### 変数の中身を確認
基本的に`console.log(変数)`を使えば, 表示される

const year = 2020;
console.log(year);

### if文
C言語とかと同じ

let b = 1;
if (b === 1) { // == でも行けるが, 文字列"1"でも条件に当てはまってしまう.
    console.log("ok");
}
b = 2;
if (b === 1) { // == でも行けるが, 文字列"1"でも条件に当てはまってしまう.
    console.log("ok");
}

// === 等しい, !== 等しくない
// >= 以上, > 大きい
// <= 以下, < 小さい

## for文

for (let i = 0; i < 3; i++) {
    console.log(i);
}

switch, while, とかももちろんあるよ.

## 配列(Array)

const arr = [1, 2, 3, 4, 5];
for (let i = 0; i < 5; i++) {
    console.log(arr[i]);
}
const arr2 = [1, "javascript", [2, 3, "aa"], 2];

## オブジェクト
すべてのものはオブジェクト（プリミティブ値以外）
オブジェクトの中になんでも名前を付けたものを要られる.

key value store

const obj = {}; // 空のオブジェクト
obj.a = [1, 2, 3, 4, 5]; // objにプロパティaを追加
obj.b = "hello"; // プロパティbを追加
obj.c = {a: "a", b: ["b", "b"]}; // プロパティcを追加

console.log(obj);
// 子供に名前のついた階層構造を持つようになる.
// {
//    "a": [1,2,3,4,5],
//    "b": "hello",
//    "c": {
//        "a": "a",
//        "b": ["b", "b"]
//    }
// }

const o = {hoge: "hoge", fuga: []};

## 関数
引数を与えられて, 何かを返すもの.
2つの記述法がある. (地味にこの２つは細かい挙動(thisなど)がことなる)
迷ったときは新しい方の記法であるアロー関数型が使いやすいはず

// functionキーワードを使った記法
// ２つの引数をとってその和を返す関数を作る
function sum(a, b) {
    return a + b;
}
sum(1, 2);

// アロー関数
// 掛け算した結果をそのまま返す
const mul = (a, b) => a * b;

// {}で囲んで処理内容を詳しく書ける
const printMul = (a, b) => {
    const result = a * b;
    console.log(result);
    return a * b;
};

## クラス
変数や関数を一つのオブジェクトとしてまとめたもの.
ライブラリはクラスとして機能を提供していることが多い

### クラスの宣言
`class <クラス名> {<変数(プロパティ)や関数(メソッド)の宣言>}` でクラスの宣言ができる
クラスはあくまで設計図で, 後のインスタンス化をすることによって, 具体的なオブジェクトが構成される.

インスタンス化する際に呼ばれるのが, constructorメソッドである.
~~クラスのフィールドやメソッドはそれぞれ, 外側から参照できるか(public), できないか(private)を指定できる( **カプセル化**)~~(TypeScriptじゃないとできないんですね... これ)（補足: 最近のバージョンのJavaScriptなら, privateプロパティ/メソッドを名前の先頭に#を付けることで表現できる.）

プロパティやメソッドをクラス内から扱いたいとき, 例えば`this.x`などとして`this`から参照できる.

// クラス Enemyの宣言 (ランダムに移動する敵を作りたい)
class Enemy {
    
    // クラスが生成されるときに呼び出される処理
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
    
    // 毎フレーム呼び出すupdateメソッド
    update(deltaMs) {
          const next = this.calcNextPosition(deltaMs);
          this.x = next.x;
          this.y = next.y;
    }
    
    //　次の位置を計算するためのメソッド
    calcNextPosition(deltaMs) {
        return {
            x: this.x + Math.random() * deltaMs,
            y: this.y + Math.random() * deltaMs
        };
    }
}

## クラスの利用
プロパティに, あるクラスのフィールドやメソッドを備えるオブジェクトを**インスタンス**といい, インスタンスを設計図となるクラスから生成することを**インスタンス化**という
インスタンス化は**new**演算子を使うことで行える.

// new演算子で設計図となるクラスEnemyから具体的なものを生成.
// new <クラス名>(<constructor>への引数) でインスタンス化
const enemy1 = new Enemy(100, 200);
const enemy2 = new Enemy(200, 100);

let prev = Date.now();
while (true) {
    const now = Date.now();
    const deltaMs = now - prev;
    prev = now;
    
    enemy1.update(deltaMs);
    enemy2.update(deltaMs);
    console.log(enemy1.x, enemy1.y);
    console.log(enemy2.x, enemy2.y);
}

## さらなる文法のキーワード
import/export
extends, 継承
TypeScript