0. はじめに
内容
- 「JavaScriptがどんなものか」を感じ取るためのハンズオン。
- 基本的な機能を紹介する（ES5の機能）。
対象者
- JavaScriptを全く触ったことが無い人
前提知識
- Javaの基本構文。Javaと比較して説明するため。
参考図書
『改訂新版JavaScript本格入門』技術評論社
2016年発売で、ES2015に対応。
目次
- JavaScriptの概要
- 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
- ブラウザの対応状況を確認するサイト
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を無効にしてください」と言われたことがトラウマだったけれど、最近はいろいろなことに挑戦したり、周りに理解されてきたことで、だいぶ気にならなくなってきました。