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

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

■JavaScriptとNode.jsについて
JavaScript：JavaScriptはブラウザ上で動くために開発されたプログラミング言語。
Node.js：イメージはサーバサイドのJavaScript。正確にはNode.jsはサーバサイドでJavaScriptを実行できるようにしてくれるプラットフォーム。

■Node.jsの特徴
・サーバーサイドのJavaScript
・非同期
　⇢I/O（Input/Output）の処理結果を待たず処理を進める。
・ノンブロッキングI/O
　⇢I/Oの結果を待たないで処理をすすめる。I/O処理が終了したらコールバック関数を実行。
・イベントドリブン (何かしらのキッカケで動き始める)
　⇢https://qiita.com/hththt/items/aefbcc6eb191588dadff
・シングルスレッド
　⇢メモリ消費が少ない、仕事切り替えが少ないので速い
・JavaScript エンジンが Google の V8 で速い
　⇢V8は、Googleが開発するオープンソースのJIT Virtual Machine型のJavaScriptエンジン。

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

■変数の定義
・「const」や「var」、「let」で変数を定義。何らかの値を変数に代入して使用する。

【例】

// 数値
const numValue = 100;
// 文字列
const strValue = "私は値です！";
// 真偽値
const boolValue = true;
// 配列
const arrayValue = [1, 2, 3];
// 連想配列
const objValue = { key: 'value' };

■データの型
var：変数を宣言し、ある値に初期化することもできる。
let：スコープのローカル変数を宣言し、ある値に初期化することもできる。
const：スコープで読み取り専用の名前付き定数を宣言する。

■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();

↓修正中

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

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」が表示される。
非同期処理では、実行順序はコード通りにはならない。