複雑なフォームの jotai 設計 / Designing jotai(state) for Complex Forms #layerx_frontend
複雑なフォームを継続的に開発していくための技術選定・設計・実装 #tskaigi / #tskaigi2025
複雑なフォームの jotai 設計 / Designing jotai(state) for Complex Forms #layerx_frontend
フロントエンドDDD
フロントエンド DDD とはフロントエンドの開発に DDD（ドメイン駆動設計）の思想を取り入れた設計思想です。DDD はバックエンドなどの開発では広く活用されていますが、フロントエンドの開発ではあまり普及していません。 一方で弊社（株式会社TAIAN）は婚礼業界向け SaaS のフロントエンドの開発に DDD を取り入れて2年間、100以上の機能を開発してきました。本シリーズでは我々の経験をもとにフロントエンド DDD について説明したのち、チームの変化、大変なところ、今後の可能性などを紹介していきます。 なぜフロントエンド DDD が必要だったのか フロントエンド DDD について説明する前に、我々がフロントエンド DDD を必要とした背景を説明します。 弊社、株式会社TAIANは婚礼業界向けの業務 SaaS を提供しています。我々は婚礼業界の未来のため、特定の領域・関係者にとどまらず、
ほとんどのサービスとアプリケーションには、制限の大きなお試し版とも言える無料プランと、制限の緩和された有償プランがあります。さらに、有償プランのトライアルや、グループ開発向けのEnterpriseプランが用意されていることがあります。個々のサービスおよびアプリケーションについての料金体系の掲示は省くので、関心のあるものについてはまず無料プランから試すことをお勧めします。 アプリケーション構築は、多くの手順を必要とすることから比較的難易度の高い作業です。専用のウィザードがステップ・バイ・ステップで構築をフォローするスタイルは、今では「やりたいこと」を述べるだけでAIが代行してくれるようになりました。デザインも、直接アプリケーション構築に持ち込むことができます。 スタイリッシュなUIを生成するv0 ▲v0 v0（ブイゼロ）は、Next.jsの開発元であるVercel Labsによる、AIを活用
SSRで認証をどうするべきか？
既存プロジェクトにNext.js等のSSRを導入する場合は既存の認証機能を維持したり活かしたりする必要があります。しかしSSRの認証とCSR(SPA)の認証は同じではなく、簡単に共有できるものではありません。 ここでは複数のテックブログの事例を見ながら、この難しさと本物のウェブサービスで採用された解決策を見ていきます。 CSRとSSRの認証の違い まず最初に、CSR(SPA)とSSR[1]の認証の違いをざっくり紹介します。技術的制約を理解していただくことが目的です。 クライアント視点では、認証システムは突き詰めると、トークン(鍵)[2]を安全に保管し、必要時にサーバに渡す(鍵穴に差し込む) ことです。この２つに絞って解説します。[3] https://www.flaticon.com/free-icons/vault (by IYIKON) https://www.flaticon.com
フロントエンド API コール時のエラーハンドリングを軽く整理（Fetch API・typescript-fetch・TanStack Query） - カミナシ エンジニアブログ
カミナシのソフトウェアエンジニア佐藤です。カミナシレポートの開発に携わっています。 フロントエンドのエラーは「画面リロードやブラウザ再起動で復旧できる（かもしれない）」「クラッシュしてもユーザーの端末に閉じる」などの理由から、バックエンドよりは精緻に扱われない傾向があると個人的には感じています。 その一方、カミナシレポートは、ノンデスクワーカー向けの不安定なネットワーク環境で利用されることも多々あるアプリです。そのため、デジタルツールに不慣れな方のために精緻なフィードバックが必要とされる、リロードに頼ることが難しいケースがある、などの理由でエラーの扱いにも慎重になる必要があります。 本記事では、カミナシレポートのフロントエンド開発をする中で、 バックエンドの API コール時にエラーが発生する条件とその内容（型・クラス） これらエラーをハンドリングする箇所 について、把握しておきたいと感じ
小規模プロダクトにおける React 状態管理ライブラリ選定 in 2024 - バイセル Tech Blog
はじめに こんにちは！ テクノロジー戦略本部24年新卒の高橋です。 2023年の10月から内定者インターンを経験し、現在は開発3部CRMチームでフロントエンド(以後、FE)エンジニアとして働いております。 チーム内でFEの状態管理ライブラリを選定する機会があり、調査していく中で得た知見を共有したく、執筆に至りました。 少しでも状態管理ライブラリの選定に困っているFEエンジニアの参考になればと考えています。 はじめに 概要 前提 課題感 Context APIの思想とのズレ Context APIの記述量の多さ 状態管理ライブラリに求める要素 小さい単位で取り扱い可能 ボイラーテンプレートが少なく、APIが直感的で書き方の自由度が高くない 軽量 Reactアプリケーション内外での状態管理が可能 最終決定 検討候補 Redux Zustand Jotai Valtio 評価表 移行設計 既存C
フロントエンドカンファレンス北海道公式ウェブサイトの乗っ取りについて経緯と原因、現況のご報告｜フロントエンドカンファレンス北海道実行委員会
フロントエンドカンファレンス北海道2025実行委員会の実行委員長を務めております、n13u（西村航）です。この度は当実行委員会が運営する公式ウェブサイトの乗っ取りにつきまして、皆様に大変ご心配をおかけいたしました。 現在、公式ウェブサイトでは対応を行い2024年度開催分のページが公開されています。また、後述する原因に基づき、各種設定の見直しを行い再発防止策を実施済みです。公式ウェブサイトへのアクセスについて問題なく行えることを確認しておりますが、DNSレコード設定の反映等で一部の環境にて正しくない、または不正なウェブサイトが表示される可能性もございます。反映が完了する数日程度は継続してウェブサイトの閲覧をお控えいただくようお願いいたします。 記事公開時点において、今回の件による個人情報流出等の具体的な被害等については報告を受けておりません。万が一何からの被害に遭われた方がいましたらお手数で
フロントエンドの現在地とこれから
YAPC::Hakodate 2024 https://fortee.jp/yapc-hakodate-2024/proposal/a2e39821-a91c-4d10-9db7-1e4d624d47ff
React Scan
React Scan automatically detects performance issues in your React app Previously, existing tools required lots of code change, lacked simple visual cues, and didn't have a simple, portable API Instead, React Scan:Requires no code changesHighlights exactly the components you need to optimizeAvailable via script tag, npm, you name it!
JavaScriptフレームワークを取り巻く状況は、常に変化を続けています。近年では、サーバーサイドレンダリング（SSR）とクライアントサイドレンダリング（CSR）のバランスは、重要な検討事項です。 ChatGPTのRemix採用 2024年9月、ChatGPTがNext.jsからRemixに移行したことが明らかになりました。この出来事は、Remixの母体であるReact Router系のコミュニティで大きな話題となり、移行の理由について様々な憶測を呼びました。 JavaScriptエキスパートのWes Bos氏（学習動画教材とかを作っている人）は、ChatGPTのフロントエンドのソースコードを分析し、OpenAIがRemixを採用した理由について独自の考察を展開しました。 www.youtube.com 緊急で動画を回すWes Bos氏 Wes Bos氏の分析によると、ChatGPTのア
株式会社スタディスト様の依頼で、フロントエンド傭兵として、Rails 内の巨大SPA の段階的なモダナイズの提案を行った事例紹介です。 いつもはパフォーマンス視点で仕事にかかるのですが、今回はマクロな設計視点でソースコードを読んでいきます。一旦は中期ゴールを提案しつつ、その作業の必要性を通して、なぜその変更が必要なのかという解説をしていきました。 コスパが良い部分からやりたいですね。でもコスパ感覚は人それぞれです。あくまでフロントエンド専門家の自分が優先度付けるなら、という観点でやっていきます。 今回の仕事にあたっていくつかの技術的な課題を取り上げますが、それはスタディスト様に問題があるという話ではありません。むしろ問題を修正しようという意思が強く、実際1ヶ月の期間中にいくつかの修正をマージすることもできています。 以下、敬称略。注意点として、今回の内容は中の人達が見返すための記述が多いの
フロントエンドのテスト戦略ってどうすればいいの？
こんにちは！ 株式会社ココナラの法律相談事業部でWebエンジニアをしている 原井夏樹 です。 ココナラ法律相談というプロダクトのフロントエンド・バックエンド開発を担当しています。 よければXのフォローをお願いします！喜びます！ @superhahnah この記事ではフロントエンドテストの導入にあたり、私たちのプロダクトではどんなテスト戦略をとるべきかを調査・検討して得られた知見を共有します。 読んでくださる皆さんの参考になれば幸いです。 そもそもフロントエンドのテストって色々ありすぎてよくわからん 「〇〇テスト」っていう用語、本当にたくさんありますよね。 例えば… ユニットテスト(単体テスト) インテグレーションテスト(結合テスト) E2Eテスト(End to End テスト) 手動テスト ロジックテスト インタラクションテスト スナップショットテスト ビジュアルリグレッションテスト アク
.d.tsファイルをちゃんと使うために必要な知識
.d.tsファイルとは、TypeScriptにおいて型定義ファイルと呼ばれるファイルのことです。残念なことに、.d.tsファイルは誤った使い方をされているのを見かけることがあります。そこで、この記事では、.d.tsファイルを正しく使うために必要な知識を解説します。 .d.tsファイルとは .d.tsファイルについては、とりあえずTypeScript公式による以下の説明を読んでください（Announcing TypeScript 5.5から引用）。 Declaration files (a.k.a. .d.ts files) describe the shape of existing libraries and modules to TypeScript. This lightweight description includes the library’s type signatures
デザインシステムとコンポーネント指向によるフロントエンド開発プロセスの革新 / Innovation in Frontend Development Processes through Design Systems and Component-Oriented Architecture
フロントエンドカンファレンス北海道でお話ししたスライドです Proposal: https://fortee.jp/frontend-conf-hokkaido-2024/proposal/ebd98e0a-241c-4443-aa98-300af113b40d # URL YouTube…
こんにちは。こんばんは。 開発生産性の可視化・分析をサポートする Findy Team+ 開発のフロントエンドリードをしている @shoota です。 ファインディのフロントエンドでは多くのプロダクトでNxを用いたモノレポを構築しています。 tech.findy.co.jp Findy Team+のフロントエンドもNxを採用し、各パッケージ間の依存関係の管理やライブラリのマイグレーションなどの恩恵を受けています。 なかでも強力なキャッシュ機構をベースとしたCIの高速化はなくてはならない存在となっています。 以下は、このブログの執筆時点での Findy Team+のフロントエンドリポジトリが実行するCIの統計情報です。 Team+ の CI実行 直近30日間でCIの実行回数は2500回、平均時間は7分です。 そしてNxの機能によって削減された実行時間はなんと167日分（約4000時間）にもな
概要 初めまして、CTO室のいがにんこと山口(@igayamaguchi)です。一休.com/Yahoo!トラベルのフロントエンドの開発を担当しています。 この記事ではWebアプリケーションのフロントエンドの画面実装をボトムアップに実装することのメリットと、その方法を紹介します。 ボトムアップに画面を実装する ボトムアップに画面を実装する、というのは小さなコンポーネントや処理から実装をしていき、それを組み合わせて徐々に大きなコンポーネントを作り、最終的に画面を作る実装方法です。 昨今のWebアプリケーションの実装で使用するReactやVueといったフレームワークはHTML、CSS、JavaScriptなどをディレクトリ、コンポーネントとしてまとめて実装することができます。この機能を利用し、 input、ボタンといった小さなコンポーネントを作成 上記のコンポーネントを使用しさらに大きなコンポ
最近になって Frontend Ops の傭兵として活動を始めました。 Frontend Ops 実践のモデルケースとして、 株式会社GiXo様で Next.js 仕事に取り組ませいただきました。今回、その内容を公開する許可を頂けたので、事例として公開させていただきます。 依頼主 株式会社GiXo様 以下、敬称略 相談内容 フロントエンド関連のリポジトリで、Next.js のビルドが遅くなってしまった。 重いことに起因して Vercel CI で OOM で確率的に落ちるようになった。CIが信用できなくなり、とりあえず再ビルドするクセがついてしまって、生産性が落ちている。 モノレポ内にとくに重いアプリケーションが一つあり、これを調査・解決してほしい。 仮ゴール: VercelCI 上のビルド時間を半分OOM が発生しないようにしたい 調査フェーズ リポジトリの閲覧権を頂き、プロジェクト構成
LX Web Frontend Night: Unleash Next.js 録画 https://www.youtube.com/watch?v=uc-GgjE_G4g&t=216s https://github.com/LayerXcom/next-navigation-guard …
ICSはフロントエンドを専門とするウェブ制作会社ですが、オウンドメディアとして技術情報発信サイト「ICS MEDIA」を運用しています。このサイトは開設から10年目をむかえましたが、今年は「国内のウェブ水準を前進させる記事を。話題のテーマも、他のサイトでは読めないニッチな技術も」をテーマとしてやってきました。そんなICS MEDIAにとっての2024年を、あらゆる数値を使って多角的にレポートします。 今年はどの記事がもっとも読まれたのでしょうか？ 今年執筆した記事で上位10記事をピックアップしました。 1位 : フキダシ作例 HTML・CSSで実装するかわいいフキダシのアイデア 24,708 PV HTMLとCSSだけで作るかわいい吹き出しデザインを取り上げた記事です。マスキングテープ風などの凝ったスタイルからシンプルな角丸まで、応用範囲が広いオリジナルサンプルを豊富に掲載しています。 ユ
フロントエンド開発に役立つ Datadog 活用法 - LegalOn Technologies Engineering Blog
はじめに 本記事では、Datadog の設定方法を解説しながら、どのようにフロントエンド開発に活用できるかを話していきます。Datadog とは SaaS 型で提供されている監視サービスです。システムやアプリケーションの監視ができ、収集したログを分析するのに役立つ機能をたくさん提供しています。 こんにちは、株式会社LegalOn Technologiesで Software Engineer（Frontend）をしている山越 ( @yukishinonomeIT ) です。弊社では2024年4月に『LegalOn Cloud』というプロダクトを提供開始しました。Datadog は既存のプロダクトでも使っていたので、この新しいプロダクトでも活用することになりました。そこで、『LegalOn Cloud』における Datadog の運用を担当することになったので、実際にどのような活用をしている
State of JavaScript 2024
Let's take a second to consider something: 2024's top three front end framework were all launched over a decade ago. Now sure, all three have evolved a lot along the way, and the patterns of 2014 would seem downright antiquated today. But given the JavaScript ecosystems's reputation as a constantly-churning whirlwind of change, it can be nice to know that some things do remain constant. Speaking o
TSKaigi 2025「TypeScriptとは何であって何でなく、誰のもので、どこへ向かうのか」スピーカーノート
TSKaigi 2025「TypeScriptとは何であって何でなく、誰のもので、どこへ向かうのか」スピーカーノート 導入 今日は「TypeScriptとは何であって何でなく、誰のもので、どこへ向かうのか」というタイトルでお話させていただきます。よろしくお願いします。 まず最初に、軽く自己紹介をさせていただきます。Suzuki Sosuke と申します。ユビー株式会社でソフトウェアエンジニアをしています。今日ブースやってるので遊びにきてください。あと趣味でPrettierというコードフォーマッターのメンテナンスをしたり、WebKitのReviewerをやっていたりします。WebKitといってもJavaScriptCoreの部分だけなんですけどね。 で、トークの方に移っていくんですが、今回のトークのタイトル、まるで基調講演のような壮大なタイトルだなと思われるでしょう。自分でもめちゃくちゃそう
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
はじめに この記事について こんにちは、zomysan（ぞみ） です。今回は私の所属するソーシャルPLUSのフロントエンドチームがどのようなことを考えてテストを作っているのかを紹介します。 フロントエンドのテスト手法については素晴らしい本や記事がすでにたくさん存在しますが、限られたリソースの中で、実務としてどうテストをこなしているのか、という具体的な事例として楽しんでいただければ幸いです。 テスト運用における課題や改善点も率直に紹介しますので、「うちではこうやって解決しているよ」といったご意見があればぜひコメント欄で教えてください！ 対象読者 フロントエンドのテスト運用に悩んでいる方 フロントエンドのテストってどういうものなのか興味がある方 ソーシャルPLUSに入社したフロントエンドメンバー この記事に書いていないこと すべてのチームにとっての最適解は提示していません 弊チームにとっても折
Next.jsと比較しながらHotwireを理解するサイト: "Hotwire for Frontend Developers"
ここ３ヶ月間ほど、"Hotwire for Frontend Developers"「フロントエンドエンジニアのためのHotwire入門」というウェブサイトを作っていました。（ベータ版として公開していました） HotwireとNext.jsをちゃんと見てから比較してもらいたいというのが最大の目的で、同じUIをHotwireのとNext.jsで作成し、デモを動かしたり、コードを見たりしながら比較してもらおうというのが主旨です。同じUIをNext.jsのPages RouterとApp Routerで作っているものもありますので、この比較もできます。 結構コンテンツが多いので、Zennではこれから少しずつ内容も紹介していきたいと思います。 まずはご覧ください！ "Hotwire for Frontend Developers"
builderscon 2024 で発表した資料です。 動画はこちら: https://www.youtube.com/watch?v=_Prly-RAF7A&list=PLZjwpOgJkJXteFpwAbcVoQXfd2f5q-OPp --- React Server Compon…
フロントエンドテストの正解って？FAANSにおけるテスト戦略の振り返りとこれから - ZOZO TECH BLOG
はじめに こんにちは、FAANS部フロントエンドブロックでWeb開発をしている平舘です。 Webフロントエンドのテスト戦略って、結局どうすればいいのか、よくわからなくないですか？ この記事では、FAANS Webアプリケーション開発におけるテスト実装の歴史を「リリース期」「急成長期」「現在」という3つの開発フェーズに分けて振り返ります。プロダクト立ち上げからのリアルな現場感とともに振り返りつつ、主にテスト配分についてチームで議論しながらプロダクトへ反映していった歴史のレポートになっています。みなさんのテスト戦略の見直しや実践のヒントになれば幸いです。 目次 はじめに 目次 背景・課題 この記事で語らないこと 前提：FAANSについて 開発の歴史とテスト戦略の変遷 フェーズ1. 怒涛のリリース期 起きたこと (1) 関心の中心は、「何をつくるか」 (2) こなれない実装 (3) jest-d
はじめに こんにちは。サーバーサイドエンジニアの mokuo です。 最近、ミニマムな React アプリを実装する機会がありました。 社内のメンバーにアドバイスをもらいながら、今（2024年前半） React アプリをミニマムに作るならこんな感じかな、という構成になった気がするので、ご紹介したいと思います。 実例の1つとして参考にしていただけますと、幸いです。 はじめに 本文 📝 機能要件 ⚒️ 採用したツール (npm モジュール) 📁 ディレクトリ構成 👨💻 プロトタイピングの実施 🍩 おまけ コンポーネント設計について フロントエンドに DDD のエッセンスを取り入れてみたい おわりに 本文 📝 機能要件 社内の限られた CS メンバーのみが利用する、管理画面を開発しました。 バックエンドは Golang で実装される API サーバーで、認証機能以外だと、2つの機能
PlaywrightによるE2Eテスト入門 / Introduction to E2E Testing with Playwright
PlaywrightによるE2Eテスト入門 / Introduction to E2E Testing with Playwright
GitHub Copilot Agent の力を借りて Next.js から React Router に移行しました - ANDPAD Tech Blog
ANDPAD フロントエンドエンジニアの小泉です。 普段は Vue での開発をメインにしているのですが、並行して React のプロジェクトも担当しています。 今回は、「ANDPAD 資料承認」というプロダクトのサービスページを Next.js から React Router に移行した際の、 GitHub Copilot の活用法について紹介します。 特に、「コーディングエージェントが凄いのはわかったけど、実際のプロダクト開発にどう取り入れて良いかわからない」という悩みを持っている方の参考になれば幸いです。 なお、この記事は、ある程度 Copilot や コーディングエージェントを使ったことのある方に向けた内容となっています。そもそもの Copilot の導入・設定方法、基本的な使い方・事例について知りたい方は、以下の記事を先に読んでいただくのがオススメです！ tech.andpad.c
今日からあなたはフロントエンドエンジニアです！ え、面接でバックエンド・インフラしかやってなかったって言ったのに！？フロント！？どうしよう 😭 [1] どうも、株式会社カナリーでお部屋探しマーケットプレイスの CANARY を開発している shusann です！ 本エントリーでは、 もしあなたが明日から急にフロントエンドエンジニアを任されることになっても困らないよう、私がこの半年間で何をどうやって学んできたかをシェアすることで道しるべとなれることを目指しています。 これから同じ境遇に立つ人やフロントエンド興味あるけど何から手を付ければいいかわからないようなエンジニアにとって、この記事が参考になれば嬉しいです 😍 とはいえ、本エントリーは半自伝的な記事で「ああ、こんなことやってたんだ」という読み物として話半分に読んでいただければ幸いです。 自己紹介 本題の前に、半年前の入社当時の自分の状
こんにちは。データ連携チームでフロントエンドエンジニアをしている ushiboy です。 この記事では、2024 年 9 月入社でチームに参加した筆者が、データ連携プロダクトのフロントエンドのコードベースで行なった半年間の取り組みについてご紹介します。 SmartHR ではプロダクトや機能ごとにチームが編成され、各チームに 1 名～ 2 名程度のフロントエンドエンジニアが在籍しています。 組成されて間もないチームの場合、フロントエンドエンジニアが不在の場合もあります。 筆者が配属された時点でデータ連携プロダクトはすでにリリースされており日々開発が続いていましたが、これまでフロントエンドエンジニアは在籍しておらずバックエンドエンジニアが中心となって開発を進めていました。 その影響もあり、フロントエンドのコードベースにはいくつかの課題が存在していました。それらの課題とどのように向き合い、対応し
今アツい（気がする）UIライブラリ...?ではないらしい shadcn/uiを使ってみる - Nealle Developer's Blog
この記事はニーリーアドベントカレンダー2024の10日目の記事です。 はじめまして、Nealleのデザイナー音部です。 profile.unotovive.io アドカレでデザインチームのことを書くつもりが、全然思いつかずにフロントエンドの話をします。 タイトルにある通り、shadcn/uiというモノの紹介と、実際に使ってみたレポートです。 shadcn/uiとはそもそも何なのか? ui.shadcn.com shadcn/uiは、2023年のJavaScript rising starで総合1位に輝いたReactエコシステム(?)です。 2位は2022年王者のBunでしたが、10k以上の差をつけて1位に輝いていて、アツいといっても過言ではなさそうです。 最初はMaterial UIやChakuraなどと同じようなUIライブラリかと思っていましたが、どうやら「コピペで使えるUIコンポーネン
気合の脱 create-react-app からの、AIによるフロントエンド改修の自動化 (株式会社イルシル様) 株式会社イルシル様の依頼で、フロントエンドの近代化とパフォーマンス分析を行った事例を紹介します。 「イルシル」は、生成AIでスライド資料作成を自動化し、誰でも簡単にスライドやパワポが作れるサービスで、スライドのデザインは1,000種類以上あり、入力したテキストからスライドを自動生成できるだけでなく、オリジナルで作成することも可能です。 いわゆる、複雑フロントエンドの事例です。ブラウザ上でAI経由でスライドを生成して、それをUIから編集でき、最終的には PDF や パワーポイントとしてエクスポートします。 LCP や CLS ではなく、 TBT やメモリリークの調査がメインになります。 長くなったので最初に要約します。以下の内容を含みます。 泥臭い CRA => Vite 移行
はじめに Web開発の世界では、フロントエンドとバックエンドが密接に連携して、ユーザーに快適な体験を提供しています。 でも実は、バックエンドの開発者が日々の会議で進捗報告するとき、フロントエンド開発者の中には、彼らが何について話しているのか全く分からない！！という方もいるのではないでしょうか。 専門用語が多く、頭の中がハテナだらけかもしれません。 この投稿では、そんな専門用語たちに切り込んでいきます。 フロントエンド開発者がバックエンドの知識を持つ重要性は大いにあります。 効率的な開発 問題解決能力の向上 チーム間のコミュニケーション向上 ちなみに、バックエンドの開発者はわざと分かりづらくしているわけではありません。ただ彼らの専門の言語で話しているだけなのです。 だからこそ、難しく聞こえるバックエンドの概念を簡単な言葉で分解して、理解していきましょう。 この記事では、フロントエンド開発者が
【海外記事紹介】Next.jsから離れる企業が増えている理由
3月29日、海外のテクノロジーメディアAIMが「Why Companies Are Moving Away from Next.js」と題した記事を公開した。この記事では、企業がNext.jsから離れつつあるという実情とその背景について紹介されている。 3月29日、海外のテクノロジーメディアAIMが「Why Companies Are Moving Away from Next.js」と題した記事を公開した。この記事では、企業がNext.jsから離れつつあるという実情とその背景について紹介されている。 以下に、その内容を紹介する。 Next.jsに対する不満の高まり 最近、複数の企業がNext.jsに関する問題を発表している（例: Northflank公式ブログの記事）。特に、フレームワークの脆弱性を悪用される事例（例:CVE-2025-29927）や深刻なパフォーマンス低下に直面する企業
Hotwire or React? ~Reactの録画機能をHotwireに置き換えて得られた知見~ / hotwire_or_react
Hotwire or React? ~Reactの録画機能をHotwireに置き換えて得られた知見~ / hotwire_or_react
この記事は情報の提供のみを目的としています．今回紹介する方法はどちらのライブラリにおいても公式の手法としてサポートされていません．この方法を用いたことにより発生したいかなる損害について，私および弊社は責任を負いません． はじめに 世間では Next.js や Remix といったフルスタックフレームワークが話題となっていますが，皆さんはどのような環境で React アプリを開発しているでしょうか．Vite などのツールを使ってビルドされた，いわゆる SPA [1] を開発されている方もまだまだ多いのではないでしょうか． 私もその一人です．とくに弊社が提供する workhub では各組織の管理画面として Web アプリを提供しており，これは React + Vite の構成となっています． こうした SPA であって，かつ多画面を提供するアプリの場合，一般にルーティングライブラリが利用されま
Streaming UIプラクティス
アプリケーションユーザーにとってパフォーマンスとは、特定の指標に基づいて判断される定量的なものだけでなく、アプリケーションの総合的な体験を通じて感じる定性的なものでもあります。そのため、ユーザーがアプリケーションを「遅い」と感じる要因は様々です。 Googleは以前より、ユーザー中心のパフォーマンスを提唱しています。Core Web Vitalsは、ユーザーが感じるパフォーマンスを定量的に計測するために作成された指標群で、現在最も重要なパフォーマンス指標の一つです。しかし、Core Web Vitalsだけではパフォーマンスに関するUXの全てを網羅できるわけではありません。Core Web Vitalsの改善は重要ですが、最終的にはUX全体を最適化することが必要です。 本稿では、ページ読み込み時に「遅い」という印象をユーザーに与えないために筆者がよく用いるStreaming UIとそのプラ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
サイト構築からデプロイまで。AIが変えるフロントエンド開発 | レバテックラボ（レバテックLAB）
Hyper — Reactの代替を本気で目指す新たなマークアップ言語が登場！圧倒的にシンプル、Web標準を尊重
ユーザー体験重視のSPAアーキテクチャ改 - laiso
フロントエンドの段階的モダナイズ、のための自走設計 (株式会社スタディスト様)
60万行を超えるフロントエンドのリアーキテクチャとCI戦略 - Findy Tech Blog
フロントエンドの画面実装をボトムアップに行う - 一休.com Developers Blog
ジャイアントパンダに注意 - Next.js のビルド改善 (株式会社GiXo様)
Next.js のページ遷移を全力で止める
これがフロントエンドで話題になった記事！ ICS MEDIAの2024年 - ICS MEDIA
Webフロントエンドの脆弱性つまみ食い 2024年版
弊社のフロントエンドのテストについて、考え方・方針・やっていることなど全部紹介します（2024年版）
React Server Components の疑問を解き明かす
ミニマムな React Web アプリケーションの技術スタックを大公開！ - inSmartBank
バックエンド出身エンジニアがReact/Next.jsに入門してみた話
ある日、フロントエンドエンジニア不在のチームに配属された俺達は - SmartHR Tech Blog
気合の脱 create-react-app からの、AIによるフロントエンド改修の自動化 (株式会社イルシル様)
フロントエンド開発者が知っておくべきバックエンドの知識10選 - Qiita
React Router から TanStack Router へ徐々に移行する技術