イノベーション エンジニアブログ


株式会社イノベーションのエンジニアたちの技術系ブログです


このエントリーをはてなブックマークに追加

きっと明日から役立つ!jQueryの書き方

こんにちは、中村です。

先日Vue.jsについての記事を書いたばかりですが、結局日々の業務ではjQueryしか触っておりません。。。

まぁBtoB向けのサービスなので、IE7対応を求められてしまったりするのでしょうがないですね!
個人的に少しずつ勉強していこうと思います(キリッ!

ちなみにjQueryは特にシンプルに記述するように心がけないと、すぐコードが煩雑になってしまいメンテナンスがとても大変になってしまうと思います。

今回は良くあるケースでHTMLとJavaScript共にシンプルかつ意味のあるコードになるような例を紹介しますので、是非参考にしてみてください。

何度も$(function() { を書いてる

例えばこんな感じ。

ライブラリをどっかから持ってきたときとかにやってませんか? 無駄なのでまとめて書きましょう!

$(this)を使っていない

これもたまに見かけます。
$(this)を使えば対象の要素(今回だとクリックされた要素)を簡単に指定でき、無駄にidやclassを指定せずに済むので積極的に使いましょう。

複数行に分けて記述している

1行で書けるものは書きましょう。

一度全て〜してから対象だけ〜する

例えばあるdivをクリックするとそのdivだけ赤色になり、その他はグレーになるような機能を実装する場合。

一度全ての背景色をグレーにする必要はないので、自分以外の兄弟を全て指定する「siblings()」を使いましょう。

全ての指定をid もしくは class で行っている

例えばテーブルのチェックボックスにチェックを入れたら、その行の背景色を変える機能を実装する場合。
(実際DBからデータを取得し、サーバサイドにてループ処理を行い描画することもありこんな感じで記述していました…)

HTML側の記述がどうしても複雑になってしまうので、相対的に指定するようにすると良いと思います。

jQuery側の記述だけ見ても何したいのかが理解できていいですね!

2階層以上の親要素にある兄弟要素を指定したい場合

例えば以下のようなHTMLにて、「お問い合わせする」ボタンをクリックすると、class="result"のtdに「お問い合わせありがとうございます」と表示させるような場合。

先ほどの例と同じく「parents()」を使って親要素を特定し、さらに「find()」を使って兄弟要素を指定すると綺麗に書けます。

まとめ

いかがでしたでしょうか。
前半はさておき、セレクターをなるべく相対的に記述することがポイントかなと思っています。

シンプルかつ意味のあるコードを書くことで、拡張性と保守性を高めることができますので是非参考にしてみてください。

こちらからは以上です!