Go to Qiita Advent Calendar Top
LoginSignup
241
263

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@sansaisoba

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

Last updated at Posted at 2016-11-13

最初に

独断！参考にならないJavaScriptページの見分け方
こちらの記事が秀逸だったので、触発されてjQueryに寄った記事を書いてみようと思います。

動機

jQueryも随分と広く使われるようになり、『JavaScript使えます』って意味合いの中にjQueryしか使えないってのも含まれてしまうようになったりするのも若干なんだかなぁとは思いますが、
それはさておき、「チームメンバーになんでこんな書き方してんの？」って聞いたらそういう書き方をしているページが検索で出てきたりして…そういう苦い思い出を思い返しながら、この記事を書こうと思います。

この記事の対象者

  • コピペで動けば良いやという人以外
  • コピペより先にまだ進めていない人

この記事を書いてる人のスペック

  • PHPというかLaravelが好き
  • JavaScript始めたのはprototype.jsの頃
  • ES6まだよくわかってないですごめんなさい

コメント編集リクエスト歓迎します

基本的に低次元な話ばかりになると思いますが…場末の現場レベルではこのレベルで言わなきゃ伝わらないことがあるので、そういう視点で読んでいただけるとありがたいです。

Fatal（そっ閉じ推奨レベル）

<a onclick="hoge();">
<body onload="init();">

なんでjQuery使ってるのって感じです…。
なぜjQueryが1.0からaddEventListenerをラップしてきたのか、先人の苦労は一体…。
とりあえず、閉じてOKです。

どうすればよいか

$(selector).on('click', function(){})を使ったり、
$(function() {});を使いましょう。
onclick=""などは使うことで起こる問題は山盛りありますが、きちんとjQueryを使うことでしたいことは実現できます。1

グローバル空間でのfunction hoge(){}

なぜグローバル空間に書くのかというと、だいたい、onclick="hoge()"と書きたいからなんじゃないかなーという印象。

なお、サンプルコードは除きます。
<script>タグの中に、$(function(){});で囲っている領域があるにも関わらず、<script>直下にfunction hoge(){}とか書いていたら要注意です。

どうすればよいか

(function() {
    function hoge () {
        //
    };
})();

ちゃんとスコープ分けましょう。
グローバルに使いたいコードならば、名前空間に押し込みましょう。

参考： 【脱初心者JavaScript】名前空間のイロハ

Warn（8割疑うレベル）

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

これ自体、お決まりのコードみたいなもので調べたいものの本編とは異なる事があるので一概に悪とは言えませんが…少なくとも、jQueryではわりと前から、$(function(){});への置き換えが推奨されていましたし、deprecatedになっているのでいつ削除されてもおかしくありません。

最近の記事でこの記述を見た場合、高確率でコピペである可能性があります。

参考： .ready() | jQuery API Documentation

どうすればよいか

$(function())を使いましょう。

$(function() {
    //
});

new Array(); new Object();

大抵使う意味ないです。問題も起こります。

参考： JavaScriptの配列の生成方法の違い 〜リテラル [] とコンストラクタ new Array() 〜

少なくとも、書いた人がJavaScript: The Good Partsを読んでいないことはわかります。

どうすればよいか

var ary = [];
var obj = {};

リテラルで作成しましょう。
とりあえず機械的にこっち使ってれば問題ないです。

.bind(); .unbind(); .live();

これらも3.0からdeprecatedです。

どうすればよいか

.on() .off()を使いましょう。
.live()も置き換え可能です。

.on()については、第二引数を含めるかどうかで意味合いが大きく変わりますが、
jQueryにおけるイベントのバインドは全て.on()に任せることができるようになります。

参考： jQuery 便利なonを使おう（on click)

.attr('checked', true);　

属性値を持たないcheckedなどの属性の取得や設定にattr()を使った場合、うまく動作しません。
昔はできた時代もあったので…これが書かれているページは古いか、コピペかのどっちかです。

どうすればよいか

属性値を持たないcheckedやdisabledの操作にはprop()を使いましょう。
属性値を持つ属性に対してのみ.attr()を使用します。

また、value class styleは、それぞれ専用のメソッドがあるので、.attr()を使ってはいけません。
それぞれvalueは.val()、styleは.css()、
classに関しては.hasClass() .addClass() .removeClass()を使い分けましょう。

参考： jQueryにおけるattrとpropの違いと使いドコロまとめ

補足

data属性に関しては、.attr('data-foo')と.data('foo')を場合によって使い分ける必要があります。

参考： jqueryのattrとprop（とdataとvalとhtmlとかつまり属性とかの取得）の使い分け一覧

大雑把に言って、.data('foo', 'value')で設定した値は.data('foo')でしか取得できませんし、
.attr('data-foo', 'value')で設定した値は、.attr('data-foo')でしか取得できません。

とりあえずは、dataの扱いは状況によって二種類あると覚えておけばいつか役立つかもしれません。

.attr('class') === 'foo'

classが設定されているか確認するのに、.attr('class')を使うのは適切ではありません。
この形で比較した場合、対象の要素に複数のclassが設定されていた場合にうまく動作しません。2

どうすればよいか

.hasClass()を使って確認しましょう。
他、classの追加や削除も.attr('class')は決して使わずに、.addClass() .removeClass()等の専用のメソッドを使いましょう。

if ($('#elem').attr('class') === 'foo') {
    //BAD
}

if ($('#elem').hasClass('foo')) {
    //GOOD
}

Notice（十分に気をつけたほうがいいレベル）

$.ajax({success::function(){}, error: function(){});

既に古い書き方になっています。

参考: おじさんが若い時はね$.ajax()のオプションでsuccessとかerrorとか指定していたんだよ（追憶）

　どうすればよいか

コメントも含め、上記のページを参考にすると良いでしょう。

$.ajax({
    url: "http://example.com/"
})
.then(
    function (data) {
        //success:の置き換え
    },
    function () {
        //error:の置き換え
    }
);

.click()等

これもとっくにdeprecatedになっているものと思っていたのですが、まだ使えるみたいですね。
個人的には、on()に置き換えたほうが良いと考えています。
on()だと名前空間も使えますしね。

参考： jQuery.fn.onに名前空間をつけることができる

jQueryじゃなくてjquery, Jqueryとか書いてある

元ネタの方にはJavaScriptの綴りについて記載がありましたが…、
もちろん、typoの可能性もありますが、正しくはjQueryです。大文字小文字大切。

プロフィールに本業がデザイナー的なことが書いてある

急に毛色が変わりますが…経験則として。

プロフィールに本業がデザイナーと言うようなことを書いているページに記載されているjQuery(とJavaScript)は間違っていることが非常に多いです。
だいたいは単にコピペして拾ってきた結果でしかありません。34

どうすればよいか？

あなたがエンジニアだと自負していたり目指しているなら、そのまま書いている内容をコピペしないこと。
書いている内容が動いたとして、その意味をわかってから使うこと。
理解すればコピペにはなりません。

その他

ページの見分け方ではないですが、何かしらの既存のソースを読んだ時のレベルをお察しする基準としては、この記事に書いたものの他に以下のようなものがあります。

  • 'use strict';を書いていない
  • jQueryでメソッドチェインを使っていない
    （$("#hoge")で始まる行がたくさん続いている等）
  • 全ての比較演算子が===じゃなくて==を使ってる
  • HTMLの中にやたらJavaScriptを書いている

参考： JR東日本アプリが重すぎるので解析ようとした件 に貼っているURLのjsとかhtmlとか

迷わないために

困ったときはMDN

JavaScript本体で困ったときは、MDNを読むのが確実です。
他の日本語文献で引っかかった情報も、必ずMDNで裏付けを取るべきです。
これだけで下手な情報に惑わずに済みますし、MDNにはバージョンもちゃんと書いています。

jQuery API Documentationを読む

上記に同じく、jQueryについてもできるだけ公式リファレンスで裏付けを取るべきです。
semoohは読みやすいし、謎の生物は可愛いし良かったんですけどね…情報がそろそろ古すぎて。

JavaScript: The Good Partsを読む

元記事でも言及されていますが、そんなに高くない本だし内容も読みやすいので、JavaScriptを書くことがあるのなら一読しておくべきです。

  1. 『onclick使わないとできないです』って言われたことがあるんだけど、そんなことない ↩

  2. ちなみに、要素に複数のクラスが設定されていることを考慮して、.attr('class')で取得した値に更に正規表現で確かめているコードを見たことがあります…なぜそこをがんばった。 ↩

  3. 本業デザイナの方の気に障ったらすみません…。実際、私よりコードの書けるデザイナさんにも出会ったことはあるので全てがそうだとは思いませんが、何にせよ「エンジニアなら安易にコピペすんな」が言いたいことです。 ↩

  4. ついでに「デザイナはコードを公開するな」でも無いですよ、念のため。良いかどうかは主観ですので、誰かの役に立つ可能性を捨てるのは勿体無いです。 ↩

241
263
8

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
241
263

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?