JavaScript ES6 - user000422/0 GitHub Wiki

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を設定
const result = element.value; // valueを取得

element.setAttribute('name', 'age'); // name属性を設定

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

sample.addEventListener('click', function() { … });

// 要素の値（value）が変更されたタイミング textarea checkbox
sample.addEventListener('change', function() { /**/ }); // フォーカスが外れたら
sample.addEventListener('input', function() { /**/ });  // 即時

// テキストボックスから外れたタイミング
sample.addEventListener('blur', function() { /**/ });

// 画面遷移系
document.addEventListener('DOMContentLoaded', function() { /**/ }, false); // 画面遷移後画像以外のリソースが読み込まれた後
window.addEventListener('load', function() { /**/ }, false); // 画面遷移後すべてのリソースが読み込まれた後

// セレクトボックスの変更を検知
element.addEventListener('change', function(event) {
  console.log(event.target.value); // 選択した値
});

// チェックボックスのチェック状態を取得（true/false）
const result = elm.checked;

// チェックボックスのチェックを付ける（外す）
elm.checked = true;
elm.checked = false;

let sample; // 変数宣言

let sample   = 値; // 変数宣言と代入同時処理
const sample = 値; // 変数宣言と代入同時処理

let sample = 10 + '%'; // 数値と文字列を連結し変数に代入（ 10% ）

// 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 オブジェクト 時間操作
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( sample === 1 ) {
	// true の場合実行される処理
} else {
	// false の場合実行される処理
}

if(sample === 10) { … } // 数値比較
if(sample != '') { … } // 存在しない場合
if(sample >= 1 && sample < 10) { … } // 論理演算 AND
if(sample >= 1 || sample < 10) { … } // 論理演算 OR

// 基本構文
while(条件){
	// 処理内容
}

while(○○○ <= xxx.length){ … } // ○○○の文字数 が xxxの文字数以下の場合

for(const option of sampleArray) { /* 処理内容 */ }

// 基本構文 引数や, returnは必須ではない
function functionName(sample) {
	return result; // 返す値
}

functionName(); // function 呼び出し

const result = functionName(); // functionの戻り値を変数に代入

// 基本構文 function を 省略可
const ○○○ = (パラメータ) => {
	return 処理内容と返す値;
}
// パラメータが1つのときは () を省略可
const ○○○ = パラメータ => {
	return 処理内容と返す値;
}

// 処理が1行で return を返す内容の場合 {} と return を省略可
// 例 内部if文を三項演算子にし それぞれの return を 1つにまとめる
const ○○○ = パラメータ => {
	return (条件)? trueの場合 : falseの場合 ;
}
// さらに上記の {} と return を省略し 1行にまとめる
const ○○○ = パラメータ => (条件)? trueの場合 : falseの場合 ;

'use strict'; // <script>タグ内の1行目に記述

/**
 * 関数の説明
 * @param {string} sampleArg - パラメータの説明
 * @return {number} - 戻り値の説明
 */
function sampleMethod(sampleArg) {
  return sampleValue;
}