#フロントエンド — Scraps（12ページ目）

@Namiyama / 27日前

ループエンジニアリング（ralph loop）で業務システムのUIを一新してみた

ループエンジニアリングで40画面分の業務システムUIを1日で一新した
RJSFからReactコンポーネントへの移行、ralph-loopによるループエンジニアリング、SubAgentによるテスト並列処理
完了条件を厳格に設定し、詰まった際の逃げ道を明確にすることで作業の継続性を確保した

@kasumi_sato / 27日前

【JavaScript】基礎から学ぶ！イベントハンドラ／リスナと主要イベント一覧

JavaScriptでイベントハンドラとイベントリスナの違いが説明されている
イベントハンドラはHTML属性やonclickで直接関数を紐付けるが、イベントリスナはaddEventListenerで複数処理を安全に登録できる
アロー関数や無名関数を直接渡すと削除できないため、名前付き関数で定義する必要がある

@おすぎ / 27日前

TanStack Virtual を使ってみた話

TanStack Virtualを使って66万セルの表を効率的に描画する実装をした
縦と横のスクロールを別々のHookで仮想化し、データを型付き配列に変換してメモリ使用量を削減した
仮想化してもデータはメモリに残るため、オブジェクト数を減らす処理が必要で、スクロール時のレイアウト測定に注意が必要な点が重要

@Kentaro Ohkouchi / 27日前

WSL 用ターミナルは noctty が良いぞ — PR を 4 本マージしてもらって分かったこと

WSL2でターミナルを使うならnocttyがおすすめ
Windowsネイティブの統合機能、ConPTY v2の性能、AI支援のPR対応
nocttyのリリースにはConPTY v2が同梱されていないため、自前ビルド時は手動配置が必要

@yushi-s / 27日前

AIエージェントの出力、Markdownで十分？ HTMLに切り替えるべき場面の見分け方

AIエージェントによる資料作成でMarkdownとHTMLの使い分けが重要
Markdownは差分管理・検索に優れるが、HTMLは比較・図解・階層表現に強み
HTMLへの切り替えには確認コストと生成コストがかかるため、本当に必要な場面だけ使うべき

@kailma / 28日前

string[] では長さが分からない。じゃあ型に長さを入れてみよう

TypeScriptで配列の長さを型に含めることで、安全な配列操作が可能になる
Vector型で長さを型に、Fin型で範囲外アクセスを防ぐ、Add型で型レベルの足し算を実現
runtimeで受け取った値と型の関係を保持するにはconstアサーションが必要で、型チェックの限界を理解する

@Goodpatch Tech Blog / 28日前

iOSDC Japan 2026 に Goodpatch のエンジニアが登壇します

iOSDC Japan 2026でApp Intents中心設計の実践ガイドが発表される
App Intentsの機能活用とSiri AIとの連携、1年間の試行錯誤の経験が紹介される
AI時代のアプリ開発に向けた設計手法が参考になる

@toshiki.cho / 28日前

プッシュ通知を「無理やり許可させない」ために、表現も実装も選び直した話

プッシュ通知の許諾をユーザーの心理に合わせて表現と実装で調整した
通知の再現をやめ「重要な」を「大切な」に変更し、OSの許諾状態で表示を制御
許諾状態をOSに依存してアプリ側のフラグを持たないことで、二度と表示しない・毎回表示しない問題を回避

@usui0623 / 28日前

Figmaの基本操作を学ぶためにQiitaのUIを使って操作してみる

QiitaのUIをFigmaに配置し、タブやボタン、アイコンを追加する基本操作を学ぶ
スクリーンショットを元にテキストやフレーム、SVGを追加し、色やサイズの確認を行う
スクリーンショットではフォントサイズやアイコンのSVGなどは直接取得できないことに注意する

@ichiktok / 28日前

VSCodeとCursor、結局何が違うの？使う前に知っておきたいポイントまとめ

CursorはVSCodeのフォークでAI機能がエディタに統合されている
Tab補完とCmd+KのAI補完、エージェント機能とVSCodeのAgent Modeが比較されている
Microsoft純正拡張機能が使えない点に注意が必要

@shinonomelon / 28日前

Raycast の Hyper Key を設定しよう

RaycastでHyper Keyを設定して、キーボードショートカットの空きを確保する
Hyper Keyは⌃⌥⇧⌘の同時押しを1キーで再現し、既存ショートカットと衝突しにくい
設定ではInclude shift in Hyper Keyにチェックを入れ、4つの修飾キーを含めることが推奨される

@高見結衣 / 29日前

null/undefinedの罠から学んだ、ジュニアエンジニアの多段AIデバッグ術

新規と編集画面で異なるバリデーションエラーの原因をAIを活用して特定した
限定情報型AIで仮説を広げ、全体検証型AIでルールの評価順や初期値の型の違いを検証した
初期値の型がnullだったことで共通ルールが先に評価され、エラーが発生したことが原因だった

@haya / 29日前

Vue3 → React移行を、テストを先に置いて進める

Vue3からReactへの移行を段階的に行い、テストを先に整備した
コンポーネント単位での移行とe2e/VRTテストの導入、VuexからZustandへの状態管理移行
移行の影響範囲を小さくするためComponent単位での移行とテストを先に実装したことが効果的だった

@泡沫京水 / 30日前

Tauriのアプリケーションでダークモードを実装する

Tauriアプリでダークモードを実装する際、Rust側にテーマ状態を持ちReactからinvokeで値を渡す設計が提案されている
Rust側で0:light、1:dark、2:systemの3値を管理し、set_themeでOSのテーマ変更を検知するイベント処理とストアによる永続化が実装されている
OS追従を実現するにはset_themeにNoneを渡してThemeChangedイベントを発火させる必要があり、既存のフロント状態管理と組み合わせる際はマウント時にget_theme_valueで値を読み込む順序が必要である

@saku / 30日前

Web 標準動向 2026年8月版

XSLTの無効化とCSSの@supports関数の導入、JavaScriptのイテレータ結合機能が標準化された
XSLTは利用者が0.1%未満でセキュリティ問題のためFirefox/Chromium/WebKitが段階的に削除、@supportsのat-rule関数で機能検出が可能に、Iterator.prototype.joinでイテレータを文字列に結合
XSLTを使用しているプロジェクトは移行が必要で、CSSの機能検出に@supportsを使う際は progressive enhancement を考慮する

@senna / 31日前

Reactライクにエージェントを開発？ - Flueの宣言的エージェント開発入門

FlueはReactライクなHooks APIでエージェントを構築するフレームワーク
usePersistentStateで状態を宣言、useSubagentでサブエージェントを登録、モデル呼び出しごとに再レンダーされる
エージェントの実行フローはモデルが決定し、ツールの入力や副作用はアプリケーション側で定義する

@しんや / 31日前

『BIツール経験者のための Sigma Computing 用語集』を作ってみた - 全9カテゴリ134語

Sigma Computingの用語集が公開され、9つのカテゴリに分類された
Workbook、Data Model、Control element、AI Assistant、Action sequence、Embedding、Data models as code、Metric、Relationshipなど
Sigmaの機能や用語の理解に役立ち、特にData ModelやAI関連の用語は開発者にとって重要である。