はてぶ・Qiita・Zennのトレンド記事を紹介
フロントエンドは、Webサイトやアプリのユーザーが直接触れる部分の開発を指します。HTML、CSS、JavaScriptなどが主に使われます。
この記事では新卒開発研修の中で個人的に開発した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
フロントエンドがTypeScriptなら、バックエンドはPHPでもいいじゃない/php-is-not-bad 🔖 101
TSKaigi2025の登壇資料です
機能的凝集の概念を用いて 複数ロール、類似の機能を多く含むシステムの フロントエンドのコンポーネントを適切に分割する 🔖 20
TSKaigi2025の登壇資料です
TypeScriptとVercel AI SDKで実現するLLMアプリケーション開発：フロントエンドからバックエンド、そしてChrome拡張まで | ドクセル 🔖 38
TypeScriptとVercel AI SDKで実現するLLMアプリケーション開発：フロントエンドからバックエンド、そしてChrome拡張まで TsKaigi 2025 DAY2 / 10:50 〜 11:20 （レバレジーズトラック）
ある日、フロントエンドエンジニア不在のチームに配属された俺達は - SmartHR Tech Blog 🔖 71
こんにちは。データ連携チームでフロントエンドエンジニアをしている ushiboy です。 この記事では、2024 年 9 月入社でチームに参加した筆者が、データ連携プロダクトのフロントエンドのコードベースで行なった半年間の取り組みについてご紹介します。 SmartHR ではプロダ
気合の脱 create-react-app からの、AIによるフロントエンド改修の自動化 (株式会社イルシル様) 🔖 65
気合の脱 create-react-app からの、AIによるフロントエンド改修の自動化 (株式会社イルシル様) 株式会社イルシル様の依頼で、フロントエンドの近代化とパフォーマンス分析を行った事例を紹介します。 「イルシル」は、生成AIでスライド資料作成を自動化し、誰でも簡単にス
Webフロントエンドエンジニアの役割は、見た目を作る仕事からUX全体をデザインする仕事へと進化しています。必要なスキルの広さや設計のリアル、面白さややりがいまで、今のフロントエンドの全体像を等身大でまとめました。
気合の脱 create-react-app からの、AIによるフロントエンド改修の自動化 (株式会社イルシル様) 🔖 65
株式会社イルシル様の依頼で、フロントエンドの近代化とパフォーマンス分析を行った事例を紹介します。https://irusiru.jp/「イルシル」は、生成AIでスライド資料作成を自動化し、誰でも簡単にスライドやパワポが作れるサービスで、スライドのデザインは1,000種類以上
助太刀Web版のフロントエンド開発戦略 - Pages RouterからApp Routerへの移行篇 🔖 2
はじめにこんにちは、助太刀フロントエンドチームの西倉です！助太刀のフロントエンドチームでは、主にNext.jsを用いて開発しています。Next.jsのPages RouterかApp Routerのどちらで開発をするか、というテーマでの議論は話題に事欠かないかと思います。そ
開発を止めない段階的フロントエンドリプレイスの実践 (3) 組織編 🔖 31
フロントエンドリプレイスにおいて、プロジェクトを推進する上でのチーム体制や、円滑なコミュニケーション、そして品質を維持するための取り組みなど、組織的な工夫について紹介します。
Webフロントエンドエンジニアの役割は、見た目を作る仕事からUX全体をデザインする仕事へと進化しています。必要なスキルの広さや設計のリアル、面白さややりがいまで、今のフロントエンドの全体像を等身大でまとめました。
開発を止めない段階的フロントエンドリプレイスの実践 (2) 技術編 - エムスリーテックブログ 🔖 33
【デジカルチーム ブログリレー2日目】 こんにちは、デジカルチームでソフトウェアエンジニアをしている穴繁です。 長年開発を続けてきたサービスを運用していると、「そろそろアレもコレも新しくしたいなぁ…でもサービスは止められないし、どう進めたものか…」なんて頭を悩ませることはありませ
開発を止めない段階的フロントエンドリプレイスの実践 (2) 技術編 🔖 33
フロントエンドリプレイスにおいて、段階的な移行を支えた技術的なアプローチについて紹介します。
開発を止めない段階的フロントエンドリプレイスの実践 (1) 計画編 - エムスリーテックブログ 🔖 37
【デジカルチーム ブログリレー1日目】 こんにちは、デジカルチームでソフトウェアエンジニアをしている穴繁です。 長年開発を続けてきたサービスを運用していると、「そろそろアレもコレも新しくしたいなぁ…でもサービスは止められないし、どう進めたものか…」なんて頭を悩ませることはありませ
ある日、フロントエンドエンジニア不在のチームに配属された俺達は 🔖 71
こんにちは。データ連携チームでフロントエンドエンジニアをしている ushiboy です。 この記事では、2024 年 9 月入社でチームに参加した筆者が、データ連携プロダクトのフロントエンドのコードベースで行なった半年間の取り組みについてご紹介します。 SmartHR ではプロダ