このページの本文へ

Web開発者の私が「jQueryダイエット」に取り組む理由

2017年02月07日 04時52分更新

文●James Hibbard

  • この記事をはてなブックマークに追加
本文印刷
2017年に入って1カ月が過ぎ、新たな目標にチャンレジしている人も多いでしょう。SitePointのJavaScript担当エディターのJamesは、「jQueryダイエット」に取り組むことを決めたようです。

2016年はJavaScript界にとってクレイジーな1年でした。ES6対応やプログレッシブウェブアプリの増加が見られました。また、Yarnがnpmの競合として登場し「JavaScript疲れ」が問題になりました。見逃した人や、思い出にふけりたい人のために、おさらいをします。Craig Bucklerは2016年の出来事を『JavaScriptの2016年:フロントエンド開発者が押さえるべき重大トピック』で紹介しています。とてもよく書かれています。

2017年について考えるとき、次の2つの問いが頭に浮かびます。昨年のようにまたクレイジーな1年になるのか、そして、365日、毎日キャッチアップを続けなければならないのかです。

最初の問いの答えは「ほぼその通り」です。しかし、2番目の問いは、少し複雑です。なにを知っておかなければならないのかは、その人の状況次第でかなり変わってきます。たとえば、転職しようとしている、現状のプロジェクトの生産性をあげたい、もしくはすでに知っている技術に匹敵するような新しい技術をチェックしたい、といった状況です。

もし、新しい技術をチェックしたいのなら、ぴったりな記事がすでにあります。Tim Severienが今年はじめて書いた『脱「JavaScript疲れ」のために注目すべき、3つの最新ライブラリー』です。この記事を読んで、Timの選択(ネタをバラすと1つはVue.js)に賛成かどうかをコメントすることをおすすめします。

2017年はjQueryダイエット

私はと言うと、2017年のゴールをjQueryの使用を減らすことにしました。別にいきなりアンチjQueryの流行に乗ったわけではありません。違います。むしろjQueryは登場した時点ですばらしすぎたので、いまでも迷うことなく使っています。jQueryのおかげで、ブラウザーのサポートも考なくなりました。

実際に、jQueryダイエットは実践し始めています。たとえば、最近、直前の親要素(アンカータグ)を選びたい場面がありました。

jQueryでは$el.closest("a")と書けば問題ありません。しかし、素のJavaScriptでどのようにすればよいか、分かりませんでした。そこで、youmightnotneedjquery.comで「closest」を検索しましたが、結果はゼロ件でした。

自分で考えた結果、以下のような解決策を思いつきました。

while (el.parentNode.tagName !== 'A') {
  el = el.parentNode;
}

これで動きましたが、とてもひどいコードです。検索するとFirefoxとChromeがelement.closest()をデフォルトでサポートしていることが分かりました。まさに知りたかったことです。ミッション完了です!

jQueryを実験的なブラウザーの機能で置き換えることは、明らかに良い選択ではありません。古いブラウザーとの互換性を気にしているのであれば、jQueryで即決です。jQueryを置き換えるために検索して時間を使うことは生産的ではありません。

しかし、今でさえ、標準のDOMの一部を操作するために、多くのWebサイトが大量のJavaScriptをダウンロードしています。ここにメスを入れることで、モダンなブラウザーに詳しくなれます。これが2017年の真の目標です。

みなさんは、この365日、なにに注目して過ごすのでしょうか。新しいフレームワークを学ぶ、フレームワークを選択する、Nodeにチャレンジする、ミートアップに参加したりオープンソースに貢献したりと、いろいろな計画があるのかもしれませんね。

※この記事は最新のSitePointのJavaScriptのニュースレターを編集したものです。

(原文:Editorial: What Do You Want to Learn in 2017?

[翻訳:萩原伸悟/編集:Livit

Web Professionalトップへ

WebProfessional 新着記事