「jQuery 3.2」リリース内容まとめ

本日3月17日にjQueryの最新バージョンとなる「jQuery 3.2」がリリースされました。まだまだjQueryを使っている方も多いということなので、リリース内容について紹介したいと思います。

jQuery_3_2

2017年jQueryを取り巻く状況

 

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

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

jQueryを取り巻く環境

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

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

jQuery 3.2の主なリリース内容

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

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

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

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

  • カスタムプロパティの頭には必ずをつけます
  • 定義したカスタムプロパティの値はvar(–○○)で取得します

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の処理でページに挿入するような用途で使用します。

以下のように.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となりました。

  • jQuery.holdRead: readyイベントの実行を保留したり解除したりするメソッド
  • jQuery.nodeName: 要素名を取得するプロパティ
  • jQuery.isArray: 引数で渡された値が配列であるかどうかを判別するメソッド

バグフィックス

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

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

まとめ

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

コメント一覧

  • 必須

コメント