Panda Noir

JavaScript の限界を究めるブログでした。最近はいろんな分野を幅広めに書いてます。

React のコールバックrefが呼び出されるタイミングは、コールバックrefの実装によって違う

コールバックrefの実装方法によって ref が渡されるタイミングが異なります。 インライン関数で渡した場合(<element ref={(ref) => {}} />): 再レンダリングされるたびに呼び出される メモ化したり、クラスのメンバーに格納して各レンダリングで同じものを渡した場合: マウント時と</element>…

引数は固定だけど返り値でジェネリクスを使いたいケースがある

In short: 関数が reference を返す場合(useRef の返り値など)は返り値のみにジェネリクスを使っても問題ない fetch のような返り値が引数の内容によって決まるケースでも(型安全性は犠牲になるが)使うことがある。 ジェネリクスの一般的な用途 そもそもジェ…

git でブランチを切り替えたとき、node_modules を更新する (キャッシュ機構付き)

結論: 以下を .git/hooks/post-checkout に追加 #!/bin/sh PREV_BRANCH=`git reflog show -q | head -n1 | awk '{print $6}'` CACHE_DIR=~/.cache/my_project_node_modules mkdir -p $CACHE_DIR prev_node_modules_cache="$CACHE_DIR/$(git show $PREV_BRANC…

Jest モック方法まとめ

毎回どれを使えばいいのかわからなくなるのでまとめました。 (今回、純粋に jest について書きたいので TS ではなく JS で記事を書きました。ts-jest が絡んでも基本的には同じです) 今回紹介したサンプルはこちらのリポジトリにまとめてあります。 jest-moc…

componentDidMount と componentDidUpdate は同期的に layout と paint の間に実行される (useLayoutEffect と同じ)

(めっちゃ短いけど、ちょいちょい調べるので) useLayoutEffect は componentDidMount や componentDidUpdate と同じフェーズで実行されるということに注意してください 引用元: フック API リファレンス useLayoutEffect 逆に言えば、componentDidMount と c…

YouTube のスワイプで消せるフロートカードを実装する

最近のYouTube君がよく使うこのUIパターン、名前ついてるのか気になってる(フロート型で下スワイプで消せて上部にバーがついてるやつ) pic.twitter.com/EJeLQ8wSoS— クロパンダ (@le_panda_noir) 2022年8月12日 ↑これを CSS + JS で作りました。フロートカー…

Flux Utils のストアをいい感じに hooks で扱う

https://github.com/Fieldscope/flux-hooks を参考にしつつ、型をつけたり型推論が効きやすいように調整したりしてます。 export const useFluxStore = < TStore extends ReduceStore<TState, unknown>, TState = ReturnType<TStore['getState']> >( store: TStore, reducer: (store: TStore) => T</tstore['getstate']></tstate,>…

再利用可能にするのって意味なくない?

"再利用可能になった" はわかる。テストを書きやすいように書くと自然とそうなるから。でも、"再利用可能にしよう" がわからない。YAGNI(You ain't gonna need it)に反しているし、モジュールの安定度を上げる行為だからもっと慎重になるべきだ。そもそも、…

スタンディングデスクレビュー

FlexiSpot e8を買ったのでレビュー 結論 メチャ最高 スタンディングがとにかく楽 上げ下げがボタン一つでできて楽 グラつきもない とりあえず不満点はほぼない。価格も高すぎるって訳でもない。心なしか腰痛も治ってる気がする。 (腰痛が改善してもマイナス…

React でテストしているときに You might have mismatching versions of React and the renderer と出たときの対処法

jest.resetModules() などの関係でこのエラーが出ることがあります。そういうときにごり押すハックを編み出したので紹介します。 jest.mock('react', () => jest.requireActual('react')); それがこちらです。こうすることで jest.resetModules や jest.isol…

スーパーで荷物をカゴ→カバンと移し替えるときはハノイの塔を思い出せ

スーパーで買い物をしたとき、店員さんがまずカゴに詰めてくれます。店員さんは気を遣って下に重いもの、上に軽いものというように積んでくれますが、カゴはFILO(先入れ後出し)なので、上から順にカバンに詰めると今度は下に軽いもの、上に重いものが来てし…

32文字以下かつアンダースコアを1つ以上含む文字列を正規表現で判定する方法

さて、タイトルにある通りです。「32文字以下かつアンダースコアを1つ以上含むか」を正規表現だけで判定してみましょう! (もちろん str.length <= 32 && str.includes('_') で判定できるしそうすべきなので、この記事に実用性はありません) 解答: さて早速…

スナップショットテストの意義

スナップショットテストとは? レンダリングした結果のDOM構造をテキストベースで書き出し、その結果が前回と変わっていないかをチェックするテストです。DOM構造が一切変化してないことを保証できます。 スナップショットテストの意義 A. コードを変更した時…

無限のQAリソースほし〜〜〜〜〜〜〜

無限のQAリソースで出来ること 無限のQAリソースと無限の時間さえあれば、こんなことができます! 躊躇なくライブラリをアップデートできる (なぜならQAリソースが無限だから) 抜本的なリファクタリングができる (なぜならQAリソースが(略)) アーキテクチャ…

競プロとアプリ開発はテストの書き方が違う

tl; dr アプリ開発でコーナーケースを網羅する必要はない。 まず正常系を一通りテストするのが最重要。 競プロでは「関数がインプットに対して正しくアウトプットできているか?」に意識が向きがちだが、この意識はアプリ開発には向かないんじゃないか?という…

Prettier は結局何をやっているのか?コードの動作は変わってしまわないのか?

結論: AST を作って、それを元にコードをフォーマットしているから、プログラムの動作は一切変わらない 結論をもう書いたので、意味が分かった人はここより下は不要。ちょっとだけ用語とかの解説をする。 そもそも AST とは? AST とは Abstract Syntax Tree …

npm run で (Use `node --trace-warnings ...` to show where the warning was created) って出たら NODE_OPTIONS を使え

NODE_OPTIONS="--trace-warnings" をつけて run すれば OK $ NODE_OPTIONS="--trace-warnings" npm run lint 以上。

スマートホームをスマホから操作した〜〜〜い!!

いちいち「Alexa、リビングの電気をつけて」みたいに言うの、かったるくないですか?僕は仕事で使ってるMacの充電器をスマートプラグで管理してるので、いちいち「Alexa、充電つけて」と言わないと充電ができません。これが地味に面倒だったので、スマホのホ…

touchcancel イベントをハンドリングしないと iPad で大変なことになるぞ

結論: iPad は4本指で上にスワイプするとホーム画面に戻る便利機能があります。これをブラウザで行うと touchstart → touchmove → touchcancel の順で発火します。 touchend が永遠に発火しません。 結論で言いたいことは完結してるので、以下はその補足説明…

高FPSをたたき出すために UncontrolledComponent にしてみたけど、そんなに変わらなかった話

タイトルの通りです。React の再レンダリングを介さずにDOMを直接更新する方が高FPSを出せるか実験してみたけど、そんなに変わらなかったという話です。 ことの発端 ストップウォッチを作っていて、こんな感じの ControlledComponent を書いていました。とて…

僕がテキストベースでコミュニケーションしたい理由

テレワークが始まり、コミュニケーションの主流は対面でのMTGではなくslackへと移行しつつあります。そこで感じたテキストベースコミュニケーションの良さと課題感を書きます。 テキストベースの良さ まず、テキストとして残る。これが大きいです。コミュニ…

プログラミング題材集

みんな知ってる そこそこ実装のやりがいがある 仕様の把握がいらない(既に知ってる) 「あの言語を学びたいけど題材がない!」って時に活用ください。 アプリ編 TODO リスト Twitter カレンダー、予定表 Pixiv(画像ギャラリー) ブログ(CMS) ゲーム編 TUIでで…

React の key をちゃんと使えないと起こる問題

「React の key に配列の添え字を使ってはいけない」理由を説明できますか? リスト以外で key を使うべき場面をご存じですか? 今回は React の key を適切に扱えないと起こる問題を紹介します。 ダメな例のデモ まず、key を適切に設定していない、keyをつけ…

useLayoutEffectとは?何ができるの?

対象読者: 「useEffectより早く発火するやつでしょ?」くらいのふんわりとした理解をしている方 useLayoutEffect とは何か? まずズバリ結論から言うと、「ブラウザが要素をレイアウトしたあと、画面に描画する前に同期的にJSを実行するためのフック」です。…

2021年を振り返る

今年は入社2年目ということで色々あったので書きたい。 チーム内のフロントリードを任された リーダブルコードを意識してコーディングしてた 開発環境の整備とか開発フローの改善の提案をしたり、実際に改善したりした 外部登壇はほぼしなかった 趣味でプロ…

型安全に React の Provider をマージしてネストを浅くしたい

苦節半年くらいしてようやく実現できてメッチャうれしいので記事も書くぞ!!! Context のネストがつらい React の Context、いくつも書くとなるとネストがどんどん深くなっていってつらいですよね。 <ContextA.Provider> <ContextB.Provider> <ContextC.Provider> <ContextD.Provider> <ContextE.Provider> ... </ContextE.Provider> </ContextD.Provider> </ContextC.Provider> </ContextB.Provider> </contexta.provider>

Apollo server で UUID を取得するサーバーを建てる

Apollo server は別にデータソースをデータベース以外にしても問題ないので、GraphQL API で uuid を取得できるサーバーを建てられる。 const { ApolloServer, gql } = require('apollo-server'); const { v4: uuidv4 } = require('uuid'); const typeDefs =…

T extends unknown が no-unnecessary-type-constraint でできない

TSX のなかでジェネリクスを書くとき、<T> の代わりに <T extends unknown> と書くテクニックは有名ですよね const f = <T>(n: T) => n; // <T> が JSX として認識されてコンパイルできない const g = <T extends unknown>(n: T) => n; // これは OK しかし、 @typescript-eslint/no-unnecessary-type-constr</t></t></t></t></t>…

簡潔な文章を書くコツ

リモートワークの普及でテキストベースのコミュニケーションが増えてきました。簡潔で伝わりやすい文章を書いて同僚と差をつけましょう! なんで簡潔な文章を書くのか? 人間は文章を"読めない"から。 読まれる前提で書いてはいけない。テキストコミュニーケ…

遅延読み込みリストをカンタンに作りたい

React で遅延読み込み機構を作ってみました。 デモ github.com コード useShown と useUpdateHeight という2つのフックを使って実現します。useShown はスクロール状況から「読み込みを開始すべきか」を判定します。useUpdateHeight はコンポーネントの高さ…