クロスブラウザのJavaScriptコードを書くときに気をつけること

    後藤大地  [2008/03/04]

    Mozilla Foundation, JavaScript Evangelist, John Resig氏は2月29日(米国時間)、自身のブログにおいてBad Object DetectionのタイトルのもとクロスブラウザのJavaScriptコードを記述する際の注意事項をまとめている。同氏はJavaScript Ajax WebアプリケーションフレームワークjQueryの主要開発者であり、このあたりの事情に精通している。

    オブジェクト検出の記述例

    同氏はクロスブラウザのJavaScriptコードを記述するには、使いたい機能ごとに使えるかどうかを検出する方法が一般的なやり方だと説明。オブジェクト検出の方法はケースバイケースで違うとし、いくつかの例を紹介している。特定のプロパティが存在するかどうかで機能の有無を判断する方法が紹介されている。

    ただしこうした方法は、未知のブラウザに対しての動作が予測できないという問題を抱えている。たとえば同氏はIEを検出する方法としてdocument.allを使う方法をとりあげ、同方法でIEは検出できるがOperaも検出されてしまうと説明。また特定の機能があるかどうかでチェックする方法もあるが、ライブラリの導入で意味がなくなったり将来のバージョンで導入されることがあるなど、この方法も問題が多いことを指摘している。

    問題のある利用例 - IEのみならずOperaも一致する

    であればグローバル変数を使ってブラウザを判定する方法が有益のように思えるが、同氏はこの方法にも注意が必要だとしている。windows.operaなどのグローバル変数を使ってブラウザを判定する場合、Operaは当然同処理で一致対象となるが、その判定ではIEも処理対象として動作してしまう。グローバルオブジェクトを判定に使う場合にはかなり注意深く使う必要があることになる。

    機能による判定は将来のバージョンアップやライブラリの追加の影響を受ける

    一見するとOperaのみでポップアップウィンドウが表示されそうだが、これではIEでも表示されてしまう

    こうした状況を踏まえ、同氏は2つの指針を提示している。

    1. ほんとうに必要としている機能だけをオブジェクト検出するようにすること
    2. グローバルオブジェクトを使って検出する場合思っているようには動作しないため注意すること

    の2つだ。興味のあるフロントエンドプログラマやWebデベロッパは同氏のブログをチェックしてみてほしい。同氏のブログに対して寄せられているコメントも検討価値のありそうなものが多い。

    関連サイト

    新着記事

    特設サイトの情報

      求人情報

      人気記事

      一覧

      イチオシ記事

      新着記事

      特別企画

      転職ノウハウ

      あなたの仕事適性診断

      4つの診断で、自分の適性を見つめなおそう!

      Heroes File ~挑戦者たち~

      働くこと・挑戦し続けることへの思いを綴ったインタビュー

      はじめての転職診断

      あなたにピッタリのアドバイスを読むことができます。

      転職Q&A

      転職に必要な情報が収集できます

      スカウト転職する

      企業からアプローチのメッセージが届きます。

      マイナビニュースマガジン