はてぶ・Qiita・Zennのトレンド記事を紹介
フロントエンドは、Webサイトやアプリのユーザーが直接触れる部分の開発を指します。HTML、CSS、JavaScriptなどが主に使われます。
フロントエンドの .env 管理に疲れた方へ：環境差分を Bundler で吸収する 🔖 45
フロントエンド開発において、.envファイルによる環境変数の管理は一般的ですが、多くの課題も抱えています。.envファイルは通常 Git の管理下に置かれないため、チーム内での共有や CI/CD パイプラインへの組み込みが煩雑になりがちです。 この記事では、その問題を解決するため
AIを活用する事でバックエンドエンジニアがフロントエンドに挑戦し、学んだことを語りたい 🔖 2
はじめに BASEでソフトウェアエンジニアをしている Futoshi Endo（@fendo181）といいます。 以前、同じチームの Kumar さんが以下のタイトルで記事を執筆されました。 「BASEでの開発体験を向上させるための取り組み」 devblog.thebase.in
Next.js App Router の基礎：フロントエンドエンジニアのための入門ガイド（Server Actionsとフォーム処理編） 🔖 1
Next.js 15のServer Actionsを使ったフォーム処理とバリデーション、セッション管理までフロントエンドエンジニア向けに実践的に解説"
ZOZOTOWNフロントエンドにおけるディレクトリの分割戦略 🔖 109
2025/08/26 にクローズドで開催された「ちょっと株式会社 × 株式会社ZOZO 合同勉強会」で発表した登壇資料です。 株式会社ZOZO ZOZOTOWN開発本部 ZOZOTOWN開発2部 WEBフロントエンドブロック 菊地 宏之
こんにちは。コドモンの羽馬です。 今回は、有志で立ち上げた社内フロントエンド勉強会についてご紹介します。 勉強会を始めた背景 社内でフロントエンド領域に強みを持つ人も限られており、チーム内で知見を共有する機会を増やしたいと考えていました。また、一人で学習するよりも、チームで一緒に
良いコード悪いコードを読んでフロントエンドの実装を改善してみた！ 🔖 1
はじめにこの記事では、近年売れている「良いコード悪いコードで学ぶ設計入門（本）」からフロントエンドにおける良い実装とは何か？を考え、特に改善できそうな部分をピックアップして紹介したいと思います。ぜひ、この記事を読んでコードの書き方を改めるきっかけにしてもらえたらと思います。
フロントエンドの .env 管理に疲れた方へ：環境差分を Bundler で吸収する 🔖 45
フロントエンド開発において、.envファイルによる環境変数の管理は一般的ですが、多くの課題も抱えています。.envファイルは通常 Git の管理下に置かれないため、チーム内での共有や CI/CD パイプラインへの組み込みが煩雑になりがちです。この記事では、その問題を解決するため
Next.js featuresディレクトリ構成で実現するスケーラブルなフロントエンド設計 🔖 1
こんにちは。フロントエンドエンジニアの禹です。 弊社で開発中の商品データを管理するWebアプリケーションに選定したfeaturesディレクトリ構成について解説し、自分が思ったメリットやデメリット、そして実装のポイント事例を紹介します。
将来を見据えて管理画面のフロントエンドをガッと改善している - inSmartBank 🔖 55
こんにちは、株式会社スマートバンクでサーバーサイドエンジニアをやっています、すてにゃん (id:stefafafan) です。今回は社内で活用している管理画面に対して実施した様々な技術的な改善を紹介していきます。 背景 改善サイクルの高速化 開発者体験の向上 依存ライブラリのメン
サイボウズフロントエンドの横断活動から考える AI時代にできること 🔖 34
2025/08/20 すごくすごい。フロントエンドミートアップ https://formx.connpass.com/event/364158/
AIコーディングを活用したフロントエンドテスト推進の取り組み 🔖 1
こんにちは、フロントエンドエンジニアの raraya です。 こちらの記事 でも触れておりますが、弊社では AIコーディング を活用しながら開発を進めています。 今回はその実践例として、フロントエンド領域におけるテストコード整備をAIで効率的に推進する取り組み をご紹介します。
将来を見据えて管理画面のフロントエンドをガッと改善している 🔖 55
こんにちは、株式会社スマートバンクでサーバーサイドエンジニアをやっています、すてにゃん (id:stefafafan:detail) です。今回は社内で活用している管理画面に対して実施した様々な技術的な改善を紹介していきます。
GPT-5、開発に使うための基礎知識 ——ワンショットでのフロントエンド開発の各モデル比較も | gihyo.jp 🔖 42
なお、Artificial Analysisを参照すると、包括的に確認できて便利です。 新しいパラメータや振る舞い GPT-5では出力の文量やツール呼び出しの形、出力制約を直接コントロールするための追加パラメータとツールが公開されています。 verbosity：出力される文章の長
サイボウズのフロントエンドエンジニアの探究活動について全てをお話します 🔖 27
この記事は、CYBOZU SUMMER BLOG FES '25 の記事です。 こんにちは、新卒フロントエンドエンジニアの mehm8128（めふも） です。 今回は、サイボウズのフロントエンドエンジニアが普段どのような探究活動をしているか、まとめてみました。 本記事は以下の 3
この記事では新卒開発研修の中で個人的に開発したRaspberry Piを使ったアプリについてお話しします。
PR単位の開発環境構築自動化によるWEBフロントエンド開発の生産性向上 🔖 1
みなさん、こんにちは！TVer SREチーム DevOps Unitの鈴木です！ TVerでは採用に非常に力を入れており、おかげさまで社員数が右肩上がりに増え続けています。 note.com TVerでは、WEB、iOS/Androidアプリ、Fire TV Stickなどといっ
Denoのフロントエンド開発の動向【2025年夏】 🔖 16
以前に以下のような記事を書きました。https://zenn.dev/uki00a/articles/frontend-development-in-deno-2024-winter上記記事の公開から一年以上が経過し、その間にDenoにおけるフロントエンド開発に関する様々なア
フロントエンド開発が楽になる！CursorでFigma MCPを試してみた 🔖 2
こんにちは、ENECHANGEの川野邉です！ 今回は、CursorでFigmaのデザインを読み込み、そのまま実装に活用するための「Figma MCP」セットアップ手順 を、3ステップで紹介します。 この仕組みを使えば、Figmaのデザインを直接Cursorに取り込み、フロントエン
Next.js App Router の基礎：フロントエンドエンジニアのための入門ガイド（コンポーネントとデータ取得編） 🔖 1
Next.js App Routerの核心であるServer ComponentsとClient Componentsの使い分け、そして最新のデータ取得パターンを、実践的なコード例とともに詳しく解説します。
人とAIの共創で進化するフロントエンド開発(Claude/Codex/v0) - SO Technologies 開発者ブログ 🔖 39
1. はじめに こんにちは。ATOM事業部フロントエンドテックリード兼デザイナーの河原です。 私はフロントエンドの開発だけでなく、要件定義や設計、デザインも担当していますが、最近では多くの作業を生成AIに頼るようになりました。 フロントエンドの開発では、小規模なタスクであれば90
人とAIの共創で進化するフロントエンド開発(Claude/Codex/v0) 🔖 39
Claude Code / Codex / v0などの生成AIツールを活用し、要件定義、設計、コーディングまでAIと共創するフロントエンド開発の実践例を紹介します。
【初級バイブコーダー向け】なぜフロントエンドからデータベースを使ってはいけないのか｜けいすけ 🔖 53
こんにちは。けいすけです。 データベースは正しく使おうね！という記事です。 最近はAIを使ったバイブコーディングが流行っています。 そこで、AIで最近プログラムを書き始めたよ！という方に向けて、 なぜデータベースを使ったプログラムは気をつけなければならないかを記事にしました。 一
疎結合で得た柔軟性と運用のリアル READYFORのマイクロフロントエンド現在地 - Findy Tools 🔖 32
公開日 2025/07/17更新日 2025/07/17疎結合で得た柔軟性と運用のリアル READYFORのマイクロフロントエンド現在地 マイクロフロントエンドは、チームや機能単位でフロントエンドを疎結合化できる構成として注目を集めています。 ただし、導入すればすべてが解決するわ
絶対に落とせない導線を守るフロントエンドテストを1か月で構築した話 🔖 29
コンポーネントの複雑化も一因でしたが、テストが限定的だったためリグレッションを検知しきれないことが、根本的な問題でした。 プロダクトの理解から始める やみくもに全ての箇所をテストするのは、短期間で成果を示すうえで現実的ではありません。そこで最初に行ったのは、プロダクトの価値を左右
絶対に落とせない導線を守るフロントエンドテストを1か月で構築した話 🔖 29
はじめにこんにちは。カナリーでテクニカルリードエンジニアをしている @react_nextjs です。私たちは 【もっといい「当たり前」をつくる】 をミッションに掲げている不動産テックカンパニーです。弊社では、現在下記のプロダクトを運用しています。「CANARY」: Bt
絶対に落とせない導線を守るフロントエンドテストを1か月で構築した話 🔖 29
はじめにこんにちは。カナリーでテクニカルリードエンジニアをしている @react_nextjs です。私たちは 【もっといい「当たり前」をつくる】 をミッションに掲げている不動産テックカンパニーです。弊社では、現在下記のプロダクトを運用しています。「CANARY」: Bt
Aprender社で主に使用しているWebフロントエンドライブラリ紹介 🔖 1
はじめに!本記事は投稿当時（2025 年 7 月時点）の情報となります。今後追記・変更の可能性があります。Aprender 社（以下、当社）に入社後、 Web フロントエンド開発に携わる中で、今まで実務での使用経験がなかったライブラリに触れる機会が多くなりました。個人的
Google I/O 2025 注目のWebフロントエンド技術 🔖 1
こんにちは、Yahoo!知恵袋のWebフロントエンド開発担当をしている津村（@l1lhu1hu1）です。LINEヤフー株式会社では、社員が海外のカンファレンスや学会に参加することを支援する制度がありま...
モダンなフロントエンドにおけるテストについて ［Modern Featured Test］ | gihyo.jp 🔖 51
本連載について はじめまして！ サイボウズ フロントエンドエキスパートチームのnus3です。 本連載では、Webフロントエンドに関してもう一歩踏み込んだ知識について、サイボウズフロントエンドエキスパートチームのメンバーによって不定期で解説記事を掲載しています。 本記事では、モダン
60万行を超えるフロントエンドのリアーキテクチャとCI戦略 - Findy Tech Blog 🔖 111
こんにちは。こんばんは。 開発生産性の可視化・分析をサポートする Findy Team+ 開発のフロントエンドリードをしている @shoota です。 ファインディのフロントエンドでは多くのプロダクトでNxを用いたモノレポを構築しています。 tech.findy.co.jp Fi
60万行を超えるフロントエンドのリアーキテクチャとCI戦略 🔖 111
こんにちは。こんばんは。 開発生産性の可視化・分析をサポートする Findy Team+ 開発のフロントエンドリードをしている @shoota です。 ファインディのフロントエンドでは多くのプロダクトでNxを用いたモノレポを構築しています。 tech.findy.co.jp Fi
Next.js App Router の基礎：フロントエンドエンジニアのための入門ガイド（概念とディレクトリ構造編） 🔖 1
Next.js 13.4で導入されたApp Routerの基本概念とディレクトリ構造を、Pages Routerとの違いを交えながら分かりやすく解説します。
【ExciteHD TechCon 2025】Tailwind CSS、Alpine.js、htmxによる「消しやすさ」を軸にしたフロントエンド戦略について発表しました 🔖 2
こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、先日弊社で開催されたExciteHD TechCon 2025で発表した、Tailwind CSS、Alpine.js、htmxによる「消しやすさ」を軸にしたフロントエンド戦略についてご紹介します。 ExciteHD
Storybook を MCP サーバ化したらフロントエンド開発が自動化される未来が見えた 🔖 6
こんにちは。テックリードの丸山 @maruyamaworks です。最近は Claude Code に全部賭けています。 前回、GitHub Copilot を使って Storybook を作った話を書きました。 developers.play.jp 今回はその応用編として、St
フロントエンドの最新情報を収集しよう - hiroppy's site 🔖 66
Feedlyをやめてから今まではRSSフィードをすべてslackに流し、記録しておきたいものは「後で見る」に保存していましたが、SlackのUI的に見づらいのなーとはずっと思っていたので、今回このようなものを作成しました。 なのでここにあるRSSフィードは、自分が普段見ているもの
フロントエンドアプリケーションがエージェントに接続する方法を標準化する AG-UI 🔖 49
{ "scripts": { "dev": "tsx watch src/index.ts" } } AG-UI リクエストを解析する まずは、AG-UI リクエストを解析して返すだけのエンドポイントを作成します。src/index.ts ファイルを作成し、以下のコードを追加しま
フロントエンドカンファレンス北海道公式ウェブサイトの乗っ取りについて経緯と原因、現況のご報告｜フロントエンドカンファレンス北海道実行委員会 🔖 136
フロントエンドカンファレンス北海道2025実行委員会の実行委員長を務めております、n13u（西村航）です。この度は当実行委員会が運営する公式ウェブサイトの乗っ取りにつきまして、皆様に大変ご心配をおかけいたしました。 現在、公式ウェブサイトでは対応を行い2024年度開催分のページが
[2025年] フロントエンド環境構築（React, TypeScript, Vite, Biome, lefthook） 🔖 4
概要フロントエンドの環境構築を行ったのでそのメモ。自分の知識のアップデートも兼ねて。ChatGPTには適宜相談しているが、最新の方法を確実に採用したいので、公式ドキュメントを参考にして、1つずつ手動で設定している。 コンセプトシンプルなアプリケーションなので、Next.
TVerフロントエンド内製化の決断。地上波と同様の「落とせないサービス」を自社でどう支えるのか 🔖 45
民放各局が制作した動画コンテンツを無料で視聴できる民放公式テレビ配信サービス「TVer」は、iPhoneやAndroidなどのスマートフォン・タブレット、コネクテッドTV（テレビアプリ）、そしてWebと複数のプラットフォーム向けにサービスを提供してきました。サービス開始以来ユーザ
プロダクト開発本部 開発2部 フロントエンドグループ マネージャーのこん(@k0n_karin)です！ 今回はタイトルの通り、ヤプリのWebフロントエンドが現在どんな状態か、どんな課題があるのかなどを整理してみました。本記事を通して、ヤプリのWebフロントエンドに興味を持っていた
僕が考えるフロントエンドの APIクライアント設計：型安全で柔軟なfetchの共通化 🔖 4
Next.jsのAPI呼び出し、もっとスマートにしませんか？Next.jsでAPI呼び出しを共通化すると、コードがシンプルになり、開発効率が格段に上がります。この記事では、僕がこだわったAPIクライアントの実装を紹介します。特に、次の2点に力を入れました：• 型安全な戻り値
今回は株式会社TAIANのフロントエンド開発(React)で採用している、Yagyu.js について紹介したいと思います。前編では戦術的DDDの内容を中心に紹介し、後編では前編で紹介した内容を実際に UI とどう紐づけていくかといった内容を紹介していこうと思います。今回の記事は
フロントエンドの画面実装をボトムアップに行う - 一休.com Developers Blog 🔖 100
概要 初めまして、CTO室の山口です。一休.com/Yahoo!トラベルのフロントエンドの開発を担当しています。 この記事ではWebアプリケーションのフロントエンドの画面実装をボトムアップに実装することのメリットと、その方法を紹介します。 ボトムアップに画面を実装する ボトムアッ
Mockoonを使ってフロントエンド開発を高速化する（Mockoonのすゝめ） 🔖 4
はじめまして、こんにちは！ MyTalent開発チームのフロントエンドエンジニア・田中です😎 今日は「Mockoon」というローカル環境でお手軽にモックサーバーを立ち上げることができるアプリケーションをご紹介したいと思います！ mockoon.com Mockoonとは Mock