JS/ES – 画像ファイルを読み込んでcanvasに表示

2020-12-26 / tau / コメントする

概要

JS/ES/JQueryで、ローカルのファイルを読み込んでcanvasに表示する手順。

大まかな流れは以下の通り。

Imageクラスのオブジェクトを準備する
document読み込み後(onload/ready)に以下を実行
1. canvas要素の取得
2. canvasからcontextの取得
3. 画像ファイル選択時の処理
  1. 選択されたファイルのFileオブジェクトの取得
  2. FileReaderオブジェクトを構築
  3. FileReaderにdata:URLとして読み込み
  4. FileReaderの読み込み完了時のリスナー登録
    - 読込後にリーダーの読み込み結果をImage.srcにセット
4. Imageオブジェクトのロード後のリスナー登録
  - context.drawImageでcanvasに描画

HTML

body内のhtmlは以下の通り。

<div class="input_area">
  <input type="file" id="file_choice">
</div>
<canvas id="canvas" width="640" height="480"></canvas>

</div>

input要素のtype属性をfileとすることで、HTML5のAPIが利用可能となる。

canvasのサイズは、ここではhtmlで設定しているが、スクリプトで動的に設定して画像サイズとcanvasのサイズを合わせることもできる。

JavaScript

全体の構造は以下の通り。ドキュメント内でグローバルに使う可能性があるImageオブジェクト以外は、onload/ready後の処理に入れている。

let image = new Image();

$(() => {
  let canvas = $('#canvas')[0];
  let context = canvas.getContext('2d');

  $('#file_choice').on('change', (e) => {
    let file = e.target.files[0];
    let reader = new FileReader();
    reader.readAsDataURL(file);

    reader.onload = () => {
      image.src = reader.result;
    }
  });

  $(image).load(() => {
    context.drawImage(image, 0, 0, canvas.width, canvas.height);
  });

});

let image = new Image();

$(() => {

let canvas = $('#canvas')[0];

let context = canvas.getContext('2d');

$('#file_choice').on('change', (e) => {

let file = e.target.files[0];

let reader = new FileReader();

reader.readAsDataURL(file);

reader.onload = () => {

image.src = reader.result;

}

});

$(image).load(() => {

context.drawImage(image, 0, 0, canvas.width, canvas.height);

});

JQuery – 子要素の参照・操作

2020-12-21 / tau / コメントする

番号指定による子要素の参照

$('child_elements:nth-child(n)').method();

child_elementsに疑似クラスnth-child(n)を適用してn番目の要素に対してmethod()を適用する。child-elementsは複数の子要素の親要素ではなく、子要素である点に注意。たとえばul li要素の場合、childe_elementsはulではなくliになる。

child-elementsは、親要素・子要素のセットでも書ける。たとえば<p id=”parent">要素の子要素に複数の<span>要素がある場合、次のように書ける。

$('#parent span')

さらにこれらの子要素のうちn番目を操作したいときは疑似クラス:nth-child(n)をつけるが、n以外は文字列となるため、文字列と数値の結合かテンプレートリテラルを使う。

$('#parent span:nth-child(' + n + ')')
$(`#parent span:nth-child(${n})`)

全ての子要素の参照

ある親要素の子要素全てを参照したり操作したりしたい場合、children()メソッドを使う。この場合は疑似クラスの:nth-child()と違って、親要素に対してメソッドを実行する。

$('parent_element').children().method()

JS/ES – 配列の先頭・末尾要素の追加・削除

2020-12-21 / tau / コメントする

概要

配列の先頭や末尾の要素について、追加や取出し・削除に関するメソッドが準備されている。

これらによって、配列をキューやスタックのように使うことができる。

末尾要素の操作

`push`～末尾追加

push()メソッドは引数の内容を配列の末尾要素として追加し、戻り値として追加後の配列の長さを返す。

array = [1, 2, 3, 5, 8];

console.log(array.push(13));
console.log(array);

// 6
// [1, 2, 3, 5, 8, 13]

array = [1, 2, 3, 5, 8];

console.log(array.push(13));

console.log(array);

// 6

// [1, 2, 3, 5, 8, 13]

`pop`～末尾取出し・削除

pop()メソッドは配列の末尾要素を1つ削除し、削除した内容を戻り値として返す。

console.log(array.pop());
console.log(array);

// 13
// [1, 2, 3, 5, 8]

console.log(array.pop());

console.log(array);

// 13

// [1, 2, 3, 5, 8]

先頭要素の操作

`unshift`～先頭追加

unshift()メソッドは引数の内容を配列の先頭要素として追加し、戻り値として追加後の配列の長さを返す。

console.log(array.unshift(1));
console.log(array);

// 6
// [1, 1, 2, 3, 5, 8]

console.log(array.unshift(1));

console.log(array);

// 6

// [1, 1, 2, 3, 5, 8]

`shift`～先頭取出し・削除

shift()メソッドは配列の先頭要素を1つ削除し、削除した内容を戻り値として返す。

console.log(array.shift());
console.log(array);

// 1
// [1, 2, 3, 5, 8]

console.log(array.shift());

console.log(array);

// 1

// [1, 2, 3, 5, 8]

JS/ES – キー入力イベント

2020-12-19 / tau / コメントする

イベントの種類

キー入力のイベントは、keydownとkeyupで、keydownはキーを押したときに発火し、keyupはキーを離したときに発火する。

keypressはデバイス依存度が高いためfired（廃止）とされている。

イベントリスナーの登録

イベントの登録方法は以下の通り（全て小文字であることに注意）。

.addEventListener('keydown', callback, false)
.addEventListener('keyup', callback, false)

.on('keyDown', callback)
.on('keyUp', callback)

イベントの発生順

基本

キーが押下されるとkeydownイベントが発生し、元に戻るとkeyupイベントが発生する。たとえば英子文字のaの場合は以下の順番。

keydown, 'a'
keyup, 'a'

キーを押し続けるとリピート機能によりkeydownが繰り返して発生し、離したときにkeyupイベントが1回発生する。

SHIFTキーを押しながらの場合は、例えば英大文字のAの場合以下の順番。

keydown, 'Shift'
keydown, 'A'
keyup, 'A'
keyup, 'Shift'

ただしSHIFTキーにもリピート機能が働いた場合、keydownが繰り返される。

TABとCAPS LOCK

TABキーとCAPS LOCKキーの2つのキーについては、keydownは発生するがkeyupは捕捉しない(1.1.0と3.4.1で同じ結果)。

ただしSHIFT + CAPS LOCKはkeyの値が'CapsLock'としてkeydownとkeyupの両方が発火する。

イベントの発火状況については以下のコードで確認した。

$(window).on({
  'keydown': (e) => console.log('keydown :' + e.key),
  'keyup': (e) => {console.log('keyup   :' + e.key); if (e.key===' ') console.log('ok');}
});

$(window).on({

'keydown': (e) => console.log('keydown :' + e.key),

'keyup': (e) => {console.log('keyup :' + e.key); if (e.key===' ') console.log('ok');}

});

キーの内容の参照

参照方法

キーの内容は、コールバックの引数で得られるイベントオブジェクトのプロパティーで参照する。

addEventListener(event_name, (e) => {})

on(event_name, (e) => {})

上記の場合、コールバックの引数eのプロパティーkey、codeで必要なキーの値を参照する。ただしcodeプロパティーはJQuery3.4.1など新しいバージョンからでないとundefinedになる。

また、keyCodeプロパティーはdeprecatedとなっている。

`key`プロパティー

キーボードのキー配置によらない文字や機能としての値はkeyプロパティーで参照する。

`code`プロパティー

codeプロパティーはキーボードに割り付けられた文字や機能に関係なく、キーボード上の位置としての値を返す。QWERTY配列上の文字で返すため、キー配列の種類に依らない物理的なキー位置を特定できるが、Dvorak配列など割り当てられた文字の位置が違う場合、ユーザーの意図した文字と違う値が変える。

CTRLやSHIFTど左右にキーがある場合、それらの左右が区別される。

JQueryでは3.1.xでもundefinedで、3.4.1では機能する。

機能キーの押下状態の捕捉

以下のプロパティーは、SHIFT/CTRL/ALTの各キーが押されている場合にtrueを返す。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Key ALT/CTRL/SHIFT</title>
    <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script>
      $(() => {
        $(window).on('keyup', (e) => {
            console.log('key  :' + e.key);
            if (e.altKey) console.log('ALT pressed.');
            if (e.ctrlKey) console.log('CTRL pressed.');
            if (e.shiftKey) console.log('SHFT pressed.');
          });
      });
    </script>
    </script>
  </head>
  <body>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Key ALT/CTRL/SHIFT</title>

$(() => {

$(window).on('keyup', (e) => {

console.log('key :' + e.key);

if (e.altKey) console.log('ALT pressed.');

if (e.ctrlKey) console.log('CTRL pressed.');

if (e.shiftKey) console.log('SHFT pressed.');

});

</script>

</head>

<body>

</body>

</html>

このコードの実行例を以下に示す。a単独、ALT+b、CTRL+c、SHIFT+dと押した結果、それぞれの機能キーの押下状況が捕捉されている。

keyup:a
keyup:b
ALT pressed.
keyup:Alt
keyup:c
CTRL pressed.
keyup:Control
keyup:D
SHFT pressed.
keyup:Shift

keyup:a

keyup:b

ALT pressed.

keyup:Alt

keyup:c

CTRL pressed.

keyup:Control

keyup:D

SHFT pressed.

keyup:Shift

JS/ES – KeybordEvent.key

2020-12-19 / tau / コメントする

概要

キーボードのイベントが捕捉されたとき、イベントオブジェクトのkeyプロパティーは操作されたキーの値をDOMString（実のところ一般のUTF-16 String）で保持している。

確認コード

以下のコードで確認した。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Key evnet</title>
    <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script>
      $(() => {
        $(window).on({
          'keydown': (e) => console.log('keydown :' + e.key),
          'keyup': (e) => console.log('keyup   :' + e.key)
        });
      });
    </script>
    </script>
  </head>
  <body></body>
</html>

<!DOCTYPE html>

<head>

<title>Key evnet</title>

$(() => {

$(window).on({

'keydown': (e) => console.log('keydown :' + e.key),

'keyup': (e) => console.log('keyup :' + e.key)

});

</script>

</head>

</html>

keyの値：DOMString

a-z	‘a’-‘z’
A~Z	‘A’-’Z’
0-9	‘0’-‘9’
!, “, #, …	‘!’, ‘”‘, ‘#’, …
SPACE	‘ ‘
BS	‘Backspace’
DEL	‘Delete’
ENTER	‘Enter’
SHIFT	‘Shift’
CTRL	‘Control’
ALT	‘Alt’
CAPS LOCK	‘Alphanumeric’
SHIFT + CAPS LOCK	‘CapsLock’
TAB	‘Tab’
↑	‘ArrowUP’
↓	‘ArrowDown’
←	‘ArrowLeft’
→	‘ArrowRight’
CAPS LOCK	‘Alphanumeric’
SHIFT + CAPS LOCK	‘CapsLock’
TAB	‘Tab’
Home	‘Home’
End	‘End’
F1-F12	‘F1’-‘F12’

JQuery – 視覚効果

2020-12-18 / tau / コメントする

JQueryのみによる効果

ネイティブのCSSやJQueryによって、要素の表示／非表示の切り替え時のアニメーション効果を設定することができる。他のライブラリーによらない視覚効果についてこちらにまとめている。

また、このうちのslideUp()/slideDown()メソッドについてこちらに詳しくまとめている。

scrollTop

scrollTopによる画像スクロールでは、背景画像の縦位置をスクロール位置から計算する。その結果、画像のスクロールに伴って背景画像がスクロールし、立体的なイメージ効果を与える。

外部フレームワーク

ScrollMe

ScrollMeはJQueryのフレームワークで、画面をスクロール伴ってHTML要素に動きを加えることができる。

こちらのページにScrollMeの機能をまとめた。

JS/ES – JQuery – イベントリスナーの登録

2020-12-14 / tau / コメントする

on()/off()

概要

on()メソッドは引数にイベント名とコールバック関数を指定する。登録されたイベントに対して対応するコールバックが実行されるようになる。

off()メソッドは引数にイベント名と、オプションでコールバック関数を指定する。コールバックを指定した場合はその関数だけが削除され、指定しなければDOMのすべてのリスナーが削除される。

書式

[DOM].on('event', callback)

[DOM].off('event'[, callback])

実行例

以下のHTMLでは、2つのp要素と3つのボタンを配置する。

Switchボタンには、あらかじめボタンのクリックに対してp1の表示を切り替えるリスナーが登録されている
AddボタンはSwitchボタンに、p2の表示を切り替えるもう1つのリスナーを登録する
DeleteボタンはSwitchに登録された特定の／あるいは全てのリスナーを削除する

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>on/off listener manipulation</title>
    <script src='https://code.jquery.com/jquery-1.11.0.min.js'></script>
    <script>
      onSwitch1 = () => {
        content = $('#p1').text();
        $('#p1').text( content === 'nail' ? 'snail' : 'nail' );
      }

      onSwitch2 = () => {
        content = $('#p2').text();
        $('#p2').text( content === 'nail' ? 'snail' : 'nail' );
      }

      onAdd = () => {
        console.log('onadd')
        $('#switch').on('click', onSwitch2);
      }

      onDelete = () => {
        //$('#switch').off('click', onSwitch2);
        $('#switch').off('click');
      }

      $(() => {
        $('#add').on('click', onAdd);
        $('#delete').on('click', onDelete);
        $('#switch').on('click', onSwitch1);
      });
    </script>
  </head>
  <body>
    <p id="p1">nail</p>
    <p id="p2">snail</p>
    <div>
      <button id="add">Add</button>
      <button id="delete">Delete</button>
      <button id="switch">Switch</button>
    </div>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>on/off listener manipulation</title>

onSwitch1 = () => {

content = $('#p1').text();

$('#p1').text( content === 'nail' ? 'snail' : 'nail' );

}

onSwitch2 = () => {

content = $('#p2').text();

$('#p2').text( content === 'nail' ? 'snail' : 'nail' );

}

onAdd = () => {

console.log('onadd')

$('#switch').on('click', onSwitch2);

}

onDelete = () => {

//$('#switch').off('click', onSwitch2);

$('#switch').off('click');

}

$(() => {

$('#add').on('click', onAdd);

$('#delete').on('click', onDelete);

$('#switch').on('click', onSwitch1);

});

</script>

</head>

<body>

<p id="p2">snail</p>

<div>

<button id="delete">Delete</button>

<button id="switch">Switch</button>

</div>

</body>

</html>

off()にリスナーを指定した場合、Deleteボタンを押すとp2が反応しなくなるがp1は反応し続け、Addボタンを押すとp2の反応も復活する。

off()にリスナーを指定しない場合、Deleteボタンを押すとp1とp2のどちらも反応しなくなる（Switchボタンのリスナーが2つとも削除されるため）。その後Addボタンを押すとp2の反応だけが復活する。

特定イベント専用のリスナー

概要

たとえばclickイベントの場合、DOMのメソッドとしてclick()が準備されていて、その引数にリスナーを指定して登録できる。

実行例

以下の例は、p要素に対してmouseoverとmouseleaveの二つのイベントに対するリスナーを登録する例。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>click and mouseover</title>
    <script src='https://code.jquery.com/jquery-1.11.0.min.js'></script>
    <script>

      onMouseover = () => {
        $('p').text('over');
      }

      onMouseleave = () => {
        $('p').text('left');
      }

      $(() => {
        $('p').mouseover(onMouseover);
        $('p').mouseleave(onMouseleave);
      });
    </script>
  </head>
  <body>
    <p style="background-color: #0cc">I am here</p>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>click and mouseover</title>

onMouseover = () => {

$('p').text('over');

}

onMouseleave = () => {

$('p').text('left');

}

$(() => {

$('p').mouseover(onMouseover);

$('p').mouseleave(onMouseleave);

});

</script>

</head>

<body>

</body>

</html>

リスナーにデータを渡す

リスナーに直接引数を指定して渡すことはできないが、eventオブジェクトを通じてデータを渡すことができる。

データは連想配列で、イベント名の次、コールバックの前に指定する。
コールバックの指定時、引数にイベントオブジェクトを明示する
コールバック内ではイベントオブジェクトのdata属性を通じてデータを取得する

書式

.on('event', {key: value, ...}, callback)

.click({key: value, ...}, callback)

実行例

以下の例は、ボタン1を押すと数値データを1つ、ボタン2を押すと数値データと文字データが1つずつコールバックに渡され、それらが表示される。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Event data</title>
    <script src='https://code.jquery.com/jquery-1.11.0.min.js'></script>
    <script>
      $(() => {
        $('#button1').on('click', {num: 123}, (event) => {
          $('p').text('number:' + event.data.num);
        });

        $('#button2').click({num: 456, str: 'ABC'}, (event) => {
          $('p').text('number:' + event.data.num + ' / string:' + event.data.str);
        });
      });
    </script>
  </head>
  <body>
    <p>ここに表示</p>
    <button id="button1">ボタン1</button>
    <button id="button2">ボタン2</button>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Event data</title>

$(() => {

$('#button1').on('click', {num: 123}, (event) => {

$('p').text('number:' + event.data.num);

});

$('#button2').click({num: 456, str: 'ABC'}, (event) => {

$('p').text('number:' + event.data.num + ' / string:' + event.data.str);

});

</script>

</head>

<body>

<p>ここに表示</p>

</body>

</html>

JS/ES – map

2020-12-14 / tau / コメントする

概要

Array.prototype.map()はコールバックを引数にとり、配列の要素やインデックスなどを順次取り出して処理した結果を配列として返す。

具体的には、元の配列の0～length−1番目までの各要素についてコールバックで処理した結果が新しい配列の0～length−1番目の要素として設定され、返される。

書式

new_Array = Array.map((value[, index[, array]]) => {})

value: Arrayから順次取り出された要素の値
index: Arrayから順次取り出された要素のインデックス
array: 元の配列Array全体が要素ごとに参照できる
new_Array: コールバックによって各要素に対して処理された結果の配列

実行例

1つ目は1つの引数として要素の内容が得られ、それらを2倍した結果を要素とする配列を返している。

2つ目は2つの引数に要素の内容とインデックスが得られ、それらを使った文字列を要素とした配列を返している。

3つ目は3つの引数の3つ目だけを返しているが、すべての要素において元の配列全体が参照できることを示している。

array = [0, 1, 2, 3, 4];

console.log( array.map(val => val * 2) );
// [0, 2, 4, 6, 8]

console.log( array.map((val, idx) => 'array[' + idx + ']=' + val) );
// ["array[0]=0", "array[1]=1", "array[2]=2", "array[3]=3", "array[4]=4"]

console.log( array.map((val, idx, ary) => ary ) );
// [Array(5), Array(5), Array(5), Array(5), Array(5)]
// 0: (5) [0, 1, 2, 3, 4]
// 1: (5) [0, 1, 2, 3, 4]
// 2: (5) [0, 1, 2, 3, 4]
// 3: (5) [0, 1, 2, 3, 4]
// 4: (5) [0, 1, 2, 3, 4]

array = [0, 1, 2, 3, 4];

console.log( array.map(val => val * 2) );

// [0, 2, 4, 6, 8]

console.log( array.map((val, idx) => 'array[' + idx + ']=' + val) );

// ["array[0]=0", "array[1]=1", "array[2]=2", "array[3]=3", "array[4]=4"]

console.log( array.map((val, idx, ary) => ary ) );

// [Array(5), Array(5), Array(5), Array(5), Array(5)]

// 0: (5) [0, 1, 2, 3, 4]

// 1: (5) [0, 1, 2, 3, 4]

// 2: (5) [0, 1, 2, 3, 4]

// 3: (5) [0, 1, 2, 3, 4]

// 4: (5) [0, 1, 2, 3, 4]

JS/ES – JQuery – DOMの追加

2020-12-14 / tau / コメントする

概要

動的に生成したDOMを指定したDOMに対して追加する。追加されるDOMの外側／内側、前／後に応じて、before()、prepend()、append()、after()の各メソッドを使う。

書式

[追加されるDOM].before([追加するDOM]): 追加されるDOMの外側直前に追加。
[追加されるDOM].prepend([追加するDOM]): 追加されるDOMの内側先頭に追加。
[追加されるDOM].append([追加するDOM]): 追加されるDOMの内側末尾に追加。
[追加されるDOM].after([追加するDOM])

追加されるDOMの外側直後に追加。

実行例

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Adding DOM</title>
    <script src='https://code.jquery.com/jquery-1.11.0.min.js'></script>
    <script>
      $(() => {
        $('div').before($('<p></p>').text('beforeで追加'));
        $('div').prepend($('<p></p>').text('prependで追加'));
        $('div').append($('<p></p>').text('appendで追加'));
        $('div').after($('<p></p>').text('afterで追加'));
      });
    </script>
  </head>
  <body>
    <div style="border: solid">
      <p>既存の要素の中身</p>
    </div>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Adding DOM</title>

$(() => {

$('div').before($('<p></p>').text('beforeで追加'));

$('div').prepend($('<p></p>').text('prependで追加'));

$('div').append($('<p></p>').text('appendで追加'));

$('div').after($('<p></p>').text('afterで追加'));

});

</script>

</head>

<body>

<p>既存の要素の中身</p>

</div>

</body>

</html>

結果イメージ：

beforeで追加

prependで追加
既存の要素の中身
appendで追加

afterで追加

JS/ES – Array – splice

2020-12-13 / tau / コメントする

概要

Array.prototype.splice()は、インデックスを指定して文字列の削除、取出し、置換、挿入が行える。splice()は破壊的であり、元の配列の内容が書き換えられる。

要素の取出し・削除

以下の例では、2番目の位置から1つの要素を取り出している。取り出された要素は（要素数が1つであっても）配列として返され、元の配列からは指定した要素が削除される。すなわちslice()は破壊的に動作する。

array = ['zero', 'one', 'two', 'three'];

removed = array.splice(2, 1);
console.log(removed);
console.log(array);

// ["two"]
// ["zero", "one", "three"]

array = ['zero', 'one', 'two', 'three'];

removed = array.splice(2, 1);

console.log(removed);

console.log(array);

// ["two"]

// ["zero", "one", "three"]

要素の置換

次の例では、1番目の位置から2つの要素を削除し、その位置に2つの要素を新たに挿入している。

array = ['zero', 'one', 'two', 'three'];

array.splice(1, 2, '1st', '2nd')
console.log(array);

// ["zero", "1st", "2nd", "three"]

array = ['zero', 'one', 'two', 'three'];

array.splice(1, 2, '1st', '2nd')

console.log(array);

// ["zero", "1st", "2nd", "three"]

要素の挿入

位置だけ指定して削除する文字数を0にすれば、文字列の挿入ができる。

array = ['zero', 'one', 'two', 'three'];

array.splice(1, 0, 'half');
console.log(array);

// ["zero", "half", "one", "two", "three"]

array = ['zero', 'one', 'two', 'three'];

array.splice(1, 0, 'half');

console.log(array);

// ["zero", "half", "one", "two", "three"]

概要

HTML

JavaScript

番号指定による子要素の参照

全ての子要素の参照

概要

末尾要素の操作

push～末尾追加

pop～末尾取出し・削除

先頭要素の操作

unshift～先頭追加

shift～先頭取出し・削除

イベントの種類

イベントリスナーの登録

イベントの発生順

基本

TABとCAPS LOCK

キーの内容の参照

参照方法

keyプロパティー

codeプロパティー

機能キーの押下状態の捕捉

概要

確認コード

keyの値：DOMString

JQueryのみによる効果

scrollTop

外部フレームワーク

ScrollMe

on()/off()

概要

書式

実行例

特定イベント専用のリスナー

概要

実行例

リスナーにデータを渡す

書式

実行例

概要

書式

実行例

概要

書式

実行例

概要

要素の取出し・削除

要素の置換

要素の挿入

`push`～末尾追加

`pop`～末尾取出し・削除

`unshift`～先頭追加

`shift`～先頭取出し・削除

`key`プロパティー

`code`プロパティー