Simplicityを少し改造してみた 番外編 part21 jQueryとJavascript関数を併用する

もうね、jQueryだけならまだしも「JavaScriptと言う言葉を聞くだけで拒絶反応を起こす」と言うのはとても良くわかります。なんせJavaScript脳と言うのがあって、普通はそうは書かないだろう?と言うようなことを平気で書いてしまうような場合があって、それは何をしてるの?と言うことも多々あります。
わかりにくくもあり、わかりやすくもあり、また色んなライブラリがあって何とかして楽に書きたいと言う気持ちがわからなくもない、それがJavaScriptです。

まぁしかし、僕が書くようなものはそれほどややこしいことは書きませんし、また書けませんので気負いすることもありません。

今回は、jQueryの便利な操作と、自作した便利なJavaScriptの関数を併用するにはどうすればよいかということを書いてみようかと思います。

まず即時関数。
はい、出た、こういう未知の言葉が出てくると急にやる気を無くしてしまう。とても良くわかります。けどまぁそんなたいそうなものではないです。

即時関数とは、

「一回だけ必要な処理を、グローバルスコープを汚染せずに実行する方法」

と言う感じで言われますが、もう面倒臭いので、wordpressとかでjQueryを使う時に$を使う方法と覚えておいて下さい(笑)他のライブラリでも$を使うので、$はjQueryなんだよと決めつけるためのものだと知っておけばわかりやすいかと。
例えばこんな感じで使います。

$(function(){…})の部分、これはつまり、jQuery(function(){…})と言う感じで、jQuery(document).ready(function(){…});の省略形です。ドキュメントの準備ができたらその中のfunction(){…}の処理をする。と言うことなので、書いてあるまんまですね。つまり、

こういうことになって、$はjQueryとして使います。と言う意味合いです。ひとまずここらがわかればもう成ったも同じです。

jQueryは便利だけども、毎回何かしらの処理を書くのが面倒くさい

はい、出ました。「面倒くさい」。これはプログラマーが常々対面している一番最初の感情です。何かするのが面倒くさいからスクリプトを書こう。この処理何度もやってるからひとまとめにしてしまおう。つまり、面倒くさいから面倒くさくないようにする、そのための面倒には文句を言わない。これがプログラマーというものです。

See the Pen jQueryとjavascriptの関数を併用する by Hidekichi (@Hidekichi) on CodePen.

このサンプル上では何も動作しませんので、エディター画面か、フル画面で試してみて下さい。

jQueryで、例えば何かしらスクロールした時の処理を書く場合、あるいはブラウザをリサイズした時の処理を書く場合にJavaScriptのsetTimeout()を使って、スクロールが終わった時だけ、リサイズが終わった時だけ処理をさせるという方法がよく取られます。
これらはスクロール中にも、リサイズ中にも処理が行われるので確実に最中のイベントも取得して処理させる必要がある場合はそのまま使えばよいですが、たいていの処理の場合はイベント(スクロールやリサイズ等)が終了してからやる方が重くならずにムダな処理を省けます。

JavaScriptで、「scroll、resize等のイベント時に処理の連続実行を防ぐタイマー関数(jQuery未使用版)」と言うのをjstarted.comさんのサイトで見つけました。以下がそれです。

使い方としては、

このようにすれば良いだけなのですが、例えば、

こう書けば、この即時関数内であればdebounceは利用できます。しかし、この後にまた別のjQueryの処理をするとして、また、

このようにして追加すると、使えません。即時関数内で定義された関数はその即時関数内でしか利用できないのです。これがいわゆるグローバルスコープを汚さないと言う事にもつながります。では、どうすればよいかですが、勘の良い方ならもうお気づきでしょう。

こういうことなのです。そもそもjQueryもdebounceと同じように、ヘッダーあるいはフッターで外部CDNやローカルファイルから読み込んでいるに過ぎません。jQueryでできるんだから他の関数でもできるって寸法です。
これなら、

このようにして行けば、違うスクリプトの処理でも同じようにdebounceが利用できるようになります。スクロールやリサイズ等のイベント終了時に何かさせたいというのは結構頻繁に使いますから、何度もその都度debounceを書き込むのは非効率です。なので、こういう感じに便利な関数があれば、それらを利用したい即時関数のスコープ内で実行できるように読みこめばとても便利に使えます。

Simplicityで言うと、追従スクロールバーや、追従シェアバー、あるいはカスタマイズするのであればグローバルナビなどで、ブラウザ幅が一定のサイズに成った時に、ヘッダー下からパネルにメニューを移動させるとか色んな所に応用できます。

これらのサンプルはまた書いてみたいと思います。

追記 2016/05/31 22:00
以前作った「Simplicityを少し改造してみた 番外編 part19 トップへ戻るボタン付近にボトムスクロールボタンを追加」(以下ブログカード)のサンプルを変更してver2を作ってみた。

Simplicityを少し改造してみた 番外編 part19 トップへ戻るボタン付近にボトムスクロールボタンを追加
2016/05/25 ターゲットを超えた時にアイコンをローテーションする機能追加(全く不必要(笑) 2016/11/02 スクリプトを一部...

See the Pen トップへ戻るボタンにボトムダウンボタンを追加ver2 by Hidekichi (@Hidekichi) on CodePen.

なんてことはなく、今回のdebounceを取り入れて、これまでjQueryで、

と書いていたのをそれぞれに変更しただけのもの。このように簡単に変更できる上に、setTimeoutを書かなくても良くなるというのはとても便利だ。

まぁ別に、var debounceが即時関数の外にあるなら、わざわざdebとしてjQuery同様にしなくても、var deb = function()として定義しておけばよいだけで、どの即時関数でも使えるんですけどね(笑)

さらっとこれまで書いてきたことを否定するという潔さ(笑)

スポンサーリンク

シェアする

フォローする