PHP – 主な内部関数

出力・書式

変数の内容確認

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.231e3'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に表示

概要

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

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

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

HTML

body内のhtmlは以下の通り。

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

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

JavaScript

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

 

 

JQuery – 子要素の参照・操作

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

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

child_elementsに疑似クラスnth-child(n)を適用してn番目の要素に対してmethod()を適用する。child-elementsは複数の子要素の親要素ではなく、子要素である点に注意。たとえばul li要素の場合、childe_elementsulではなく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 – 配列の先頭・末尾要素の追加・削除

概要

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

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

末尾要素の操作

push~末尾追加

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

pop~末尾取出し・削除

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

先頭要素の操作

unshift~先頭追加

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

shift~先頭取出し・削除

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

HTML5 – select~リスト選択

概要

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

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

属性

multiple

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

selected

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

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

実装例

 

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

イベントの種類

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

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

イベントリスナーの登録

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

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

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

イベントの発生順

基本

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

  1. keydown, 'a'
  2. keyup, 'a'

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

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

  1. keydown, 'Shift'
  2. keydown, 'A'
  3. keyup, 'A'
  4. keyup, 'Shift'

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

TABとCAPS LOCK

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

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

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

キーの内容の参照

参照方法

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

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

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

上記の場合、コールバックの引数eのプロパティーkeycodeで必要なキーの値を参照する。ただし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を返す。

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

 

JS/ES – KeybordEvent.key

概要

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

確認コード

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

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 – 視覚効果

JQueryのみによる効果

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

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

scrollTop

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

外部フレームワーク

ScrollMe

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

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

 

 

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

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に登録された特定の/あるいは全てのリスナーを削除する

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

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

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

概要

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

実行例

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

リスナーにデータを渡す

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

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

書式

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

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

実行例

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

 

JS/ES – map

概要

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つ目だけを返しているが、すべての要素において元の配列全体が参照できることを示している。