【Javascript】jQuery3.0αでshow()/hide()メソッドはどう変わるのか | Wood-Roots:blog

2015年7月にjQuery3.0アルファ版が公開されました。

jQuery 3.0 and jQuery Compat 3.0 Alpha Versions Released

パフォーマンス向上や非推奨メソッドの廃止などいろいろと変更点がありますが、日常的によく使うのでshow()/hide()メソッドの仕様変更という点が気になります。

【翻訳まとめ】jQuery 3.0 alpha リリースノート
今回は実験的に、原点に立ち返ってこれらのメソッドをシンプルにしました。この変更は既存コードを壊す場合があります。
jQuery 3.0ではdisplay: noneがセットされた要素に.show()を行ってもdisplayを上書くことはしません。

既存コードを壊すと言われるとビビります。
実際にどう変わるのか、簡単ですが試してみました。

デモ

jQuery3.0αのshow()/hide()実装デモ

ボタンをクリックすると指定要素に対しshow()/hide()を実行します。
また、実行後該当のHTMLがどうなっているかを表示させています。

全く同じ処理をjQuery2(2.1.4)を使って実装しましたので、結果のHTMLを見比べてみてください。

jQuery2.1.4のshow()/hide()実装デモ

結局どう変わるのか

jQuery2以前では

という処理で表示/非表示を実現していました。

これがjQuery3.0αでは

ということになりそうです。

CSSでdisplay:noneがセットされた要素をshow()で表示できない、というのはstyle属性を書き込むわけではないから、というのが理由です。
公式ブログでも言及されていますが、「.hidden」のようなクラスの取り外しで制御するというのがわかりやすく確実でしょう。

jQuery不要を推す声も増えつつありますが、長年Javascriptライブラリの代表格であり現在も開発が進んでいるjQueryはまだまだ面白くなりそうです。個人的にも大好きなので、今後の発展に期待しています。

最後に注意

あくまでアルファ版での仕様ですので、ベータ版や正式リリースでは変更されるおそれがあります。
今後の動向をチェックするようにしてご利用ください。