オブジェクトの深い複製手法

JSON変換による方法

const original = { data: [1, 2, { value: 3 }] };
const duplicated = JSON.parse(JSON.stringify(original));

再帰関数を用いた実装

function createDeepCopy(source) {
  if (!source || typeof source !== 'object') return source;
  
  const result = Array.isArray(source) ? [] : {};
  
  for (const prop in source) {
    if (source.hasOwnProperty(prop)) {
      result[prop] = typeof source[prop] === 'object' ? 
        createDeepCopy(source[prop]) : source[prop];
    }
  }
  return result;
}

Lodashライブラリの活用

import _ from 'lodash';
const cloned = _.cloneDeep(originalData);

jQueryのextendメソッド

const deepCopy = $.extend(true, {}, originalObject);

Vueの算出プロパティと監視の差異

• 算出プロパティ(computed)は依存値の変更時に再計算され、結果をキャッシュする
• 監視プロパティ(watch)は特定値の変化時にコールバックを実行
• computedはreturn必須、watchは不要
• 初回実行挙動の制御（immediateオプション）
• 設計パターン: 複数依存→computed、単一値変化→watch

Vueのレンダリング手法比較

1. テンプレートベースのマウント
2. render関数とcreateElementの直接使用
3. コンポーネントテンプレートとの組み合わせ
4. 単一ファイルコンポーネント(SFC)による実装

イベントループにおけるタスク管理

マクロタスク: メインスレッド実行、タイマー処理など
マイクロタスク: Promise処理、DOM更新後のコールバック

Vuexステート管理の基本要素

配列の重複排除技術

// Setオブジェクトを利用
const uniqueValues = [...new Set(duplicatedArray)];

// フィルタリング手法
function removeDuplicates(arr) {
  return arr.filter((item, index) => arr.indexOf(item) === index);
}

CSS垂直中央揃えの実現方法

/* Flexboxによる解決 */
.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 絶対配置とトランスフォーム */
.element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

レスポンシブデザイン用CSS単位

• % (親要素に対する相対値)
• vw/vh (ビューポート幅/高さ)
• em (親要素フォントサイズ基準)
• rem (ルートフォントサイズ基準)

REM単位の実装特性

利点

• ルートフォントサイズに基づいたスケーラブルなデザイン
• デバイス間で一貫したサイズ調整

課題

• 複雑な計算式の必要
• レガシーブラウザ対応の制限

/* ビューポート幅との連動例 */
html {
  font-size: calc(100vw / 37.5);
}