タイマーの実践的応用

JavaScriptのタイマーをCSSスタイル操作と組み合わせることで、動的なインタラクション効果を実現できます。

要素の形状変化アニメーション

<div id="shapeTarget"></div>
<script>
const shapeElement = document.getElementById("shapeTarget");
let radiusValue = 0;
shapeElement.addEventListener('click', () => {
  const intervalId = setInterval(() => {
    shapeElement.style.borderRadius = `${radiusValue++}px`;
  }, 30);
});
</script>

イージング効果付き移動

<div id="movingTarget"></div>
<script>
const mover = document.getElementById("movingTarget");
mover.style.position = 'absolute';
mover.style.left = '0px';
let velocity = 1;

mover.addEventListener('click', () => {
  const moveInterval = setInterval(() => {
    velocity *= 1.08;
    mover.style.left = `${velocity}px`;
    if(velocity > 1000) clearInterval(moveInterval);
  }, 30);
});
</script>

フェードアウト効果

<div id="fadeElement"></div>
<script>
const fadeTarget = document.getElementById("fadeElement");
fadeTarget.addEventListener('click', () => {
  const fadeInterval = setInterval(() => {
    fadeTarget.style.opacity -= 0.02;
    if(fadeTarget.style.opacity <= 0) {
      fadeTarget.style.display = 'none';
      clearInterval(fadeInterval);
    }
  }, 30);
});
</script>

モーダルダイアログのアニメーション実装

<button id="modalTrigger">表示</button>
<div class="modalContainer">
  <div class="modalContent">
    <!-- モーダル内容 -->
  </div>
</div>

<script>
const modal = document.querySelector('.modalContainer');
const content = document.querySelector('.modalContent');
const trigger = document.getElementById('modalTrigger');

trigger.addEventListener('click', () => {
  modal.style.display = 'block';
  let opacityLevel = 0;
  
  const fadeIn = setInterval(() => {
    opacityLevel += 0.05;
    modal.style.opacity = opacityLevel;
    if(opacityLevel >= 1) clearInterval(fadeIn);
  }, 30);
});

function hideModal() {
  let opacityLevel = 1;
  const fadeOut = setInterval(() => {
    opacityLevel -= 0.05;
    modal.style.opacity = opacityLevel;
    if(opacityLevel <= 0) {
      modal.style.display = 'none';
      clearInterval(fadeOut);
    }
  }, 30);
}
</script>

eval関数の活用

<textarea id="codeInput"></textarea>
<button id="executeBtn">実行</button>
<script>
document.getElementById('executeBtn').addEventListener('click', () => {
  try {
    eval(document.getElementById('codeInput').value);
  } catch(error) {
    console.error('実行エラー:', error.message);
  }
});
</script>

URLエンコーディング処理

<script>
const encodeData = (data) => {
  const base64Encoded = btoa(data);
  return encodeURIComponent(base64Encoded);
};

const decodeData = (encoded) => {
  const decoded = decodeURIComponent(encoded);
  return atob(decoded);
};
</script>

ウィンドウ操作メソッド

<button id="newWindow">新規ウィンドウ</button>
<button id="closeWindow">ウィンドウを閉じる</button>
<script>
let newWindow;

document.getElementById('newWindow').addEventListener('click', () => {
  newWindow = window.open('https://example.com', '_blank');
});

document.getElementById('closeWindow').addEventListener('click', () => {
  if(newWindow) newWindow.close();
});
</script>

JavaScriptオブジェクト操作

オブジェクト生成方法

// オブジェクトリテラル
const userProfile = {
  age: 25,
  gender: 'male',
  describe() {
    console.log(`年齢:${this.age}, 性別:${this.gender}`);
  }
};

// クラス定義
class UserAccount {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  
  displayInfo() {
    console.log(`${this.name}: ${this.age}歳`);
  }
}
const newUser = new UserAccount('田中', 30);

thisキーワードの挙動

class Account {
  constructor(balance) {
    this.balance = balance;
  }
  
  showBalance() {
    console.log(`残高: ${this.balance}円`);
  }
}

const myAccount = new Account(5000);
const balanceDisplay = myAccount.showBalance;

// 通常メソッド呼び出し
myAccount.showBalance(); // 正しく表示

// 参照のみ代入
balanceDisplay(); // thisがundefinedになる

組み込みオブジェクト活用

// 数値フォーマット
const price = 12345.678;
console.log(price.toLocaleString()); // "12,345.678"

// 日付操作
const now = new Date();
console.log(`${now.getFullYear()}-${now.getMonth()+1}-${now.getDate()}`);

// 文字列処理
const textData = " JavaScript ";
console.log(textData.trim().toUpperCase()); // "JAVASCRIPT"