1 - 34 件 / 34件
もうUIはいらない。 この一言に尽きる。 ChatGPTの新機能「Apps in ChatGPT」が登場した瞬間、フロントエンドという職種の地盤は音を立てて崩れた。 これまでは、Webアプリやサービスは「フロントエンドでUIを作り、バックエンドでデータを返す」 という分業構造の上に成り立っていた。 だがApps in ChatGPTは、その構造をぶち壊す。 ユーザーはもうWebサイトを開かない。 ChatGPTのチャット画面内でSpotifyを操作し、Zillowで物件を探しEtsyで買い物をする。 つまりUIはChatGPT内に統合される。 あなたが書いてきたReactコンポーネントもボタンもフォームもすべてAIに吸収される。 「UI」はAIが自動生成する時代に入った もはやユーザーはブラウザを必要としない。URLをコピペすることも無くなるだろう。 「このホテル予約して」と言うだけでAI
はじめに 2025年10月10日、カナダのトロントで開催されたイベント "Remix Jam 2025" で Ryan Florence と Michael Jackson が Remix 3 を発表しました。このセッションは、React Router の生みの親たちが、なぜ React から離れ、独自のフレームワークを作ることにしたのか、その理由と新しいビジョンを語った歴史的な発表です。 本記事では、1時間47分に及ぶセッションの内容を詳しく解説します。 なぜ Remix 3 を作るのか 💡 動画で確認する (3:17:30~) React への感謝と決別 Michael Jackson と Ryan Florence は、React に対して深い敬意を持っています。React は彼らのキャリアを変え、Web 開発の考え方を一変させました。React Router を10年以上メンテナ
はじめに TypeScriptでコンポーネントのPropsやオブジェクトの型を定義するとき、typeとinterfaceのどちらを使うべきか、一度は悩んだことがあるのではないでしょうか。 巷では「どちらでも良い」「チームで統一されていればOK」といった意見もよく見かけます。 しかし、私は 明確な理由をもって「基本的にはinterfaceを使うべき」 だと主張します。 この記事では私の実体験で遭遇したReactのPropsの深刻なパフォーマンス問題を例に交えながら、なぜinterfaceが優れているのか、そしてtypeはどのような場面で使うべきなのかを解説します。 type aliasを使いたくなる魅力と、その裏に潜む罠 まず、なぜ多くの開発者がtypeを選びがちなのでしょうか。 それは、開発体験の良さにあります。 typeで定義した型は、VSCodeなどのエディタでホバーすると、最終的に解
はじめに Kaigi on Rails 2025で発表し、何人かの人といろいろ話しているうちに、モダンフロントエンドが面倒臭いのはJSON APIのせいではないかと考えるようになりました。そしてJSON APIそのものが悪いというよりは、JSON APIを必要以上に使う原因となっているSPAが問題ではないかと思っています。まだ考えは固まっていないのですが、まずは部分的に紹介したいと思います。 モダンフロントエンドはJSON基礎工事が大変 SPAのReactフロントエンドを作る場合、Hotwireなら不要だった多大な工数が新しく発生します。 APIエンドポイントのルータおよびコントローラから、JSON APIシリアライザ、クライアントサイドのルータ、JSON APIをfetchしてフォーマット変換する作業、さらにAPIの契約を文書化したOpen APIを作成します。ここには記載していませんが
先日 Nani というAI翻訳アプリをリリースしました。macOS / Windowsアプリを使うとショートカットで解説つきの翻訳を簡単に呼び出すことができます。 この記事ではNaniの技術的な話をまとめておきます。「レスポンスが速い」という声も多くいただいているので、そのあたりの工夫についても触れたいと思います。 ざっくりとした構成 主な使用技術やサービスは以下のようになっています。 Turso: SQLiteでユーザーの設定などを保存 Upstash (Redis): キャッシュ、レートリミット Drizzle: SQLiteのORMとして利用 Stripe: 決済管理 Next.js(App Router): Webアプリ。Vercelにデプロイ Hono: APIを快適に書くため。Next.jsのRoute Handler上で使用 Electron: デスクトップアプリ TypeS
皆さんこんにちは。React、使っていますか? Reactを′′正しく"使うことは難しいと感じる方も多いのではないでしょうか。 特に筆者はReactの正しい使い方に厳しく、こんな記事も出しています。熟練のReact使いでもなければ、この記事を読んで難しいと思うのも仕方がありません。 useEffectに関しては、React公式のドキュメントでも「そのエフェクトは不要かも」というページがあり、useEffectを使ってしまいがちだが、useEffectの使用が適していない場面について解説されています。 この記事の目的 上記の公式ドキュメントで解説されている中でもkeyを使うテクニック(あとでこの記事でも説明します)に関しては、今より未熟だった昔の筆者は、あまり良く思っていませんでした。なぜなら、それが 「Reactらしくない、小手先のテクニック」 に見えたからです。 しかし、よくよく考えれば、
この記事は、AIが生成した記事を無修正で公開しています。投稿者(人間)の普段の作風・意見と異なる点や内容の粗もありますが、技術記事として公開するに足るクオリティであるという投稿者の判断と責任により投稿するものです。 ただし、記事に含まれる、経験に基づくエピソードは全てAIによる創造である点はご了承ください。 ちなみに、記事の生成は事前に用意したスタイルガイドに基づき、人間が記事のアイデアと結論を与えてAI (Claude Code) が出力したものであり、出力結果に対する追加の修正依頼などは行わない一発撮りです。 皆さんこんにちは。最近、データ再取得の実装パターンについて考えていて、面白い気づきがあったので共有します。 Reactでデータを再取得したいとき、普通はrefetch()みたいな関数を呼ぶ実装になります。ボタンを押したらサーバーからデータを取り直す、みたいなやつです。でも、これっ
ある日、Vercelのダッシュボードを見ると以前はだいたい100KB前後だったページのレスポンスサイズが500KB前後に増えてしまっていました。 原因はサーバコンポーネントからクライアントコンポーネントに渡すpropsが巨大だったことでした。 SCからCCに渡したpropsはRSCペイロードという形で初回レスポンスのHTMLに含まれるためです。 分かってしまえば単純なことなのですが、当時Next.jsのバージョンアップなどの改修も同時に行なっていたために原因調査に手こずりました。 そんなわけで、レスポンスサイズが5倍になったときの調査に役に立つかもしれない(?)RSCペイロードの覗き方を簡潔にお伝えします。 RSCペイロードを覗く Next.jsでRSCペイロードがどう扱われているのか、実際に覗いてみます。 以下の3つのファイルを用意して確かめます。 import ClientCompon
先日、念願叶ってようやく趣味として長く続けている個人開発での「月間収益」が、新卒で入った会社の初任給を超えることができました。 しかしこれまで何年間も結果がでず、闇雲に色んなことに挑戦してきました🏃♀️ モチベーションに左右されパソコンを開かない時期も幾度となくありました。 何を考え、何を実行して、何を得られたのか。 個人開発を通して経験できたこれまでを振り返りつつ、同じような境遇の方々のモチベーションを上げられたらなと思い、この記事を作成します。 僕の過去に興味ない人は以下「これまでの個人開発について」はスキップしてもいいかもしれません🫶 これまでの個人開発について 1. 同期&ハッカソンとの出会い(2017年) 僕の記事にちょくちょく登場するZくんとの出会いが個人開発の原点であり始まりです。 彼が誘ってくれたハッカソンへの出場を機にReact Nativeを業務時間外で触り始め、
内部的には Google Identity Platform + NextAuth による認証、 マルチロール制御、通知、DTO検証などを組み込み、 App Router特有の問題が浮き彫りになるような構成になっています。 📂 リポジトリ: System guide: docs/README.md Frontend playbook: frontend/docs/README.md Checklists: docs/checklists.md App Routerの"自由さ"をどう設計で制御するか 実際に運用して分かった課題は、大きく3つです。 1. 境界のあいまいさ server専用コード(handlerやrepositoryなど)がclientコンポーネント側に漏れる。 2. Server Actionのスパゲッティ化 Actionがランダムなpage.tsxに散らばり、 機能とルー
「このボタンコンポーネントにどこまでのPropsを持たせるべきか?」 日々のコンポーネント開発で、このような判断に迷ったことはありませんか。onClick、disabled、loading、icon、variant、size...どこまで汎用化すべきか、どこで線引きすべきかという問題です。 前回まででコンポーネントの「構造」(分割と命名)と「配置」(フォルダ設計)を学んできました。今回から2回にわたって、コンポーネント間の「連携」、つまりPropsを通じたデータフローとインターフェース設計に焦点を当てます。 Propsはコンポーネント間の「契約」です。良いインターフェースは使いやすく、間違いを防ぎ、拡張可能である必要があります。 本稿では、複雑なUIを柔軟に構築するCompound Componentsパターンと、TypeScriptによる型安全なProps設計について解説します。これらの手法
Remix is a web framework by React underdogs authors of the most popular React package. Few days ago at Remix Jam 2025, Ryan and Michael shared a sneak peak of Remix v3. There’s no official blog post or documentation yet. Here’s my attempt at explaining what it is about. Remix v1 was a React framework that managed data loading and server-side rendering. Its biggest achievement was the marketing web
In React 19.2, Activity supports two modes: visible and hidden. hidden: hides the children, unmounts effects, and defers all updates until React has nothing left to work on. visible: shows the children, mounts effects, and allows updates to be processed normally. This means you can pre-render and keep rendering hidden parts of the app without impacting the performance of anything visible on screen
はじめに10/7/2025 ~ 10/8/2025 にかけて開催された React Conf 2025 に招待を受け、参加してきた。 React Conf は Meta 社と callstack 社が主催する、React に関するカンファレンスである。 今回は、その内容を振り返り、特に印象に残ったセッションについてまとめる。 Day 1IntroductionReact Conf 2025 のはじまりは、 Seth Webster 氏の挨拶から始まった。 短い挨拶だったが、その中で彼は React の素晴らしさはただのライブラリではなくコミュニティの大きさにあると語った。 私も同意見で、 React はそれ自体が素晴らしいライブラリであることは間違いないが、それ以上に Web やそれ以外のプラットフォーム開発に対する人々の考え方を大きく変えたことが重要だと思う。 React Keynote
Ahead of our upcoming Next.js Conf 2025, Next.js 16 is now available. This release provides the latest improvements to Turbopack, caching, and the Next.js architecture. Since the previous beta release, we added several new features and improvements: Cache Components: New model using Partial Pre-Rendering (PPR) and use cache for instant navigation. Next.js Devtools MCP: Model Context Protocol integ
「React Foundation」をメタ、マイクロソフト、Vercelらが設立へ。ReactやReact Nativeの中立的な開発主体として 代表的なJavaScriptライブラリのひとつとして知られる「React」の開発チームは、ReactやReact Nativeなどの開発を主導する新たな独立組織「React Foundation」の設立を発表しました。 設立時の企業メンバーにはMeta、マイクロソフト、Vercel、Amazon Developerなどが名前を連ねています。 もともとMeta/Facebookが開発したReact Reactは、Webアプリケーションのユーザーインターフェイスを構築するためのJavaScriptライブラリとして、2013年にMeta(当時はFacebook)がオープンソースとして公開したソフトウェアです。 コンポーネントベースの設計や仮想DOMを用
こんにちは! 株式会社Sally エンジニアの haruten です♪ 私たち株式会社Sallyでは、マーダーミステリーをスマホやPCで遊べるアプリ「ウズ」や、マーダーミステリーを制作してウズ上で公開・プレイできるエディターツール「ウズスタジオ」などを開発・運営しています。 今回はReactのカスタムフックの設計について学び直す機会があったので、その備忘録です! はじめに カスタムフックは、Reactにおけるロジックの再利用を可能にする強力な機能です。 しかし最近、とりあえずスパゲッティコードを切り出して分割するだけに利用していることに気づき、改めてカスタムフックの最適な設計を意識しました。 この記事では、3つの重要な設計原則を軸に、実務で使えるカスタムフックのパターンを紹介します。良い例・悪い例を比較しながら、「なぜそうすべきか」を説明しています。 この記事で学べる3つの原則 単一責任
フロントエンド開発では、よくfetch()メソッドやaxios等でREST APIにリクエストを送る処理を書くことがあります。リクエストを送ったあとにサーバー側で動くのがバックエンドですが、仕組みをよく知らない方もいるのではないでしょうか? この記事では前後編に分けて、フロントエンド開発をはじめた若手エンジニアに向けてハンズオン形式でバックエンドの仕組みを解説します。 前編である今回は、「こんにちは!」という文字を返す簡単なREST APIを実装して画面から呼び出します。 バックエンドって? 一般的に、フロントエンドが「見た目・操作」を担当するなら、バックエンドは「データの保存・処理・提供」を担当します。 ECサイトを例にすると、以下のように役割が分かれていることが多いです。 フロントエンド:商品一覧やカート画面など、ユーザーが直接目にする部分を担当 バックエンド:商品情報、在庫、ユーザー
Today, we’re announcing our plans to create the React Foundation and a new technical governance structure. We open sourced React over a decade ago to help developers build great user experiences. From its earliest days, React has received substantial contributions from contributors outside of Meta. Over time, the number of contributors and the scope of their contributions has grown significantly.
2025年09月30日:Next.js vs Nuxt それぞれの良さを知る Frontend Night カジュアル面談はこちらから! https://jobs.layerx.co.jp/opendoor/164cdd370bae8062a550c8038970ade1/
2025年10月7日、ReactおよびReact NativeがLinux Foundation傘下のReact Foundationに移行することが発表された。 Introducing the React Foundation -React Introducing the React Foundation: The New Home for React & React Native - Engineering at Meta Introducing the React Foundation pic.twitter.com/lmRyo9ABjB — React (@reactjs) October 7, 2025 Over 10 years ago, we open-sourced React. And now, we’re excited to announce the next cha
Back to BlogThursday, October 9th 2025 Next.js 16 (beta)Posted by Next.js 16 (beta) is now available. This early release provides access to the latest improvements to Turbopack, caching, and the Next.js architecture ahead of the stable release. Highlights for this release include: Turbopack (stable): Default bundler for all apps with up to 5-10x faster Fast Refresh, and 2-5x faster builds Turbopac
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Today we're excited to release React Native 0.82: the first React Native that runs entirely on the New Architecture. This is a milestone release for React Native and we believe it's the start of a new era. In future versions we will be removing the remaining code from the Legacy Architecture to reduce install size and streamline the codebase. In addition, 0.82 also ships with an experimental opt-i
はじめに こんにちは@Sicut_study (Watanabe Jin)です。 2023年から始まった 「0からReactを勉強するならこのロードマップに従え」 ですが、早いもので3年目を迎えました。この期間で私も多くのプログラミング未経験の人にJISOUを通してReactを指導してきました。 👇メンバーの記事はこちらにあります また、実際に記事通りにロードマップを進めたことでReactやNext.jsの案件に参画できたというお礼のメールがくるようにもなりました。信じてやっていただけて大変感謝しています。 Reactを多くの人に指導してきてわかりました。 完全未経験だったとしても正しい手順を踏めば 誰でも3ヶ月でReactで個人開発できるレベルにはなれる 私から教わることでも達成できますが、自分でやれる行動力があるなら教わらなくてもできます。むしろ自分でできる人は自分でやって成長してく
はじめに こんにちは。エンジニアリングマネージャの星野です。今回はReactを用いたSPAの他言語化についての事例を紹介します。 テックドクターで開発している臨床研究支援システム「SelfBase」において、海外案件への対応をきっかけに管理画面の多言語化が必要となりました。 フロントエンドはReactを用いたSPA(Single Page Application)で構築されており、自前で実装する場合は react-i18next などを利用したi18n(国際化)対応を行うことになります。そのためには数ヶ月単位の少なくない開発工数が見込まれました。 そこで、「自前での実装」という選択肢だけでなく、「SaaS型の翻訳サービス」の導入を本格的に検討することにしました。 フロントエンド技術スタックと検討ポイント 多言語化を検討するにあたり、技術スタックとSaaS選定のポイントについて説明します。
10月1日、Reactチームが「React 19.2」を公開した。この記事では、Reactの最新リリースに含まれる新機能や改善点を紹介する。 10月1日、Reactチームが「React 19.2」を公開した。この記事では、Reactの最新リリースに含まれる新機能や改善点を紹介する。 新しいReactの機能 <Activity /> 新コンポーネント<Activity>はアプリを「アクティビティ」に分割して管理できる仕組みである。 これにより、画面上に表示する/隠すだけでなく、効果的にマウントやアンマウント、更新の優先度を制御できる。 // 従来 {isVisible && <Page />} // 新しい書き方 <Activity mode={isVisible ? 'visible' : 'hidden'}> <Page /> </Activity> visible: 子要素を表示し、副
How Functional Programming Shaped (and Twisted) Frontend Development A friend called me last week. Someone who’d built web applications back for a long time before moving exclusively to backend and infra work. He’d just opened a modern React codebase for the first time in over a decade. "What the hell is this?" he asked. "What are all these generated class names? Did we just... cancel the cascade? W
React Compiler 1.0 is available today. Compiler-powered lint rules ship in eslint-plugin-react-hooks’s recommended and recommended-latest preset. We’ve published an incremental adoption guide, and partnered with Expo, Vite, and Next.js so new apps can start with the compiler enabled. We are releasing the compiler’s first stable release today. React Compiler works on both React and React Native, an
by Tanner Linsley on Sep 23, 2025. TanStack Start has officially reached a v1.0 Release Candidate. This is the build we expect to ship as 1.0, pending your final feedback, docs polish, and a few last-mile fixes. Now’s the perfect time to kick the tires and help us validate the final stretch. When 1.0 ships, we’ll update this post (same URL) with any final notes. Why this matters TanStack Start isn
― ウェブの「純化」と「ねじれ」の10年10月5日、Ahmad El-Alfy氏が「How Functional Programming Shaped (and Twisted) Frontend Development」と題したブログ記事を公開し、話題を呼んでいる。 ― ウェブの「純化」と「ねじれ」の10年 10月5日、Ahmad El-Alfy氏が「How Functional Programming Shaped (and Twisted) Frontend Development」と題したブログ記事を公開し、話題を呼んでいる。 この記事では、20年以上のフロントエンド開発経験を持つ著者が、関数型プログラミング(FP)の理念が現代のフロントエンド開発をいかに形成し、 また一部ではプラットフォーム本来の力をねじ曲げてきたか という経緯と影響について述べている。 以下に、その内容をポイン
背景 これまでReactで使うフックは useState や useEffect が多く、useRef に関しては「DOM にアクセスするためのフック」くらいの理解で止まってしまい、使いどころが分からずモヤモヤしていました。 「値を保持できるのにレンダーが走らないってどういうこと?」 「それなら全部 useRef でいいんじゃないの?」 「DOM参照以外に何に使うの?」 といった疑問が常に頭の中にあり、正直 useRef は「知っているけど使いこなせないフック」でした。 しかし実際のプロジェクトでは、useRef を正しく理解して使うことで 「不要な再レンダーを避けられる」、「前回の値を記録できる」、「タイマーや外部リソースを安定して扱える」 といった便利さを実感しました。 useRefとは useRefの基本 useRef の概要は、「再レンダーされても値を保持し続けるための箱」 です。
When an Activity boundary is hidden, React will visually hide its children using the display: "none" CSS property. It will also destroy their Effects, cleaning up any active subscriptions. While hidden, children still re-render in response to new props, albeit at a lower priority than the rest of the content. When the boundary becomes visible again, React will reveal the children with their previo
Last week we hosted React Conf 2025 where we announced the React Foundation and showcased new features coming to React and React Native. React Conf 2025 was held on October 7-8, 2025, in Henderson, Nevada. The entire day 1 and day 2 streams are available online, and you can view photos from the event here. In this post, we’ll summarize the talks and announcements from the event. Day 1 Keynote Watc
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く