Help us understand the problem. What is going on with this article?

JavaScript チートシート

書いてあること

  • JavaScript開発メモ

参考

JavaScript

JavaScriptの記載方法

インラインスクリプト

bodyの閉じタグ直前に書くのが一般的

<script>
'use strict';

{
  ・・・
}
</script>

外部スクリプト

<script src="ファイル名"></script>

コメント

1行コメント

// コメント

複数行コメント

/*
コメント
コメント
*/

文字列

文字列ははシングルクォート、ダブルクォートで囲って記載
それぞれを文字列で利用したい場合は別のクォート文字で囲う、またはエスケープ文字を利用する

console.log('string');
console.log("string");
console.log("it's");
console.log('it\'s');

//特定の文字列を検索
変数.indexOff(検索文字列 [, 検索開始位置])
//特定の文字列を後方から検索
変数.lastIndexOf(検索文字列 [, 検索開始位置])

文字列操作

演算子、メソッド 説明
+ 結合
join 指定した文字で結合
split 指定した文字で分割
substring 開始位置から終了位置までを抽出
toLowerCase 全ての文字を小文字に変換
toUpperCase 全ての文字を大文字に変換
indexOf 検索開始位置から特定の文字を検索
lastIndexOf 検索開始位置から特定の文字を逆順に検索
// 結合(+)
console.log('Hello' + 'World'); // HelloWorld
console.log('10' + 5); // 105

// 結合(join)
const test = ['2020', '04', '06'];
console.log(test.join('-')); // 2020-04-06
console.log(test.join('')); // 20200406

// 分割(split)
const test = '10:20:30';
console.log(test.split(':'); // ['10', '20', '30']
const [hour, minute, second] = test.split(':');
console.log(hour); // '10'
console.log(minute); // '20'
console.log(second); // '30'

// 抽出
const test = 'HelloWorld';
console.log(test.substring(2, 4)); // ll
console.log(test[1]); // e

エスケープシーケンス

エスケープシーケンス 説明
¥b バックスペース
¥t タブ
¥n 改行
¥f 改ページ
¥r 復帰
¥' シングルクォート
¥" ダブルクォート
¥¥文字 ¥文字(キーボードから直接表せない文字)
¥xXX XX(2桁の16進数)で表すLatin-1文字
¥uXXX XXXX(4桁の16進数)で表すUnicode文字

数値

関数、メソッド 説明
Math.floor 切り捨て
Math.ceil 切り上げ
Math.round 四捨五入
toFixed 指定した桁数まで表示
Math.random 0以上1未満の乱数
const test = 3.3333333333;
console.log(Math.floor(test)); // 3
console.log(Math.ceil(test)); // 4
console.log(Math.round(test)); // 3
console.log(test.toFixed(2)); // 3.33

// 乱数
Math.random() // 0以上1未満
Math.floor(Math.random() * (n + 1)); // 0~nまでの整数
Math.floor(Math.random() * (max + 1 - min)) + min; // min~maxまでの整数

演算子

四則演算子

演算子 説明
+ 加算
- 減算
* 乗算
/ 除算
% 余り
** べき乗
console.log(5 + 2); // 7
console.log(5 - 2); // 3
console.log(5 * 2); // 10
console.log(5 / 2); // 2.5
console.log(5 % 2); // 1
console.log(10 ** 2); // 100 

比較演算子

演算子 説明
> 大きい
< 小さき
>= 以上
<= 以下
=== 等しい
!== 異なる
console.log(100 > 100) // false
console.log(100 < 100) // false
console.log(100 >= 100) // true
console.log(100 <= 100) // true
console.log(100 === 100) // true
console.log(100 !== 100) // false

論理演算子

演算子 説明
&& AND
|| OR
! NOT

定数

const 定数名 = ;

const rate = 1.1;

変数

let 変数名;
let 変数名 = ;

let age = 34;

命名規則

  • 1文字目はアルファベット、アンダースコア、ドル記号のいずれか
  • 2文字目以降はアルファベット、数字、アンダースコア、ドル記号のいずれか
  • 大文字、小文字は区別する
  • 予約語でないこと

変数の記法

JavaScriptではクラス(コンストラクタ)はパスカル記法、変数・関数はキャメルケース記法を利用すること多い

記法 説明 表記例
キャメルケース記法 単語の区切りは大文字で表記。ただし先頭のみ小文字 myApp
パスカル記法 単語の区切りは大文字で表記。先頭も大文字 MyApp
アンダースコア記法 全ての単語を小文字で表記。区切りはアンダースコア my_app

データ型

データ型 説明
string 文字列
number 数値
undefined 何も定義されていない
null 値がない
boolean 論理値(true/false)
object 複数のデータ型の値を混在して保持

データ型の確認方法

console.log(typeof 'test');
console.log(typeof 100);
console.log(typeof undefined);
console.log(typeof null);
console.log(typeof false);

データ型の変換

関数名・コンストラクタ 説明
parseInt 引数を整数に変換
parseFloat 引数を浮動小数点数に変換
String 引数を文字列に変換
Boolean 引数をtrue/falseに変換。空文字列、0(ゼロ)、NaN、null、undefinedをfalse。それ以外をtrueとする

コンソール・メッセージ表示

//コンソール(開発者ツール)表示
console.log('文字列');

//ダイアログ表示
alert('文字列');

//メッセージ表示
alert('メッセージ内容');

//メッセージ表示、OK・キャンセル(true/false)を取得
const result = confirm('メッセージ内容');

//メッセージ表示、ユーザーから情報を受け取る
const result = prompt('メッセージ内容');

条件分岐

// if
if (条件) {
  処理;
} else if (条件) {
  処理;
} else {
  処理;
}

// 三項演算子
変数 = (条件) ? trueの場合の値 : falseの場合の値;

// switch
switch (変数) {
  case "":
    処理;
    break;
  case "":
    処理;
    break;
  default:
    処理;
    break;
}

繰り返し

条件がtrueの場合は処理を繰り返す

// 前判定(処理が1回も実行されない場合がある)
while (条件) {
  処理;
}

// 後判定(処理が必ず1回は実行される)
do {
  処理;
} while (条件);

// 指定回数繰り返し
for (let 変数名 = ; 条件; ) {
  処理;
}

// 繰り返しを抜ける
break;

// 繰り返しスキップ
continue;

関数

// 関数宣言
function 関数名(引数, ...) {
  処理;
  return 戻り値;
}

// 関数式
const 定数名 = function(引数, ...) {
  処理;
  return 戻り値;
};

// アロー関数
const 定数名 = (引数, ...) => {
  処理;
  return 戻り値;
};

// アロー関数(引数、処理がreturnのみの場合は記載方法を省略可能)
const 定数名 = 引数 => 処理(return ●●●「●●●」部分);

配列

// 配列宣言
const 変数名 = [, , ...];
const 変数名 = [[, , ...], [, , ...]];

// 参照(indexは0から始まる)
変数名[index]
変数名[index][index]

// 代入
変数名[index] = ;
変数名[index][index] = ;

// 要素数
変数名.length

// 配列要素を繰り返し処理(for)
for (let index = 0; index <= 変数名.length; index++) {
  console.log(変数名[index]);
}

// 配列要素を繰り返し処理(forEach)
配列.forEach(要素 => {
  console.log(要素);
}

// 配列要素を繰り返し処理(forEach、indexあり)
配列.forEach((要素, index) => {
  console.log(要素);
  console.log(index);
}

要素の操作

メソッド名 説明
unshift 先頭に要素を追加
push 末尾に要素を追加
shift 先頭から要素を削除
pop 末尾から要素を削除
splice 途中の要素を変更
slice 配列の一部を抽出

配列の操作

const test = [30, 40, 50];

test.unshift(10);
test.unshift(20);
console.log(test); // [20, 10, 30, 40, 50];

test.push(60);
test.push(70);
console.log(test); // [20, 10, 30, 40, 50, 60, 70];

test.shift();
console.log(test); // [10, 30, 40, 50, 60, 70];

test.pop();
console.log(test); // [10, 30, 40, 50, 60];

// splice(変更を開始する要素のIndex, 削除する要素数, 追加する要素, 追加する要素, ...)
text.splice(1, 2);
console.log(test); // [10, 50, 60];

text.splice(1, 0, 25, 35);
console.log(test); // [10, 25, 35, 50, 60];

text.splice(1, 2, 45);
console.log(test); // [10, 45, 50, 60];
メソッド名 説明
map 全要素に同じ処理を行う
filter 条件に該当する要素を抽出
const array = [10, 20, 30, 40, 50];

// 全ての要素を2倍にする
const mapArray = array.map(item => item * 2);
console.log(mapArray); // [20, 40, 60, 80, 100]

// 4の倍数の要素を抽出
const filterArray = array.filter(item => item % 4 === 0);
console.log(filterArray); // [20, 40]

参考

Arrayメソッド破壊・非破壊チートシート

スプレッド構文

const test1 = [10, 20];
const test2 = [30, 40];

const test = [...test1, ...test2];
console.log(test); // [10, 20, 30, 40]

const [num1, num2] = ...test1;
console.log(num1); // 10
console.log(num2); // 20

const [num3, num4, ...num5] = test;
console.log(num3); // 10
console.log(num4); // 20
console.log(num5); // [30, 40]

const a = 'A';
const b = 'B';
[a, b] = [b, a];
console.log(a); // 'B'
console.log(b); // 'A'

オブジェクト

// オブジェクト宣言
const 変数名 = {
  名前(key): (value),
  名前(key): (value),
};

// プロパティを追加
変数名.名前(key) = (value);

// プロパティを削除
delete 変数名.名前(key);

// 参照
変数名.名前(key)
変数名['名前(key)']

// 代入
変数名.名前(key) = (value)
変数名['名前(key)']

// 要素数
変数名.length

// 配列要素を繰り返し処理(forEach)
const items = {
  a: 'A',
  b: 'B',
};
const keys = Object.keys(items);
keys.forEach(key => {

});

配列.forEach(要素 => {
  console.log(要素);
}

スプレッド構文

const test1 = {
  a: 'A',
  b: 'B',
};

const test = {
  c: 'C',
  d: 'D',
  ...test1,
};

console.log(test); // { a: 'A', b: 'B', c: 'C', d: 'D'}

const { str1, str2, ...str3 } = test;
console.log(str1); // 'A'
console.log(str2); // 'B'
console.log(str3); // { c: 'C', d: 'D'}

日付オブジェクト

// 日付オブジェクト取得
const d = new Date(); // 現在日時
const d = new Date('yyyy/mm/dd hh:mi:ss'); // 指定日時

// 個別の要素を取得
d.getFullYear();  // 年(4桁)
d.getMonth();  // 月(0:1月~11:12月)
d.getDate(); // 日
d.getDay();// 曜日(0:日~6:土)
d.getHours(); // 時間
d.getMinutes(); // 分
d.getSeconds(); // 秒

// 個別の要素を設定
d.setFullYear(yyyy); // 年(4桁)
d.setMonth(mm);  // 月(0:1月~11:12月)
d.setDate(dd); // 日
d.setHours(hh); // 時間
d.setMinutes(mi); // 分
d.setSeconds(ss); // 秒

// 日時を文字列に変換
d.toLocaleString(); // 年月日時分秒
d.toLocaleDateString(); // 年月日
d.toLocaleTimeString(); // 時分秒

// 日時の加算・減算
// getXXXで計算対象の部分を取得し、setXXXで書き戻す
// 有効範囲を超えた場合、正しい日時に変換する。例えば5月+10=15月を、翌年3月と変換する
d.setXXX(変数.getXXX + 数値);
d.setXXX(変数.getXXX - 数値);

//日時の差を求める
// タイムスタンプ値(UTC)に変換して差を求め、目的の単位に変換する(タイムスタンプ値はミリ秒)
// 例えば 1000 * 60 * 60 * 24 で割ると日の差がわかる
(d1.getTime() - d2.getTime()) / (日付の単位)

クラス

  • プロパティは「this.プロパティ名」で定義する
  • メソッドは関数型のプロパティ
  • コンストラクタでは自動的にthisが示すオブジェクトを返すため、戻り値は不要
// クラス定義
class クラス名 extends 親クラス名 {
  constructor(引数, ...) {
    super(引数, ...); // 親クラスのコンストラクタを実行
    this.●●● = 引数;
  }

  // インスタンスメソッド
  メソッド名(引数, ...) {
    super.メソッド名(引数, ...); // 親クラスのメソッドを十個
    処理;
  }

  // 静的メソッド
  static メソッド名() {
    処理;
  }
}

// インスタンス化
const 変数名 = new クラス名(引数, ...);  

例外処理

文字列操作で例外を処理する例

const test = 123;
try {
  console.log(test.toUpperCase());
} catch (error) {
  console.log(error);
}

タイマー処理

現在日時の表示を10回繰り返す例

'use strict';

{
  let cnt = 0;

  function getDate() {
    console.log(new Date());
    const id = setTimeout(getDate, 1000);
    cnt++;
    if (cnt > 10) clearTimeout(id);
  }

  printText();
}

DOM

要素の取得方法

// セレクターで1つの要素を取得
const item = querySelector('セレクター');

// idで1つの要素を取得
const item = getElementById('id');

// セレクターで複数要素を取得
const items = querySelectorAll('セレクター');

// タグで複数要素を取得
const items = getElementsByTagName('タグ');

// クラスで複数要素を取得
const items = getElementsByClassName('クラス');

要素の取得方法(階層関係)

// すべての要素Node、テキストNodeを取得
要素.childNodes

// すべての要素Nodeを取得
要素.children

// 最初の子要素を取得
要素.firstChild

// 最後の子要素を取得
要素.lastChild

// 最初の子要素Nodeを取得
要素.firstElementChild

// 最後の子要素Nodeを取得
要素.lastElementChild

// 親要素を取得
要素.parentNode

// 前の兄弟要素を取得
要素.previousSibling

// 次の兄弟要素を取得
要素.nextSibling

// 前の兄弟要素Nodeを取得
要素.previousElementSibling

// 次の兄弟要素Nodeを取得
要素.nextElementSibling

要素の操作

// タイトル
要素.title = '●●●';

// コンテンツ
要素.textContent = '●●●';

// スタイル
要素.style.CSSプロパティ = '●●●';

// 要素にクラスが付与されているか確認
要素.classList.contains('クラス')

// 要素にクラスを追加
要素.classList.add('クラス');

// 要素からクラスを削除
要素.classList.remove('クラス');

// 要素にクラスが付いていたら削除、付いていなかったら追加
要素.classList.toggle('クラス');

// 要素を新規作成
const li = document.createElement('li');
li.textContent = 'test';

// 既存の要素から複製
const li = document.querySelector('li');
const copy = li.cloneNode(true);

// 要素をDOMに追加
const ul = document.querySelector('ul');
ul.appendChild(li); 

// 要素をDOMから削除
const ul = document.querySelector('ul');
const li = document.querySelector('li');
ul.removeChild(li);

フォーム要素の操作

// input要素
const text = document.querySelector('input');
text.value = 'test'

// select要素
const select = document.querySelector('select');
const value = select.value;
const index = select.selectedIndex;

// ラジオボタン
const radio = document.querySelectorAll('input[type="radio"]');
radio.forEach(r => {
  if (r.checked === true) {
    処理;
  }
});

// チェックボックス
const checkbox = document.querySelectorAll('input[type="checkbox"]');
const items = [];
checkbox.forEach(c => {
  if (c.checked === true) {
    items.push(c.value);
  }
});

// 送信(submit)
// preventDefaultでFormの既定の処理を無効化させる
document.querySelector('form').addEventListener('submit', e => {
  e.preventDefault();
  console.log('form submit');
});

イベント

イベントリファレンス

// イベント追加
要素.addEventListener('イベント', () => {
  処理;
});

その他

// ページを移動(履歴を残す)
location.href = "URL";

// ページを移動(履歴を残さない)
location.replace('URL');

// URLエンコード
encodeURIComponent('●●●');

// URLデコード
decodeURIComponent('●●●');

//オブジェクト、JSON文字列の相互変換
const obj = '{ "key": "value", "key": "value", ... }';
const json = $.parseJSON(obj);
console.log(json.key);
yoshi0518
社内SEによる個人メモ。ほぼ自己学習なので間違っていたらすいません。。。
https://www.n-asset.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away