JavaScript ES6 - user000422/0 GitHub Wiki
ES6ブラウザ対応 … https://kangax.github.io/compat-table/es6/
直接HTMLに書く場合は </body>
直前に記述
<head>
内に記述する場合は、CSSの <link>
より後ろに記述
値 … 文字列はシングルクォーテーションが必要、数字は不必要
アロー演算子はIE
非対応なので使わないこと
DOM操作では、id属性を指定推奨(classより速いため)
ページ遷移時に動作させるwindowオブジェクトはES6から省略可
alert('○○○'); // アラート表示
console.log('○○○'); // コンソールに出力
sample.id = 'id-name'; // id属性追加
sample.name; // name属性取得
sample.tagName; // 要素名取得
document.getElementById('id-name'); // ID属性の要素を取得
document.getElementsByClassName('class-name'); // CSS属性の要素を取得
document.getElementsByTagName('input'); // 要素を取得(連想配列として全て格納される)
document.querySelectorAll('[id^=○○○]'); // 正規表現 id名が○○○と完全一致
element.textContent = 'sample'; // テキストを書き換える
element.value = 'sample'; // valueを設定
let result = element.value; // valueを取得
element = document.createElement('div'); // 要素作成
sample.appendChild(element); // 対象の要素の最後に追加
sample.parentNode; // 対象の親要素を取得
sample.children; // 対象の子要素全て取得(配列で)
// xxx = HTML出力用のテンプレート変数名 , HTML 出力
sample.innerHTML = xxx;
// classListプロパティ
sample.classList.add('class-name'); // classを追加
sample.classList.remove('class-name'); // classを削除
sample.classList.toggle('class-name'); // classがあれば削除, なければ追加
sample.classList.containes('class-name'); // classがあればtrue, なければfalse
■EventListener
ES6
sample.addEventListener('click', function() { … }, false);
// 要素の値(value)が変更されたタイミング textarea checkbox
sample.addEventListener('change', function() { /**/ }, false); // フォーカスが外れたら
sample.addEventListener('input', function() { /**/ }, false); // 即時
// テキストボックスから外れたタイミング
sample.addEventListener('blur', function() { /**/ }, false);
// 画面遷移系
document.addEventListener('DOMContentLoaded', function() { /**/ }, false); // 画面遷移後画像以外のリソースが読み込まれた後
window.addEventListener('load', function() { /**/ }, false); // 画面遷移後すべてのリソースが読み込まれた後
// セレクトボックスの変更を検知
element.addEventListener('change', function(event) {
console.log(event.target.value); // 選択した値
});
■変数
変数/関数名は先頭小文字のcamelCase形式。(MDNガイドライン)
var
はブロックスコープを持つことができない。
let
とconst
はブロックスコープを持つことができる。(ブロック内で宣言した場合はブロック内のみ有効)
基本的に const
を使用すること。書き換えが生じるもののみ let
を使用する。
const
… 定数(書き換え不可)
let
… if文 , while文 処理(スコープ)内{ … }のみ有効な変数
const
配列の値は書き換え自由
1文字目に数字は不可 , @ は不可
let sample; // 変数宣言
let sample = 値; // 変数宣言と代入同時処理
const sample = 値; // 変数宣言と代入同時処理
let sample = 10 + '%'; // 数値と文字列を連結し変数に代入( 10% )
値加工
substring
と substr
のどちらを使用すべきかは、substring
を推奨(公式より)
// substring 値分割抽出
let result = sample.substring(2); // 引数(開始文字位置)から末尾までの値
let result = sample.substring(0, 3); // 引数(開始文字位置, 終了文字位置)の値
// sprit
const sampleArray = sampleStr.split(''); // 文字列を1文字ずつに分割
// trim
const result = sample.trim(); // 文字列前後の空白を除去
// 型変換
result = String(sample); // 文字列型に変換
オブジェクト(連想配列) … キーと値のペア等、複数のデータを扱う
カンマごとに改行も可能
let obj = {}; // オブジェクト宣言(値を全て初期化する処理もこれ)
let obj = {id:'1', name:'taro'}; // 宣言と同時に定義
let result = obj.key_name; // オブジェクト読み出し
obj.key_name = '値'; // オブジェクト書き換え
obj.new_key_name = '値'; // プロパティ新規追加
// objectメソッド
Object.keys(obj); // key取得
Object.values(obj); // value取得 IE対応していない
obj[Object.keys('id')]; // value取得 プロパティを参照し値を取得 IE対応用
obj[Object.keys(obj)[0]]; // value取得 for等用 IE対応用
Object.keys(obj).length; // length取得 lengthプロパティがないためkeyで計算
Date … 時刻操作
// Date オブジェクト 時間操作
let sample = new Date(); // 現在日時取得 変数に代入
let sample = new Date(年, 月, 日, 時, 分, 秒, ミリ秒); // 取得日時指定(年と月のみ指定必須)
// Date メソッド
sample.getFullYear(); // 年 を 取得
sample.getMonth(); // 月 を 取得(1月 … 0)
sample.getDate(); // 日 を 取得
sample.getHours(); // 時 を 取得
sample.getMinutes(); // 分 を 取得
sample.getSeconds(); // 秒 を 取得
sample.getMiliseconds(); // ミリ秒 を 取得
sample.getDay(); // 曜日 を 取得(日曜日 … 0)
sample.setFullYear(); // 年 を 書き換え
sample.setMonth(); // 月 を 書き換え
sample.setDate(); // 日 を 書き換え
sample.setHours(); // 時 を 書き換え
sample.setMinutes(); // 分 を 書き換え
sample.setSeconds(); // 秒 を 書き換え
その他関数
// Math オブジェクト
// Math メソッド
Math.abs(数値); // 絶対値 を 計算
Math.ceil(数値); // 小数点以下 を 切り上げ
Math.floor(数値); // 小数点以下 を 切り下げ
Math.round(数値); // 四捨五入して整数に
Math.max(数値1, 数値2); // 最大値 を 返す
Math.min(数値1, 数値2); // 最小値 を 返す
Math.pow(数値x, 数値y); // x の y 乗
Math.random(); // 0以上 1未満 の 乱数
○○○.length // 文字数取得
// += … 変数の値と追加する値が数字の場合加算
○○○ += 値; // 変数に値を追加する
// タイマー機能 時間間隔を空け、繰り返し実行する処理
const ○○○ = setInterval(function(){
// 時間を空けて処理する内容
}, ミリ秒); // 1秒 = 1000
clearInterval(○○○); // タイマー機能(setInterval)を 止める
// startsWith 前方一致 戻り値:boolean
const str = 'ABCDEFGHIJKLMN';
const result = str.startsWith('ABC');
配列
let array = []; // 配列宣言
let array = ['○○○', '○○○', '○○○']; // 配列宣言と同時に値を代入
let array = ['文字列', 10]; // 文字列と数値が混合してても問題なし
array[0] = 'blue'; // 値を書き換える
// 配列メソッド
array.push('○○○'); // 末尾に値を追加
array.pop(); // 末尾の値を削除
const xxx = array.pop(); // 末尾の値を削除し、その値を変数へ代入
array.unshift(); // 先頭に値を追加
array.shift(); // 先頭の値を削除
const xxx = array.shift(); // 先頭の値を削除し、その値を変数へ代入
array.concat(配列1, 配列2, …); // 引数で指定した配列を結合し 新しい配列を作成
array.toString(); // 配列のデータ全てを文字列にする
// forEach 基本構文 処理繰り返し
// date … 配列の値, index … index番号
○○○.forEach(function(date, index){
// データに対して実行する処理内容
});
if
if( sample === 1 ) {
// true の場合実行される処理
} else {
// false の場合実行される処理
}
if(sample === 10) { … } // 数値比較
if(sample != '') { … } // 存在しない場合
if(sample >= 1 && sample < 10) { … } // 論理演算 AND
if(sample >= 1 || sample < 10) { … } // 論理演算 OR
while … 条件が true になる限り繰り返し続ける
// 基本構文
while(条件){
// 処理内容
}
while(○○○ <= xxx.length){ … } // ○○○の文字数 が xxxの文字数以下の場合
for of … 配列データ繰り返し特化記述 ES6 から
※連想配列(オブジェクト)はfor in
を使うこと
for(const option of sampleArray) { /* 処理内容 */ }
function
呼び出し元と関数自体の引数に同じ名称を使うと、関数内でその名称の変数名に代入する処理などで競合する
// 基本構文 引数や, returnは必須ではない
function functionName(sample) {
return result; // 返す値
}
functionName(); // function 呼び出し
const result = functionName(); // functionの戻り値を変数に代入
アロー式 … function 省略記述 ES6から
IEはアローに対応していない(IE11も)
// 基本構文 function を 省略可
const ○○○ = (パラメータ) => {
return 処理内容と返す値;
}
// パラメータが1つのときは () を省略可
const ○○○ = パラメータ => {
return 処理内容と返す値;
}
// 処理が1行で return を返す内容の場合 {} と return を省略可
// 例 内部if文を三項演算子にし それぞれの return を 1つにまとめる
const ○○○ = パラメータ => {
return (条件)? trueの場合 : falseの場合 ;
}
// さらに上記の {} と return を省略し 1行にまとめる
const ○○○ = パラメータ => (条件)? trueの場合 : falseの場合 ;
use strict … ルーズな動作を精査しエラーを吐く strictモード
'use strict'; // <script>タグ内の1行目に記述
■JsDoc
/**
* 関数の説明
* @param {string} sampleArg - パラメータの説明
* @return {number} - 戻り値の説明
*/
function sampleMethod(sampleArg) {
return sampleValue;
}
正規表現
半角スペース(特殊文字で表せる) … \x20