LoginSignup
0
2

More than 3 years have passed since last update.

@STSynthe

jQueryでこんな書き方は要注意

Posted at

jQuery 1系や3系でも動くスタート関数を書く

次のよく見かけるグローバル汚染を防ぐ為に書かれる無名関数で梱包する必要は無い。

(function() {
    $(function() {
        // ここから任意のコード
    });
}) ();

jQueryをスタートするには

$(function() {
    // ここから任意のコード
});

これ一つだけで良い。

$(callback)はHTMLの解析が終わった後にコールバック関数を呼び出す。scriptタグの書く位置に左右されず、綺麗に実行します。

このように、余分で意味の無い関数は省いて、ブロックネストを減らす書き方をしよう。write less, do more!

互換の無い書き方

readyイベント

次のクセの悪い書き方をするとjQuery 3.0では動かなくなった1。

$(document).on('ready', function() {/* 任意のコード */})
$(document).ready(function() {/* 任意のコード */});

この書き方を検索すると結構出てくるし新規記事も多い。

Ajax

上記の続きとなるがjQuery 3.0以降ではAjaxのsuccess error completeが無事昇天してしまったのでなるべく互換をとりたいならthen()を使おう。

$.get('example.html').then(
    function(value) {
        alert('OK');
        alert(value);
    },
    function(error) {
        alert('NG:' + error.status);
    }
);

本当はFetch APIっぽく書きたかったがcatch()は3.0からなので、っぽく書くならこうなるかな。上記の書き方のthen()なら1.52から使えます3。

bodyタグの最後に書かれるscriptタグ氏

<body>
    <div id="button-container">
        <button>ボタンAさん</button>
    </div>
    <script>
$('button');
    </script>
</body>

よくbodyの閉じタグ前にscriptタグを書く手法ですが、HTML解析が終わる前のセレクターやDOM操作はリスキーです。できれば 「jQuery 1.12.4や3系でも動くスタート関数を書く 」で書いたスタート関数内で処理しよう。

上記の例は正常に動くコードなので余計にクセが悪いです。scriptタグ位置に制約はありませんが各所に散らすと可読性が下がります。

理解せずこうしたら動くと当たり前のようにbodyの閉じタグ前に書くようにしてるポリシー持ちは良くありません。

scriptタグのdefer属性がどのブラウザでも通用しない

知っている方も多いと思いますが、HTML5ではscriptタグにdefer属性をつけるとHTMLの解析が終わった後にスクリプトを実行します。だが

<script defer src="example.js"></script>

IE君、君のことだよ…。

ひとまとめにしよう

こんなコードはイヤだ1

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>こんなコードはイヤだ1</title>
        <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
    </head>
    <body>
        <div id="button-container">
            <button id="button-a">ボタンAさん</button>
            <script>
$('#button-a').click(function() {
    alert('ボタンAが押されたよ！');
});
            </script>
            <button id="button-b">ボタンBさん</button>
            <script>
$(function() {
    $('#button-b').click(function() {
        alert('ボタンBが押されたよ！');
    });
});
            </script>
        </div>
    </body>
</html>

冗長的だ！しかもコピペ臭い。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>こんなコードはイヤだ1</title>
        <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
        <script>
$(function() {
    $('#button-container > button').click(function() {
        alert( $( this ).data('message') );
    });
});
        </script>
    </head>
    <body>
        <div id="button-container">
            <button data-message="ボタンAが押されたよ！">ボタンAさん</button>
            <button data-message="ボタンBが押されたよ！">ボタンBさん</button>
        </div>
    </body>
</html>

こうするとスッキリまとまり、無駄も少ない。jQueryはデータ属性もサポートされてるから活用していこう。

こんなコードはイヤだ2

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>こんなコードはイヤだ2</title>
        <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
    </head>
    <body>
        <div id="button-container">
            <script>
$(function() {
    document.write('<button>ボタンAさん</button>');
    document.write('<button>ボタンBさん</button>');
});
            </script>
        </div>
    </body>
</html>

なんか悲しくなってくる。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>こんなコードはイヤだ2</title>
        <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
        <script>
$(function() {
    $('<button>ボタンAさん</button>'
    + '<button>ボタンBさん</button>').appendTo('#button-container');
});
        </script>
    </head>
    <body>
        <div id="button-container"></div>
    </body>
</html>

せめてこう書くか、html()を活用しよう。

さいごに

「いまさらjQuery」感はスゴイのですが、初めてjQuery扱う、事情があってjQueryを使うという者に対して、我々の基準を押しつけてしまうような事は好きでは無い。

10年以上前のライブラリなので情報はたっぷりある代わりに💩も多い。

Qiitaも例外では無い。

の新規記事を観てて思ったことはちゃんとスタート関数を書けてないケースが多い。サンプルコードだから省かれてるのかガチなのかよく分からないところだけど。

なのでこの記事の冒頭がアレなのだ。

  1. https://jquery.com/upgrade-guide/3.0/#deprecated-document-ready-handlers-other-than-jquery-function ↩

  2. progressFilterを追加する場合は1.8からとなります。 https://api.jquery.com/deferred.then/ ↩

  3. done()やfail()でも同じ動作しますが「コード量を減らしたい」のと「Fetch APIっぽく」が目的なのでスルー ↩

0
2
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
2