こんにちは、ライターのマサトです！
今回は、ウィンドウサイズを変更した際に特定の処理を実行することができる「resize()」メソッドについて学習をしましょう！
この記事では、
・「resize()」とは？
・「resize()」の使い方
という基本的な内容から、
・「resize()」の注意点
・jQuery UIの「resizable」について
などの応用的な使い方に関しても解説していきます。
この記事で、「resize()」メソッドをしっかり学習して自分のスキルアップを目指しましょう！
「resize()」とは？
まずは、「resize()」について基本的な知識から学習を進めていきましょう！
「resize()」は、ブラウザのウィンドウサイズをマウスで変更した際に特定の処理を実行することができるメソッドになります。
一番のメリットはウィンドウサイズが変化したことをjQuery側で把握できるという点です！
これにより、例えばWebページをサイズの変更に合わせてデザインを最適化するような処理を実行できるわけです。
使い方次第では、jQuery側でウィンドウサイズの変更似合わせてCSSを制御することでレスポンシブデザインのような挙動も実現できます。
本記事では、「resize()」の基本から応用技までまとめて学習できるように構成しているのでぜひ参考にしてみて下さい！
「resize()」の使い方
この章では、「resize()」の基本的な使い方について見ていきましょう！
一般的な構文から実際のプログラミング手法について学んでいきます。
基本的な構文と書き方について
まずは、最も基本となる構文について見ていきましょう！
「resize()」はウィンドウサイズの変化を検出するメソッドなので、windowオブジェクトに対して実行することになります。
$(window).resize( 関数 )
引数の「関数」へサイズが変更された時に実行する処理を記述するのが基本となります。
これにより、ブラウザのウィンドウサイズが変更された瞬間に引数へ指定した「関数」が実行されるわけです。
ウィンドウをリサイズした時に処理を実行する方法
それでは、「resize()」を使った実際のプログラミング手法について見ていきましょう！
例えば、ウィンドウサイズを変更した際にコンソールへ文字列を出力するには次のように記述します。
$(window).resize(sampleEvent);
function sampleEvent() {
console.log('サイズが変更されました！');
}
この例では、windowオブジェクトに対して「resize()」を実行しているのが分かりますね。
そして引数に指定した関数内でコンソールに文字列を出力する処理を記述しています。
ちなみに、関数はイベントオブジェクトを引数に受け取ることが可能です。
そのため次のような記述もできます！
$(window).resize(sampleEvent);
function sampleEvent(e) {
console.log(e.target.innerWidth);
}
イベントオブジェクトに対して「target.innerWidth」を指定することで、ウィンドウの横幅を取得することができます。
このようにイベントオブジェクトにはさまざまなプロパティがあるので、いろいろ試してみるのも面白いでしょう。
無名関数を利用する方法
resize()の引数に指定する関数は「無名関数」でも同じように機能します。
関数内の処理がシンプルなものであれば、無名関数を使ったほうが効率よく記述することができます。
例えば、先ほどコンソールへ文字列を出力するサンプルを無名関数で記述すると次のようになります。
$(window).resize(function() {
console.log('サイズが変更されました！');
});
特徴的なのは、resize()の引数へ直接関数を記述している点です！
このように記述すれば、resize()と関数の処理が1つにまとまるのでコードの読みやすさと効率が良くなります。
通常の関数指定と無名関数を使う方法それぞれに慣れておくと良いでしょう！
「resize()」の注意点
この章では、resize()を使う上で知っておくべき注意点についてご紹介しておきます。
主に、対象となる要素（windowオブジェクト）について学んでいきます。
window以外の要素では使えない
これまで「resize()」を使う際に、Windowオブジェクトを対象としてきました。
これは、resize()がウィンドウサイズの変化に合わせて機能することに起因しているためです。
そのためWindowオブジェクト以外を対象にすると機能しないのですが、試しに異なる要素を指定してみましょう！
$(document).resize(function() {
console.log('サンプルテキスト');
});
この例では、Windowオブジェクトではなく「document」を対象にしているのが分かりますね。
実際にウィンドウサイズを変更すると分かりますが、コンソールには何も出力されていないことが確認できます。
もちろん、他のHTML要素を対象にしても同様です。
つまり、Windowオブジェクト以外を対象にすると想定通りの動作をしないことを意味しています。
また、特にエラーメッセージなども出力されない点に注意しておきましょう！
jQuery UIの「resizable」について
「resize()」とよく似た性質を持っている「resizable()」についても合わせて解説をしておきます！
「resizable()」は、jQueryでWebのUIを簡単に構築できる「jQuery UI」で利用できるメソッドなのがポイントです。
「resize()」がウィンドウサイズの変更による処理なのに対して、「resizable()」はHTML要素のサイズ変更による処理を実現できます。
使い方としては、以下のようなjQuery UIのCSSとJavaScriptファイルをHTMLに挿入するだけで利用できるので簡単です。
例えば、次のようなHTML要素があるとします。
<div id="resizable" class="ui-widget-content">
<h1>サンプルタイトル</h1>
<p>テキストテキストテキストテキスト</p>
</div>
これは、div要素に囲まれた「h1 / p」要素を含めた単純なHTMLです。
div要素のclass属性はjQuery UIによる専用の属性値になります。
このdiv要素に対して「resizable()」を実行することで、自由にサイズを変更することが可能になります！
$( "#resizable" ).resizable({
stop: function() {
console.log('サイズが変更されました！');
}
});
この例では、div要素(#resizable)に対してresizable()が実行されているのが分かりますね。
引数にはオプション指定が可能で、「stop」プロパティに関数を記述するとサイズ変更後に処理を実行することが可能です。
他にも複数のオプションが用意されており、用途に応じて簡単にカスタマイズできるのが特徴でしょう。
＜参考＞
・「jQuery UI」のresizableページ
まとめ
今回は、jQueryからウィンドウサイズの変更に応じた処理を実行できる「resize()」について学習をしました！
最後に、もう一度ポイントをおさらいしておきましょう！
・windowオブジェクトに対してのみresize()は実行することができる
・resize()の引数に関数を指定することでサイズ変更に応じた処理を実行できる
・jQuery UIのresizable()はHTML要素のサイズ変更に応じた処理を実行できる
上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう！
