2017年jQueryを取り巻く状況

旧IE（Internet Explorer）のサポート終了、ES2015の登場、ReactやAngularなどのフレームワークの普及により、Webフロントエンド開発において「脱jQuery」の動きが加速していると思っていましたが、以下の記事によると、（アンケートに答えた）フロントエンドエンジニアの70%が現在のプロジェクトでまだjQueryを使っているとのことです。

• 5000人調査でわかった！世界のフロントエンド開発者が使うツールはこれだ – WPJ

記事で紹介されているAshley Nolan氏によるアンケートの結果は以下の通りです。

やはりそうなんだなといった感想です。結局ReactやAngularなどのフレームワークの学習コストを考えると、すでに使える人が多いjQueryをプロジェクトに採用するのは至極当然のことではありますね（自分はReact派なので複雑な気持ちですが…）。それにjQueryが登場して10年くらい経つので、これまでの間に作られた膨大なjQuery案件が残っていますからね。

ということで、まだまだjQueryを使わなくてはいけない方は、jQueryのリリース内容を追う必要があるかと思うので、簡単にjQuery 3.2のリリース内容をまとめました。。詳細については以下の公式ブログでご確認ください。

• jQuery 3.2.0 Is Out! | Official jQuery Blog

jQuery 3.2の主なリリース内容

それでは、早速jQuery 3.2のリリース内容を紹介していきます。

CSSのカスタムプロパティがサポートされました

jQuery 3.2の目玉となるのがこの「CSSのカスタムプロパティ」のサポートでしょう。カスタムプロパティとは、自分で好きなプロパティを作れる機能です。変数のような使い方が可能です。

• CSSの変数を使う – CSS | MDN
• カスタム・プロパティ (–*) – CSS | MDN

CSSカスタムプロパティを定義する際のルールは以下のようになっています。

CSSカスタムプロパティの使用例です。

:root {
  --space: 8px;
}
 
section {
  margin: var(--space);
}
 
@media (min-width: 728px) {
  :root {
    --space: 32px;
  }
}

今回のjQuery 3.2によるCSSカスタムプロパティのサポートにより、以下のような処理が可能となりました。

<div style="--color: green; color: var(--color)">text</div>

<script>
$('div').css('--color') ; // =>'green'を返します
$('div').css('--color', 'blue') ; // => 'green'から'blue'に変更します
</script>

<template>要素が.contents()メソッドに対応しました

.contents()メソッドは、対象の要素のテキストノードを含めたすべての「子要素」を取得するためのメソッドです。

<template>要素はWeb Componentsなどで使用される要素です。<template>要素でマークアップしたDOMは、ページ読み込み時には描画されず、JavaScriptの処理でページに挿入するような用途で使用します。

• <template> – HTML | MDN – Mozilla Developer Network

以下のように.contents()メソッドでtemplate要素以下の子要素を取得することができるようになりました。

<template id="template">
  <div id="template-div0">
    <div id="template-div00"></div>
  </div>
  <div id="template-div1"></div>
  <div id="template-div2"></div>
</template>

<script>
var contents = jQuery("#template").contents();
console.log(contents);
//=> Object { 0: #text "
//     ", 1: , 2: #text "
//     ", 3: , 4: #text "
//     ", 5: , 6: #text "
//     ", length: 7, prevObject: Object[1] }
</script>

廃止予定となったプロパティやメソッド

以下の3つのプロパティ、メソッドがdeprecateとなりました。

バグフィックス

.width()メソッドや.height()メソッドなどCSS transformにおいて計算が伴うメソッドのバグが修正されました。

transform：scale(2x)というスタイルを指定した場合、widthとheightの値が2倍となるバグがありました。

• different result of width() and height() since jQuery 3.0 · Issue #3193 · jquery/jquery

まとめ

冒頭でも述べたように、まだまだjQueryは廃れそうにありません。今後もプロジェクトで使う機会は多々あるのではないでしょうか。従ってjQueryの進化も引き続き追っていく必要がありますね。当記事を参考に、jQuery 3.2のリリース内容をチェックしてみてください。