Javascriptについて（2）

DOM操作

要素の取得と操作

getElementById

getElementById メソッドは、HTMLの id 属性で指定された要素を取得します。

<div id="example">Hello, World!</div>
<script>
  const element = document.getElementById("example");
  console.log(element.textContent); // "Hello, World!"
</script>

解説）
・document.getElementById("example"): id が example の要素を取得。
・textContent: 要素内のテキストを取得。

querySelector

querySelector メソッドは、CSSセレクターを使って最初に一致する要素を取得します。

<div class="example">Item 1</div>
<div class="example">Item 2</div>
<script>
  const element = document.querySelector(".example");
  console.log(element.textContent); // "Item 1"
</script>

解説）
・.example: クラス example を持つ最初の要素を取得。
・querySelectorAll を使うと、すべての一致する要素を取得できます。

イベントリスナーの設定

addEventListener を使うと、要素にイベントを登録できます。

<button id="clickMe">Click Me!</button>
<script>
  const button = document.getElementById("clickMe");
  button.addEventListener("click", () => {
    alert("Button clicked!");
  });
</script>

説明）
click: クリックイベント。
mouseover: マウスが要素に乗ったとき。
keydown: キーボードのキーが押されたとき。

オプション:
once: true を指定すると、イベントリスナーは1回だけ実行されます。

button.addEventListener("click", handleClick, { once: true });
function handleClick() {
  alert("This will run only once.");
}

非同期処理

setTimeout と setInterval

setTimeout
一定時間後に1回だけ関数を実行します。

setTimeout(() => {
  console.log("This message appears after 2 seconds.");
}, 2000);

説明）
第1引数: 実行する関数。
第2引数: 遅延時間（ミリ秒）。

setInterval
一定間隔で関数を繰り返し実行します。

let counter = 0;
const intervalId = setInterval(() => {
  counter++;
  console.log(`Counter: ${counter}`);
  if (counter === 5) {
    clearInterval(intervalId);
  }
}, 1000);

説明）
clearInterval:繰り返し処理を停止するには、clearInterval を使用します。

Promise と async/await

Promise
非同期処理を表現するオブジェクトです。

const fetchData = new Promise((resolve, reject) => {
  setTimeout(() => {
    const success = true;
    if (success) {
      resolve("Data fetched successfully!");
    } else {
      reject("Error fetching data.");
    }
  }, 1000);
});

fetchData
  .then((data) => console.log(data)) // 成功時
  .catch((error) => console.error(error)); // 失敗時

async/await
async/await を使うと、非同期コードを同期的に記述できます。

async function getData() {
  try {
    const result = await fetchData; // Promise を待つ
    console.log(result);
  } catch (error) {
    console.error(error);
  }
}
getData();

モジュール化

JavaScriptのモジュール化は、コードを再利用可能で保守しやすくするための重要な技術です。

ES6モジュール (import/export)

モジュールの作成
ファイル math.js:

export function add(a, b) {
  return a + b;
}
export const PI = 3.14159;

モジュールの利用
ファイル main.js:

import { add, PI } from './math.js';

console.log(add(5, 10)); // 15
console.log(PI); // 3.14159

デフォルトエクスポート:

// math.js
export default function subtract(a, b) {
  return a - b;
}

// main.js
import subtract from './math.js';
console.log(subtract(10, 5)); // 5

エラー処理

try/catch の使い方

try/catch を使うと、エラー発生時の挙動を制御できます。

try {
  const result = JSON.parse("invalid JSON");
  console.log(result);
} catch (error) {
  console.error("An error occurred:", error.message);
}

説明）
try ブロック内でエラーが発生した場合、catch ブロックが実行されます。
error.message: エラーメッセージを取得。

finally

finally ブロックは、エラーの有無に関係なく実行されます。

try {
  const result = JSON.parse('{"key": "value"}');
  console.log(result);
} catch (error) {
  console.error("An error occurred:", error.message);
} finally {
  console.log("This always runs.");
}

まとめ

これらの技術を活用すれば、より動的で効率的なWebアプリケーションを構築できます。
今回はここまでとなります。最後まで閲覧いただきありがとうございます。