JavaScriptでのクロスブラウザ開発：最新の互換性を保つためのベストプラクティス

// ブラウザ機能のサポート確認例
if ('serviceWorker' in navigator) {
  console.log('Service Workerはサポートされています');
} else {
  console.log('Service Workerはサポートされていません');
}

// Array.includesのPolyfill例
if (!Array.prototype.includes) {
  Array.prototype.includes = function (element) {
    return this.indexOf(element) !== -1;
  };
}

// Babelでの設定例（.babelrc）
{
  "presets": ["@babel/preset-env"]
}

// "Can I Use" APIを活用する例（擬似コード）
fetch('https://caniuse.com/api/feature/fetch').then(response => response.json()).then(data => {
  console.log(data);
});

// Autoprefixer設定例（postcss.config.js）
module.exports = {
  plugins: {
    autoprefixer: {
      overrideBrowserslist: ['last 2 versions', '> 1%']
    }
  }
};

// ベンダープレフィックス例
const requestAnimationFrame = window.requestAnimationFrame || 
                              window.webkitRequestAnimationFrame || 
                              window.mozRequestAnimationFrame || 
                              function (callback) {
                                setTimeout(callback, 1000 / 60);
                              };

const isFirefox = navigator.userAgent.toLowerCase().includes('firefox');
if (isFirefox) {
  console.log('Firefox専用の処理を実行します');
}

if ('geolocation' in navigator) {
  navigator.geolocation.getCurrentPosition(position => {
    console.log(position);
  });
} else {
  console.log('Geolocationはサポートされていません');
}

@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

// テスト結果ログ出力例
console.log('ブラウザテストが完了しました');

// 古いブラウザをサポートしない場合の警告
if (!('fetch' in window)) {
  alert('最新のブラウザをご利用ください');
}

// サーバー側設定例（Apache）
Header set X-UA-Compatible "IE=edge"