Zennの「frontend」のフィード

【状態管理】Reactの状態管理、結局どう選ぶ？再レンダリング・テアリング・React Compilerをスッキリ整理

いもふけ — Fri, 13 Mar 2026 07:42:01 GMT

React で開発していると、「 useState だけで十分？」「 Jotai や Zustand みたいなライブラリは入れるべき？」「最近よく聞く React Compiler って何がすごいの？」と迷う瞬間、ありませんか？ React の状態管理は、単に「便利なライブラリを探す話」ではなく、「再レンダリング」「テアリング」「 React の新機能との相性」をどう考えるかの話でもあります。この記事では、初心者向けにこの 3 つを順番に整理しつつ、最後に「じゃあ実務ではどう選ぶのがよいのか」までまとめます。特に今は React Compiler が自動メモ化を担うようになっ...

【初級編】コーダー＆AIが喜ぶFigma設計：最低限これだけは守って

saku — Fri, 13 Mar 2026 06:05:58 GMT

はじめに「このデザイン、ブラウザではちょっと難しいですね」そんな言葉をコーダーから言われた経験、ありませんか？デザインツールとコードの世界は、実は密接に繋がっています。特にFigmaのAuto Layoutは、CSSのFlexboxと対応関係にあるため、Figmaでの設計の仕方が、そのまま実装の難易度に直結します。この記事では、実装エンジニアの視点から「最低限これだけは守ってほしい」というFigma設計のルールをまとめました。今日から実践できる基本的な内容に絞っています。この記事で分かることなぜAuto Layoutで組むべきなのか Auto Layoutで何ができ...

Figma Make × Storybook でプロト作成・UI調整をデザイナーと協業できるようにした話

hyuga — Fri, 13 Mar 2026 05:50:53 GMT

はじめに本記事では、Figma Make で生成したプロトタイプを起点に、Storybook と MSW を組み合わせてデザイナーが直接 UI を調整できる開発フローを構築した事例を紹介します。エンジニアとデザイナーの役割分担を明確にし、それぞれが得意な領域に集中できる体制を目指した取り組みです。 1. Figma Make が生成したコードの特徴 Figma Make が出力したコードは、そのまま使えるレベルではないものの、開発のたたき台としては十分な品質でした。 React コンポーネントとして分割済み（ページ、ヘッダー、カードなど） Tailwind CSS でスタ...

BEエンジニアと対等に議論するためにFEエンジニアが設計フェーズで確認すべき5つのこと

ファム・タイン・ロン — Fri, 13 Mar 2026 02:00:05 GMT

はじめにスプリント終盤、実装が80%終わったタイミングでこんなことが発覚したことはありませんか？「あれ……このAPIってフラットなリストで返ってくるけど、画面ではカテゴリごとのツリー構造で表示しないといけないんだけど」結果：チーム全員で3日間の残業。リリース延期。関係者への謝罪。あるいはこんなケースも。画面に「データがありません」と表示されているのに、実は「権限がなくてデータが見えていない」だけだった——セキュリティ上の問題として後から発覚。こういった問題、実は「実装フェーズに入ってから気づいた」というケースがほとんどです。では、誰がもっと早く気づけたのか？ F...

WebのPDF出力はWeb標準APIでいい

D.YAMAGUCHI — Fri, 13 Mar 2026 00:00:06 GMT

Motivation / Usecase PDFそのものを作るのはつらい。 Webサービスで「PDFを出力したい」という欲求は、いろんな場面で多くあると思います。例えば、領収書を軽く作って印刷させたいとか、グラフを資料としてPDF化させたいとか……。とくに最近はAIを使って生成させてしまえば、JSONデータやCSVデータを読み込むだけでスタイリッシュなグラフを簡単に作れます。スタイリッシュなグラフはPDFに出したいですよね。グラフだけであれば、表計算やPythonなどのライブラリを使う方法もあります。しかしAIを使う前提だと、操作コストやライブラリ特有のクセが厄介です。...

動作確認をClaude CodeのChrome拡張機能で自動化

Kei Hasegawa — Thu, 12 Mar 2026 23:25:05 GMT

はじめに：開発において、最も気が乗らず、最も手を抜きたくなるものとは... 動作確認です。大切であることは過去の苦い経験から重々承知ですが、一番気が乗らない。 AIのおかげでDraft PRは大量に作成できるけど、動作確認がまだ終わっていないためにレビューリクエストができないもどかしさ。 Playwright MCPやBrowser Useでブラウザ操作を行うことはできたが、動作確認したことを証拠として残すまでどうしようか悩んでいました。解決策：Claude for Chromeを使い、動作確認用PRを作る方法 ClaudeにはChromeの拡張機能（Claude for C...

AI間違いシリーズ：CopilotにTailwindの ! の位置を指摘されたので確認した話

miii — Wed, 11 Mar 2026 18:43:26 GMT

Copilotにこんな指摘をされました。 Tailwind の ! は末尾ではなく先頭につけるのが正しいので、そこも合わせて修正しています。「え、そうなの？」と思って一瞬信じかけたんですが、公式ドキュメントを確認したら違いました。 Copilot 公式ドキュメントつまり Version 書き方 v3 !bg-red-500 v4 bg-red-500!（推奨）結論 Tailwind v4では ! はクラス名の末尾につけるのが推奨です。 Copilot、時々お茶目な間違いもするけど、優秀な助っ人なのは間違いない。これからもよろしく。ちなみ...

AIに設計を書かせるだけで「理解負債」と「実装漏れ」が激減した話【フロントエンド編】

せり — Tue, 10 Mar 2026 23:00:05 GMT

はじめにこんにちは。PeopleX AI面接を開発している@seriseri_55です。先日こちらの記事を書きました。 AIに設計を書かせるだけで「理解負債」と「実装漏れ」が激減した話ありがたいことに、一時はてなブックマークのテクノロジーカテゴリのトップエントリーになるなど、多くの方に読んでいただきました。元記事ではバックエンド・フロントエンドを問わず AIコーディング全般に通じる話としてまとめていました。ただ、実際に日々開発していて感じるのは、フロントエンドにはフロントエンド特有の難しさがあるということです。元記事の内容をそのままフロントエンド開発に適用しようとすると、少し物...

AIの台頭でデザインとフロントエンドの垣根は融合しつつあるのか？ - Finatext Tech Night #6 イベントレポート

ampersand_xyz — Tue, 10 Mar 2026 07:18:15 GMT

株式会社FinatextのInsuretechドメインでデザインエンジニアを務めさせていただいている安藤（@ameprsand_xyz）です。本記事では2026/3/6に開催された AI時代のフロントエンド実践開発！ - Finatext Tech Night #6 のイベント及び、登壇させていただいた資料についてのレポートをお届けさせていただきます。登壇セッションテーマ AIの台頭でデザインとフロントエンド開発の垣根は融合しつつあるのか？イベントでお話しさせていただいた内容は以下のスライドになります。以下、発表内容についてかいつまんでレポートを記載します。現実的に...

SEOスコア61→90点に上げた実例。診断から改善コード生成まで自動でやった話

今井政和 — Tue, 10 Mar 2026 03:46:26 GMT

フロントエンドエンジニアの知人が、自分のポートフォリオサイトをSEO_CHECKで診断したところ61点だった。表示速度は速い。コードも綺麗。でもSEOスコアを計測したことがなかった、という。エンジニアあるあるだと思う。パフォーマンスやアクセシビリティは意識するが、検索エンジン向けのメタ情報は後回しになりがちだ。この記事では、実際のbefore/afterのレポートをもとに、何が問題で、どう直したかを書く。 Before：61点の内訳 ※公開許可ありがとうございます。カテゴリ別スコアはこうなっていた。カテゴリスコア達成率構造化データ 23/40 57%...

20年目のフロントエンドエンジニアが自作APIとReactを結合して気づいた「境界線」の壁（フロントエンド結合編）

Yuta Goi — Mon, 09 Mar 2026 02:54:49 GMT

1. はじめに前回、20年目のフロントエンドエンジニアがフルスタックを目指し、Gemini先生と共にNode.js + PostgreSQLでタスクマネージャーのバックエンドAPIをゼロから構築しました。今回はその後編として、「構築した自作APIと、Reactで作ったフロントエンドを結合する」プロセスをお届けします。普段フロントエンド専任で働いていると、「用意されたAPI仕様書通りにデータを送受信する」ことに慣れきっています。しかし、今回バックエンドも自分で構築し、両者を繋ぎ合わせてみたことで、今まで見えていなかった「フロントエンドの常識が通用しない壁」や、「DBの仕様か...

ライブラリなしで実装するJSON→TypeScript型生成ツールの実装(Astro/TypeScript)

devtoolkits.app — Mon, 09 Mar 2026 01:57:31 GMT

はじめにフロントエンド開発において、APIのレスポンス（JSON）からTypeScriptのインターフェースや型定義を作成する作業は頻繁に発生します。「JSONを貼り付けたら即座にTypeScriptの型が出る」というツールは非常に便利ですが、その裏側はどうなっているのでしょうか？ DevToolKits では、外部ライブラリに頼らず、再帰的な型推論を用いてこれを実装しました。今回はその軽量な実装手法について解説します。 https://devtoolkits.app/ja/tools/json-to-typescript 実装の核心：再帰的な型推論ツールの心臓部は、値を...

React開発者Dan氏が解説する次世代SNSアーキテクチャ「ソーシャル・ファイルシステム」

Nao8 — Mon, 09 Mar 2026 00:00:01 GMT

ちょっと面白い記事を読んで勉強になったので自分用にメモがてら残します。 https://overreacted.io/a-social-filesystem/ はじめに：なぜ「ファイル」の話をするのか？私たちが普段PCで扱う「ファイル（.doc, .jpgなど）」には、Webアプリにはない強力な特性があります。それは、「ツールとデータの分離」です。 Wordで作った.docファイルは、Wordがなくても、Google DocsやLibreOfficeで開けます。ファイルはユーザーの手元（ファイルシステム）にあり、特定のアプリにロックインされていません。しかし、Instagram...

PC使用前提のレガシーUIをスマホ対応させるフロントエンド技術紹介

愚痴るならプロンプト打て〜AIエージェント頼みの開発裏側〜 — Sun, 08 Mar 2026 17:18:49 GMT

【導入】20年前のPC前提UIをスマホに持ち込むことの難しさ 2000年代に熱狂を生んだFlash製のキャラクターチャット。もなちゃと。大部屋など広大なキャンバス（1000x1000px等）をアスキーアート（AA）のキャラクターが縦横無尽に動き回り、吹き出しで会話するUIは、当時のPCブラウザにおいてまさに魔法のような体験でした。 flashの終焉と共に2020年末でサービスを終了したもなちゃとは、有志の方の手によりHTML5版のサービスとして蘇り、後にオープンソースとして公開されます。しかし、そのオープンソースの思想を現代のモバイル環境に持ち込もうとした時、アーキテクトとして難...

10回直しても崩れ続けたUIが、プロンプトの構造を変えたら一発で決まった話

POECA — Sun, 08 Mar 2026 03:05:16 GMT

! この記事は、AIへのUI実装指示で同じ「崩れ→修正→また崩れ」を繰り返している方に向けた、再現性のある指示設計の話です。はじめに Claudeに、頼むとき次のように依頼したことはないですか？「写真の下にタイトルを置いて、右下にQRコードを配置してください」一見、十分な指示に見えます。でも結果は崩れる。修正する。また崩れる。自分・・・それやりました。同じカードUIを10回以上修正しながら、なぜ毎回ズレるのか分からずにいました。でも原因は指示の量じゃなかった。指示の構造の問題でした。何を作っていたかポッドキャストのエピソードをカード画像にして配布できるWebア...

LIFF開発でログインページのパスを変更したらハマった話！エンドポイントURL設定の落とし穴と対処

てづっぴ — Sat, 07 Mar 2026 05:34:58 GMT

はじめに 🔐「ログインページのパスを意味のあるものに変更したい！」 😱「あれ？ログイン後にLPに遷移されてログインが完了しない...！」 🤔「LIFF設定で何か忘れてる？」そんなトラブルに遭遇したことはありませんか？先日、LIFF（LINE Front-end Framework）を使用したWebアプリでログインページのパスを変更したところ、想定外のトラブルに見舞われました💦 今回は、その実体験で学んだ対処法と注意すべきポイントをシェアします！同じようなトラブルで困っている方や、LIFF開発を始める方の参考になれば幸いです🙏 発生した問題の概要 🏗️ 変更内容変更前...

Pico.css入門～バッグエンドエンジニアの救世主！

小峯知之 — Sat, 07 Mar 2026 04:57:39 GMT

Pico.cssは、BootstrapやTailwind CSSと違い、2つしかクラスをもっていません。クラスの「暗記ゲー」に疲れた私がPico.cssを選んだのは、containerとgridの2種類のクラスだけ覚えればいいからです。それだけで下図のようなスタイリングが可能です。あとはHTMLのセマンティクス次第で、CSSが自動的に適用されます。例えば

テキスト

は自動で「カード」になりますし、

WCAGの『操作可能』は、もしもの日のためにある ─ けが・持病・発作から考えるWeb設計

くさば — Sat, 07 Mar 2026 00:54:58 GMT

はじめに Webアクセシビリティを説明するとき、どうしても「障害のある人のための特別な配慮」という文脈だけで語られがちです。しかし、WCAG 2.2 の原則 2 である操作可能（Operable）を丁寧に読むと、それはもっと広い話だと分かります🧭 操作可能とは、ユーザーインターフェースとナビゲーションが、その人がその瞬間に取り得る操作方法で実行できることを意味します。これは常設の障害だけではなく、骨折、捻挫、腱鞘炎、寝不足、発熱、薬の副作用、混雑した電車の中で片手しか使えない状況、そして光感受性てんかんのような持病まで含めて考える必要があるということです🩹 そして強調したいのは、...

CSS設計の課題を @layer で解決する — FLOCSS をモダン化した mFLOCSS

Shunei — Fri, 06 Mar 2026 16:42:25 GMT

FLOCSS を使っていて「手が止まる」経験 FLOCSS を導入して、ディレクトリを整えて、プレフィックスを付けて。「これで CSS 設計ができるようになった」と思ったことはありませんか？でも実務でコーディングを重ねるうちに、毎回同じところで手が止まるようになります。「このスタイル、Component に書くのか Project に書くのか」「ヘッダー内のリンク色は、どの層で定義するのが正しいのか」テンプレートのフォルダ構成は頭に入っている。なのに、判断ができない。後輩の指導をしていても、この相談は本当に多いです。あるとき気づいたのは、テンプレートは「結果」であって「判断...

ブラウザだけでAIを動かす：WASM / ONNX Runtime Web / TFLite Webの実装ノート（一般化）

Hiroto Ikeda — Fri, 06 Mar 2026 09:13:57 GMT

本記事は公開情報と個人検証をもとに一般化した技術メモです。所属組織の見解ではありません。コードはデモ用に新規で書き起こしたサンプルであり、社内資産・第三者の非公開物の転用はありません。数値は一例で環境依存します。はじめに一般的に AI 推論はクラウド（サーバ）で行いますが、ブラウザ上で端末の計算資源を使って AI を動かすことで次の利点が得られます。サーバ費用の圧縮（サーバーフリー構成も可）個人データが端末から出ないプライバシー利点インストール不要で配布が容易本記事は、公開情報と個人検証をもとに一般化した「ブラウザで AI を動かす」実装パターンの整理で...