【jQuery入門】resize()によるウィンドウリサイズの方法まとめ!

こんにちは、ライターのマサトです!

今回は、ウィンドウサイズを変更した際に特定の処理を実行することができる「resize()」メソッドについて学習をしましょう!

この記事では、

・「resize()」とは?
・「resize()」の使い方

という基本的な内容から、

・「resize()」の注意点
・jQuery UIの「resizable」について

などの応用的な使い方に関しても解説していきます。

この記事で、「resize()」メソッドをしっかり学習して自分のスキルアップを目指しましょう!

「resize()」とは?

まずは、「resize()」について基本的な知識から学習を進めていきましょう!

「resize()」は、ブラウザのウィンドウサイズをマウスで変更した際に特定の処理を実行することができるメソッドになります。
jquery-resize-img1
一番のメリットはウィンドウサイズが変化したことを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('サイズが変更されました!');
    
  }
});

jquery-resize-img2
この例では、div要素(#resizable)に対してresizable()が実行されているのが分かりますね。

引数にはオプション指定が可能で、「stop」プロパティに関数を記述するとサイズ変更後に処理を実行することが可能です。

他にも複数のオプションが用意されており、用途に応じて簡単にカスタマイズできるのが特徴でしょう。

<参考>
「jQuery UI」のresizableページ

まとめ

今回は、jQueryからウィンドウサイズの変更に応じた処理を実行できる「resize()」について学習をしました!

最後に、もう一度ポイントをおさらいしておきましょう!

・windowオブジェクトに対してのみresize()は実行することができる
・resize()の引数に関数を指定することでサイズ変更に応じた処理を実行できる
・jQuery UIのresizable()はHTML要素のサイズ変更に応じた処理を実行できる

上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう!

「プログラミング、右も左もわからない…」という方にオススメ

当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。

その経験を通してプログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。

侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。

cta_under_bnr

「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。

書いた人

マサト

フリーランスのIT系ライターを10年従事する兵庫県出身の40歳。侍ブログ編集部としては、これまで270記事以上を執筆。
30歳を過ぎてから独学でJavaScript, Node.js, Linuxを習得した経験を活かし、初心者が迷わない記事作成を意識しながらプログラミングの楽しさを知ってもらうために活動しています。趣味はキャンプと登山です。

おすすめコンテンツ

まずはここから!初心者でも1から学べるプログラミング入門カリキュラム

転職成功で受講料0円!あなたもプログラミングを学んでエンジニアデビュー