AIが生成したコードで@observable.refが使われているのを見た @observable.refを知らなかったので調べた @observable.refとは @observable.refは、MobXが提供する観測可能な値の一種で、参照の変更のみを監視する仕組み 通常の@observableとは異なり、オブジ…

普段使っているGlove80キーボードが突然レインボーに光続けているので止めたい これはレインボーライティング（RGBアンダーグロー）というらしく、これを無効にするには、 Magicキーを押しながら t キーを押す これにより、RGBアンダーグローのオン/オフが切…

Webアプリケーションのある処理によって画面の更新頻度が多く、CPUが弱いマシンだとフリーズしてしまう問題が起きた これを解決するために、デバウンスを実行しようと考えた時、遅延方法として requestAnimationFrame がいいのではないかと聞いた requestAni…

並び替え可能な要素（Sortable）の中に、さらに並び替え可能な要素（Sortable）を配置したい 例えば、Torello のような、カードリスト内も並び替えできるし、リスト自体も並び替えられるようなケース 実装した時に、つまづいたことなどを整理する 基本構成 S…

dnd-kit を使ってドラッグ＆ドロップを実装した際、ドラッグ中にマウスのホイールスクロールできなくなった DragOverlay を使ってプレビュー表示していることが原因と分かったので、解決方法を整理しておく 現象 ドラッグ中、スクロール可能なコンテナやペー…

ドラッグ＆ドロップ操作中に画面端へ移動した際、dnd-kit ではスクロール制御のための仕組みとして autoScroll が用意されている ただ、このデフォルトの設定ではスクロール速度の調整ができないのでカスタマイズしたく調べた DndContext | @dnd-kit – Docum…

dnd-kitでドラッグ＆ドロップでリストにアイテムを並び替えるだけでなく、リストの末尾にドラッグしたら新しくアイテムを追加したい 基本方針 リストの末尾に useDroppable な要素を置いてドロップ可能にする ドロップ判定時に「sortableリスト上なのか、dro…

dnd-kit では、ドラッグ中にどの要素を「ドロップ対象」とするかを判定する仕組みとして collisionDetection が用意されている docs.dndkit.com デフォルトの戦略だけでは操作感に課題が出ることも多いため、状況に応じてカスタマイズすることで最適な動作が…

dnd-kit の DragOverlay を使って、ドラッグ中のプレビュー表示をカスタマイズしたのだが、ドロップ直後に DragOverlay が一瞬消えて再描画されるので「チラつき」が気になった 原因はドラッグ終了時（onDragEnd）に activeId を即座に null にしていること…

dnd-kit を使ってドラッグ＆ドロップを実装する際、フォーム要素（input や button など）を含む場合に注意が必要だった ドラッグ操作とクリック・入力操作が競合しないように制御する方法を調べたのでメモ 発生した問題 input や select をクリックすると、…

dnd-kit を使って複数のリスト間でドラッグ＆ドロップを実現する場合のメモ 複数リストで考慮すべきポイント 各リストごとに SortableContext を用意する アイテムの id がリスト間で重複しないように設計する onDragEnd で「どのリストからどのリストへ移動…

dnd-kit を使って並び替え機能を実装する際、SortableContext を使う このコンテキストが items と strategy というプロパティを持つが、それぞれがどのように動作に影響するのかを調べた docs.dndkit.com items の役割 items は、並び替え対象となる要素のI…

以前、dnd-kit というライブラリを調べたことがあった uga-box.hatenablog.com 今回は実際に使ってみて useSortable と useDroppable についてわかったことをまとめる useDroppable の概要 useDroppable は、ドラッグ対象を受け入れる領域（ドロップゾーン）…

Sentryを見ていていて、OTelId というのがあった 調べたところ、これが OpenTelemetry だとわかったのだが、OpenTelemetry に詳しくなかったので調べた opentelemetry.io OpenTelemetry は Cloud Native Computing Foundation（CNCF）がホストする、可観測性…

関わっている組織で、SoR と SoE の違いがあると言われてピンと来なかったので違いを調べた SoR（System of Record）の特徴 企業の正式な記録を保持するシステム データの正確性と一貫性の確保が最優先 トランザクションの完全性の保証 主な特徴 堅牢性と信…

Object.defineProperty()の使いどころについて調べた developer.mozilla.org JavaScriptのObject.defineProperty()は、オブジェクトのプロパティを詳細に定義・制御するためのメソッド 通常、オブジェクトにプロパティを追加すると、そのプロパティは自由に…

先日書いた EditorConfig の記事で、「.editorconfigファイルはINI形式で記述」 と書いたが、よくみる.iniのINI形式というのがよくわかっていなかったの調べた uga-box.hatenablog.com INI形式はソフトウェアの設定を保存するためのフォーマットで、Windows…

tsupというTypeScript向けバンドラーを知ったので調べた tsup.egoist.dev tsupは、TypeScriptでライブラリを開発する場合に、設定ファイルなしでシンプルに使えるバンドラー 内部的にはesbuildを利用している tsupの特徴 設定ファイル不要のシンプルなバンド…

複数の開発者が異なるエディタやIDEを使って同じプロジェクトで作業すると、コードのフォーマットがバラバラになりがちなので揃えたい この問題を解決するのがEditorConfig editorconfig.org EditorConfigの概要 EditorConfigは、エディタごとの設定を統一す…

MobXにおける scheduler と delay の違いついて調べたメモ mobx.js.org MobXは、リアクティブな状態管理の更新スケジューリングに scheduler と delay という2つのオプションが存在する どちらも状態の更新タイミングに関与しますが、それぞれ異なる動作を持…

Codecov というカバレッジを計測するサービスを知ったので調べた about.codecov.io Codecovとは？ Codecovは、コードのテストカバレッジを可視化・管理するためのツールであり、CI/CDパイプラインと統合して自動的にテストカバレッジレポートを生成すること…

Mobxの observable.box() の使い所ついて調べた mobx.js.org observable.box はプリミティブな値をリアクティブに管理したいときに便利な API 通常の observable ではオブジェクトや配列をリアクティブにするのが一般的だが、observable.box を使うと、数値…

少しず読んでいる Tidy First? の読書メモ 第３部の「理論」の第27部から最後まで learning.oreilly.com 27. 選択肢とキャッシュフロー 27章では割引のキャッシュフローと選択肢の経済的な考え方の違いについて軽く説明している 割引のキャッシュフローは、…

Tidy First? の第３部の「理論」を読んだが、ちょっと長いので第26章までメモ learning.oreilly.com 第３部では「なんで整理するのか」についての説明だが、その際に「選択肢」に対する考え方が語られていて、気付かされることがあって面白かった 具体的には…

Tidy First? の第２部「マネージメント」についてのメモ learning.oreilly.com 整理の「マネージメント」と聞いて、ちょっとイメージわかなかったが「ソフトウェア設計者はコードの整理に没頭してしまう」という言葉をみて、確かにと思った 気付いたら「整理…

ちょっとずつ読んでいる Tidy First? の第一部「整理手法」についてのメモ learning.oreilly.com 本の序文の話は以下に書いた 【技術本まとめ】Tidy First? をちょっとずつ読む - UGA Boxxx 第1部「整理手法」 リファクタリングをしていくときのちょうど良い…

ちょっと前に話題になった Tidy First? を読むことにした learning.oreilly.com まずは 序文 だけ読んだのでメモ Tidy First ってなに？ Tidy は直訳すると「整理」 Tidy Fisrt は、「まずは整理から」になるのかな 整理するものはソースコードで、乱雑なコ…

GitHub Packages の npm レジストリに、プライベートパッケージを公開したことがなかったのでやってみた docs.github.com 躓いたのは権限周り 事前準備として以下をしっかり確認する GitHub Organization の管理者権限があること GitHub の Personal Access …

話題のClineを軽く触ってみた まず感じたのは、LLM APIの課金コスト感覚がないから怖い Clineは API Provider を選択できるのだが、 持っていたOpenAIアカウントを利用しようとしたところ、いきなり「現在のクォータを超過した」とのエラーが発生した OpenAI…

bignumber.js というライブラリを知ったので調査 mikemcl.github.io JavaScriptの数値はIEEE 754 倍精度浮動小数点数（double）のため、数を表現するために使えるビット数に限りがあり、少数の計算が正しくできない double は、例えば 1 / 10の結果（0.1） 2…