サポンテ 勉強ノート

サポンテの勉強ノート・読書メモなどを晒します。

jQuery の $(document).ready(function (){}); について

書き方は 3.0 から非推奨

有名な JavaScript ライブラリ jQuery にて「HTML がすべて読み込まれてから JavaScript コードが実行されるように」との書き方である以下のようなコードがあります(ありました)。

$(document).ready(function (){/*処理*/});

しかしこの書き方は冗長で、しかも副作用の可能性があるので 3.0 から非推奨になっているようです。代わりに以下のようなコードが推奨されています。

$(function (){/*処理*/});

参考: 知ってた? jQueryのready()メソッドはもう書かなくていいらしい - WPJ

偏見?参考にならないjQueryのページの見分け方 - Qiita

読みやすさ・検索しやすさ

しかしながらコードを読んだときに「HTML の読み込みがすべて完了した段階で実施されること」が解りやすいのは圧倒的に前者です。

今日__いえ昔から__プログラムは作って終わりではありませんし、プログラムにかかわる人間がすべて同じ技術レベルとは限らず、jQuery に明るくない人がチームに加わるかもしれません。しかも、特に JavaScript はライブラリの栄枯盛衰が著しい言語です。jQuery がいつまでも人気のライブラリであるとは限りません(現に下火になりつつあります)。そうなったら jQuery に明るくないエンジニアは増えるでしょう。また、そうなったからといっても、jQuery で作ったプログラムは使われ続けます。そして往々にしてプログラムの寿命は開発エンジニアの保守担当期間よりずっと長いものです。

読んで理解しやすいコードにしておくことは、どんなときでも重要です。また理解できない場合に備えて検索のしやすさが高いことも、きわめて重要です。両方のコードを比較してみてください。どちらが「読みやすい」また「検索しやすい(ググラビティが高い)」でしょうか。

今後

したがってバージョンが許す限りは前者の書き方を採用し、非推奨あるいはサポート対象外になったバージョンを使う必要に迫られた場合は、以下のようなコードを採用するようにしたいと考えます。

$(/*document).ready(*/function (){});

省略の美学を持っている人には受け入れがたいことかもしれませんが、さまざまな職場でさまざまなプログラムの保守を引き継いだ経験から見れば、やはり読みやすさは最優先させます。