結論: 以下を .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 ランタイム難しい… 時間があるときに直そうと思ってるんですが時間が取れません… とりあえず本記事を参考にしないでください。 本文 毎…

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

苦節半年くらいしてようやく実現できてメッチャうれしいので記事も書くぞ！！！ 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 は別にデータソースをデータベース以外にしても問題ないので、GraphQL API で uuid を取得できるサーバーを建てられる。 const { ApolloServer, gql } = require('apollo-server'); const { v4: uuidv4 } = require('uuid'); const typeDefs =…

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 はコンポーネントの高さ…

private でステートを持ったモジュールのテストをするとき、初期化用のメソッドを作っていませんか? 実は jest では内部ステートをリセットする方法があります。 やり方 やり方は単純で、require('./myModule') でモジュールを読み込み、各テストの前に jest…

シェルスクリプトで ctrl + C を押して中断したときのクリーンアップ処理を書くのはそこそこ大変です(頑張ればできますが)。今回は zx を使った、クリーンアップ処理を含むコードの書き方を紹介します。 そもそも zx とは? alt シェルスクリプト的なものです…