青いやつの進捗日記。

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

JavaScript

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に流し込んでその情報に基…

Javascriptの親をたどって探すclosestを関数として作る

IE11で使えないんですよねーclosest。 なので、 getParent($current, cls) { let $target = $current.parentNode; while ($target.tagName !== 'BODY') { if ($target.classList.contains(cls)) { return $target; } $target = $target.parentNode; } } 「現…

cloneNodeでコピーしてappendChildで最後尾に増やす

JavaScriptで特定の要素を複製(コピー)する方法|今村だけがよくわかるブログ Node.cloneNode() 例えばスライダーのページネーションとか。1つだけHTML上に作っておいて、あとは複製するとかできる。 _set() { for (let i = 0; i < this.length - 1; i++) …

SNSのシェア機能の実装

developer.mozilla.org これでURLを取得しエンコード const url = encodeURIComponent(location.href); blog.maromaro.co.jp tsudoi.org getTwitterUrl(url) { return `https://twitter.com/share?${url}`; } みたいな感じ 追記。Pinterestはシェア対象の画…

LodashのforEachを使う

qiita.com Lodashは配列操作とかで便利な関数を提供してくれるライブラリ。 import _ from 'lodash'; として _.forEach のようにして使える。このやり方ならlodashを全部読み込んでいる。 import { forEach } from 'lodash'; この書き方なら、lodashのforEac…

window.openでウィンドウをポップアップさせる

window.open JSでwindow.openとやるとウィンドウをポップアップで出せます。 また、hrefにそのウィンドウのURL入れるとおもうんですけど普通にやるとポップアップも出すのと同時に遷移しちゃうので、その動作自体の無効化が必要です。 aタグの無効化 - preve…

bowserってライブラリでブラウザのuseragentとか色々とってこれるっぽい

知らなかった。会社のチャンネルで投稿されていて知った。言われてみればそりゃこういうのは全部ライブラリあるよね。 Webブラウザの種類やバージョンを判別するJSライブラリ「bowser」 lancedikson/bowser ・ブラウザ名 ・OS ・デバイス(PCかタブレットかS…

addListenerでmatchmediaの切り替えでイベント発生

matchMediaを使うとCSSとほぼ同じような書き味でメディアクエリを書けます。 が、CSSのようにデバイス幅をいつでも取得してるわけじゃない(そう書けばそう書けますが)ので、PCSPの切替時にイベントを起こせません。 と思ったら、matchmediaでaddListerを使…