はじめに

• JavaScript のコーディングスタイル
• 最初から Strict モードを有効にすべし (ECMAScript 5)
• JavaScript の 6 つの型

静的解析ツール

• （旧）JavaScript の静的解析ツールの比較 (JSLint, JSHint, ESLint)
• （旧）JSLint で JavaScript コードの静的解析を行う
• （旧）JSHint で JavaScript コードの静的解析を行う
• ESLint で JavaScript コードの静的解析を行う（オススメ）

デバッグ

• デバッグ出力用の print 関数の統一について
• ある処理を 1 秒間に何回実行できるかプロファイリングする

数値／文字列 (Number/String)

数値

• 実数の小数点数以下を丸めて整数に変換する (floor, ceil, round)
• 数値の小数点以下 N 桁までに丸めて表示する (toFixed)

文字列

• new String は避ける
• テンプレート文字列の機能で文字列リテラル中の変数を展開する (template literal) (ECMAScript 2015)
• == と === による文字列比較の違い
• 文字列を大小比較すると何が起こるか
• 文字列と文字列、数値を結合する
• 文字列と数値を変換する
• 文字列の小文字と大文字を変換する (toLowerCase, toUpperCase)
• 検索
  • 文字列の中から文字列を検索する (String#search, RegExp#test)
  • 文字列内に NG ワード（禁止語句）が含まれていないか調べる (RegExp#test)
• 分割／抽出
  • 文字列をデリミタで分割する／1文字ずつに分割する (String#split)
  • 文字列から正規表現パターンに一致する部分を取り出す (String#match, RegExp#exec)
• 置換
  • 文字列を置換する (String#replace, String#replaceAll)
• 編集
  • 文字列の先頭と末尾の空白を削除する (String#trim) (ECMAScript 2015)
  • 文字列を指定の長さになるまでパディング（埋め合わせ）する (String#padStart, #String#padEnd)
• 文字列の長さを取得する (length)
• 部分文字列を取得する (substring, slice)
• 文字列内の1文字を取得する／1文字ずつループ処理する (charAt)
• 全角文字と半角文字を含んだ文字列を正規化して表記ゆれを吸収する (normalize) (ECMAScript2015)
• 文字列内のひらがなとカタカナを変換する
• 旧記事
  • テンプレートを使ってテキストを生成する (Underscore.js)

配列／連想配列 (Array)

• 配列の基本
• 配列に要素を追加・挿入する (push, unshift, splice)
• 配列と配列を結合する (…スプレッド演算子, concat)
• 配列から部分配列を取得する (slice, splice)
• 配列をコピーする
• 配列をループで処理する (for, forEach, for-of)
• 配列をソートする (sort, reverse)
• 配列にある要素が存在するか調べる (includes, indexOf)
• 配列の長さを切り詰める (length, splice)
• 連想配列にキーが存在するか調べる (in)
• 連想配列の要素（キー）を削除する (delete)
• 連想配列の要素数を調べる
• 配列要素をランダムで取り出す
• 配列の各要素に対して同じ処理を行う (map)
• 配列の分割代入で複数の値を同時に代入する (Array destructuring)

日時／タイマー (Date/Timer)

日時

• Date オブジェクト（日時情報）の作成方法いろいろ
• Date オブジェクトをいろいろな文字列表現に変換する
• 他の国のローカルタイム（現地時刻）を文字列形式で取得する
• Date オブジェクトの日付を加算／減算する
• Date オブジェクト同士の差分を取る

タイマー／パフォーマンス

• タイマーで任意の関数を呼び出す (setTimeout, setInterval)
• 精度の高いタイムスタンプを取得する (performance.now())
• 処理速度を計測する (performance)

構文

関数

• 関数を定義する
• デフォルト引数を扱う関数を定義する (Default parameters) (ECMAScript 2015)
• 可変長引数を扱う関数を定義する (arguments)
• 関数の仮引数の数を取得する
• 渡されたパラメータが関数かどうか調べる
• 関数オブジェクトから関数名を取得する
• アロー関数で関数を定義する (ECMAScript 2015)
• yield を使ってイテレート可能な関数（ジェネレーター関数）を定義する

変数／定数／名前空間

• 変数定義には var ではなく let や const を使用する (ECMAScript 2015)
• JavaScript で定数を定義する (const)
• JavaScript ではグローバル変数も関数も全てプロパティ
• 関数内からしか参照できないプライベート関数を定義する
• 分割代入 (Destructuring assignment)
  • 分割代入によりオブジェクトの特定のプロパティだけを単独変数に取得する (Object destructuring) (ECMAScript 2015)

オブジェクト

• オブジェクトの基本
• オブジェクトのプロパティを列挙する (for-in)
• 2つのオブジェクトのプロパティをマージする（…スプレッド演算子、Object.assign）
• Property Shorthand の記法で複数の変数をひとつのオブジェクトにまとめる (ECMAScript 2015)

クラス

• クラスを定義する (class) (ECMAScript 2015)
• クラス定数／クラス変数／クラスメソッドを定義する
• あるオブジェクトが特定のクラスのインスタンスであるかを調べる (instanceof, constructor)
• クラスに toString() メソッドを実装する

JavaScript 独自拡張

• 式クロージャ (Expression Closure)

その他

• JavaScript において偽 (false) と評価される値
• 入れ子になったループを一度に抜ける（多重ループからの break）
• ある変数が初期化済みかどうか確認する
• 外部スクリプトはなぜ (function(){})(); のような書き方をするのか？

非同期処理

• Promise オブジェクトで連続するコールバック処理を簡潔に記述する (ECMAScript 2015)
• Promise な非同期処理を async/await でさらに読みやすくする (ECMAScript 2017)

HTML/DOM 操作

要素

• HTML の DOM 要素を取得する (1) タグ名、クラス名、ID を検索
• HTML の DOM 要素を取得する (2) 親要素、子要素、兄弟要素を検索
• HTML の DOM ツリーに要素を追加する
• HTML 要素に独自の data 属性（カスタム属性）を設定する
• HTML 要素の class 属性の値を追加・削除・トグルする
• ページ内のヘッダ要素 (h2/h3/h4) から自動的にメニュー (TOC) を生成する
• HTML 要素のサイズを取得する
• HTML 要素の位置を取得する

ウィンドウ

• Web ブラウザのページ表示位置を調べる（スクロール位置を取得する）

画像／イメージ

• 複数の画像ファイルが読み込まれるのを待機する

音声/オーディオ

• オーディオファイル (mp3) を再生する

I/O（入出力）

• キーボードからの入力を取得する
• テキストボックスでキー入力したときのイベントをハンドルする (onkeyup)
• ボタンを押したときのイベントをハンドルする (onclick)
• プルダウンリストから項目を選択したときのイベントをハンドルする (onchange)

jQuery

• jQuery 本体のロード方法いろいろ
• jQuery 関連用語
• jQuery で Hello World
• jQuery で要素を追加、移動、コピーする (append, prepend)
  • jQuery で動的にリスト項目 (li) を追加する
  • jQuery でテーブルに動的にレコード (tr) を追加する
• jQuery で要素を削除する (remove)
• jQuery の ajax/get/post メソッドが動作しない
• jQuery でフォームに入力した値を取得する

HTML5 Canvas

• HTML5 Canvas のサイズ指定について
• HTML5 Canvas でテキストを描画する
• HTML5 Canvas に矩形や円を描画する
• HTML5 Canvas に画像ファイルを描画する
• HTML5 Canvas 内のマウスドラッグで、描画オブジェクト全体を移動させる
• HTML5 Canvas のまわりにテレビの枠画像を表示してそれっぽく見せる
• ウィンドウサイズに応じて HTML5 Canvas のサイズを変更する
• HTML5 Canvas の描画領域全体をクリアする
• IE 8 以下でも canvas タグを使用できるようにする

Web サイト

• URL エンコード／デコードを行う (encodeURI, encodeURIComponent)
• URL 内のハッシュフラグメントの値を扱う (hashchange, location.hash)
• URL からクエリ文字列を取り出す (window.location.search, URLSearchParams)

実行環境

• CORS - Cross-Origin Resource Sharing とは？
• Chrome で Ajax (XMLHttpRequest) によるクロスドメイン通信の制約をなくす
• 使用している Web ブラウザが IE (Internet Explorer) かどうか判別する

Node.js

• ⇒ まくまく Node.js ノート