横断フロントエンドユニットの取り組み — 技術的負債の解消から AI 活用まで 🔖 1

こんにちは、SmartHR でプロダクトエンジニアをしている negiandleek と sakata です。 私たちは横断フロントエンドユニットに所属し、SmartHR 基本機能のフロントエンドに関する課題解決に取り組んでいます。 本記事では、横断フロントエンドユニットが組成さ

社内フロントエンドエンジニアの提案でCybozu Inside Outが読みやすくなるまで 🔖 1

この記事は、CYBOZU SUMMER BLOG FES '26の記事です。 こんにちは。開発本部 Tech Media Platformチームで、エンジニアの情報発信を支援しているjnkyknです。技術ブログのCybozu Inside Outと、エンジニアポータルサイトCyb

Vercel AI SDK（@ai-sdk/vue）と Reka UI で作るAIチャットボットのフロントエンド 🔖 1

はじめにこんにちは！アスエネでフロントエンドエンジニアをしているGucchiです！先日、私たちが開発している「アスエネSC」に、AIチャットボット機能が搭載されました！プロダクトの使い方やドメイン知識に関する質問へストリーミングで回答し、AIが答えきれないときはカスタマーサポ

フロントエンドに広がりつつある OpenTelemetry：Browser SDK の現在地 🔖 113

OpenTelemetry と聞くと、サーバーサイドのトレースやメトリクスを集めるためのもの、という印象を持っている人は多いと思います。実際、バックエンドでは OpenTelemetry を使った計装をよく見かけるようになりました。 一方で、フロントエンドの監視は Sentry

フロントエンドに広がりつつある OpenTelemetry：Browser SDK の現在地 🔖 113

OpenTelemetry と聞くと、サーバーサイドのトレースやメトリクスを集めるためのもの、という印象を持っている人は多いと思います。実際、バックエンドでは OpenTelemetry を使った計装をよく見かけるようになりました。一方で、フロントエンドの監視は Sentry

フロントエンドに広がりつつある OpenTelemetry：Browser SDK の現在地 🔖 113

OpenTelemetry と聞くと、サーバーサイドのトレースやメトリクスを集めるためのもの、という印象を持っている人は多いと思います。実際、バックエンドでは OpenTelemetry を使った計装をよく見かけるようになりました。一方で、フロントエンドの監視は Sentry

kintoneのフロントエンド刷新に残る「良くない型」の分析と改善運用 🔖 2

この記事は、CYBOZU SUMMER BLOG FES '26の記事です。 こんにちは！サイボウズでkintoneのフロントエンド刷新をしているSajiです。 ※この記事は、筆者がTS Kaigi 2026で登壇した発表内容をもとに、記事用に加筆・修正したものです。登壇資料はこ

フロントエンドの依存ライブラリの脆弱性対策に OSV-Scanner を導入してみた 🔖 1

はじめにこんにちは、クラウドエースの第三開発部に所属している金子です。昨今、フロントエンド開発では依存ライブラリの脆弱性対策が重要になっています。そこで、担当しているプロジェクトの依存ライブラリの脆弱性対策として OSV-Scanner を導入しました。この記事では、OS

フロントエンドのテスト戦略を考える - AIで変わったこと、変わらないこと - カミナシ エンジニアブログ 🔖 57

こんにちは。カミナシで「カミナシ 設備保全」サービスの開発を行っている澤木です。 今回はフロントエンドのテスト戦略についての話を書いていこうと思います。 フロントエンドのテストはどこに何をどれだけ書くかが悩ましい領域です。 ユニットテストは書きやすく実行も速いですが全部組み合わせ

JavaScript：フロントエンドのクラッシュをデバッグして依存関係の循環を解決した話（翻訳） 🔖 1

人間業の充実と意思決定の質/フロントエンドのコードを人が見る時代を終わらせたい【ep.37 #論より動くもの .fm】 🔖 2

CTO 藤村がホストするPodcast、論より動くもの.fmの第37回を公開しました。今回は2026年新卒入社エンジニアのsushichan044と、AIネイティブ世代の仕事の仕方、人間業の充実とフロントエンドのコードの品質について話をしました。 論より動くもの.fmは、Spot

フロントエンドのテスト戦略を考える - AIで変わったこと、変わらないこと 🔖 57

こんにちは。カミナシで「カミナシ 設備保全」サービスの開発を行っている澤木です。 今回はフロントエンドのテスト戦略についての話を書いていこうと思います。 フロントエンドのテストはどこに何をどれだけ書くかが悩ましい領域です。 ユニットテストは書きやすく実行も速いですが全部組み合わせ

フロントエンドのテスト戦略を考える - AIで変わったこと、変わらないこと 🔖 57

こんにちは。カミナシで「カミナシ 設備保全」サービスの開発を行っている澤木です。 今回はフロントエンドのテスト戦略についての話を書いていこうと思います。 フロントエンドのテストはどこに何をどれだけ書くかが悩ましい領域です。 ユニットテストは書きやすく実行も速いですが全部組み合わせ

プロンプトからワークフローへ：AIでフロントエンド開発の生産性を向上させる 🔖 2

LINEヤフーの技術カンファレンス「Tech-Verse 2026」の公式記事です。生成AIで作成された画像もはや最大のボトルネックはコーディング速度ではありません。問題は入力の断片化と、それらをつな...

フロントエンドが無くてもフロントエンド計装したい - @yohfee.blog! 🔖 34

OpenTelemetry でブラウザを計装する方法が公式ドキュメントに書かれていて、その中に次のような記述がある。 opentelemetry.io

フロントエンドニュース2026年7月号 🔖 1

はじめに こんにちは！Frontendチームの薄羽です。サンダル勢なので梅雨が辛いです ☔️ TSKaigi 2026 TypeScriptをテーマにしたカンファレンス （会社としてはスポンサーではないですが、個人的に応援しています） 気になった発表: Oxlintはいかにしてt

ZEN Study Webフロントエンドの10年とこれから - ドワンゴ教育サービス開発者ブログ 🔖 33

はじめに 「全てを書き換え続ける」 ——4年前のふりかえり その後の4年間 苦境 ライブラリのメジャーアップデートや移行の苦しみ API 仕様と密結合した内部実装の苦しみ 新たな取り組み 外部 API 接続を抽象化する external-functions の導入 CSS Mod

フロントエンドエンジニアがFigmaのオートレイアウトを駆使して、実装に直結するUIを設計した話 🔖 18

はじめに こんにちは、フロントエンドエンジニアのOkumaです。 現在、私が所属する開発チームではフロントエンドエンジニアである私が簡単なUIデザインの作成から実装までを一貫して担当しています。 今回は、デザインとコードをシームレスに繋ぐことができるこの体制を活かし、自身のマーク

フロントエンドのバンドル差分をPull Requestコメントから見れるようにしました 🔖 2

こんにちは！プロダクト開発部の吉田（よしよし）です。 ハンディタイプのかき氷機を買ったら、我が家で空前のかき氷ブームがおき、3日おきに新色のシロップが増えていっています。よくばるほど微妙な色になる…という人生の学びをものともせず、5歳の息子は全色混ざった茶色がお好みです🍧 さて、

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 🔖 26

こんにちは。モノタロウで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 型のデ