jQuery のアップグレード

Jira 8.0 には jQuery 2.2.4 が組み込まれます。当社でアップグレードを実施した際に、アドオンを簡単に更新するためのいくつかのベスト プラクティスを作成しました。以降の変更点に加えて、詳細情報が必要な方のために、jQuery の公式アップグレード ガイドへの便利なリンクもいくつか掲載しています。

考慮事項

バージョン

jQuery をバージョン 1.7.2 から 2.2.4 にアップグレードしています。また、アップグレードを簡素化するために、jQuery 移行プラグイン 1.4.1 も組み込む予定です。この移行プラグインによって非推奨の機能を使用できるようになるため、ご利用のコードはアップグレード後の jQuery でも適切に実行されます。ただし、これは一時的な回避策として見なし、コードを完全に移行することをおすすめします。移行プラグインは次のリリースで削除する予定です。

セキュリティ上の問題

Jira にバンドルされる jQuery 2.2.4 には、次のセキュリティ問題に対応するための 2 つの追加セキュリティ パッチが適用されます。 

変更履歴とアップグレード ガイド

すべての重要な変更について理解し、不明点がある場合に正確な情報を入手するために、公式の jQuery 変更履歴およびアップグレード ガイドを確認しておくことをおすすめします。

非推奨のリソースについての警告

jQuery のアップグレード後は、非推奨の関数を使用しようとすると、移行プラグインによって通知メッセージと警告が表示されます。このような関数は引き続き利用可能で動作しますが、将来的には削除する予定であるため、サポート対象の機能に切り替えることをおすすめします。警告は、非推奨の関数が使用されている箇所を確認するために活用できます。

これまでの EAP では初期設定で警告が有効になっていましたが、EAP ベータ版では無効にしました。これらの警告を再表示するには、jquery-migrate-logging モジュールを有効にします。

  1. > [アドオン] > [アプリの管理] に進みます。
  2. jquery プラグインを検索します。
  3. jquery-migrate-logging モジュールを有効化します。

変更

以降の表では、もっとも重要な変更について説明します。すべての変更を網羅した一覧ではないため、jQuery アップグレード ガイドと合わせて確認するようにしてください。 

埋め込みの課題コレクターでの jQuery パスの変更

課題コレクターでの jQuery へのパスを変更しました。具体的な対象範囲は、Jira の外部での課題コレクターの埋め込みを許可していたコードです。過去に作成した課題コレクターで生成されたコードを使用して埋め込んでも、コードが正しいものではなくなっているため、動作しません。

修正方法

"新しい" 生成コード内のパスは更新されています。したがって、課題コレクターを埋め込んだすべてのページでこれをコードを再使用します。

  1. 課題コレクターを開きます。 > [システム] > [課題コレクター] ですべての課題コレクターを一覧表示できます。
  2. [この課題コレクターを埋め込む] セクションから、更新されたコードをコピーします。
  3. 対象の課題コレクターを埋め込んだすべての場所で、そのコードを使用します。
Deferred.then

アップグレード前は、then メソッドは一定の範疇で Promise/A 仕様に従っており、donefail にハンドラーを追加するための糖衣構文として使用されていました。現在の動作は Promise/A+ 仕様と類似し、値の変更やメソッドチェーンを行うことができます。

ドキュメント: deferred.then()改善リクエストコミット履歴

修正方法

次のいずれかの方法を使用できます。

  • ネイティブの Promise に書き換える。
  • then → done/fail メソッドに変更する。
  • コードを現状のままにする。これは、ユース ケースによっては then の新しい挙動に適合する可能性があるためです。ただし、検証は必要です。
isResolved、isRejected

このメソッドは deferred.state() に置き換えられました。新しいメソッドは、pendingresolved、または rejected のいずれかの状態を返します。

ドキュメント: deferred.state()deferred.isRejected()deferred.isResolved()

修正方法

.is<State>() を .state() === "<state>" で置き換えます。例:

if (myPromise.isRejected()) → if (myPromise.state() === "rejected")
セレクターとカンマ
jQuery セレクターでは末尾にカンマを使用できません。
修正方法
  • セレクターの末尾のカンマを削除します。例:  

    $(".class-name, ") → $(".class-name")
.closest(selectors)

Array を使用する .closest() メソッドの署名が削除されました。この変更が .closest() の通常の使用に影響を与えることはありません。

ドキュメント: closest(selectors)jQuery 1.8 ブログ

修正方法

この署名を使用しないようにコードを書き直します。 

$.ajax{async:false}

同期リクエスト (SJAX) には Deferred ではなくコールバックを使用する必要があります。

ドキュメント: jQuery.ajax()改善リクエスト代替手順

修正方法
  • ほとんどの場合、SJAX ではなく、AJAX を使用します。 
  • Deferred ではなく success/error/complete コールバックを使用します。(例: .done())。
state@syntheticClick

アップグレード前は、ラジオ/チェックボックス エレメントのクリックでトリガーされたイベントは、これらのエレメントがユーザーの操作とは逆の状態にあるとみなしていました。これは、ユーザーが開始した操作と同じ選択状態を反映するように修正されました。

ドキュメント: バグ修正jQuery 1.9 アップグレード ガイド

修正方法

ラジオ / チェックボックス エレメントのクリックで、プログラムによりトリガーされた新しい状態を確認するロジックを反転します。

events@.fn.data

jQuery.fn.data() がデータ項目の修正のたびにイベント (getData、setData、changeData) を発生させることはなくなりました。

ドキュメント: バグ修正

修正方法

getDatasetData、および changeData イベントを使用するコードを書き直します。

namespace@.fn.data

jQuery.fn.data() は名前空間で指定されたデータをサポートしません。

ドキュメント: バグ修正jQuery 1.9 アップグレード ガイド

修正方法
  • データ キーとしてピリオド (.) を使用するコードを書き直します。
  • jQuery 1.9 では、.data("abc.def") に対する呼び出しは、単なる abc ではなく abc.def という名前についてデータを取得します。
$.proxy

jQuery.proxy が誤ったコンテキストで呼び出された場合、コンテキストを保存します。

ドキュメント: 機能リクエストjQuery 1.9 アップグレード ガイド

修正方法

コードを書き直します。

$.contains

最初の引数は、jQuery オブジェクトではなく DOM 要素にする必要があります。

ドキュメント: jQuery.contains()代替メソッド: Node.contains()

修正方法
  • ドキュメントで説明されているように、DOM 要素を使用します。このメソッドでは jQuery オブジェクトを使用できなくなりました。
  • jQuery.contains() と代替の Node.contains() との違いは、jQuery メソッドは自己排他的であることです。つまり、要素はそれ自身を含みません。 
  • jQuery オブジェクトを使用する必要がある場合は、次の回避策を試用できますが、パフォーマンスの観点から推奨されません。
    {0} 
$.uuid

このメソッドは削除されました。

ドキュメント: jQuery 1.9 アップグレード ガイド

修正方法

このメソッドを使用しないようにコードを書き直します。

$.offset.bodyOffset

このメソッドは削除されました。

ドキュメント: 代替メソッド: offset()

修正方法

このメソッドを使用しないようにコードを書き直します。代わりに .fn.offset メソッドを使用できます。

$.browser.version

webkit ブラウザ バージョンの変更を認識するための方法です。webkit の場合、$.browser.version の以前のバージョンはブラウザ エンジンのバージョンを返していました。現在は、正しいブラウザ バージョンを返します。

修正方法
  • browser.version の使用を確認し、コードを書き直します。
  • Jira は jQuery.browserこの実装を同梱します。
$.fn.width

要素の幅の変更を計算する方法です。jQuery 2.2.4 は、コンテンツを持たないインライン要素の幅 (%) 値についてさまざまな値を返すため、これらの要素の幅を確認する際は特に注意が必要です。

ドキュメント: width()

修正方法
  • width の使用方法を確認します。ほとんどの場合、インライン要素に display: inline-block  を追加するか、width().css({width}) と置き換えるだけで十分なはずです。
$.focus()

.focus() の呼び出し時に要素が DOM に添付されていない場合、イベント ハンドラはトリガーされません。

修正方法
  • triggerHandler('focus') を使用するか、要素を DOM に添付します。
最終更新日: 2018 年 12 月 14 日

この内容はお役に立ちましたか?

はい
いいえ
この記事についてのフィードバックを送信する
Powered by Confluence and Scroll Viewport.