GoogleChromeの開発ツールで圧縮後のJavaScriptをデバッグ
Google Chromeの開発者ツールが、いつの間にか圧縮してあるスクリプトを可読化してデバッグできるようになっていました。 圧縮後のソースで動いている本番環境では不具合が起きているけど、開発環境の圧縮前ソースで再現さ …
「javascript」の記事一覧
セレクトボックスを展開した状態までデザインカスタマイズ
セレクトボックスの展開した状態（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 から対応しているので、 …
JavaScriptの浮動小数点と小数点以下N桁での四捨五入
JavaScriptは浮動小数点数を使用しているため たまに、計算結果として小数点以下に凄い00000000の桁がくっついてくることがあります。 -0.1 + -0.4 = -0.30000000000000004 参考 …
JavaScriptでAndroid4.4対応のUI実装のとき思い出す非対応機能
2018年前半、まだクライアントワークで対応することがあるAndroid4.4でサポートされていないJavaScriptやCSSの備忘録です。 端末やOSのシェア率を調べることができるスマタブinfoによると、 2018 …
querySelectorAllで取得したNodeリストを配列化
querySelectorAllで取得したDOMはNodeListという形式で配列ではないため filterを使用してソートやユニーク判定をしようとすると 「これは配列ではないので実行できないよ」というエラーを返され実行 …