YOUTRUSTのフロントエンドをREGO化した話 🔖 1

REGOとは？ こんにちは！YOUTRUST で REGO Engineerをしている 中谷です！ 前回のテックブログ の登場から半年が経ちました！ 2025年年末にリリースの振り返りブログを書き、2026年ももう半年経とうとしていることに、とても驚いています。 「REGO化」と

フロントエンド開発で使えるMCPサーバーを徹底的にまとめてみた 🔖 4

はじめに以前Chrome DevTools MCPとCursorとの連携について書きましたが、MCP（Model Context Protocol）に対応したサーバーは他にもどんどん増えてきています。「コードを書く」だけだったAIエージェントが、ブラウザを操作したり、デザインを

書き下ろし Techbook 完配！ウォンテッドリーフロントエンドエンジニアの TSKaigi 2026 スポンサー参加報告 🔖 5

こんにちは、ウォンテッドリーでフロントエンドチームのリーダーをしている原剛士 (@chloe463) です。202...

基本からしっかり学ぶフロントエンドテスト入門 | 技術評論社 🔖 107

概要 AIによるコード生成が現実となった今、ソフトウェアテストの重要性はますます高まっています。AIエージェントの能力を最大限に発揮する上でも、テスト自動化などを含む開発基盤の整備は必須のものになってくるでしょう。本書では、フロントエンド開発の現場で効果的にテストを導入・運用する

PdM もデザイナーも AI でプロトタイプを作る — フロントエンドエンジニアが整えた3つの準備 🔖 2

ランキング参加中プログラミング こんにちは。フロントエンドエンジニアをしているNokogiri（@nkgrnkgr）です。 はじめに カケハシのある新規プロダクト開発で、PdM やデザイナーが AI を使って実コードベースでプロトタイピングをするようになりました。進め方としてはわ

フロントエンドとバックエンドをトレースでつないで原因特定を簡単に！ 🔖 1

この記事では、Mackerel APMとOpenTelemetryを用いて、フロントエンド・バックエンド間の一気通貫な分散トレーシングを実現し、パフォーマンス調査を迅速化する手法を解説します。ユーザー操作に紐づくコンテキスト伝搬と属性による集計を活用することで、具体的なソースコー

AIと進める未経験フロントエンド改修：BEエンジニアが既存コードを読み解くまで - Tabelog Tech Blog 🔖 12

こんにちは、食べログ 飲食店プロダクト開発部 アワード予約チームに所属するジュニアエンジニアの南野です。 今回は、普段ほとんど触れていないフロントエンド領域の既存改修タスクにAIとともに取り組み、どう突破したかという経験をお話しします。 1. はじめに 食べログでは、特定のスタッ

モノタロウのフロントエンド刷新の取り組み⑤～6年強のあゆみと学び（技術選定と本番運用のギャップをどう乗り越えるか） - MonotaRO Tech Blog 🔖 25

こんにちは。モノタロウでECサイトの開発・運用を担当している辰巳です。 モノタロウではECサイトのフロントエンド刷新に取り組んでおり、その内容をブログで共有したいと思います。 モノタロウのECサイトは1,000万を超えるユーザに利用される事業者向け間接資材ECで、当社のビジネスの

フロントエンドもアーキテクチャに向き合う！ 🔖 17

フロントエンドもアーキテクチャに向き合う！こんにちは！フロントエンドエンジニアの浅川です！この記事では、社内向け管理画面（以降「社内システム」と呼びます）を段階的に整えながら、今の形へたどり着くまでの考え方を、時系列でまとめてみたいと思います。 この記事でまとめること

フロントエンドもアーキテクチャに向き合う！ 🔖 17

フロントエンドもアーキテクチャに向き合う！こんにちは！フロントエンドエンジニアの浅川です！この記事では、社内向け管理画面（以降「社内システム」と呼びます）を段階的に整えながら、今の形へたどり着くまでの考え方を、時系列でまとめてみたいと思います。 この記事でまとめること

フロントエンドもアーキテクチャに向き合う！ 🔖 17

フロントエンドもアーキテクチャに向き合う！こんにちは！フロントエンドエンジニアの浅川です！この記事では、社内向け管理画面（以降「社内システム」と呼びます）を段階的に整えながら、今の形へたどり着くまでの考え方を、時系列でまとめてみたいと思います。 この記事でまとめること

【アーキテクチャ】大量の類似 Feature を持つ Enterprise なフロントエンド設計 🔖 1

はじめにReactのフロントエンド開発において、似たような画面が増えてくると必ずぶつかる問題があります。「ほぼ同じコードが複数箇所に存在する」「新しい画面を追加するたびに同じ作業が繰り返される」—この問題に対して、共通コンポーネントや既存のデザインパターンでは解決しきれないケー

[Frontend Performance - Part 20] フロントエンドパフォーマンス改善 完全ロードマップ総まとめ 🔖 1

📝 注意この記事はAIによる編集支援を受けています。📚 目次0. はじめに：「勘に頼った最適化」から「計測駆動型の改善プロセス」へ1. 振り返り：5つの基礎パートと8つの知識レベル2. 3つの柱となる知識の総まとめ3. 実践的な最適化ロードマップ –...

Auth0から内製認証基盤への移行における、フロントエンドライブラリの内製化について - enechain Tech Blog 🔖 21

はじめに 認証状態を管理するライブラリ 開発の方針 設計について 設計で意識したポイント 認証状態の設計 インターフェースの最小化 依存ライブラリの最小化 キャッシュ制御の柔軟化 負荷対策 テスト アプリケーション側の変更作業 終わりに はじめに こんにちは、ソフトウェアエンジニ

フロントエンドの相手が変わった - AIが加わったWebの新しいインターフェース設計 🔖 151

フロントエンドエンジニアがこれまで向き合ってきた相手は、人間でした。しかしAIの登場によって、この前提が変わりつつあります。 AIはWebの出力者になりました。ストリーミングで流れるチャットUIが注目を集め、インタラクティブなUIを返せるMCP Appsも登場しています。 同時に

全てを可視化する「全部入り走行データビューア」を実現するデータパイプラインとフロントエンド実装スタック 🔖 1

はじめにチューリングでは毎日、データ収集車両による走行データと走行実験による実験結果データが蓄積されていきます。私たちはこれらを可視化するツールに非常に力を入れて開発しており、充実した可視化ツールはAIモデルを開発するエンジニアにとってもデータ収集を担うドライバーにとっても多く

【2026年版】フロントエンド技術選定：React・Vue・Angularの現在地と「AI時代の生存戦略」 🔖 210

はじめに 「どのフレームワークを選ぶべきか？」 これは初学者だけでなく、新規事業の技術選定を任された中級者にとっても常に悩ましいテーマです。 いまフロントエンドの世界は、大きな転換期を迎えています。長年使われてきたReact、Vue、Angularの三大フレームワークが、これまで

【第1部】フロントエンドにテストを入れる、とはどういうことか 🔖 2

はじめに本記事は、バックエンドエンジニアとして9年目を迎えた私が、フロントエンドのテスト導入をチームでリードすることになってからの1ヶ月間を振り返る実践記です。VitestとAIエージェント(Cursor、Claude Code)を組み合わせてテストを書き進めるなかで、何がうま

Claude Designが来た日 ─ Webデザイナーとフロントエンドの仕事はどこまで削られるのか 🔖 341

はじめに 2026年4月17日（米時間金曜）、Anthropicが Claude Design を research preview として発表 自然言語でプロトタイプ・スライド・モックアップ・LPを作れる、Claude Opus 4.7ベースの新機能 競合は Figma Mak

2026年3月にBaselineになったReporting APIを活用してフロントエンドのObservabilityを高める - プププなテクブ 🔖 74

2026年3月に Reporting API というWeb標準 API が Baseline に到達し主要ブラウザで利用可能になりました。 今回はこの便利な Reporting APIを実際に使ってみて、できることやユースケースについて考えてみます。 Reporting API

60分で学ぶ最新Webフロントエンド 🔖 569

2026/04/16 に「技育CAMPアカデミア」で話したスライドです。2025 年のはてなインターンの講義資料 (https://speakerdeck.com/hatena/internship-2025-frontend) に手を加えたものになってます。 https://t

REST API と GraphQL の違いをフロントエンド目線で整理する 🔖 1

フロントエンド開発をしていると、API 連携はほぼ必ず登場します。その中でよく比較されるのが REST API と GraphQL です。名前は知っていても、実務でどう違うのか、フロントエンドの実装にどう影響するのかは意外と曖昧になりやすいと感じます。この記事では、フ...

サイボウズにフロントエンドエンジニアとして新卒入社して1年が経ちました 🔖 1

こんにちは、フロントエンドエンジニアのmehm8128です。 僕は25卒としてサイボウズに新卒入社し、内定者アルバイト時代も合わせると1年半なのですが、正社員としてはちょうど1年が経ちました。弊社1年目ではどんなことができるのかという参考に、書いてみました。 フロントエンド基盤の

モダンCSSが変えるフロントエンド設計「アフォーダンスレイヤー」のすすめ 🔖 87

1. はじめに：コンポーネント指向の限界 UIを構築する際、ファイルアップロード用の<input type="file" />を、ページ内の他のボタンと同じ見た目（シャドウ、ホバーエフェクト、余白など）にしたいケースはよくありますよね。しかし、ファイル入力をネイティブのUIと競合

Webフロントエンドやモバイルアプリからのトレースの投稿に利用できるクライアントトークンをリリースしました ほか7件のアップデート 🔖 3

こんにちは！Mackerel チーム CRE の戸谷（id:KGA）です。今回のアップデート内容をお知らせいたします。 Webフロントエンドやモバイルアプリからのトレースの投稿に利用できるクライアントトークンをリリースしました トレース課題通知のスヌーズ解除までの残り時間が確認で

【2026年版】Claude Code フロントエンド特化の設定・ツールまとめ 🔖 8

はじめに現在、私が所属するプロジェクトではReact・Next.jsを用いたリアーキテクチャを進めています。その際、導入したClaude Code周辺の設定・ツールが非常に開発スピードを上げてくれたので、この記事ではそれらを紹介していこうと思います。「なんとなく動かせている

【2026年版】Claude Code フロントエンド特化の設定・ツールまとめ 🔖 8

はじめに現在、私が所属するプロジェクトではReact・Next.jsを用いたリアーキテクチャを進めています。その際、導入したClaude Code周辺の設定・ツールが非常に開発スピードを上げてくれたので、この記事ではそれらを紹介していこうと思います。「なんとなく動かせている

業務アプリのフロントエンド負債と向き合い、Tailwind CSS から Panda CSS への移行を決めた話 🔖 85

はじめに はじめまして。2025 年 10 月より、レバテック開発部にジョインした早川です。 私たちのチームでは、社内業務を効率化するための Web アプリケーションを Next.js（App Router）+ TypeScript で開発しています。フロントエンドのスタイリング

業務アプリのフロントエンド負債と向き合い、Tailwind CSS から Panda CSS への移行を決めた話 🔖 85

はじめにはじめまして。2025 年 10 月より、レバテック開発部にジョインした早川です。私たちのチームでは、社内業務を効率化するための Web アプリケーションを Next.js（App Router）+ TypeScript で開発しています。フロントエンドのスタイリング

フロントエンドのディレクトリ構成で再帰的な features 構成を推したい 🔖 13

はじめに こんにちは。PKSHA Technology で SWE をしている須藤です。 私の所属する PKSHA Speech Insight（PSI）チームでは、React + TypeScript で複数の Web アプリケーションを開発しています。 Feature 型のデ

フロントエンドのディレクトリ構成で再帰的な features 構成を推したい 🔖 13

はじめにこんにちは。PKSHA Technology で SWE をしている須藤です。私の所属する PKSHA Speech Insight（PSI）チームでは、React + TypeScript で複数の Web アプリケーションを開発しています。Feature 型のデ

フロントエンド結合テストの導入事例（Playwright + MSW） 🔖 1

新時代のフロントエンドツールチェイン Vite+ を試してみた 🔖 105

Vite+ は Vite, Vitest, Oxlint, Oxfmt, Rolldown, tsdown といった人気のツールを統合し、開発, テスト, ビルド, リント, フォーマットなどのフロントエンド開発に必要な機能を1つのツールチェインで提供する新しいフロントエンドツー

モノタロウのフロントエンド刷新の取り組み①～大規模ECサイトのフロントエンドをドメイン単位で再設計した話 - MonotaRO Tech Blog 🔖 56

こんにちは。モノタロウでECサイトの開発・運用を担当している池です。 モノタロウではECサイトのフロントエンド刷新に取り組んでおり、その内容をブログで共有したいと思います。よろしければ、関連記事もあわせてチェックしてみてください。 Vue.js？React？フレームワーク選びの７

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

株式会社FinatextのInsuretechドメインでデザインエンジニアを務めさせていただいている安藤（@ameprsand_xyz）です。本記事では2026/3/6に開催された AI時代のフロントエンド実践開発！ - Finatext Tech Night #6 のイベント

バックエンドエンジニアがフロントエンドをLLMに頼って実装した反省点 - SmartHR Tech Blog 🔖 63

SmartHRでプロダクトエンジニアをしている大澤と申します。この記事では、バックエンドエンジニアである自分がフロントエンドのコードをLLMに頼って実装した際の反省点について紹介します。 現在、LLMはだいぶ良い感じのコードを書いてくれるようになってきています。Claude Op

フロントエンドにおけるキャッシュの全レベルを理解する 🔖 1

Webアプリケーションを高速化する技術の中で、キャッシュは最も重要なものの一つです。ただ、キャッシュといっても種類はさまざまです：React の memoizationブラウザの HTTP cacheService Worker の Cache APICDN...

バックエンドエンジニアがフロントエンドをLLMに頼って実装した反省点 🔖 63

SmartHRでプロダクトエンジニアをしている大澤と申します。この記事では、バックエンドエンジニアである自分がフロントエンドのコードをLLMに頼って実装した際の反省点について紹介します。 現在、LLMはだいぶ良い感じのコードを書いてくれるようになってきています。Claude Op

2025年に社内で話題になったフロントエンド技術トピックを振り返る 🔖 2

こんにちは。AI在庫管理のプロダクト開発をしているソフトウェアエンジニアの大村です。 本記事では2025年にカケハシ社内で話題になったフロントエンド関連の技術トピックをピックアップしながら、昨年を振り返っていきます。 主要なライブラリ / フレームワークのアップデート React

kintone フロントエンド開発における AI 活用の取り組み 🔖 2

こんにちは！サイボウズでプロダクトエンジニアをしている @daikimkw です。 この記事では、kintone のフロントエンド開発で AI をどのように活用しているか、そして kintone 開発全体として生産性を向上させるために今後どのような取り組みをしていくかについて紹介

Swaggerを使ったAPIドキュメントの作成と、バックエンドとフロントエンド間の連携 🔖 2

この記事は、合併前の旧ブログに掲載していた記事（初出：2020年11月25日）を、現在のブログへ移管したものです。内容は初出時点のものです。こんにちは。LINE Growth Technology福岡...

フロントエンド向けに「汎用API」を構築すべきではない理由と実践的アプローチ 🔖 22

1. はじめに：本記事の目的 本記事は、Don’t Build a General Purpose API (4 Years Later) という記事を元に、自社サービスなどのフロントエンド向けに 「汎用目的のAPI（General Purpose API）」 を構築せず、画面（

フロントエンドに汎用APIを使わせてはいけない（4年後の続編記事）（翻訳）｜TechRacho by BPS株式会社 🔖 41

概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: Don’t Build a General Purpose API (4 Years Later) - Max Chernyak 原文公開日: 2025年12月11日 原著者: Max Chernyak 日本語タイトル

フロントエンドに汎用APIを使わせてはいけない（4年後の続編記事）（翻訳） 🔖 41

巨大な Next.js アプリケーションを垂直分割してマイクロフロントエンド化した話 🔖 1

はじめに こんにちは！カイポケコネクトの開発推進チームでエンジニアをしている @_kimuson です。主にフロントエンドを中心に開発生産性の向上に取り組んでいます。 今回は、カイポケコネクトのフロントエンドを単一のNext.js構成からマイクロフロントエンド化した話を紹介します

「State of JavaScript 2025」公開。フロントエンドライブラリはReactがシェアを伸ばして1位、ビルドツールはついにwebpackにviteが追いつく 🔖 120

「State of JavaScript 2025」公開。フロントエンドライブラリはReactがシェアを伸ばして1位、ビルドツールはついにwebpackにviteが追いつく 回答者の国別分布を見ると米国が16％、ドイツが8％、フランスが7％、イギリス（UK）が5％、ロシアが3％、

React Tokyo ミートアップ #13 参加レポート - フロントエンド開発者のための「厄払い」 🔖 2

2026年1月23日に開催された「React Tokyo ミートアップ #13」に参加し、オプティムからは高橋さんがメイントーク「フロントエンド開発者のための『厄払い』」で登壇しました。トークでは、Shai‑Hulud などのサプライチェーン攻撃、React Server Com

フロントエンドのモジュール分割を考える 🔖 3

最近、わかる！ソフトウェア設計トレーニング を読みました。以下の紹介文にある通り、普遍的な設計理論をどういった場合に適用するか判断力を養う問題が載っています。本書は、その問いに正面から向き合います。 ソフトウェア設計には、確かに現場の経験が欠かせません。 しかし、その根底には

CSS: フロントエンドアーキテクチャに「アフォーダンス」層も必要な理由（翻訳） 🔖 2

余白を設計しフロントエンド開発を 加速させる 🔖 30

この資料は TECH BATON in 東京 〜うちのフロントエンド進化のツボ ！コード長持ちのための技術〜 の登壇資料になります https://findy.connpass.com/event/380541/