uiro.devBETA

JavaScript 備忘録集

3年前公開

記事の表示には時間がかかることがあります

JavaScript
export default () => {
  console.log('Code block')
}

文字列の操作

文字列を結合する

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

文字列の長さを取得する

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

先頭からx文字削る

JavaScript
text.slice(x)

末尾からx文字削る

JavaScript
text.slice(0, -x)

Hash(ハッシュ)の操作

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

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

Function(関数)の操作

Function(関数)の宣言

JavaScript
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する

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

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

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

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

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

jQueryが必要

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

便利なコード

配列をシャッフル

JavaScript
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]]
}

確認画面

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

データの保存

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

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

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

使い方

使い方はほどんど変わらず、

.setItem
の前の部分が変わるだけ

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

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

以下の凡例では

localStorage
を用います、必要に応じて読み替えてください

データの保存

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

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

また、

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

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

データの呼び出し

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

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

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

保存と同様に、

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

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

ご覧いただきありがとうございました

SNSでシェア

2025 © famisics