PHP – 配列と連想配列

2020-12-28 / tau / 1件のコメント

概要

PHPの配列は連想配列と同じで、連想配列のキーが整数で連続しているものが配列として扱われる。

配列

リテラル定義と追加

リテラル定義

配列をリテラルで定義すると、各要素に対して0から順番にインデックスが与えられる。

$a = [2, 4, 6];
var_dump($a);

// array(3) { [0]=> int(2) [1]=> int(4) [2]=> int(6) }

$a = [2, 4, 6];

var_dump($a);

// array(3) { [0]=> int(2) [1]=> int(4) [2]=> int(6) }

要素の追加

一度定義された配列に、未設定のインデックスで値を与えると、要素が付け加わえられる。

$a[3] = 8;
var_dump($a);

// array(4) { [0]=> int(2) [1]=> int(4) [2]=> int(6) [3]=> int(8) }

$a[3] = 8;

var_dump($a);

// array(4) { [0]=> int(2) [1]=> int(4) [2]=> int(6) [3]=> int(8) }

追加の不連続性

インデックスを飛ばして要素を加えた場合、抜かされたインデックスの要素は飛ばされて新たな要素が付け加えられる（以下の例では3番要素の後に5番要素が加えられ、4番要素は存在していない）。

$a[5] = 12;
var_dump($a);

// array(5) { [0]=> int(2) [1]=> int(4) [2]=> int(6) [3]=> int(8) [5]=> int(12) }

$a[5] = 12;

var_dump($a);

// array(5) { [0]=> int(2) [1]=> int(4) [2]=> int(6) [3]=> int(8) [5]=> int(12) }

再定義による上書き

定義済みの配列変数にリテラルで再定義すると、前の内容は破棄されて上書きされる。

$a = [3, 6, 9];
var_dump($a);

// array(3) { [0]=> int(3) [1]=> int(6) [2]=> int(9) }

$a = [3, 6, 9];

var_dump($a);

// array(3) { [0]=> int(3) [1]=> int(6) [2]=> int(9) }

インデックスによる定義・追加

未定義の変数へのインデックスによる定義

未定義の変数にインデックスで値を与えると配列として定義される。

$b[0] = 10;
var_dump($b);

// array(1) { [0]=> int(10) }

$b[0] = 10;

var_dump($b);

// array(1) { [0]=> int(10) }

インデックスによる追加

インデックスが飛んでいてもそのまま追加される。飛ばされた要素が埋められることはない。

$b[2] = 12;
var_dump($b);

// array(2) { [0]=> int(10) [2]=> int(12) }

$b[2] = 12;

var_dump($b);

// array(2) { [0]=> int(10) [2]=> int(12) }

追加の不連続性

中抜けになっているインデックスで要素を定義した場合、インデックスは整列せず後ろに付け加えられる。

$b[1] = 11;
var_dump($b);

// array(3) { [0]=> int(10) [2]=> int(12) [1]=> int(11) }

$b[1] = 11;

var_dump($b);

// array(3) { [0]=> int(10) [2]=> int(12) [1]=> int(11) }

値の型の混在

値にintやstringなど異なる方が混在してもよい。

$b[3] = 'thirteen';
var_dump($b);

// array(4) { [0]=> int(10) [2]=> int(12) [1]=> int(11) [3]=> string(8) "thirteen" }

$b[3] = 'thirteen';

var_dump($b);

// array(4) { [0]=> int(10) [2]=> int(12) [1]=> int(11) [3]=> string(8) "thirteen" }

空の配列への順次追加

空の配列を準備し、順次要素を追加する手順。

変数に空の配列[]を定義する
キーを指定せず変数名[]=値で順次代入

$a = [];
$a[] = 'zero';
$a[] = 'one';
$a[] = 2;
$a[] = 3;
var_dump($a);

// array (size=4)
//   0 => string 'zero' (length=4)
//   1 => string 'one' (length=3)
//   2 => int 2
//   3 => int 3

$a = [];

$a[] = 'zero';

$a[] = 'one';

$a[] = 2;

$a[] = 3;

var_dump($a);

// array (size=4)

// 0 => string 'zero' (length=4)

// 1 => string 'one' (length=3)

// 2 => int 2

// 3 => int 3

連想配列

リテラル定義と追加

リテラル定義

キーと配列を=>で結んだリテラルで連想配列を定義。値に異なる方が混在してもよい。

$a = ['one' => 1, 'two' => 2.0, 'three' => '三'];
var_dump($a);
// array(3) { ["one"]=> int(1) ["two"]=> float(2) ["three"]=> string(3) "三" }

$a = ['one' => 1, 'two' => 2.0, 'three' => '三'];

var_dump($a);

// array(3) { ["one"]=> int(1) ["two"]=> float(2) ["three"]=> string(3) "三" }

キー指定による追加

キーを指定して末尾に要素を追加。

$a['four'] = 4;
var_dump($a);

//array(4) { ["one"]=> int(1) ["two"]=> float(2) ["three"]=> string(3) "三" ["four"]=> int(4) }

$a['four'] = 4;

var_dump($a);

//array(4) { ["one"]=> int(1) ["two"]=> float(2) ["three"]=> string(3) "三" ["four"]=> int(4) }

キーによる定義・追加

未定義の変数にキーを指定して値を与えると連想配列として定義される。

$c['alpha'] = 'a';
var_dump($c);

// array(1) { ["alpha"]=> string(1) "a" }

$c['alpha'] = 'a';

var_dump($c);

// array(1) { ["alpha"]=> string(1) "a" }

定義済みの連想配列にキーと値を指定して要素を追加。キーの型も混在してよい。

$c[3] = 'third';
var_dump($c);

// array(2) { ["alpha"]=> string(1) "a" [3]=> string(5) "third" }

$c[3] = 'third';

var_dump($c);

// array(2) { ["alpha"]=> string(1) "a" [3]=> string(5) "third" }

配列・連想配列のサイズ

count()関数の引数に配列や連想配列を指定して、サイズを取得する。

count(配列・連想配列)

配列・連想配列の存在確認

配列の要素の存在確認はin_array()
連想配列の値の存在確認はin_array()
連想配列のキーの存在確認はarray_key_exists()

配列の要素を削除する

配列や連想配列の要素を削除する方法はこちら。

配列の先頭・末尾・部分配列

破壊的な抜き取り・追加

配列要素の抜き取り・追加にはshift()/unshift()やpush()/pop()を使う。それらの方法はここちら

非破壊的な取出し

非破壊的に配列や連想配列の先頭・末尾・部分配列を取り出す方法はこちらを参照。

配列の代入はディープコピー

1次元配列を代入すると、参照ではなく新たな配列としてコピーされる。

$a = [1, 2, 3];
$b = $a;
$a[0] = -1;
echo '<pre>';
print_r($a);
print_r($b);
echo '</pre>';

// Array
// (
//     [0] => -1
//     [1] => 2
//     [2] => 3
// )
// Array
// (
//     [0] => 1
//     [1] => 2
//     [2] => 3
// )

$a = [1, 2, 3];

$b = $a;

$a[0] = -1;

echo '<pre>';

print_r($a);

print_r($b);

echo '</pre>';

// Array

// (

// [0] => -1

// [1] => 2

// [2] => 3

// )

// Array

// (

// [0] => 1

// [1] => 2

// [2] => 3

// )

多次元配列の子要素の内容までコピーされる。

$a = [[1, 2], [3, 4]];
$b = $a;
$a[0][0] = -1;
echo '<pre>';
print_r($a);
print_r($b);
echo '</pre>';

// Array
// (
//     [0] => Array
//         (
//             [0] => -1
//             [1] => 2
//         )
// 
//     [1] => Array
//         (
//             [0] => 3
//             [1] => 4
//         )
// 
// )
// Array
// (
//     [0] => Array
//         (
//             [0] => 1
//             [1] => 2
//         )
// 
//     [1] => Array
//         (
//             [0] => 3
//             [1] => 4
//         )
// 
// )

$a = [[1, 2], [3, 4]];

$b = $a;

$a[0][0] = -1;

echo '<pre>';

print_r($a);

print_r($b);

echo '</pre>';

// Array

// (

// [0] => Array

// (

// [0] => -1

// [1] => 2

// )

// [1] => Array

// (

// [0] => 3

// [1] => 4

// )

// Array

// (

// [0] => Array

// (

// [0] => 1

// [1] => 2

// )

// [1] => Array

// (

// [0] => 3

// [1] => 4

// )

配列と連想配列

配列と連想配列の関係

PHPの配列と連想配列は同じもの
連想配列のキーが整数のみで連続しているものが配列
連想配列も配列も値の型は混在可能
連想配列のキーも型の混在が可能

2つの配列から連想配列をつくる

array_combine()関数は2つの配列を引数にとり、第1引数をキー、第2引数を値とした連想配列を返す。

$a = ['one', 'two', 'three'];
$b = [1, 2, 3];

$x = array_combine($a, $b);

print_r($x);

// Array
// (
//     [one] => 1
//     [two] => 2
//     [three] => 3
// )

$a = ['one', 'two', 'three'];

$b = [1, 2, 3];

$x = array_combine($a, $b);

print_r($x);

// Array

// (

// [one] => 1

// [two] => 2

// [three] => 3

// )

第2引数に連想配列を指定すると、その値が取り出されて使われる。配列を要素とする連想配列にはならない。

$c = ['first', 'second', 'third'];

$y = array_combine($c, $x);

print_r($y);

// Array
// (
//     [first] => 1
//     [second] => 2
//     [third] => 3
// )

$c = ['first', 'second', 'third'];

$y = array_combine($c, $x);

print_r($y);

// Array

// (

// [first] => 1

// [second] => 2

// [third] => 3

// )

2次元の連想配列から列を取り出す

array_column()関数は2つの引数をとり、第1引数に指定した2次元の連想配列から第2引数で指定したキーの列を取り出す。

$a = ['id' => 1, 'name' => 'abc', 'value' => 10];
$b = ['id' => 2, 'name' => 'def', 'value' => 20];
$c = ['id' => 3, 'name' => 'ghi', 'value' => 30];

$array[] = $a;
$array[] = $b;
$array[] = $c;

print_r($array);
print_r(array_column($array, 'id'));
print_r(array_column($array, 'name'));
print_r(array_column($array, 'value'));

// Array
// (
//     [0] => Array
//         (
//             [id] => 1
//             [name] => abc
//             [value] => 10
//         )
// 
//     [1] => Array
//         (
//             [id] => 2
//             [name] => def
//             [value] => 20
//         )
// 
//     [2] => Array
//         (
//             [id] => 3
//             [name] => ghi
//             [value] => 30
//         )
// 
// )
// Array
// (
//     [0] => 1
//     [1] => 2
//     [2] => 3
// )
// Array
// (
//     [0] => abc
//     [1] => def
//     [2] => ghi
// )
// Array
// (
//     [0] => 10
//     [1] => 20
//     [2] => 30
// )

$a = ['id' => 1, 'name' => 'abc', 'value' => 10];

$b = ['id' => 2, 'name' => 'def', 'value' => 20];

$c = ['id' => 3, 'name' => 'ghi', 'value' => 30];

$array[] = $a;

$array[] = $b;

$array[] = $c;

print_r($array);

print_r(array_column($array, 'id'));

print_r(array_column($array, 'name'));

print_r(array_column($array, 'value'));

// Array

// (

// [0] => Array

// (

// [id] => 1

// [name] => abc

// [value] => 10

// )

// [1] => Array

// (

// [id] => 2

// [name] => def

// [value] => 20

// )

// [2] => Array

// (

// [id] => 3

// [name] => ghi

// [value] => 30

// )

// Array

// (

// [0] => 1

// [1] => 2

// [2] => 3

// )

// Array

// (

// [0] => abc

// [1] => def

// [2] => ghi

// )

// Array

// (

// [0] => 10

// [1] => 20

// [2] => 30

// )

配列の操作

array_unique～配列要素の重複を除く
array_shuffle～配列要素をシャッフルする
array_map～配列要素への関数の適用

PHP – 演算

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

代数演算

+, -, *, **: 加算／減算／乗算／べき乗。2つの項ともintの場合は結果もint。少なくとも1つの項がfloatの場合は結果もfloat。
/: 除算。2つの項がintで割り切れる場合のみ結果もint。その他の場合結果はfloat。
intdiv(a, b): a/bの整数商。結果の正負に関わらず、小数部分が切り捨てられる。
%: 剰余。結果の符号は被除数の符号と同じになる。

文字列演算

.: 文字列の結合。
.=: 文字列の結合代入。左辺の引数に右辺の引数を追加する。

三項演算子

cond ? true_value : false_value: 三項演算子は条件式condが真の時にtrue_valueを、偽の時にfalse_valueを返す。

null合体演算子

eval ?? null_value: null合体演算子は、条件式evalの評価結果がnullでないときはその評価結果を、nullの場合はnull_valueを返す。

PHP – 導入

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

Windowsの場合

ダウンロード&インストール

PHP公式サイトのDonloadsから必要なファイルをダウンロード(Windowsの場合は”Windows downloadsから)。

パスの設定

設定から環境変数PATHにPHPフォルダーへのパスを追加。

php.ini

php.iniファイルの準備

PHPフォルダーにあるphp.ini-developmentかphp.ini-productionのどちらかをphp.iniにコピー。

必要なモジュールの有効化

マルチバイト文字列操作mbstring、SQL用のmysqliなどのコアモジュールでも、インストール直後には有効化されていない。

コアモジュールはPHPフォルダー下のextフォルダーにdllファイルとして納められている。

有効化するにはphp.iniファイルで以下の作業が必要。

;extension=mbstringなどとコメントアウトされているモジュールの行のコメントを外す
;extension_dir = “ext”とコメントアウトされている行のコメントを外す

参考：PHP 拡張モジュールの Windows へのインストール

サーバーの起動

php -S localhost:8000 -t [PHPのhtdocsのパス]

その他

参考：Windowsでのおすすめの構成

PHP – 主な内部関数

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

出力・書式

変数の内容確認

var_dump

var_dump ( mixed $expression , mixed ...$expressions ) : void

式・変数の型・サイズなどの情報を表示する。(PHP-manual)

print_r

print_r (mixed $value , bool $return = false ): string|bool

指定した変数に関する情報を解りやすく出力する、または文字列として返す。(PHP-manual)

テキスト出力

printf

printf ( string $format , mixed ...$values ) : int

$valuesを$format文字列で書式整形して出力する。ブラウザへの出力の場合、連続する空白は圧縮されるので注意。(PHP-manual)

書式設定

number_format

number_format ( float $num , int $decimals = 0 , string|null $decimal_separator = "." , string|null $thousands_separator = "," ) : string

数値の小数点・小数桁数と3桁ごとの区切り方を指定する。(PHP-manual)

数値

端数処理

以下の端数処理のうち、floor, ceil, roundは、小数点以下をなくしても結果の型はfloatである点に注意。

floor

floor ( float $value ) : float

$valueの小数点以下を切り下げる。戻り値は正負を問わず$valueを越えない最も大きな整数だが型はfloat。(PHP-manual)

ceil

ceil ( float $value ) : float

$valueの小数点以下を切り上げる。戻り値は正負を問わず$valueより大きい最も小さな整数だが型はfloat。(PHP-manual)

round

round ( float $val [, int $precision = 0 [, int $mode = PHP_ROUND_HALF_UP ]] ) : float

$valを四捨五入する。$precisionによって小数点以下／以上の丸め位置を指定する。(PHP-manual)

intdiv

intdiv ( int $num1 , int $num2 ) : int

$num1を$num2で割った整数商を返す。結果はint。

文字列

文字列操作

mbstrlen

mb_strlen ( string $string [, string|null $encoding = null ] ) : int

文字列の長さを返す。半角も全角も文字単位。(PHP-manual)

explode

explode ( string $separator , string $string [, int $limit = PHP_INT_MAX ] ) : array

文字列を区切り文字列で分解する(区切り文字列は1文字でなくてもよい)。(実行例)

implode

implode( string $separator, array $array) : sltring;

配列要素を文字列($separator)で連結する。配列のみを渡すと各要素が連続した文字列になる。

substr

substr ( string $string , int $offset , int|null $length = null ) : string

文字列中の位置と長さを指定して部分文字列を切り出す。

trim/ltrim/rtrim

trim ( string $string [, string $characters = " \n\r\t\v\0" ] ) : string

文字列の先頭・末尾の半角スペースやエスケープ区切り文字を削除する。全角スペースは削除されず、全角文字列ではうまく機能しない。(実行例)

str_replace

str_replace($search, $replace, $string) : string

文字列中の対象文字列を指定した文字列に置換する。(実行例)

strtok

文字列をトークンで切り分ける。使い方はこちら。

str_shuffle

str_shuffle($str) : string

HTML文字列操作

htmlspecialchars

htmlspecialchars ( string $string [, int $flags = ENT_COMPAT [, string|null $encoding = null [, bool $double_encode = true ]]] ) : string

$string中の特殊文字をHTMLエンティティ―に変換する。(PHP-manual)

頻出の使用例は以下のようなもの。

htmlspecialchars($str, ENT_QUOTES, 'UTF-8')

チェック

数値型のチェック

is_numeric

is_numeric ( mixed $value ) : bool

数値あるいは数値形式の文字列の場合にtrue、その他の場合にfalseを返す（'123'、'1.23'、'1e3’はtrue、'123abc'、'abc123'はfalse）。(PHP-manual)

is_int

is_int ( mixed $value ) : bool

数値型の整数値の場合のみtrueを返す。1.23、1e3、'123'、'abc'は全てfalse。

ctype_digit

ctype_digit ( mixed $text ) : bool

文字列型で0～9の数字のみを含む場合にtrue。数字以外の記号・文字が含まれていたり数値型の場合はfalse（'-123'、'1.23'、123はfalse）。(PHP-manual)

配列のチェック

in_array

in_array ( mixed $needle , array $haystack , bool $strict = false ) : bool

第1引数が配列の要素のどれかと等しいかどうかをチェックする。この関数を使うときは、必ず第3引数にtrueを指定すること。第3引数省略時のデフォルトはfalseで比較が'=='で行われる。これをtrueにして初めて'==='で型まで比較するようになる。(PHP-manual)

配列操作

検索・抽出

加工

array_unique

array_unique ( array $array [, int $flags = SORT_STRING ] ) : array

配列$arrayの要素の重複を除いた配列を返す。(PHP-mannual)

array_shuffle

shuffle ( array &$array ) : bool

引数の配列の要素をシャッフルする。この関数は引数の配列を変更する。

array_map

array_map ( callable|null $callback , array $array , array ...$arrays ) : array

引数で指定した配列の各要素にコールバック関数を適用した配列を返す。詳しくはこちら。

日付と時刻

現在日時

date

date ( string $format [, int|null $timestamp = null ] ) : string

$timestampを$formatで書式化して文字列で返す。$timestampが省略された場合は現在時刻time()が使われる。$formatについてはDateTimeInterface::format()を参照。(PHP-manual)

yyyy-mm-dd HH:MM:SSの形式はdate('Y-m-d H:i:s')。

システム時刻

time

time ( ) : int

現在時刻を、Unixエポック (1970 年 1 月 1 日 00:00:00 GMT) からの通算秒としてint型で返す。(PHP-manual)

microtime

microtime ([ bool $as_float = false ] ) : string|float

現在のUnixタイムスタンプをマイクロ秒精度で返す。デフォルトの$as_float=falseの場合は2つの秒数の文字列を返し、trueにするとUnixエポックからの経過秒数を float型で返す。

OSのシステムコールに依存しており、パフォーマンスの計測には、hrtime() を使うことが推奨されている（ただしPHP7.3.0以上）。(PHP-manual)

hrtime

hrtime ([ bool $as_number = false ] ) : array|int|float|false

PHP7.3.0以上で対応。

任意のタイミングから計測したシステムの高精度な時刻を取得する。デフォルトの$as_number=falseでは戻り値は[秒, ナノ秒]の形式。trueにすると、ナノ秒単位の時刻値（64bitシステムの場合はint、32bitシステムの場合はfloat）。(PHP-manual)

乱数

整数乱数

mt_rand

mt_rand ( int $min , int $max ) : int

$min ≤ r ≤ $maxで整数の乱数rを返す。メルセンヌツイスターにより乱数を生成。(PHP-manual)

random_int

random_int ( int $min , int $max ) : int

$min ≤ r ≤ $maxで整数の乱数rを返す。(PHP-manual)

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]

HTML5 – select～リスト選択

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

概要

select要素は、セレクトボックス、リストボックス、ドロップダウンリストなどと呼ばれ、複数項目の中からユーザーが1つあるいは複数の項目を選択し、スクリプトがそれを利用する。

たとえば上のselect要素は、HTMLでは以下のように書いている。select要素はoption要素を項目分だけ子要素に持つ。option要素のvalue属性は、スクリプトから参照されたときに得られる値。

<select>
  <option value="bloodtype_a">A型</option>
  <option value="bloodtype_b">B型</option>
  <option value="bloodtype_o">O型</option>
  <option value="bloodtype_ab">AB型</option>
</select>

</select>

属性

multiple

select要素にmultiple属性を指定すると、複数要素を選択できるようになる。多くのブラウザーでは形状がリストボックスになり、CTRLキーやSHIFTキーを押しながら2つ以上の要素を選択可能となる。

<select multiple>
  <option value="soup">スープ</option>
  <option value="salad">サラダ</option>
  <option value="pasta">パスタ</option>
  <option value="meet">肉料理</option>
  <option value="fish">魚料理</option>
</select>

</select>

selected

option要素にselected属性を付けると、その選択肢が選択状態になる。multiple属性を指定しない場合に複数のoption要素にselectedを指定した場合、最後に近い方の要素が選択される。

<select>
  <option value="bloodtype_a">A型</option>
  <option value="bloodtype_b" selected>B型</option>
  <option value="bloodtype_o" selected>O型</option>
  <option value="bloodtype_ab">AB型</option>
</select>

</select>

multiple属性を指定した場合は、selectedを指定したすべてのoption要素が選択される。

<select multiple>
  <option value="soup">スープ</option>
  <option value="salad" selected>サラダ</option>
  <option value="pasta">パスタ</option>
  <option value="meet" selected>肉料理</option>
  <option value="fish">魚料理</option>
</select>

</select>

実装例

JavaScript、JQueryによる基本形

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’