オブジェクトで返す
function calc(a, b) { return { sum: a + b, diff: a - b }; } const result = calc(10, 3); console.log(result.sum); // 13 console.log(result.diff); // 7
function calc(a, b) { const sum = a + b; const diff = a - b; return { sum, diff }; }
これは return { sum: sum, diff: diff } の省略記法です。
オブジェクトのキー名と変数名が同じなら短く書ける。
UTF‑8 のバイト数を調べる
function byteLength(str) { return new TextEncoder().encode(str).length; } console.log(byteLength("あ")); // 3 console.log(byteLength("A")); // 1 console.log(byteLength("😊")); // 4
const text = "Hello World"; console.log(text.includes("World")); // true console.log(text.includes("world")); // false（大文字小文字は区別される）
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 "ブラウザからのアクセスと確認されました。"; } ?>