JavaScriptの基本

Tag:

JavaScriptを使う際に押さえておきたいなと思う基礎知識について書いています。

ECMAScriptの歴史

https://ja.wikipedia.org/wiki/ECMAScript

ES2015

Qiita | ES2015(ES6) 入門
ECMAScript_6_support_in_Mozilla

ES2016

Qiita | ES2016 / ES2017の最新動向を追ってみた
ECMAScript_7_support_in_Mozilla

豆知識

参考になるサイト

mozillaのリファレンスサイトです。JavaScript関連の参考となる情報が豊富です。

(JavaScript関連)
https://developer.mozilla.org/ja/docs/Web/JavaScript

(DOM関連[ブラウザオブジェクトなど])
https://developer.mozilla.org/ja/docs/DOM

(Web API インターフェイス)
https://developer.mozilla.org/ja/docs/Web/API

コーディング規約

Airbnb JavaScript Style Guide
(英語) https://github.com/airbnb/javascript
(日本語) http://mitsuruog.github.io/javascript-style-guide/

MDN JavaScript Style Guide
(日本語) https://developer.mozilla.org/ja/docs/JavaScript_style_guide

Google JavaScript Style Guide
(日本語) http://cou929.nu/data/google_javascript_style_guide/

周辺技術

npm

パッケージ管理ツール
Qiita | npmコマンドの使い方

Babel

Node.js製のトランスパイラ。ブラウザがまだサポートしていない新しいESの機能を、ブラウザがサポートしている形式に変換してくれます。

Webpack

複数のモジュールを1つのファイルにまとめてくれます。つまり、JS、CSS、画像などを一つのファイルにまとめることができます。
Qiita | 【意訳】Webpackの混乱ポイント
Qiita | webpack 3 入門

ESLint

静的構文チェックツール
Qiita | ESLint 最初の一歩

JSDoc

例を示します。

/**
 * コンストラクタの説明
 * @constructor
 * @param {string} title - The title of the book.
 * @param {string} author - The author of the book.
 */
function Book(title, author) {
}

/**
 * メソッドの説明
 * @returns {string}
 */
Book.prototype.getTitle = function() {
}

詳しくは下記ページで確認できます。
http://usejsdoc.org/

出力

いろいろな出力方法です。

var name = '佐藤';

// ダイアログボックスに表示
window.alert(name + 'です。');

// template string(ES6)。バッククォートで囲みます。 変数や処理を埋め込めます。
window.alert(`${name}です。`);

// ブラウザの開発者ツール上に表示
console.log(name + 'です。');
console.dir(object);   // オブジェクトが持つプロパティをリストにして表示
console.dirxml(node);  //DOMオブジェクトの内容を表示

// jQueryを利用し、ブラウザ上(id="debug")に表示
$('#debug').text(name + 'です。');

// jQueryを利用し、ブラウザ上(id="debug" 要素内の一番後ろに追加)に表示
$('#debug').append('<p>' + name + 'です。</p>');

変数・定数の宣言(var, let, const)

グローバル変数とローカル変数

varなど何むつけずに宣言した変数はグローバル変数とみなされます。ES5では、ローカル変数を定義する際には必ずvarを使用します。

name1 = 'aaa';
name2 = 'aaa';

function test() {
  name1 = 'bbb';
  var name2 = 'bbb'
  console.log(name1); // bbb
  console.log(name2); // bbb
}

test();
console.log(name1); // bbb
console.log(name2); // aaa
グローバル変数は、1つだけ定義して、その変数をコンテナとして利用するなどして最低限の利用にとどめときます。

ローカル変数は関数全体で有効となります。以下コードは、グローバル変数を利用しているつもりが、実際はローカル変数が利用されている例です。

name1 = 'aaa';
function test() {
  console.log(name1); // undefined
  var name1 = 'bbb'
}
test();

3行目の時点では、name1はローカル変数として有効となっていますが、値が未定義(undefined)です。こういった意図しない動作を起こさないために、ローカル変数は関数の先頭で宣言しときます。

ブロックスコープ

ES5では、ブロックスコープがありません。
ローカルスコープはあるので下記はエラーとなりますが、

function test() {
  var name1 = 'aaa';
}
console.log(name1); // error('name1' は定義されていません。)

ブロックスコープがないため下記はエラーとなりません。

if (true) {
  var name1 = 'aaa';
}
console.log(name1); // aaa

そこでES6でletが利用可能となりました。varはブロックを抜けても利用できるのに対し、letはブロック内でのみ利用できます。

if (true) {
  var name1 = 'ヤマダ';
  let name2 = 'タナカ';
}
console.log(name1); // ヤマダ
console.log(name2); // error ('name2' は定義されていません。)

定数

const(ES6)を利用します。

const VERSION = 2.3;
VERSION = 2.4; // error(再代入はできません)

データ型

データ型 補足
基本型
(値を格納)
数値型 一時的にラッパーオブジェクトを生成し、
オブジェクト(Number)として利用できる。
文字列型 一時的にラッパーオブジェクトを生成し、
オブジェクト(String)として利用できる。
真偽型 一時的にラッパーオブジェクトを生成し、
オブジェクト(Boolean)として利用できる。
null 意図的に空である状態
undefined 定義されてない状態
シンボル ES6で追加
参照型
(アドレスを格納)
配列
オブジェクト 連想配列と同じ。
関数 クラスを作る役割も持つ。

データ型の確認

var string = 'おはよう';
var number = 123;
var boolean = true;
var nullVar = null;
var array = ['apple', 'orange'];
var object = {'key1': 'value1', 'key2': 'value2'};
var func = function () {};

console.log(typeof string);          // string
console.log(typeof number);          // number
console.log(typeof boolean);         // boolean
console.log(typeof nullVar);         // object
console.log(typeof undefinedVar);    // undefined
console.log(typeof array);           // object
console.log(array instanceof Array); // true
console.log(typeof object);          // object
console.log(typeof func);            // function

undefinedの判定

ES5でundefinedは書き換え不可になりました。なので下記どちらの判定でも良いかと。

if (x === undefined) {}

if (typeof x === "undefined") {}

標準ビルトインオブジェクト(組み込みオブジェクト)

リンク先はMDNの解説です。

オブジェクト 補足
Global グローバル変数、グローバル関数を管理
Object すべてのオブジェクトの基本オブジェクト
Array 配列操作
Boolean
Date 日付や時刻データを操作

// Dateオブジェクトの生成
var date = new Date();              // 生成された時点でのシステムの日付がセットされる。
var date = new Date('2013/10/01');  // 文字列で指定して生成。
console.log(date.getFullYear());    // 2013
console.log(date.getMonth() + 1);   // 10
console.log(date);                  // Tue Oct 1 00:00:00 UTC+0900 2013 

// 昨日
var yesterday = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1);
Error 例外処理(try…catch 構文)で利用
Function
JSON parseメソッド(JSON文字列をjavascriptのObjectに変換)

var jsonString = '{"name": "yamada", "old": 22}';
var jsonObj = JSON.parse(jsonString);

console.log(typeof jsonString);  // string
console.log(typeof jsonObj);     // object
console.log(jsonObj);            // [object Object]{name: "yamada", old: 22}

stringifyメソッド(JavaScriptの値をJSON文字列に変換)

var jsonObj = {name: "yamada", old: 22};
var jsonString = JSON.stringify(jsonObj);

console.log(typeof jsonString);  // string
console.log(typeof jsonObj);     // object
console.log(jsonString );        // {"name":"yamada","old":22}
Math 数学演算機能を提供
Number 数値操作
RegExp 正規表現機能を提供

var str = 'ABCD';

// RegExpオブジェクトの生成
var ptn1 = new RegExp('ab', 'gi');
var ptn2 = /cd/gi;

//マッチした文字位置を返す
console.log(str.search(ptn1));  // 0
console.log(str.search(ptn2));  // 2
String 文字列操作
Map(ES6) 連想配列操作。Objectと違い、変数をキーにできる。
Set(ES6) 重複しないようにデータを保持。

var set = new Set();
set.add(1);
set.add(3);
set.add(3);
console.log(set.size); // 2
WeakMap(ES6)
WeakSet(ES6)
Symbol(ES6)
Proxy(ES6)
Promise(ES6)

ブラウザオブジェクト

Windowオブジェクト

Windowオブジェクトは、ブラウザ操作するオブジェクトの最上位に位置するオブジェクトです。

alert, confirm, open, scroll, setTimeoutなどのメソッドを持ちます。

window.alert('Hello');

// windowは省略できます。
alert('Hello');

document,location,historyなどのプロパティを持ち、それぞれwindowに紐づくオブジェクトを参照します。

主なオブジェクト

オブジェクト 補足
Document DOMを管理
Location ページ移動を制御

// http://www.dn-web64.comに移動
location.href = 'http://www.dn-web64.com';

// 同一ドメインの場合、履歴を残さずに移動(戻るボタンで前のページに戻れない)
location.replace('http://www.dn-web64.com');
Console ブラウザのデバッグコンソールへアクセス
Storage ブラウザにデータ保存。Cookieと違い、有効期限がなく、サーバーにも通信しない。
History ブラウザのページ履歴を管理
Navigator ブラウザの種類(userAgent)や位置情報(geolocation)など管理
Worker バックグラウンドでjavascriptを実行

スポンサーリンク