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

0. はじめに

---

内容

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

対象者

• JavaScriptを全く触ったことが無い人

前提知識

• Javaの基本構文。Javaと比較して説明するため。

---

参考図書

『改訂新版JavaScript本格入門』技術評論社
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
  • Can I use
  • MDN web docs

---

JavaScriptの実行方法

• ブラウザの開発者ツール
• Node.js
• JSFiddle：オンラインでJavaScriptを実行できる
  • 他にも似たようなサービスはある
    【2017年版】ブラウザ上で使えるJavaScript開発＆実行環境Webサービスの厳選まとめ

---

2. JavaScriptの構文

---

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

コンソール

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]

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

---

関数

コンソール

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

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

---

nullとundefined

undefined

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

コンソール

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

null

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

コンソール

fuga = null
fuga

---

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

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

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

コンソール

  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 比較演算子 引用

• 等価演算子はバグの元なので、等価演算子は使わない方がよい
• ただし、undefinedとnullのどちらも判定するときは、tmp == nullのように等価演算子の方がよい
  ※ jQueryで知るJavaScriptで唯一許される等価演算子の使い方 参照

---

コールバック関数

関数に引数として渡される関数のこと。
※ コールバック関数 - 分かりそうで分からない... 参考

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

---

setTimeoutは非同期処理

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

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

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

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

※ JavaScriptの非同期処理を並列処理と勘違いしていませんか？ 参考
※ 非同期処理の概念について解説 参考

---

JavaScriptはシングルスレッド

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

コンソール

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

※ JavaScriptの非同期処理を並列処理と勘違いしていませんか？ 引用

※ JavaScriptはシングルスレッドだとようやく知ったのでメモ 参考

---

変数の宣言

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

コンソール

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どっちを使うべきか？ 参照

---

付録

---

Node.js

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

※ Node.js 引用
※ 初心者向け！3分で理解するNode.jsとは何か? 参考

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

sample.js

console.log("3*4=" + 3*4);

$ node sample.js
3*4=12

---

ネットで学習する方法

• ドットインストール：３分動画でマスターするプログラミング学習サイト（初心者向け）
• NodeSchool ：Node.jsを使った学習ツール

---

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

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

※ 東京Node学園からJavaScriptが転校してきた！──はしれ！コード学園【第1回】 引用