青いやつの進捗日記。

メモとしてべんきょうのしんちょくをかいていきます。あとで自分が検索しやすいもん

JavaScript

styled-componentsで同じことを繰り返したい時に使えるrepeat

qiita.com qiita.com text-shadowを重ねたい。 developer.mozilla.org styled-componentsでrepeatさせれば楽にできる

カーソルキー(↑ or ↓)押下でフォーカスを移動させたいがその際にスクロールを抑制したい

カーソルキーでフォーカスを移動させたい。Tabキー押下でできるやつ。けど調べた感じ気合でDOMとってきてそいつにfocus()するしかないっぽい。仕方ないのでrefでつなげてfocus()した。 で、そのフォーカスを移動させたい要素がoverflow: scroll内の要素なの…

JavaScript Shift + Enter でkeydownとるには event.shiftKey && event.key === 'Enter'

1-notes.com Shiftキーはevent.keyとかじゃないのね

JavaScript MacのCommandキーをkeydownでとるには event.metaKey

hacknote.jp

event.nativeEvent.isComposingってなに

zenn.dev developer.mozilla.org なるほど予測変換中ということか、input要素でEnterで送信させる際に予測変換しているとき以外で動作させるためなのね

JavaScript Null合体演算子と三項演算子の同時使用時の計算の優先順位(まあ今回は優先順位関係ないのですが…)

以下みたいなやつ、なんか初見でぱっと見でcontainedとoutlinedがなにがおきたらどうなるのかわからなかった。Null合体演算子と三項演算子が同時に使われているの初めて見た。 condition1 ?? condition2 ? 'contained' : 'outlined' condition1がtrueだった…

objectのdata属性で読み込んだsvgにCSSやJSをあてる

objectのdata属性で読み込んだsvgの中にあるaタグに対してJSやCSSをあてたい。 qiita.com 別documentになるので、普通にJSやCSSはあたらない。上記Qiitaにあるようにobjectをとってきてその.contentDocumentをとり、そこに対してJSを当てる必要がある。 cons…

JavaScript String と toString ってなんか挙動違うの? → Stringはなんでも文字列にしてしまう

kk-web.link もうまんまこれが答えだった。 undefinedも文字列として"undefined"してしまうと。なんかasに近い。 なんか近いなと思ったのが、 developer.hatenastaff.com document.querySelector('.title') as HTMLElement; document.querySelector<HTMLElement>('.title'</htmlelement>…

JavaScriptの標準の機能で0埋めできるの今更知った padStart

最初、 qiita.com こんな感じで無理やりやるしかないと思っていた。どうやら上記のQiitaが書かれた段階では仕様提案中だったみたいだが、いまならどう考えても.padStartのほうが良い。 developer.mozilla.org 2桁の数字で0埋めしたかったら .padStart(2, '0')…

ブラウザの向きとか、向き固定とかまわりを調べた(主にスマホ) Fullscreen APIとかScreen Orientation APIとか

スマホを画面の向きを縦向きにロックしている状態でブラウザは横向きに回転したりとか出来るのかを調べていた。 CSSのメディアクエリのorientation(画面の縦横比で判断)以外の方法を探す。(ロックしていると問答無用でportrait判定なので) まず、ブラウ…

GIFアニメーションをJavaScriptで任意のタイミングで動かす。とあるイベントごとに最初から再生

cly7796.net もうこの記事のままでいけます。 imgをcreateElementしてそのsrcに動かしたいGIFアニメーションと、その末尾にパラメータとしてタイムスタンプをつけるとキャッシュが残らず、リロードをせずとも例えばボタンのクリックのたびに毎回アニメーショ…

!!で明示的にbooleanにする

!!number みたいな感じで、numberが値入っているか否かを判定できる。 jsprimer.net !はNOT演算子で真偽値を返すので、!numberにさらにNOT演算子を指定すればnumberがtrueかを判定できる。 まあただjsprimerでも書いてあるとおり、大体の場面において違う明…

配列から任意の要素を取得する際に配列のindexで指定はしないで条件一致で取得しよう

と、レビューで言われまして。 例えば const List = ['first', 'second', 'third'] ['a','b','c'].map((item, index) => ( <Text>List[index]</Text> ) みたいな。 で、これはなぜか。 理由としては 堅牢性が低い 保守性が低い 静的解析しにくい だと。 つまるところ、ind…

IE11やSafariでmatchMediaのaddEventListener('change' は効かない

developer.mozilla.org matchmediaありますよね。上記を見てIE11も対応しているので油断していました。 window.matchMedia(`screen and (max-width: 768px)`).addEventListener('change', () => { }); 上記のようにmatchmediaの閾値を検出するのをaddEventLi…

lodashでイベントを間引く。イベントの終了後にしたり、イベントを何秒ごとに区切ったり。

qiita.com この記事が参考になります。 throttleを使うと、何秒ごとにイベントを起こす、のように出来ます。 this.elms.forEach(elm => { window.addEventListener( 'scroll', throttle(() => { elm.style.left = `-${pageXOffset}px`; }, 20) ); }); 上記の…

JavaScriptで高さを小数点まで含めて取得したいときに

qiita.com 上記の記事が参考になります。 qiita.com のように、高さ取得したかったらoffsetHeightとか使うと思いますが、これ丸めちゃって整数になるんですね。まあだいたい計算出来れば良いならそれで良いのですが、 tech.motoki-watanabe.net でparseFloat…

getComputedStyleでスタイルを取得し、parseIntやparseFloatで数字にする

qiita.com const elm = document.querySelector('.elm'); const style: CSSStyleDeclaration = window.getComputedStyle(elm); const lineHeight = style.lineHeight; のように、して、実際に計算された後のCSSの値をとってこれます。 こちらの結果は21pxの…

【メモ】仮想スクロールってものがある

web.dev VirtualScrollはパフォーマンスめちゃ上がるらしい。けどなんだ仮想スクロールって。 qiita.com つまり、見えている範囲だけスクロールイベントを起こす、のようなものらしい

removeEventListenerでscrollイベントを消す

qiita.com teratail.com scrollイベントを動かしたいが、目的達成したら消したい。で、また目的が出来たら動かしたい。 const closeFunc = () => { isOpened = false; // NOTE: scrollイベントを消す target.removeEventListener("scroll", closeFunc); }; t…

scrollboosterでドラッグで横スクロールする機能を実装。IE11にも対応。

一番ありそうな場面は、 テーブルで、左列がstickyで固定されていて、2列目以降がスクロール出来るやつ。縦に長いテーブルだと横スクロール出来る入力デバイスを持っていないとスクロールバーをクリックしないとスクロール出来ないので操作がかなりめんどく…

JSDocでコメントを書く メモ

たいへんお恥ずかしながら。JSDocってつい最近知りました。 ReactでPropsの説明を type Props = { /** 名前 */ name: string } みたいに書くとコンポーネント使う際にPropsに説明が出たりします。あとStorybookでコンポーネントのPropsの説明が出る。 っての…

数字を丸めていく

qiita.com 普通はMath.roundだけでOK。

配列の操作する系 mapとかfilterとか

qiita.com qiita.com このリンク見ればわかる。mapはよく使うよね。someは初めて知った。

Reactでmapで生成するときの、keyに入れる値はindexを出来れば避ける

qiita.com Reactでmapで繰り返しする場合keyを指定する必要がある。 なにも考えずに、よく array.map((item, idx) => { return ( <item key={idx}> のようにやっていました。なんかもう、keyにはindexを入れるものだと。 そしたらレビューでkeyはindexじゃなくて、この場合な</item>…

JavaScriptの非同期処理について、良い記事があった

sbfl.net sbfl.net 恥ずかしながらまだあまり非同期処理を使いこなせず…1回だけ書きましたがなんかうまくいった…という感じなので…次やる時また参考にしたい気持ちです

IEではclassList関連で使えない機能が色々ある。

hepokon365.hatenablog.com IEではclassListで使えない機能があります。 代表的なのがtoggleとか。 で、今回引っかかったのが const a = b.classList.value.replace(/-/g, '').split(' '); で、IEで未定義またはNULL参照プロパティ'replace'は取得できません…

Prototype汚染って何…?

JavaScriptをES5で書かざるを得ない場面があり、でもnodelistに対してforEachを使いたいので if (window.NodeList && !NodeList.prototype.forEach) { NodeList.prototype.forEach = Array.prototype.forEach; } と書いて使っている時がありました。 で、先…

論理演算子はboolean以外も返す const = AA || BB みたいなの

JavaScriptの「&&」「||」について盛大に勘違いをしていた件 - Qiita const _perview = Number($body.getAttribute('data-perview')) || 'auto'; えっなにこれ、って思ってた。 Number($body.getAttribute('data-perview'))がtrueであればNumber($body.getAt…

パフォーマンスのために、遅延読み込み・非同期読み込みについて調べる

qiita.com これを読んで。最適化とか表示早くするのが特に必要なものならここらへんのチューニング必要なのかもしれないなーと思い調べてみようと決意。ちなみにこれ書いてる現状はなにも知らない。 JavaScriptの非同期読み込み qiita.com 全然気にしたこと…

webpack-route-data-mapperのファイル除外指定方法

www.npmjs.com github.com webpack-route-data-mapperというのを案件で使っていた。 まあ良い感じにファイルの指定を出来るようになるプラグインだと理解している。これをpug-loaderに流し込んでいたはず。jsonファイルをpug-loaderに流し込んでその情報に基…