tedateコンテンツへスキップ夜の帳がおりています。良い時間をすごせますように。いくつかのブレイクポイントを定義しておき、それを現在のウインドウ幅と比較。その比較結果によって処理を分ける方法について書きました。今回の記事では、その記事の中でも出てきた方法よりも簡潔に書け、かつcssのメディアクエリの概念をそのまま使う事ができるwindow.matchMedia()を使った分岐方法について書いていきます。それでは早速、上記の方法について、次のセクションより書いていきたいと思います。使い方はとてもシンプルです。cssのメディアクエリと同じ要領で、「このサイズからこのサイズ間はこれ」といった制御が可能です。具体的には次のとおりです。「この画面サイズのデバイスではこの処理をさせたい」という様な場合に便利かと思います。{...実行したい処理...});↑このようにリサイズイベントを仕込むなりしておけば、ユーザー操作によってブラウザ幅が変わった場合にも対応できます。具体的には次のとおり。matchMediaChecker();});上記のコードは、すこしだけ気に留めておく点があります。実務で使う際には、この次のセクションに書いてある留意点をよく読んで事前によく検証することをおすすめします。似ていますが、上記の方がすっきり書ける印象です。cssのメディアクエリと同じ書き方を指定できるのでWebデザイナーの方にも親和性が高く、理解が得られやすい書き方かと思います。留意すべき点など上のセクションでご紹介したコードは、すこしだけ気に留めておく点があります。実務で使う際には、このセクションに書いてあることをよく読んで事前によく検証することをおすすめします。上のセクションの末尾にある、「リサイズ検知」とコメントが書かれている部分について。...としてリサイズイベントを検知。実行して、ユーザー操作によって画面幅が変わった際に、任意の処理を実行できるようになっている部分です。イベントが検知されてしまう」という事象があります。「縦スワイプするたびにそれが実行されてしまう」ため、意図しない挙動を起こすことになります。必要ないならこの記述は入れないのがベターです。・ユーザーエージェントを判定する・もしスマートフォンからのアクセスだった場合には、リサイズ検知を実行させない↑上記のような対策を一緒に仕込んでおく必要があります。実機で実際に見ないと気づかないタイプの事象になりますので(PC上でのエミュレーター検証では発生しない)、この点にじゅうぶん留意した上で使うことをおすすめします。MDN内の解説などこの記事で登場した、用語などに関するMDN内の詳しい解説は次のとおりとなります。Webブラウザの挙動そのものの仕様を決めてる人達、が運営してるので当然と言えば当然ですが)。一読することをおすすめします。よる判定方法について記事を書いてみました。記事の中段でも書きましたが、リサイズ検知と組み合わせる事で、ユーザーによるブラウザサイズ変更にも対応でき、かつcssのメディアクエリと同じ概念で記述できるのが特徴です。個人的にも実案件で使ってみたところ、なかなか使い勝手が良かった印象でしたので、覚えておくと役にたつかもしれません。この記事が皆さんのより良いWeb制作体験につながれば、嬉しく思います。※この記事は内容の品質向上を目的に、随時更新を行う場合があります。