let number = -5; // 例: マイナスの値 number = Math.max(number, 0); console.log(number); // 出力は 0
Math.max()を使うことで、numberが0より小さい場合は自動的に0が返され、そうでなければそのままの値が返されます。この方法は非常にシンプルで、コードも見やすいです。
もし複数の値に対して同じ処理をしたい場合は、map()メソッドを使って配列に適用することもできますよ！例えば:
let numbers = [-5, 3, -2, 10]; numbers = numbers.map(num => Math.max(num, 0)); console.log(numbers); // 出力は [0, 3, 0, 10]
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>コンマ区切り</title> </head> <body> <input type="text" id="numberInput" placeholder="数字を入力してください"> <script> const input = document.getElementById('numberInput'); input.addEventListener('input', () => { let value = input.value.replace(/,/g, ''); // コンマを削除 if (!isNaN(value) && value !== '') { value = Number(value).toLocaleString(); // コンマ区切りを適用 input.value = value; // テキストボックス内の値を更新 } }); </script> </body> </html>
複数のテキストボックスに同じ処理を適用するには
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>コンマ区切り</title> </head> <body> <input type="text" class="numberInput" placeholder="数字を入力してください"> <input type="text" class="numberInput" placeholder="数字を入力してください"> <input type="text" class="numberInput" placeholder="数字を入力してください"> <script> // クラス名で全ての対象テキストボックスを取得 const inputs = document.querySelectorAll('.numberInput'); inputs.forEach(input => { input.addEventListener('input', () => { let value = input.value.replace(/,/g, ''); // コンマを削除 if (!isNaN(value) && value !== '') { value = Number(value).toLocaleString(); // コンマ区切りを適用 input.value = value; // テキストボックス内の値を更新 } }); }); </script> </body> </html>
toLocaleString() は JavaScript のメソッドで、文字通り「ロケール（地域や言語の設定）に基づいて」数字や日付などをフォーマットするために作られています。
具体的には、数字をそのロケール（例えば、日本やアメリカなど）に応じた形式で整形します。コンマ区切りはその一部です。
// チェックボックスの状態を取得 const checkbox = document.getElementById("myCheckbox"); if (checkbox.checked) { console.log("チェックが入っています！"); } else { console.log("チェックが入っていません！"); }
1. 個別に定義する場合:
const start1 = document.getElementById('start1'); const start2 = document.getElementById('start2'); const start3 = document.getElementById('start3');
メリット:
シンプルで分かりやすい: 小規模なプロジェクトや、start1, start2, start3が少数の場合には最適。
明確な識別: 各変数が何を表すかが一目瞭然。
デメリット:
スケーラビリティに欠ける: 要素が増えたとき、毎回新しい定数を定義しなければならず、保守が大変。
動的アクセスが難しい: 動的に要素を参照したい場合、柔軟性に欠ける。
2. オブジェクトでまとめる場合:
const starts = { start1: document.getElementById('start1'), start2: document.getElementById('start2'), start3: document.getElementById('start3'), };
メリット:
動的アクセスが可能: starts['start1'] や starts[start${index}] など、キーを使って柔軟に要素にアクセスできる。
スケーラブル: 要素の数が増えてもオブジェクトのプロパティとして追加するだけで済む。
構造的に整理しやすい: 複数の関連する要素をグループ化できる。
デメリット:
やや複雑: 小規模プロジェクトでは少し過剰に感じる場合も。
使い分けの考え方:
要素が少なく、静的な場合: 個別に定義（const start1, start2...）する方法が適しています。この方法はシンプルで、コードがすぐに理解できます。
要素が増える可能性がある、または動的に扱いたい場合: オブジェクトでまとめる方法を使う方が柔軟です。たとえばループを利用して動的に処理したい場合に特に便利です。
const videos = document.querySelectorAll('video');
const videos = { video1: document.getElementById('video1'), video2: document.getElementById('video2'), video3: document.getElementById('video3'), };
1. const videos = document.querySelectorAll('video'); の場合
取得方法:
このコードはすべての<video>要素をNodeListとして取得します。
NodeListは配列のように動作し、インデックス（videos[0]など）を使って各<video>要素にアクセスできます。
特徴:
動的に動画の数が増えたり減ったりしても対応可能です。例えば、新たに<video>タグを追加しても、このコードで取得できます。
ループ処理（forEachなど）に適しており、簡単に全ての動画を操作できます。
2. const videos = { video1: document.getElementById('video1'), ... }; の場合
取得方法:
このコードは特定の<video>要素をオブジェクトのプロパティとして格納します。
動画を明示的に識別し、プロパティ名（videos.video1など）でアクセスできます。
特徴:
動的ではなく、手動で<video>要素を管理する形になります。例えば、新しい動画を追加するたびに、このオブジェクトにプロパティを追加する必要があります。
直接的に管理するため、動画の名前（IDなど）を使って識別しやすくなります。
| 特性 | querySelectorAll | オブジェクト (videos) |
|---|---|---|
| 対象の取得方法 | <video>タグ全体を一括取得 | 明示的にIDを指定して取得 |
| 動的な対応 | 動画の数が変わっても柔軟 | 動画を増やしたら手動で追加入力が必要 |
| アクセス方法 | インデックスで参照 (videos[0]) | キーで参照 (videos.video1) |
| ループ処理との相性 | 適している | 手動管理に向いている |
<script> function getCookie(name) { const cookies = document.cookie .split(';') // セミコロンで分割 .map(cookie => cookie.trim()); // 各クッキーをトリムして余分なスペースを削除 const targetCookie = cookies.find(cookie => cookie.startsWith(`${name}=`)); return targetCookie ? targetCookie.split('=')[1] : null; // 指定したクッキー名の値を取得 } const browserChecked = getCookie("browser_checked"); if (!browserChecked) { fetch(`check_browser.php?_=${new Date().getTime()}`, { method: "POST" }) .then(response => console.log("ブラウザ確認完了")) .catch(error => console.error("エラー:", error)); document.cookie = "browser_checked=1; max-age=3600; path=/"; } </script>
ブラウザキャッシュの影響
リクエストがキャッシュされていて、サーバーがリクエストを認識しない可能性があります。
対処法: リクエストURLにタイムスタンプを追加することでキャッシュを回避します。
check_browser.php
<?php if ($_SERVER['REQUEST_METHOD'] === 'POST') { // カウンター更新処理 echo "ブラウザからのアクセスと確認されました。"; } ?>
document.cookie = "userType=admin; path=/blog/yuu/; expires=Fri, 09 May 2025 12:00:00 UTC"; document.cookie = "userType=; path=/blog/yuu/; expires=Thu, 01 Jan 1970 00:00:00 UTC"; <?php if (isset($_COOKIE["userType"])) { echo "Cookieの値: " . $_COOKIE["userType"]; } else { echo "Cookieが存在しません。"; } ?> <label> <input type="checkbox" id="cookieCheckbox"> 管理者モード </label> document.getElementById("cookieCheckbox").addEventListener("change", function() { const isChecked = this.checked; if (isChecked) { // チェックされている場合にCookieを設定 document.cookie = "userType=admin; path=/; expires=Fri, 09 May 2025 12:00:00 UTC"; console.log("Cookieを設定しました！"); } else { // チェックが外された場合にCookieを削除 document.cookie = "userType=; path=/; expires=Thu, 01 Jan 1970 00:00:00 UTC"; console.log("Cookieを削除しました！"); } });
<input type="text" id="textBox" placeholder="文字を入力してください"> <script> function checkByteLength(inputElement, maxBytes) { const text = inputElement.value; let byteLength = new TextEncoder().encode(text).length; // バイト数を計算する if (byteLength > maxBytes) { const overBytes = byteLength - maxBytes; alert(`${overBytes}バイトオーバーです`); } } // 例: テキストボックスの入力イベントにバイト数チェックを追加 const textBox = document.getElementById("textBox"); textBox.addEventListener("input", () => checkByteLength(textBox, 50)); // 50バイトが制限 </script>
<input type="text" id="textbox" value="全選択されるテキスト">
const textbox = document.getElementById('textbox'); textbox.addEventListener('focus', () => { textbox.select(); });
主に以下の2種類があります：
共通鍵暗号（対称暗号）:
同じ鍵を使ってデータを暗号化・復号します。
例: AES（Advanced Encryption Standard）
利点: 処理が高速。
課題: 鍵を安全に共有する必要がある。
公開鍵暗号（非対称暗号）:
公開鍵で暗号化し、対応する秘密鍵で復号します。
例: RSA、ECC（Elliptic Curve Cryptography）
利点: 鍵を共有する必要がない（公開鍵は誰でも使える）。
課題: 処理が遅い。
公開鍵暗号の仕組み
公開鍵暗号では、以下のような流れでデータを保護します：
鍵ペアの生成:
公開鍵と秘密鍵のペアを生成します。
公開鍵は暗号化に使用され、誰でも利用可能です。
秘密鍵は復号に使用され、厳重に保管します。
暗号化:
公開鍵を使ってデータを暗号化します。
暗号化されたデータは、公開鍵に対応する秘密鍵でしか復号できません。
復号:
秘密鍵を使って暗号化されたデータを復号します。
公開鍵では復号できないため、秘密鍵が漏洩しない限り安全です。
1. 公開鍵は暗号化にしか使用されない:
公開鍵は暗号化のプロセスに使用されます。一方で、復号に必要なのは「秘密鍵」のみです。そのため、暗号化プロセスで使用された公開鍵がリロードによって更新されても、暗号化されたデータは生成された秘密鍵で復号可能です。
2. 暗号化データと秘密鍵の関係:
RSA（または非対称暗号）の仕組みにより、暗号化されたデータは公開鍵に対応する秘密鍵だけで復号できます。暗号化されたデータ自体は公開鍵の更新によって影響を受けません。つまり、元の秘密鍵を保持していれば復号が可能です。
3. 復号は新しい公開鍵に依存しない:
新しい公開鍵が生成されたとしても、復号処理ではその新しい公開鍵は使われません。復号時に必要なのは、暗号化時に使用された公開鍵に対応する秘密鍵です。この秘密鍵が正しく入力されていれば、暗号化されたデータを正常に復号できます。
4. 暗号化データの変更がない限り有効:
暗号化されたデータそのものが破損したり変更されたりしていない限り、元の秘密鍵を用いることで復号可能です。
公開鍵は暗号化にしか使用されない。復号時に必要なのは暗号化時の秘密鍵。