メインコンテンツを読む

JavaScript / jQuery 自分の使い方

category: カテゴリーA

[Web制作勉強会@川西市](http://hokusetsu-webcreators.net/)用資料。JavaScript関連で自分はこんな風にしてるよ、ってのを書き出しました

jQuery 基本

  • IE8以前を切り捨て軽量化した jQuery 2.x が出ているが、IE8はまだ切れないので現状1の最新版(1.11.x)を使用
  • 次バージョン：「jQuery 2.x→jQuery 3.0」「jQuery 1.x→jQuery Compat 3.0」に - Publickey
  • キャッシュによる高速化が見込めるCDN(Google API or jQuery公式)のものを使用。読み込めない時のフォールバックを用意
  • jQuery本体の読み込みタグは静的サイトならbody閉じタグ直前に配置。WordPressはプラグインとの兼ね合いで冒頭に置いた方が無難か？
  • 最新版の方が軽くて早いのでなるべく最新版を使いたい (でも古いバージョンのまま放置しているサイトもあるのが現状)
  • 古いサイトのメンテで1.9以降切り捨てられたAPIが使われている場合は jQuery Migrate プラグインを入れると良い
  • jQuery互換で早くて軽いというZeptoがあるが、リスク(なんか不安、jQueryプラグインが動かない場合があるらしい)を避け使っていない。CSSフレームワークのFoundationやクックパッドスマホ版など実用例はある
  • jQueryプラグインは、plugins.js に統合することでHTMLをスッキリさせHTTPリクエストを減らせる。圧縮するとなお良い(plugins.min.js。gulpなどの自動化ツールを使う)
  • WordPressで最新版jQueryを読み込む場合。WordPressに元から組み込んであるものは外すこと
  wp_deregister_script( 'jquery' );
  wp_enqueue_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js', array(), '20130115', true );

modernizr

  • ブラウザの機能サポート状況(HTML5、CSS3)を判定し分岐処理ができる
  • HTML5未対応ブラウザにHTML5タグを認識させる HTML5-Shiv を含む
  • リサイズ時にドキュメントの幅を取得する機能 (= window.matchMedia()) が付いてる
  • 設置場所は headタグ内
  • 本家サイトで機能を付け加えたりのカスタマイズができるが、メンテナンスを考えるとデフォルトのものを使うのが良いと思う
  • 基本的な使い方：modernizr.js の機能と利用方法 - LIG
  • 判定可能な機能(※ハイフン等書き方に注意)：Modernizr Documentation
  • これも読み込めない時のフォールバックを用意

例1：ブラウザに実装されている機能を判定しクラスを付加

modernizer適用前

<html class="no-js">

modernizer適用後。これでCSS等で分岐処理可能

<html class="js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths"

例2：JavaScript中で現在のブラウザが指定の機能を持つか判定して分岐処理

if (Modernizr.geolocation) { //Geolocation API に対応しているかチェック
  //対応してる時の処理
}
else {  
  //対応してない時の処理
}

throttle と debounce

ともに必要以上のイベント発生を抑えるのに使用。scrollやresize時のイベントによく使う。 throttleは、実行間隔をnミリ秒に抑える。例えば、scroll時のイベント発生を◎ミリ秒ごとに抑えるなど debounceは、nミリ秒、繰り返しの呼び出しをさせない(= 入力がストップしてnミリ秒経ったらイベント発生)。例えば、resize操作完了後◎ミリ秒たったらイベント発生させるなど。 Underscore.js の関数か、jquery.ba-throttle-debounce.min.js を使うとシンプルに書ける
自分は便利なメソッドてんこ盛りのUnderscore.jsを標準で入れるようにしたので、Underscore.jsのものを使う

Underscore.js のメソッドを使用

underscore-min.js は 16KB

構文

_.throttle(function, 500);//引数：関数, ミリ秒
_.debounce(function, 500);

実装

適用前

$(window).scroll(function(){
  //処理
}

適用後) 例：スクロールイベントで使用時

$(window).scroll(_.throttle(function(){
  //処理
}, 500));

jquery-throttle-debounce を使用

jquery.ba-throttle-debounce.min.js は731バイト

実装

適用前

$(window).scroll(function(){
  //処理
}

適用後 (500ミリ秒ごに処理)

$(window).scroll($.throttle(500, function() {
  //処理
}));

現在のページTopに戻る & ページ内スムーススクロール

ページ内スムーススクロール & ページ上部へ戻るボタン（要jQuery）

上記のthrottleを使用

横に並んだブロック要素の高さを揃える

自分は Equal Height Blocks in Rows - CSS-Tricks をウインドウリサイズ時にも対応するよう改良したPure JavaScriptのものを使用

jQuery プラグイン

ポリフィル (polyfill) 色々

古いブラウザにモダンブラウザのみで動く機能を追加させる ただし処理が重くなるので極力使用しないことが望ましい

  • iscroll, iscroll-lite スマホで position: fixed
  • picturefill picture要素やimgのsrcset/sizes属性指定などを使えるように(Chrome, Opera以外)
  • PIE_IE9.js, PIE_IE678.js border-radius, box-shadow(insetは非対応), 複数の背景 ,border-image, 背景グラデーション ※IE9は後者2つのみ
  • rem.min.js IE8 以下でもフォント単位 rem が使えるように
  • respond.min.js IE8以下でレスポンシブ対応させる
  • selectivizr (IE8以下でCSS3セレクタ使用できるように)

以下、IE8以下非対応なら不要

  • minmax IE6以下でmin-width,max-width, min-height , max-heightを利用可能に。IE6切り捨てるなら不要
  • boxsizing.htc IE7以下でbox-sizingを使えるように
  • imgSizer (IE7以下で画像の荒れを防ぐ)
  • jquery.exfixed IE6で position:fixed

備考：画像遅延ロードの Lazy Load は使わない

サンプル：HTML中でのJavaScriptファイル読込み

<!-- * * * * * * * * * * head タグ内に設置 * * * * * * * * * * * * -->

  <script src="../js/vendor/modernizr-2.8.3.min.js"></script>



  <!-- * * * * * * * * * * body閉じタグ直前に設置 * * * * * * * * * * * * -->


  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script>window.jQuery || document.write('<script src="../js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
  <script src="../js/plugins.minjs"></script><!-- jQueryプラグイン等を統合したもの -->
  <script src="../js/main.min.js"></script><!-- Google Analytics のトラッキングコードも入れること -->


  <!-- * * * Polyfils * * * -->

  <script>
    //Androidの場合のみ iscroll-lite.js を読みこませる
    if(/Android/.test(navigator.userAgent)){
      $('script').attr('src','../bower_components/iscroll/build/iscroll-lite.js').appendTo('head');
      //alert('テスト：iscroll-lite.jsを読み込みました。');
    }
  </script>


  <!--[if IE 9]>
  <script src="../js/vendor/PIE_IE9.js"></script>
  <script>
    /**
     * サポート：border-image, 背景グラデーション
     */
    $(function() {
      if (window.PIE) {
        //$('.class_name').each(function() { PIE.attach(this); }); //★★適用させたい要素を指定
      }
    });
  </script>
  <![endif]-->


  <!--[if IE 8]>
  <script src="../js/vendor/selectivizr-min.js"></script>
  <script src="../js/vendor/respond.min.js"></script>
  <script src="../js/vendor/PIE_IE678.js"></script>
  <script>
    /**
     * サポート：border-image, 背景グラデーション, 複数の背景, border-radius, box-shadow(insetには非対応)
     */
    $(function() {
      if (window.PIE) {
        $('.button, .label, article h2, .pagetop a').each(function() { //★★適用させたい要素を指定
          PIE.attach(this);
        });
      }
    });
  </script>
  <![endif]-->

</body>
</html>