移動(translate)
縮尺(scale)
回転(rotate)
傾斜(skew)
/* transformの複数指定の方法 */
transform: scale(0.5, 0.5) rotate(-45deg) translate(-256px,500px);
これ、svgに使えて便利。
/* 左右に反転 */
transform: scale(-1, 1);
/* 上下に反転 */
transform: scale(1, -1);
// コンテンツを取得する関数
function fetchContent() {
// ここでサーバーから新たなコンテンツを非同期で取得します。
// この例では、具体的な取得方法は省略しています。
}
// スクロールイベントのリスナーを設定
window.onscroll = function() {
// ユーザーがページの一番下までスクロールしたかどうかをチェック
if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
// ページの一番下までスクロールしたら、新たなコンテンツを取得
fetchContent();
}
};
$sql = "SELECT name FROM doraemon_users";
$sth = $pdo -> query($sql);
$aryList = $sth -> fetchAll(PDO::FETCH_COLUMN);
print_r($aryList);
JavaScriptのinnerHTMLプロパティは、改行を含む文字列を正しく解釈できません。しかし、代わりにテンプレートリテラルを使用することで、複数行の文字列を作成することができます。テンプレートリテラルはバッククォート(`)で囲まれた文字列で、改行や式の埋め込みが可能です。
target.innerHTML = `
<?php
echo '<select name="cat_select">';
foreach($select_data as $key => $value) {
echo '<option value="'.$key.'">'.$value[0].' ('.$value[1].')</option>';
}
echo '</select>';
?>
`;
$color = [
"1" => "red",
"2" => "green",
"3" => "blue",
"4" => "yellow",
"5" => "pink"
];
と
$color1 = ["2", "4", "5"];
から
$color3 = [
"2" => "green",
"4" => "yellow",
"5" => "pink"
];
を作る
$color3 = array_intersect_key($color, array_flip($color1));
これは、$color配列から$color1配列のキーに一致する要素を取得し、新しい配列$color3に格納します。array_flip関数は配列のキーと値を反転させ、array_intersect_key関数は2つの配列のキーが一致する要素を返します。この結果、$color3配列は$color1配列の各要素に対応する$color配列の要素を含むようになります。この方法で、指定したキーの要素を持つ新しい配列を作成できます。
・echo "エラーが発生しました:" . $e->getMessage();:これはエラーメッセージを表示するだけで、スクリプトの実行はその後も続きます。$e->getMessage()は、発生した例外のエラーメッセージを返します。このコードは、エラーメッセージを表示したい場合に使用します。
・exit($e);:これはスクリプトの実行をすぐに停止します。exit関数は、オプションでステータスメッセージを出力できます。この場合、$e(例外オブジェクト)がそのまま出力されます。ただし、$eはオブジェクトなので、そのまま出力すると役に立たない情報(オブジェクトの型とID)しか得られません。そのため、通常はexit($e->getMessage());のように、エラーメッセージを出力するようにします。
したがって、エラーが発生したときにスクリプトの実行を停止したい場合はexitを使用し、エラーメッセージを表示したいだけでスクリプトの実行を続けたい場合はechoを使用します。
try {
} catch (PDOException $e) {
// エラーが発生した場合、トランザクションをロールバックします
$pdo->rollBack();
if ($e->errorInfo[1] == 1062) {
// 一意性制約違反のエラーコードは1062です
echo "IDがすでに存在します。";
} else {
// その他のエラー
echo "エラーが発生しました:" . $e->getMessage();
}
}
var color = "rgb(255, 0, 0)";
var colors = color.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
colors = ["rgb(255, 0, 0)", "255", "0", "0"]
・\d+:\dは数字を表すメタ文字で、+は直前の文字が1回以上繰り返すことを表します。したがって、\d+は1つ以上の数字(0から9まで)の連続したシーケンスを表します。
・,:カンマを表します。
・\s*:\sは空白文字(スペース、タブ、改行など)を表すメタ文字で、*は直前の文字が0回以上繰り返すことを表します。したがって、\s*は0つ以上の空白文字の連繰り返しを表します。
したがって、全体として、この正規表現は「1つ以上の数字、カンマ、0つ以上の空白文字、1つ以上の数字、カンマ、0つ以上の空白文字、1つ以上の数字」というパターンを表します。
この正規表現は、RGB形式の色値(例:rgb(255, 0, 0))を解析するのに使用されます。この正規表現を使用すると、RGB値の各成分(赤、緑、青)を個別に抽出することができます。この正規表現は、JavaScriptのmatch関数と一緒に使用され、RGB値の各成分を抽出するための配列を返します。この配列の各要素は、正規表現の各キャプチャグループ(丸括弧で囲まれた部分)に対応します。
除算代入演算子 (/=) は変数を右オペランドの値で除算し、結果をその変数に代入します。
let a = 3;
a /= 2;
console.log(a);
// Expected output: 1.5
a /= 0;
console.log(a);
// Expected output: Infinity
a /= 'hello';
console.log(a);
// Expected output: NaN
代入演算子
+= 左辺の値に右辺の値を加算したものを代入 x = 3; x += 2 ➡︎ 5
-= 左辺の値から右辺の値を減算したものを代入 x = 3; x -= 2 ➡︎ 1
*= 左辺の値に右辺の値を乗算したものを代入 x = 3; x *= 2 ➡︎ 6
/= 左辺の値を右辺の値で除算したものを代入 x = 3; x /= 2 ➡︎ 1.5
配列やオブジェクトを展開するために使用されます。
例えば、rgbが[r, g, b]という配列である場合、...rgbはr, g, bという個々の要素に展開されます。これは関数の引数として配列の要素を個々に渡すために便利です。
以下に具体的な例を示します:
let rgb = [123, 45, 67];
function printColors(r, g, b) {
console.log(`Red: ${r}, Green: ${g}, Blue: ${b}`);
}
// スプレッド構文を使用して配列の要素を関数の引数として渡す
printColors(...rgb); // "Red: 123, Green: 45, Blue: 67"と出力されます
この例では、printColors関数は3つの引数r, g, bを取ります。...rgbを使用することで、rgb配列の各要素がそれぞれの引数に対応するように関数に渡されます。
このように、スプレッド構文は配列やオブジェクトの要素を個々に操作する必要がある場合に非常に便利です。