#フロントエンド
@kobori_slj /
- AI生成物が普及し「AIっぽさ」が見抜かれるようになった
- 物理法則の矛盾、既視感のあるタッチ、抽象的な挿絵がAIっぽさの判定基準
- 画像や資料の修正には手作業が必要で、挿絵は別途用意するべき
@shige7ga /
- RailsのフラッシュメッセージをStimulusで3秒後に自動で消す方法を解説
- Stimulus Controllerを作成して登録し、setTimeoutで要素を削除する
- Controllerの登録を忘れるとStimulusが動かないことに注意
@faable01 /
- isLoadingとisErrorの組み合わせを避けるために判別可能なユニオン型を使う方法を紹介
- 状態を1つの型にまとめ、statusフィールドで分岐し、progressやurlなどのプロパティを状態ごとに定義
- switch文で分岐した後にnever型を使うことで、状態の網羅漏れをコンパイルエラーで防げる
@tanahiro2010 /
- フロントエンド開発でAPI呼び出しを専用クライアントに分離し、Routerのloaderでデータ取得を管理した
- APIクライアントの設計、TanStack Routerのloader使用、ソート処理をhooksに分離
- 画面側の責務を減らすことで可読性と保守性を向上させる意識が重要だ
@steshima /
- next/headにuseConfig()を使ったコンポーネントを配置するとSSRでエラーになる
- SSRではnext/headの内容が別のツリーで描画され、QueryClientProviderが存在しない
- SSR環境ではnext/headにデータ取得用のコンポーネントを直接配置しないこと
@やよい /
- SVGでメッシュグラデーションを近似するためのアルゴリズムと実装方法が提案されている
- feDisplacementMapによる変位マップとBernsteinレイヤー方式による双三次補間が使われている
- 変位マップの作成時にパッチサイズのバッファを考慮し、パッチ間の隙間を防ぐ処理が必要である
@ないとー /
- 型が不正な状態を許すと、コーディングエージェントがその分岐を書く。指示を直しても減らない。
- 判別共用体で状態を直和にし、境界でparseして型で検証する。型エラーで修正箇所を自動検出する。
- 型が許す状態は分岐として書かれるため、レビューで確認する項目が増える。判別共用体で状態を網羅的に表現する。
@よさ /
- Cloudflare Workers上でTanStack Start + Hono + oRPC + PostgreSQLを組み合わせて社内ERPを開発した設計と学びを共有
- API契約と実装の分離、EVM計算の純粋関数化、Hyperdriveによるキャッシュと正しさの分離
- API契約を独立したパッケージにすることで、実装変更とAPI変更を明確に分離できるが、DTO定義の保守コストが増えることに注意
@Daichi /
- エージェント向けにデザイン一貫性を保つコンポーネントライブラリを公開
- セマンティックなpropsのみを受け付ける設計とVRTによる視覚的変更検証
- コンポーネントのスタイルを一貫して管理するためのルールを厳格に設定する
@newt /
- フロントエンド開発用のツールチェーンと設定をまとめたテンプレートが公開されている
- pnpmのセキュリティ設定、TypeScriptのstrictオプション拡張、Oxlint/Oxfmtの導入、Knipによる未使用コード検出が含まれる
- pnpmのminimumReleaseAgeを1週間に設定し、セキュリティパッチの遅延を考慮した設定が採用されている
@rana_kualu /
- JavaScriptでPromise.allにオブジェクト形式で結果を受け取れる機能がStage3に進んだ
- Promise.allKeyedでプロミスのオブジェクトを並列実行し、キーで結果を取得できる。既存のライブラリやPromise.allのオーバーロードと比較して構文の統一性が向上
- オブジェクト形式で結果を取得できるため、変数の管理が簡潔になり、エラー処理がしやすくなる。Firefox155で実装予定で、Safariも一部で実装されている可能性がある
@Kai Yoshida /
- Claude Designはポスターのレイアウト作成に強みを持つが、内容の整理や強調は人間の手が必要
- レイアウト配置や数値の見せ方が優れているが、章題の英語サブタイトルや情報の濃淡処理が不適切
- 0→1フェーズのレイアウト作成は効率的だが、1→100フェーズのブラッシュアップには人間の判断が不可欠
@jmurayama /
- MCPサーバーにグラフを表示する画面を追加した
- ui://のリソース登録と_app.jsでSVG描画、server.mjsでstructuredContentを返す
- 画面からツールを直接呼び出せないためホスト経由で処理する仕組みを理解する必要がある
@タケノコご飯 /
- HTML資料を意図的にダサくすることで、インプット効果を高める方法を紹介
- 大量の色・無意味な装飾・冗長な説明文・整列の崩れ・不要な枠線・3Dグラフ・無意味なアニメーションをすべて適用
- 資料の構造と事実を崩さずに、読みづらさを意識的に作ることで、一言一句読む習慣が身につく
@ryo-ume /
- MPAは画面遷移ごとに完成したHTMLを受け取る構成、SPAは最初にJavaScriptを受け取って以降はJSONで更新する
- MPAはHTMLをサーバーが生成、SPAはJavaScriptがJSONを元に画面を書き換える
- MPAは初回表示が軽くブラウザ標準機能が使えるが、遷移ごとにフルリロードになる
@k-taro56 /
- Next.js App Routerでライブラリを使わず多言語対応を実装
- [locale]セグメントとproxyによるルーティング、Zodスケーマとsatisfiesによる辞書管理、MDX記事のミラーディレクトリー
- 翻訳をエンジニア自身が管理し、キーの漏れをコンパイル時に検出できるようにしている
@ennagara128 /
- Qiitaのトレンド記事をAIポッドキャストで毎朝配信するサービスが開始された
- 通勤中などに聴けるように7時に更新、技術関連の記事を音声化
- 通勤中の学習や情報収集に利用できるが、Qiita投稿は通勤には間に合わない可能性がある
@TOMOSIA-HieuNT /
- AIは「React Coder」を置き換えるが、システム思考を持つエンジニアは価値が高まる
- システム思考のフレームワークをSDLCやユーザージャーニーに結びつける、技術的判断を明確に表現する
- AIに依存せず、アーキテクチャの考え方を自分で理解し、トレードオフを比較する
@sugi /
- Flutterで棒グラフと折れ線グラフの複合チャートを表示する方法が説明されている
- fl_chartライブラリを使用し、Stackウィジェットでチャートを重ねて表示、X軸の整合性と横スクロールの実装が含まれる
- 棒グラフと折れ線グラフのX軸の間隔を同じにし、横スクロールはfl_chartのズーム機能で実現する必要がある
@Katsumata /
- デザイナーがエンジニアの工数を借りずにコンポーネントの仕様からコードやドキュメントを生成する仕組みを構築した
- FigmaとヘッドレスUIから仕様を抽出し、YAMLで構造化してReactコンポーネントやテストコードを生成、アクセシビリティの仕様をヘッドレスUIから取り込む
- 生成されたコードと仕様が同期しているかをCIで検証し、生の値やコメントを禁止することで品質を担保する
