【社内勉強会】JavaScriptの基礎(2017/10/05) 


# 0. はじめに

-------
## 内容

* 「JavaScriptがどんなものか」を感じ取るためのハンズオン。
* 基本的な機能を紹介する（ES5の機能）。


### 対象者
* JavaScriptを全く触ったことが無い人

### 前提知識
* Javaの基本構文。Javaと比較して説明するため。

-------
## 参考図書

![image](https://qiita-image-store.s3.amazonaws.com/0/37903/8672c64c-9a0c-7af7-17a3-294b43dab53f.png)
[『改訂新版JavaScript本格入門』技術評論社](http://gihyo.jp/book/2016/978-4-7741-8411-1)
2016年発売で、ES2015に対応。

-------
## 目次

1. JavaScriptの概要
2. JavaScriptの構文


-------
# 1. JavaScriptの概要

-------
## JavaScriptとは

* ブラウザ向けのスクリプト言語
* 1995年に登場
* サーバサイドでも使われるようになった（Node.js。後述参照）
* 「Java」という名前を使っただけ、Javaとは関係ない。
 - 「メロンとメロンパンくらい違う」  
 https://eng-entrance.com/java-javascript 引用

-------
## ECMASCript(エクマスクリプト）とは

* 標準化されたJavaScript
* 最近のエディション。"6"以降、エディションは年号になった。
    - ECMAScript5(ES5)：2009年公開
    - ECMAScript6(ES6, ES2015)
    - ECMAScript2016
    - ECMAScript2017
* ブラウザの対応状況を確認するサイト
    - [ECMAScript 6 compatibility table](https://kangax.github.io/compat-table/es6/)
    - [Can I use](https://caniuse.com/)
    - [MDN web docs](https://developer.mozilla.org/ja/docs/Web/JavaScript)

-------
## JavaScriptの実行方法

* ブラウザの開発者ツール
* [Node.js](https://nodejs.org/ja/)
* [JSFiddle](https://jsfiddle.net/)：オンラインでJavaScriptを実行できる
    - 他にも似たようなサービスはある  
    [【2017年版】ブラウザ上で使えるJavaScript開発＆実行環境Webサービスの厳選まとめ](http://paiza.hatenablog.com/entry/2017/01/30/%E3%80%902017%E5%B9%B4%E7%89%88%E3%80%91%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E4%B8%8A%E3%81%A7%E4%BD%BF%E3%81%88%E3%82%8BJavaScript%E9%96%8B%E7%99%BA%EF%BC%86%E5%AE%9F%E8%A1%8C%E7%92%B0%E5%A2%83Web)


-------
# 2. JavaScriptの構文


-------
## よく使う演算子とデータ型

```js:コンソール
1+2*3/4 //数値計算
"test" + "sample" //文字列結合
0.5 == 1/2 //真偽値

ary = [1, 2, "abc", false] //配列
ary[0]

obj = {x:1, y:2, z:"abc"} //オブジェクト
obj.x //ドット演算子
obj["x"] //ブラケット構文
key = "z"
obj[key]
```

* オブジェクトはドット演算子、ブラケット構文でアクセスできる
   - ブラケット構文では変数が使える

-------
## 関数

```js:コンソール
function pow(a) {return a*a;} //二乗を計算する関数
pow(3)
tmp = pow //関数を変数に代入
tmp(3)
tmp.toString() //関数オブジェクトのメソッドを実行
```

* 関数もオブジェクト
* 関数を変数に代入できる
* 関数はプロパティを持つ


-------
## nullとundefined

### undefined
定義されていないことを表す

```js:コンソール
hoge //一度も定義していない変数
obj = {x:1}
obj.y //存在しないプロパティを参照
function donothing() {}
donothing() //戻り値がない関数を実行
```

### null
「空」であることを表す。

```js:コンソール
fuga = null
fuga
```


-------
## 比較演算子（等価演算子と同値演算子）

比較対象の型が異なる場合、

* 等価演算子(`==`)：型を変換する
* 同値演算子(`===`)：型を変換しない

```js:コンソール
  1   ==  1        // true
 "1"  ==  1        // true
  0   == false     // true
  0   == null      // false
  0   == undefined // false
null  == undefined // true

  1   ===  1        // true
 "1"  ===  1        // false
  0   === false     // false
  0   === null      // false
  0   === undefined // false
null  === undefined // false
```

※ [MDN 比較演算子](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Comparison_Operators) 引用

* 等価演算子はバグの元なので、等価演算子は使わない方がよい
* ただし、`undefined`と`null`のどちらも判定するときは、`tmp == null`のように等価演算子の方がよい  
※ [jQueryで知るJavaScriptで唯一許される等価演算子の使い方](https://qiita.com/Layzie/items/7d6763ba2594b8f36163) 参照



-------
## コールバック関数
関数に引数として渡される関数のこと。
※ [コールバック関数 - 分かりそうで分からない...](http://wa3.i-3-i.info/word12295.html) 参考

```js
setTimeout(sample, 2000);
function sample() {
    console.log("2秒後に表示");
}
```



-------
### `setTimeout`は非同期処理

`setTimeout`の次の処理が、先に実行される。

```js
setTimeout(printA, 1000);
console.log("B");

function printA() {
    console.log("A");
}

//出力結果
//B
//A
```

※ [JavaScriptの非同期処理を並列処理と勘違いしていませんか？](https://qiita.com/klme_u6/items/ea155f82cbe44d6f5d88) 参考
※ [非同期処理の概念について解説](https://h5y1m141.github.io/step-up-javascript/doc/understanding_javascript/async_02.html) 参考

-------
## JavaScriptはシングルスレッド

* 関数単位で順番に実行されていく
* 非同期処理は、実行の準備ができたコールバック関数が待ち行列をつくり、現在実行中の関数の処理が終了してから、順に関数が実行されていく


```js:コンソール
setTimeout(function() {console.log("1秒後")}, 1000); //1秒後に表示されない！！
for (let i=0;i<1000000000; i++) {} //時間のかかる処理
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/37903/94e21ea6-3489-f892-9c70-4d8684d25707.png)
※ [JavaScriptの非同期処理を並列処理と勘違いしていませんか？](https://qiita.com/klme_u6/items/ea155f82cbe44d6f5d88) 引用

※ [JavaScriptはシングルスレッドだとようやく知ったのでメモ](http://chuckwebtips.hatenablog.com/entry/2015/08/19/070000) 参考


-------
## 変数の宣言

* var宣言子
* let命令(ES2015)
    - 変数の重複を許可しない
    - ブロックスコープ
* const命令(ES2015)
    - 再代入禁止
    - ブロックスコープ

```js:コンソール
for (var i=0; i<10; i++) {}
i
for (let j=0;j<10; j++) {}
j //error（ブロックスコープ外の変数を参照）

let a = 1
let a = 2 //error(変数の重複）

const b = 10
b = b + 10; //error（再代入）
```

* IE11でもconst, letが使える。
* letはFirefox44以降
* できるだけconstを使うべき  
 ※ [ES6では変数の宣言にletとconstどっちを使うべきか？](http://yukidarake.hateblo.jp/entry/2015/08/07/194949) 参照



-------
# 付録

-------
## Node.js

>Node.js® は、Chrome の V8 JavaScript エンジン で動作する JavaScript 環境です。 Node.js は、軽量で効率的に動作する非同期型のイベント駆動モデルを採用しています。 Node.js のパッケージ管理マネージャである npm は、世界で最も大きなオープンソースのライブラリエコシステムです。

※ [Node.js](https://nodejs.org/ja/) 引用
※ [初心者向け！3分で理解するNode.jsとは何か?](https://eng-entrance.com/what-is-nodejs) 参考

* ".js"という名前が付くが、ファイル名ではない。
* `node`コマンドで実行する

```js:sample.js
console.log("3*4=" + 3*4);
```

```shell-session
$ node sample.js
3*4=12
```

-------
## ネットで学習する方法

* [ドットインストール](https://dotinstall.com/)：３分動画でマスターするプログラミング学習サイト（初心者向け）
* [NodeSchool](https://nodeschool.io/ja/) ：Node.jsを使った学習ツール

------
## 「はしれ！コード学園」JSちゃんの紹介文

>コード学園のお隣、東京Node学園からの転校生。一見気弱そうに見えて実は好奇心が人一倍強い。小さいころはあまり褒められる機会が少なく、特に「JavaScriptを無効にしてください」と言われたことがトラウマだったけれど、最近はいろいろなことに挑戦したり、周りに理解されてきたことで、だいぶ気にならなくなってきました。

※ [東京Node学園からJavaScriptが転校してきた！──はしれ！コード学園【第1回】](https://codeiq.jp/magazine/2015/10/30057/) 引用