破綻しない jQuery コーディング

時代は一周まわってjQueryなんですよ。わかりますか？私はわかりません。
これは私がjQuery使うならこう書くし指導する、という記事です。

selectorの変数化は1つだけ

出典はよく分からないんですが、selectorやDOMを全部変数化する文化がそこかしこにあるようです。

// selectorを定数化
var HOGE = '.hoge';
var FUGA = '.fuga';

// jQueryで取得
var $hoge = $(HOGE);
var $fuga = $hoge.find(FUGA);

// なにかしらの処理
$fuga.html('٩( ᐛ )و');

定数化はいいことなんですが、DOM要素においてはroot要素のみ変数化しておく方が保守しやすいです。

// モジュールのrootとなる要素のみ変数化
var $container = $('.hoge');

// 都度findする
$container.find('.fuga').html('٩( ᐛ )و')

これのいい所は .fuga を検索したときに、ちゃんと .fuga が検索に引っかかるところですね。

SEO無関係なDOMはJSで作る

SEOが絡むとserverでレンダリングしないといけないですが、関係ない部分はJSで作った方が影響範囲をより閉じ込められるのでいいです。

// シンプルにDOMを作る
var $container = $('\
  <div class="container">\
    <ul class="hoge">\
      <li>Hello</li>\
      <li>World</li>\
      <li class="fuga">!</li>\
    </ul>\
  </div>\
');

// なにかしらの処理
$container.find('.fuga').html('٩( ᐛ )و')

改行をエスケープすると結構見やすく文字列作れます。この方がモジューラビリティが高まるのでいいと思います（テンプレートリテラル使える環境の方はテンプレートリテラルでどうぞ）。こだわってappendとかで頑張ってDOM構築する人もいますが、早すぎる最適化なのでパフォーマンスが問題になったときにチューニングすればOKです。

selectorを乱用しない

parentやclosestなど、子から親に向かったセレクタを使い始めると地獄がダンスってしまいます。

$('.hoge').closest('.container').find('.fuga').html('<li>地獄</li>')

親から子をfindするようにした方がいいです。

$('.container').find('.fuga').html('<li>٩( ᐛ )و</li>')

複雑になってきたときparentやclosestを使ってしまいそうになったら、きっと設計がマズいので、身近なJSマスターに設計の相談をしましょう。

DOMにデータを持たせない

DOMの状態を参照して、その状態に応じて何かしらの処理を書くパターンもよく見られます。しかしそれって「DOMが状態を持つ」ということなので、状態がいろんなところに散って保守しずらいコードになります。

// DOMの状態をもとに処理をする
var isActive = $('.hoge').hasClass('active')
if (isActive) {
  $('.fuga').html('active')
}

状態は1ヶ所に集約されていた方がコードが綺麗になるので、基本はJSで状態を持って、JSでその状態を変更し、その状態に応じてDOMを変更した方がいろんな処理がスッキリ書けることが多いです。

// JSの状態をもとに処理をする
var isActive = true;
if (isActive) {
  $('.hoge').addClass('active');
  $('.fuga').html('active')
}

Babelで最新のJS構文を使う

で、出〜〜〜！！Babel〜〜！！と妙に拒否反応を示す人もいるかもしれませんが、Babel使うだけならwebpackやgulpは必要ありません。node入れてbabel-cliでコンパイルするだけです。

npm install -g @babel/core @babel/cli
babel foo.js --out-file foo.compiled.js

実際にはglobal installはしないですけども、とくに複雑なことをせずとも、ただ単純にBabelを通すだけでOKです。gulpやgruntを使っているなら、そのbuild処理にBabelを混ぜ込むだけです。たったこれだけで最新JS構文使えるBabelお得じゃありませんか？

無理せずReactを利用する

ReactってViewライブラリ（マサカリ飛んできそう）なので、実はjQuery感覚で気軽に使えるんですよね。Babelを使えるプロジェクトなら大丈夫！簡単です！

npm install -g @babel/core @babel/cli babel-preset-react-app
NODE_ENV=production babel foo.js --out-file foo.compiled.js --presets=react-app

Reactで必要になるJSXを使うためには、Babelの設定をちょっと追加してコンパイルすればよくて、あとはReactとReactDOMを外部から読み込んでおけばOKです

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/cjs/react-dom.production.min.js"></script>

これだけでReactが使える環境が整いました。簡単ですよね。状態が入り混じりがちなコードになったとき無理してjQueryを使う必要はなくて、サクっとReact使えばOKです。（実際はReactよりもファイルサイズの小さいpreactを使うといいかもしれません！）。

それから私としては、jQueryとReactが入り混じっていても全然気になりません。だって用途が違うんですもの。VueとjQueryが共存できる理由と同じです。

以上！それでは！