いちいち「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 シェルスクリプト的なものです…

なんらかの payload を渡したいとき、インターフェイスを定められない。これに尽きる。静的型付けとも相性が悪い。 payload と言ってるのは要するに window.addEventListener(eventName, event => {}) の event のことだ。TypeScript はかなり頑張って型付け…

こちらの論文を参考に書きました。 http://citeseerx.ist.psu.edu/viewdoc/download;jsessionid=D04E90C1CB92030C1B92452FB9E192A0?doi=10.1.1.22.8523&rep=rep1&type=pdf 実装 さくっと実装をまずお見せします。 const mergeSort = (arr: number[], L = 0, …

lookahead (?=pattern) negative lookahead (?!pattern) lookbehind (?<=pattern) negative lookbehind (?) (?<=Promise<)void(?=>) 1年に100回くらい「先読みとあと読みってどっちがどっちだ?どっちがどういう記法だっけ?」って悩むのでほんといい加減にし…

detailsを閉じているときに DOM を消しておきたいので作りました(作成時間5分) const Details: VFC<{ summary: ReactNode; detail: () => ReactNode }> = ({ summary, detail, }) => { const [showsDetail, setShowsDetail] = useState(false); return ( <details open={showsDetail} onToggle={() => se</details>…

Rust の練習としてLINEのコーディングをやってみました。以前からずっとやりたかったのですが、問題も長くて面倒でやってなかったんですよね(実際めんどうだった)… 今回解いた問題 以下解説していきます (注: 入出力の例が一切なく、ジャッジシステムも見当…

結論 complete になると同時に load が発火する(仕様) interactive になったあとかつ complete になる前に DOMContentLoaded が発火する(仕様) 厳密には complete になったあとに load が発火するという仕様です。この前後関係があるため、 readystatechange…

結論: 「<StrictMode/> で囲まれてて」「開発ビルドのときだけ」マウント時に useEffect が2回発火するようになります。 あくまで検証が目的の変更 一見、マウント時にcleanupが走るのは無駄に思えますよね？その通りです。2回呼ばれる合理的な理由はありません。 ではな</strictmode/>…

名前付きエクスポートされているコンポーネントを React で 動的インポートをするには、以下のように書く必要があります。 const MyComponent = lazy(() => import('./Component').then(({ MyComponent }) => ({ default: MyComponent })) ); ただ、ちょっと…

touch イベントと mouse イベントの両方に対応したいとき、touchstart 内で preventDefault を呼び出すというテクニックがあります。こうすると、touchstart、touchend のみが発火してそのあとのmousedown、mouseup、click が発火しなくなり、touch イベント…

Moonlander という分割キーボードを買ったのでレビュー。 ここがすごいよ Moonlander 分割であることはどうでも良くて、Moonlanderはカスタマイズ性がとんでもなく高い。これが最高。しかもカスタマイズの選択肢も豊富。おおよそキーボードに欲しい機能が全…

数値の Enum であればかんたんに重複なく生成できます。 // 0始まりの連番を生成 const [ITEM1, ITEM2, ITEM3] = Array(10).keys(); (この例では ITEM1 などが number になってしまっています。最後にいい感じに型付けする方法をおまけで紹介しています。) …

immer っぽい API だとうれしいなと思って書いてみました。 元となるコード (async () => { const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.emulate(iPhone); await page.goto('https://example.com'); await…

E2Eテストを本格的にやったことがないのでしてみたいのだが、そもそもいくつか疑問があるのでここでぶちまけておく。 この記事ではwebサイトのE2Eテストを想定しています。他のケースはわかりません 結論 ユーザーの挙動をシミュレートするのは、コストが大…

touchmove について調べてて気になったので。 React v16 まで React v16 までは、React コンポーネントに張られたイベントリスナーは ドキュメントのルート要素にすべて集約して貼られていました。そのため、React v16 までは、onTouchStart や onTouchMove …

名前から既にワクワクするこのAPIは、なんとPromiseを返すsetTimeout、setInterval関数を提供しています！最高です… というわけで今回はそれの紹介です。 基本的な使い方 await setTimeout(1000) ←これができるんです！素晴らしくないですか？？ top-level a…