「他人のdotfilesをちょっと試してみたいけど、環境を汚したくないからやらない」、こういうこと、めっちゃありますよね。僕はあるので進めますね。コレを解消できないかと考えてたんですが、「Dockerイメージをビルドすれば良いじゃん」って気づいたのでや…
A. 型定義的には同じ *1。HTML要素向けのComponentPropsの実装でXxxHTMLAttributesが使われる、という関係。 結論としては同じものとみなして良いんですが、じゃあどう使い分ければ良いのか? という話ですよね。この話をするにはそもそもComponentPropsが何…
「getByRoleをブラウザ環境でも使えると嬉しいな〜」と思ってたんですが、普通にdom-testing-libraryはブラウザ環境でも動かせる(実DOM APIと互換がある)みたいです。 import { useEffect } from 'react'; import { screen } from '@testing-library/dom'; e…
listbox というUIパターンを実装しました。ちょっと凝ったラジオボタンリストみたいなものです↓ 仕様 クリック時の挙動はだいたいラジオボタンと同じです。 キーボード操作時がラジオボタンと違っています。ラジオボタンではフォーカス移動と同時に選択が行…
デモ これを実現するためのshowSpinner関数を作りました。 function showSpinner() { const spinnerFrames = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"]; let spinnerIndex = 0; const spinner = setInterval(() => { process.stdout.write(`\r\x1…
depsに入れなくて良い、ではなく、入れてはならない です。 エフェクトイベント関数をdepsに入れるとレンダリング毎にエフェクトが走る useEffectEventは レンダリングごとに新しい関数を返します (検証用デモ)。 そのため、useEffect の deps にエフェクト…
※この記事はuse APIへの自分の理解と、実際にコードを起こして実験した結果を記しただけの 考察記事 です。正しさは保証されていません。「多分こういうマインドセットを持ってるとええんやな〜」くらいの温度感でお楽しみください。 導入: Throw a Promise…
書いた気がしてたけど書いてなかった。2ヶ月経ったのでまとめてみる。 気をつけた方が良い点 移住支援金はとにかくめんどい 移住後にしか申し込めない なので引越し費用には使えない (なら移住支援金じゃなくて移住お祝い金だろ) 条件がややこしいしわかりづ…
inputのreadonlyとdisabledで混乱したので整理。 readonlyとdisabledの違い readonlyとdisabledは機能上は以下のような違いがある。 readonly は論理属性で、存在する場合、要素が変更可能ではなくなり、ユーザーがそのコントロールを編集できなくなります。…
意外とネットに記事として上がってなかったので書いた。 function useClientRectWidth<T extends HTMLElement>() { const ref = useRef<T>(null); const subscribe = useCallback((listener: () => void) => { if (!ref.current) return () => void 0; const resizeObserver = new Resi</t></t>…
slackで「ありがとうございます！」みたいな文字数の長い絵文字は潰れてしまって読みづらいです。しかし、視認性を高めるには高々6文字くらいしか入れられません。 ここで、 「それなら、アニメーションさせればいいじゃない」 と閃いたので、実際にツールを…
telescope の filename_first にインスパイアされて作ったもの これがスクリプト↓ rg --files --hidden --follow --glob '!.git/*'|\ awk -F/ 'OFS="/"{file=$NF; $NF=""; dir=$0; print file " \033[90m" $0 "\033[0m"}' | fzf --with-nth=1.. --ansi --pre…
引数が1つもない関数のメモ化をするとき、??=を使うと簡潔に書くことができます。 let cache = null const memoizedFun = () => { return cache ??= fun(); }; initializeSdk とかそういう全体で1回だけ呼び出せば良くて、初回呼び出しのPromiseを使い回した…
仕事で日報を6年ほど書いてるんですが、ずっとある悩みがありました。それが 「クラウドにバックアップできない」 というものです。githubへアップロードするのは、社外秘情報などを含んでいるため、たとえプライベートリポジトリであっても気が引けます。 …
はてなブログでブックマークレットを紹介するとき、ドラッグ&ドロップですぐ設置できるようにリンクを置いておきたくなります。そんな時にどうやれば良いのかについて悪戦苦闘したのでメモしておきます (完全なやり方はまだ分かってない) 比較的単純な場合は…
like数でzennの特例ユーザーの記事をソートするためのブックマークレット↓ javascript:(function(){ const articles = [...document.querySelectorAll('article')].sort((a,b)=> Number(b.querySelector('.ArticleCard_likes__I1qs3')?.textContent ?? 0) - …
4/30 LINEヤフー最終出社 ↓ 5/1 ~ 6/17 有給消化 ↓ 6/18 ~ 6/30 無職期間 ↓ 7/1 株式会社ヘンリーへ入社
gigetはまだfile:///をサポートしてないので、作ったテンプレートを試したかったらアップロードするしかない。そこで、ローカルにtarballを返すサーバーを立てるようにした。その紹介の記事。 github.com 使い方 サーバーを起動する node server.js {テンプ…
マネージャーからおすすめされた本。でも買ったまま2年くらい積んでしまっていた。マネージャー、すみませんでした… www.maruzen-publishing.co.jp どういう本か? タイトルにある通り、アイデアを組織に広めるための48のパターンについて紹介する本。 構成と…
ハマって1時間半くらいかかったのでメモ 問題: tpmの設定を行うファイルのパス指定にHOME以外の環境変数が使えない source-fileを使ってtmux.confを分割するのはよくあるパターンだと思います。 source-file "$HOME/dotfiles/tmux/plugins.conf" # ~/dotfile…
本ガイドラインの目的、目指すところ テストの基本的な書き方、考え方を習得する 原因調査時などに手動確認を減らせるテストを書けるようになる 本ガイドラインの目的外のこと: リファクタしやすくなるようにテストファイルを整備する。QAの代替を目指す。 (…
next.jsのドキュメントには多言語対応のページがあります。 nextjs.org これを参考にすると、LPやホームページ程度であれば十分に多言語対応することができます。 next.jsだけでも出来ること 文字列を翻訳する アクセス時のaccept-languageヘッダーを見て自…
in short 内容自体はとても良かったし勉強になった だが、文章がおかしくて読みづらかったし、サンプルも図も不親切 初心者が読んで100%理解できるのかは疑問(読まないよりは読んだほうが良いと思うが) 感想1: 読みづらかった 全体的な感想として、とても読…
rowspan、colspanがあるとtd:nth-of-type などがズレてしまう。 td:nth-of-type(2) に背景色をつけた図 html <table> <tr> <td>col1,1</td> <td rowspan="3">col1,2</td> <td>col1,3</td> </tr> <tr> <td>col2,1</td> <td>col2,2</td> </tr> <tr> <td>col3,1</td> <td>col3,2</td> </tr> <tr> <td>col4,1</td> <td>col4,2</td> <td>col4,3</td> </tr></table>
ひとまず結果が出揃ったので報告です(※まだ転職先は決定してないです)。 合計12社受けました。 内訳がこちら↓ 1次落ち: 4社 (内訳: エージェント2社、スカウト1社、自己応募1社) 2次落ち: 1社 (スカウト1社) 最終落ち: 2社 (スカウト2社) 内定: 5社 (スカウ…
ある機能がどのECMAバージョンで入ったのかの一覧表。ある程度グルーピングをしてある。 2025年現在のproposalsのfinished-proposals.mdを参照している。 (なお、全部確認はしたはずだが、間違ってる可能性もある。抜け等あったらコメントお願いします) Arra…
react.devの「そのエフェクトは不要かも」のprops が変更されたときにすべての state をリセットするに書かれている解決策が微妙に感じたので、改善案を提案します。 そもそも: 公式の解決策がなぜ微妙に感じるのか? props が変更されたときにすべての state…
1月から転職のために選考を受け始めました。しかし、まさかの 4社連続1次落ち を経験しました。そのタイミングで猛省をした結果、最終的に 4社から内定をいただきました。 (まだ1社選考残ってますが) 今回は特に転職活動の前半で「やらかしたな〜」と思った…
「ここの意図ってなんですか?」とテキストで尋ねると、怒っていると捉えられてしまうことがあります。コレはした側もされた側も多くの人が経験したことがあると思います。 実はこれにはメッチャ簡単な解決策があります。 解決方法: 「なぜ知りたいのか」を書…
先日、正規表現のネタをツイートしたら軽く拡散しました。そこで他にも面白いものあるのかなと調べてみたら素数を判定する正規表現があるという記述を見つけました。 これが実際の正規表現を使った素数判定です↓ const isPrime = (n:number) => !/^.?$|^(..+…
