【React】matchMedia で理解する useSyncExternalStore

2022/12/27 9 users redux React React Hooks API フック

React の API で、よくわからないしわかる必要性もあんまりない(かもしれない) React Hooks に useSyncExternalStore があります。Redux のように React 外で管理されているステートオブジェクトを React にインテグレートするためのフックということくらいは耳にしたことがあるのではないでしょうか。 そのフックの機能... 続きを読む

ホバーの分岐にはメディアクエリのwidthではなくhoverを使おう

2022/04/01 15 users landscape hover ポパー width 関数

メディアクエリにはhoverプロパティがあり、ユーザーがホバーに対応しているデバイスかどうかの判定が行えます。 これを使用することによって、画面幅での分岐が必要なくなるためタブレットのlandscape含めた対応も容易になります。 また、メディアクエリはJavaScriptからもmatchMediaという関数を使う事で使用すること... 続きを読む

JavaScriptでのメディアクエリ、matchMedia()の使い方を解説 | コリス

2020/09/15 20 users コリス match Media スライダー コンポーネント

メディアクエリと言えば、CSSの@mediaでスクリーンサイズに合わせて最適なスタイルを適用するものを思い浮かべる人が多いと思います。JavaScriptで実装したコンポーネント、例えば、スライダーなどをレスポンシブ対応にする際にはJavaScriptでメディアクエリを扱った方が便利です。 JavaScriptでのメディアクエリ、match... 続きを読む

やるやんwindow.matchmedia - FICC Workbook

2015/04/24 17 users FICC Workbook

window.matchmediaとは 簡単にいえば、JavaScript版 mediaqueryです。 https://developer.mozilla.org/ja/docs/Web/API/Window/matchMedia windowサイズに応じてJSの処理を書き分けることができます。 ただ、IE10より下では使えません！ スマホはバッチリ！ 使い方 とりあえず var widthMa... 続きを読む