role=”tab”で実装したタブのキーボード操作対応
キーボード操作に対応したタブを作るポイントです。 タブ押下をキーボードで実行可能にする role=”tab”でliなどクリッカブルではない要素もタブにできます。 role定義により、セマンティック的にはliをタブとして宣 …
「javascript」の記事一覧
ReactでDOMに後付するスクリプトはuseRefで取得してuseEffectで定義
React環境で、グラフの描画やスライダーなど、DOMを取得しインスタンス化を行うタイプのプラグインを使用するときのTipsです。 refで指定したDOMをuseRef で取得しuseEffectで、描画後に実行したい処 …
HTMLタグの範囲を特定する正規表現
styleやscriptのような入れ子にならない前提のタグなら、このような正規表現で範囲特定して抜き出したり置き換えたりできます。 たとえば、HTMLソース内に散在しているstyleタグを1箇所にまとめるならこんなふうに …
GoogleChromeの開発ツールで圧縮後のJavaScriptをデバッグ
Google Chromeの開発者ツールが、いつの間にか圧縮してあるスクリプトを可読化してデバッグできるようになっていました。 圧縮後のソースで動いている本番環境では不具合が起きているけど、開発環境の圧縮前ソースで再現さ …
セレクトボックスを展開した状態までデザインカスタマイズ
セレクトボックスの展開した状態（optionタグ）は、2018年12月現在では各ブラウザCSSのカスタマイズ可能なプロパティが存在しません。 展開状態までデザインカスタマイズするには、JavaScriptでモックのDOM …
checkboxでアコーディオンを作る
checkboxとCSSの~（一般兄弟結合子）を利用するとトグル開閉できる上で、開いた際に兄弟要素を全て閉じるアコーディオンを効率よく作られます。
Element.querySelectorの条件指定はCSSセレクタと一緒
JavascriptのquerySelectorやquerySelectorAllは 特定条件に一致する要素を取得できます。 querySelectorは、該当した最初の要素を querySelectorAllでは該当す …
Riot.jsでタグをエスケープせずに出力する
Riot.jsは、変数としてHTMLタグを含む内容を渡しても、XSS対策として自動でエスケープして表示する仕様です。 しかし、WEBコンテンツを作成していると、こんなことも。 名称をキリの悪い場所でなりゆき改行させるわけ …
Lodashでor検索and検索
JavaScriptのLodashで、JSONの配列からOR検索、AND検索をしてみました。 サンプルは、Vue.jsで表示を制御しています。 光の三原色RGBと、色の三原色CMYを検索項目として、 選択された要素を含ん …
window.matchMediaでJavaScriptもCSSと同じ基準でレスポンシブ管理
JavaScriptの matchMediaをこのように使うと CSSのレスポンシブ対応のmedia設定と平仄をあわせてレスポンシブの分岐を設定できます。 Interner Explorer 10 から対応しているので、 …