【JavaScript】開発を行う前に整理しておきたい言葉

「言語」、「フレームワーク」、「ミドルウエア」、「ライブラリー」、「テンプレートエンジン」など様々な言葉には意味がある。
今回は「JavaScript」と「Node.js」について整理した。

■　JavaScriptとNode.jsについて
JavaScript：JavaScriptはブラウザ上で動くために開発されたプログラミング言語。
Node.js：サーバサイドのJavaScript。

■　Node.jsの特徴と強み
・サーバーサイドのJavaScript
　⇢今まではフロントエンドでJavaScript、サーバーサイドでPHP、Pythonなどを使用することが一般的。
　 Node.jsを活用することでサーバーサイドもJavaScriptで記入することが出来る。
・シングルスレッド
　⇢Node.jsは複数の処理を同時に行うマルチスレッドではない。Node.jsはシングルスレッドである。
　 マルチスレッドのようにリクエストごとにスレッドが立ち上がる処理方式ではない。
　 前の処理が終わっていないと次の処理が始まらない。
・ノンブロッキングI/O
　⇢ノンブロッキングI/Oの特徴は結果を待たないで処理を進めることが出来る点。
　⇢「シングルスレッド」と「ノンブロッキングI/O」を組み合わせたNode.jsは従来方式よりも効率的に処理を行うことが出来る。
　※従来方式は「マルチスレッド」と「ブロッキングI/O」の組み合わせ。
　 ブロッキングI/Oは、I/Oが完了するまで次の処理に進まない。

■　言葉のイメージ
・値：データの中身
・型：データの入力形式
・変数：データを入れる箱
・関数：プログラムに処理させるふるまい
・引数：受け渡しを行う値

■　定義と使用区分の振り分け
・言語：Javascript、Node.jsなど
　⇢PCに下す命令言語
・フレームワーク：Express、AngularJS、など
　⇢JavaScriptを使用してWebサイト開発やWebアプリケーションを開発する際の土台として機能するソフト
・ミドルウェア：nginx、MySQL、PostgreSQL、など
　⇢OS(オペレーティングシステム)とアプリケーションソフトの中間役割を担うソフト
・ライブラリー：React、jQuery、Vue、など
　　　　　　　（node.jsで言うと）express-session、express-validator、など
　⇢使用頻度の高い機能や効果などのプログラムをまとめたもの
・テンプレートエンジン：ejs、pugなど
　⇢テンプレートと呼ばれるHTMLのひな形を元にプログラムで加工し、画面に出力するためのライブラリ。

■　変数の宣言
Javascriptでは変数名の入力する前に変数の宣言を行う。
使用するものは3種類。
var：変数を宣言し、ある値に初期化することもできる。
let：スコープのローカル変数を宣言し、ある値に初期化することもできる。
const：スコープで読み取り専用の名前付き定数を宣言する。

■　データの型
Javascriptで主に使用するデータの型は以下の通り
　▼基本型
　　・真偽値（Boolean）: trueまたはfalseのデータ型
　　・数値（Number）: 42 や 3.14159 などの数値のデータ型
　　・巨大な整数（BigInt）: ES2020から追加された9007199254740992nなどの任意精度の整数のデータ型
　　・文字列（String）: "JavaScript" などの文字列のデータ型
　　・undefined: 値が未定義であることを意味するデータ型
　　・null: 値が存在しないことを意味するデータ型
　　・シンボル（Symbol）: ES2015から追加された一意で不変な値のデータ型
　▼複合型
　　・プリミティブ型以外のデータ
　　・オブジェクト、配列、関数、正規表現、Dateなど

■　連想配列とは
・1~5はいずれも連想配列。
　連想配列とはキーとバリューで成り立っている。

【例】

// 1
var obj = { hoge: 'hoge' };

// 2
var obj = { 'hoge': 'hoge' };

// 3
var obj = {};
obj.hoge = 'hoge';

// 4
var obj = {};
obj['hoge'] = 'hoge';

// 5
var obj = new Object();
obj.hoge = 'hoge';

// 呼び出し方法はいずれも下記の通り
　obj.hoge

■　配列とは
・1~6いずれも配列。

【例】

// 1
var array = ['hoge', 'fuga'];

// 2
var array = new Array('hoge', 'fuga');

// 3
var array = Array('hoge', 'fuga');

// 4
var array = [];
array[0] = 'hoge';
array[1] = 'fuga';

// 5
var array = [];
array['0'] = 'hoge'
array['1'] = 'hoge'

// 6
var array = { 0: 'hoge', 1: 'fuga', length: 2 };
array.__proto__ = Array.prototype;

■　MDN　文法とデータ型
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Grammar_and_types

■　スコープ
JavaScriptでは関数の中で定義された変数やオブジェクトは関数の外からアクセスすることができない。
関数の中で定義された変数やオブジェクトを操作したい場合は同じ関数の中で処理を記述する必要がある。

【例-1】

function hoge(){
    var x = 0;
}
hoge();

console.log(x);

⇢この場合console.log(x);でエラーとなる。変数xはhoge関数の中で定義されているため。

【例-2】

function hoge(){
    var x = 0;
    console.log(x);
}
hoge();

⇢この場合、エラーとならない。

■関数の定義
・関数の定義を行い、定義した関数を使用する。

// 関数を定義する
function 関数名(仮引数){
  実施したい処理内容
}

// 関数を使用する
関数名();

【例】

// add関数が定義される
function add(a, b) {
  return a + b;
}

// add関数を出力する
console.log(add(1, 2)); 
// この場合「add関数」と「log関数」が使用されている。

・javascriptでは関数を変数に代入することができる。
　つまりjavascriptでは関数も値。

// addFunction変数にadd関数を代入
const addFunction = function add(a, b) {
  return a + b;
}

// addFunction変数を出力
console.log(addFunction(1, 2)); 

// 定義した関数を変数に入れることも出来る
const addFunction = add;

・Javascriptで関数は値。関数を複数回使用することもできる。
　関数を受け取る関数を「高階関数」と呼ぶ。

// 関数を2回実行する関数の作成
function toDoTwin(func) {
  func(); // 1回目の関数
  func(); // 2回目の関数
}

// Hello Worldが2回呼び出される
toDoTwin(function() {
  console.log('Hello World');
});

【例題】
　配列を受け取って配列の末尾に数値3を加える関数を作る。
　※配列に追加する関数は[].push(数値)で入れられる。

【例】

 var arr = [1,2]

 // 関数は動詞。キャメル型を使用。
 function addNum(arr) {
   arr.push(3)
   return arr;
 };

 addNum();

※キャメル型の入力形式は下記参照。
https://qiita.com/am_nimitz3/items/7b01af53751dba5d8fb1

■　初期値について

function add(num1=0, num2=0){
   return num1 + num2;
}

①　add (1,2);
②　add (1);
③　add ();
// 初期値を設定して関数を実行した場合、引数が入っていなくても関数を実行させることが出来る。
// ※初期値はなるべく空にしないこと。空にするのであれば仮引数の最後に設定する。

この場合は引数が入っていないため、②、③がエラーとなる。

function add(num1, num2){
   return num1 + num2;
}

①　add (1,2);
②　add (1);
③　add ();

■　配列の中に入っているデータを関数で使用すること

function a (num1, num2){
   var result = num1 + num2;
   return result;
}

var x = 1;
var y = 2;
var sum;
    sum= a(x,y);
    console.log(sum);

・処理順序
　varが宣言され、変数xが定義される。
　変数xに1が代入される。
　
　varが宣言され、変数yが定義される。
　変数yに2が代入される。

　varが宣言され、変数sumが定義される。
　変数sumが呼び出される。
　関数aが呼び出される。
　戻り値1,2が関数aに代入される。
　戻り値1,2が足されて、変数resultに代入される。

　console.log関数で変数sumを呼び出す。

■　連想配列に入っている値を取り出して関数を使用する

var data = {
    num1 = 1;
    num2 = 2;
};

function b(data){
    var result = data.num1 + data.num2;
    return result;
}

B(data);

// ここでのポイントは連想配列のデータ呼び出し方法。
// 「変数名.キー」で呼び出すことが出来る。

↓修正中

■　コールバック関数とは
シンプルに言うと「高階関数に渡すための関数」。
【例】

setTimeout(function() {
  console.log('Hello World');
}, 2000);

⇢この場合、2000ミリ秒後に「Hello World」と出力させる

■　非同期処理とイベントとコールバック関数
非同期処理は「書いた順に動く」というプログラムの基本とは違う動きになる。「書かれているコードを今は飛ばして後で実行して」という矛盾した状況になる。

JavaScriptの多くの非同期処理は、これを以下のような方法で実現。
・非同期処理関数はコールバック関数を受け取る高階関数にする
・利用者は「終わったら実行したい処理」をコールバック関数として渡す
・非同期処理関数は処理が終わったらコールバック関数を呼び出す

非同期処理はコードを複雑化させてしまうため、非同期処理を簡単に扱うことができる、Promiseやasync/awaitという機能がある。

【例】

setTimeout() => {
console.log('hello'), 500);
console.log('world!');
};

「world」が先に表示され、500ミリ秒が経過してから「hello」が表示される。
非同期処理では、実行順序はコード通りにはならない。