JavaScript 備忘録集

随時更新される JavaScript 備忘録集です
役に立つかはわからないですが見てください

文字列の操作

文字列を結合する

let a = 'word';
let b = 'press';
let result = a + b;
console.log(result); // wordpress

文字列の長さを取得する

let word = 'hoge';
word = word.length;
console.log(word); // 4

先頭からx文字削る

text.slice(x);

末尾からx文字削る

text.slice(0,-x);

Hash(ハッシュ)の操作

Hash(ハッシュ)の変更を検知

window.addEventListener('hashchange',function(){
  //...
})

Function(関数)の操作

Function(関数)の宣言

function apple() {
  //...
}

// 関数は引数を指定できます
function banana(input) {
  //...
}

// 引数は複数指定できます
function banana(input,mode,id) {
  //...
}

// 例えばこんな感じに
function banana(name, id) {
  console.log(name+'さんこんにちは。\nあなたのidは'+id+'です。');
}
banana('竹田', 15);
// 竹田さんこんにちは。
// あなたのidは15です。

Returnする

関数を呼び出した場所に返す…みたいな

let apple = 150; // りんごは150円
function apple(number) {
  let sum = 150 * number; // 150円を何個買う
  return '合計金額は'+sum+'円です'; // return(関数の場所に値を返す)
}
console.log(apple(5));
// 合計金額は750円です(150円のりんごを５個)

応用として、関数を途中で破棄できます

function apple(id) {
  if (id >= 15) { // idが15以上なら
    return false; // false(空値を返して関数を終了する)
  }
  //...
}

ボタンを押されたら動かす

jQueryが必要

$('#button').on('click', function() { // idがbuttonの要素がクリックされたら
  alert("クリックされました");
});

便利なコード

配列をシャッフル

for(let i = targetList.length - 1; i > 0; i--) {
  let rand = Math.floor(Math.random() * (i + 1));
  [targetList[i], targetList[rand]] = [targetList[rand], targetList[i]];
}

確認画面

flag = confirm('----メッセージ----');
if ( flag ){
  //...  `OK` で実行するコード
} else {
  //...  `キャンセル` で実行するコード
}

データの保存

WebStorage という技術を使ってブラウザに String 型のデータを保存できます
Can I useによると、IEを含むほとんどのモダンブラウザで対応しています

WebStorage には LocalStorage と SesionStorage の2つのストレージが含まれています
主な違いは以下の通りです

	LocalStorage	SessionStorage
保存できるもの	Key-Value (文字列)	Key-Value (文字列)
保存期間	ユーザーまたはコードによって削除されるまで	ユーザーがブラウザ(タブ)を閉じるまで

使い方

使い方はほどんど変わらず、 .setItem の前の部分が変わるだけ

// LocalStorageで記述した場合
localStorage.setItem('PlayerName','Mikan');

// SessionStorageで記述した場合
sessionStorage.setItem('PlayerName','Mikan');

以下の凡例では localStorage を用います、必要に応じて読み替えてください

データの保存

２種類の書き方がありますが、どちらも同じように機能します
好みで使ってください

// `PlayerName` というキーに `Mikan` という値を保存する
localStorage.setItem('PlayerName','Mikan'); // Mikan
localStorage.PlayerName = 'Mikan'; // Mikan

また、 setItem を使う方法ではキーを変数にすることもできます
自由度の高さから setItem を使う方法を推奨します

// Keyを変数にする
let Value = 'PlayerName';
// 変数 `value` にPlayrName(保存したいキー)を代入する
localStorage.setItem(Value, 'Mikan');
// Mikan (変数 `value` に保存された文字列をキーとして扱う)

データの呼び出し

データの保存と同様に２種類の書き方があります
お好みで使い分けてください

// `PlayerName` というキーからデータを読み取る
let word = localStorage.getItem('PlayerName');
// 変数 `word` に `PlayrName` のデータを代入する
console.log(word)
// Mikan (保存した値が出力される)

let word = localStorage.PlayerName
// 変数 `word` に `PlayrName` のデータを代入する
console.log(word)
// Mikan (保存した値が出力される)

保存と同様に、 getItem を使う方法ではキーを変数にすることもできます
自由度の高さから getItem を使う方法を推奨します

// Keyを変数にする
let Value = 'PlayerName';
// 変数 `value` にPlayrName(読み取りたいキー)を代入する
let word = localStorage.getItem(Value);
// 変数 `value` に保存されたキーのデータを 変数 `word` に代入する
console.log(word)
// Mikan (保存した値が出力される)