Everything you care about in one place
Follow feeds: blogs, news, RSS and more. An effortless way to read and digest content of your choice.
Get Feederpostd.cc
POSTD
Get the latest updates from POSTD directly as they happen.
Follow now 46 followers
Latest posts
Last updated 17 days ago
React Server Actionsでデータをフェッチすることはできるのか？
14 days ago
React Server Actionsは、クライアントサイドのデータフェッチにおいて、fetchを置き換えることができるのでしょうか？ 調査して確かめてみましょう。 React Server Actions（現在はServer Functionsとして知られています）をデータフェッチに使用することはできるのでしょうか？ これは、時折話題に上がる非常に良い質問です（参考、参考）。 しかし、Server Actionsを使ってデータを「フェッチ」するのは、本当に良いアイデアなのでしょうか？ 「Actions（アクション）」という言葉は、それがフェッチ用ではないことをいくらか暗示しています。...
React Server ComponentsにおけるCSS
about 1 month ago
2023年5月4日、VercelはNext 13.4の安定版リリースを発表し、React Server Componentsを基盤として構築された初のReactフレームワークとなりました。 これは非常に大きな出来事です！RSC（React Server Components）は、Reactにおいてサーバー専用のコードを記述するための公式な方法を提供してくれます。私のブログ記事「Making Sense of RSC（RSCを理解する）」でも書いたように、RSCは多くの興味深い新たな扉を開いてくれます。 しかし、オムレツを作るには卵を割らなければなりません。 RSCはReactの仕組みに対する根本的な変更です。その影響で、私たちが使ってきたライブラリやツールの一部は…スクランブルエッグのようにごちゃ混ぜになってしまいました...
Web上の巨大HTMLドキュメントを探る
2 months ago
ほとんどのHTMLドキュメントは比較的小さく、ページ上の他のリソースを読み込むための起点として機能しています。 しかし、なぜ一部のWebサイトでは数メガバイトものHTMLコードが読み込まれるのでしょうか？通常、ページ上に大量のコンテンツがあるわけではなく、他の種類のリソースがドキュメント内に埋め込まれていることが原因です。 この記事では、Web上に存在する巨大なHTMLドキュメントの実例を取り上げ、コードの中身を覗いて何がそれほど大きくしているのかを探っていきます。 Web上のHTMLは驚きの連続です。この記事を執筆する過程で、DebugBearのHTMLサイズアナライザーのほとんどを作り直しました。スクリプトの中にJSON、その中にHTML、さらにCSSや画像——HTMLにそんな深い入れ子構造があっても、今なら対応しています！ 埋め込み画像 Base64エンコーディングは、画像をテキストに変換する方法で、HTMLやCSSなどのテキストファイルに埋め込むことができます。画像を直接HTMLに埋め込むことには大きなメリットがあります。画像を表示するためにブラウザが別途リクエストを行う必要がなくなるのです。 しかし、大きなファイルの場合は問題を引き起こす可能性があります。たとえば、画像を個別にキャッシュできなくなり、また画像がドキュメントコンテンツと同じ優先度で取得されてしまいます——通常、画像は後から読み込まれても問題ないのですが。 以下は、データURLを使用してHTMLに埋め込まれたPNGファイルの例です。 このパターンにはさまざまなバリエーションがあります： 誤って含まれた数メガバイトの単一画像である場合もあれば、時間の経過とともに蓄積された数百個の小さなアイコンの場合もある レスポンシブイメージとデータURLを組み合わせて使用しているサイトもあった。レスポンシブイメージの目的の1つは必要最小限の解像度の画像だけを読み込むことだが、すべてのバージョンをHTMLに埋め込むと逆効果になる 間接的に埋め込まれた画像：...
ブラウザを再び好きにさせてくれる、5つの奇妙なWeb API
3 months ago
2025年に入って3度目の自分のサイト再構築をしていた時（どうか突っ込まないでください）、私はあることを思い出しました。それは、「ブラウザは実は魔法のような存在だ」ということです。 私たちが日々扱う終わりなきフォームバリデーションやエラー状態、APIコールの裏側で、Webにはまだ「奇妙な小さな機能」がたくさん詰まっています。それはまるで、昔のゲームで隠しステージを見つけた時のような、思わずニヤリとしてしまうようなものです。 私たちは普段、fetch() や addEventListener() といったお決まりのツールキットにこだわりがちです。しかしブラウザAPIにはエンジニアリングというより「イースターエッグ（隠し要素）」に近い、忘れ去られた層が存在します。CRUDアプリというより、「えっ、こんなところで何してるの？！」という感覚に近いものです。 正直なところ、B2Bダッシュボードの開発でスプリント112あたりを回しているような状況なら、あなたには少しの楽しみが必要でしょう。これらのAPIは、ただ奇妙なものを作るためだけのものではありません。Web開発の楽しさや遊び心、そして純粋な有用さを再発見させてくれるものです。 プログラムでスマホを振動させるのは、確かに面白い。でも、その同じAPIを使えば、モバイルでのエラーハンドリングをよりアクセシブル（親切）にできます。 MIDIキーボードでタイピングをするのは、単なる宴会芸に過ぎないでしょう。でもそれは、代替ハードウェアを必要とする人々にとって正当な入力方法にもなり得るのです。 一見すると常軌を逸しているように見えるこれらの機能も、それぞれが「心地よいインターフェース」「予想外のイン???ラクション」、そして「思慮深いアクセシビリティの向上」への扉を開いてくれます。 それでは、驚くほど奇妙で素晴らしい5つのブラウザAPIを紹介しましょう。これらは遊び心にあふれ、便利で、Reactコンポーネントのデバッグよりもきっと楽しいはずです。 1...
React Server Componentsの本番運用上の課題について
5 months ago
数週間前、私たちの本番アプリがハングし始めました。コンポーネントがランダムに読み込まれなくなったのです。ユーザーの画面ローディングスピナーの前で固まってしまいました。40時間デバッグした末に、私たちは気づきました。React Server Components（RSC）が問題だったのです。 イントロダクション：理想 vs. 現実 当初、React Server Components（RSC）は革命的であるはずでした。 Reactチームは以下を強調していました： ✅ パフォーマンスの向上...
既存のプロジェクトにCSSカスケードレイヤーを統合する
6 months ago
クイックサマリー:この記事の目的は、CSSカスケードレイヤーを既存のレガシーなコードベースに統合するプロセスを、ありのままに全てお伝えすることです。具体的には、何も壊さないように既存のCSSをリファクタリングしてカスケードレイヤーを使えるようにする方法について解説します。 Stephenie Eckles氏の記事「Getting Started With CSS Cascade Layers」を読めば、いつでも素晴らしい概要を学べます。しかし、この記事では、カスケードレイヤーを実際のコードに統合する体験、その長所、短所、そしてスパゲッティコードとの格闘まで、全てお話ししたいと思います。 よくある解説記事のようにサンプルプロジェクトを用意することもできます。しかし現実の世界はそんな風にはいきません。なぜか動いているけれど、誰もその理由を知らないようなスタイルが書かれたコードを引き継ぐ、といった感じで、実際に手を汚してみたいのです。 カスケードレイヤーを使っていないプロジェクトを見つけるのは簡単でした。難しいのは、詳細度や構成に問題を抱えるほど散らかっていて、なおかつカスケードレイヤー統合のさまざまな側面を説明できるくらい幅広いプロジェクトを見つけることでした。 皆さま、Drishtant Ghosh氏が作成した、こちらのDiscordボットのWebサイトをご紹介します。Drishtant氏がご自身の作品を事例として使うことを許可してくださったことに、深く感謝します。このプロジェクトは、ナビゲーションバー、ヒーローセクション、いくつかのボタン、モバイルメニューを備えた、典型的なランディングページです。...
Next.jsのFetch Wrapper：ベストプラクティスを徹底解説
7 months ago
想像してみてください。あなたは夢のNext.jsアプリケーションを構築し、ネイティブのfetch関数を使って楽しくAPIコールを行っています。全てが順調に見えましたが、アプリケーションを本番環境にデプロイした途端、事態は一変します。反復的なエラー処理のコードに溺れ、コンポーネントのあちこちに散らばった認証トークンと格闘し、なぜ一部のリクエストがサーバーでは成功するのにクライアントでは失敗するのか、そのデバッグに髪をかきむしる日々……。 聞き覚えがありませんか？あなただけではありません。Next.jsはfetchを強力なキャッシュ機能や再検証機能で拡張していますが、中心的な課題は残っています。本番環境に対応した堅牢なAPIレイヤーを構築するには、素のfetchコールだけでは不十分なのです。 本記事では、あなたのAPIレイヤーを頭痛の種から、扱うのが楽しくなるものへと変える、本番環境対応のfetchラッパーを作成します。その構築方法だけでなく、なぜそれぞれの決定が重要なのか、そしてそれがNext.js特有の実行モデルにどう適合するのかを掘り下げていきましょう。 素のfetchが抱える問題点（Next.jsでも） まず、多くの開発者が最初にfetchに出会ったときに書くコードを見てみましょう。 // ナイーブなアプローチ - 本番環境では使わないでください！ async function getUser(id)...
2025年のReactとコミュニティの現状
8 months ago
Reactがこれまでどのように開発されてきたかについての詳細な考察と、コミュニティでよく見られる混乱や懸念事項についての説明 はじめに 今日、Reactとそのエコシステムの状況は複雑で分裂しており、成功、懐疑、そして論争が入り混じっています。 ポジティブな面として、Reactは最も広く利用されているUIフレームワークであり、そのコンセプトはJSエコシステムの他の部分にも影響を与えてきました。Reactチームは数年にわたる開発の末、先日React 19をリリースしました。これは、公式に安定版となったReact Server Componentsのサポート、Promiseを扱うための新しいuseフック、複数の新しいフォーム連携、そして長らく非推奨であった多くの時代遅れな機能の削除を含む、大規模なリリースでした。 しかし、私が観察し、また経験してきたところでは、Reactコミュニティでは、Reactの向かう先やその開発方法、推奨される利用アプローチ、そしてReactチームとコミュニティ間の相互作用について、たくさんの意見が交わされています。これは、過去数年間にわたってReactおよびWeb開発コミュニティ全体で飛び交ってきた何十もの異なる議論や、Reactの動作に関する特定の技術的懸念、他の類似JSフレームワークとの比較、そして今後Webアプリをどのように構築すべきかといった問題と重なっています。 事態をさらに悪化させているのは、誰もがこれらの懸念の異なる一部分について議論や討論をしており、表明されている懸念の多くが誤りであるか、完全なFUDであることです。残念ながら、これらの議論と恐怖は、Reactチームと開発者間の適切なコミュニケーションの不足などによって、さらに複雑化しています。これら全てが密接に絡???合っているのです。 不安や懸念、不透明感 私はソーシャルメディア上で関連する多くの議論に参加してきました。Reactチームを擁護し、また批判するコメントを数多く書き、彼らが特定の決定を下した理由や物事の実際の経緯を説明し、ドキュメントや説明の改善を求め、その他多くの活動を行ってきました。 これらのトピックのほんの一部をカバーしようとするだけでも、広範で詳細な記事が必要となります（そして私は、「Reactは悪いのか/Reactは他のツールと比べてどうなのか？」という、さらにスコープ外のトピックには触れるつもりすらありません）。しかし、あまりにも多くの時間を討論と説明に費やしてきた今、これらのトピックの多くをまとめて扱う統合的な記事を書く必要性を感じています。...
Reactの差分検出処理：コンポーネントの背後に隠れたエンジン
10 months ago
差分検出エンジン 以前投稿した記事（1、2）で、React.memoの仕組みと、コンポジションを通じてよりスマートにパフォーマンスを最適化する方法について説明しました。しかし、Reactのパフォーマンスを完全にマスターするには、すべてを動かすエンジンである、Reactの差分検出アルゴリズムを理解する必要があります。 差分検出は、ReactがDOMをアップデートし、コンポーネントツリーと一致させるプロセスです。Reactの宣言的プログラミングを可能にしているのが差分検出です。ユーザーが求めるものを説明すると、Reactがそれを効率的に実現する方法を探します。 コンポーネントの識別情報とstateの永続性 技術的な内容について話し始める前に、Reactがコンポーネントの識別情報（そのコンポーネントらしさを形成する独自性）についてどのように考えているかを示す驚くべき動作を見てみましょう。 以下の簡単なテキスト入力のトグル例をご覧ください。 const UserInfoForm = () => {...
ポストデベロッパー時代
11 months ago
今から2年前の2023年3月に“The End of Front-End Development”（フロントエンド開発の終焉）という記事を投稿しました。ちょうどOpenAIがGPT-4を発表した後で、多くの人が近い将来、ソフトウェアはすべて機械が作るようになり、人間のソフトウェア開発者は不要になるだろうという考えに傾いていました。 筆者はこうした論調には懐疑的で、当面の間、ソフトウェア開発は依然として人間の助けを必要とするだろうと前述の記事の中で主張し、その理由を論じました。筆者が立てた仮説は、大規模言語モデル（LLM）は人間の開発者を置き換えるのではなく、補強するというものです。 当時、Twitter上ではAIの登場により数カ月、長くても1、2年で人間のフロントエンド開発者の需要は無くなるとの意見が大勢を占めていました。あれから2年以上が経ちますが、現実はどうでしょうか。当時言われていたような「ポストデベロッパー」時代は到来しているでしょうか。 この記事では、現在の状況を新たな視点から捉え直し、何がどう変わったのか、今後どのような進化の過程を辿るのかを検討してみたいと思います。この記事が、開発者を志しながらも今後のキャリアに不安を覚えている読者の参考になれば幸いです。❤️ 企業によるAIの利用状況 ここ数年、AIツールを導入する企業がますます増えています。最近、フォーブス誌に“AI Writes Over...
React Server Componentsを理解する
12 months ago
React Server Componentsを理解する React Server Components（RSC）の登場により、Reactエコシステムにおけるサーバーレンダリングの重要性が高まりました。RSCを使用することで、デベロッパーは一部のコンポーネントをサーバー側でレンダリングしつつ、抽象化によりクライアントとサーバーの隔たりを感じさせないユーザビリティを実現することができます。Client ComponentsとServer Componentsをコード内に混在させることで、すべてのコードが1カ所で実行されているように見せることができます。 しかし、抽象化には常にコストが伴います。そのコストとはどのようなものでしょうか。RSCはいつ「使える」のでしょうか。バンドルサイズが小さくなると、帯域幅も狭まるのでしょうか。RSCを「使うべき」ときはいつでしょうか。RSCを適切に使う上でデベロッパーが従うべきルールは何でしょうか。そのルールが存在する理由は何でしょうか。 これらの問いに答えるため、RSCの仕組みを詳しく見ていきましょう。React本体と、ReactのメタフレームワークというRSCの2つの側面について考察します。特に、RSCに関する正確なメンタルモデルを構築できるよう、ReactとNext.jsの内部構造について説明します。 noneこの記事は、Reactを使い慣れたデベロッパーを対象としています。読者には、コンポーネントやフックに関する予備知識が前提条件として求められます。また、JavaScriptのPromise、async、awaitについても熟知していることを想定しています。これらに関する知識がない方は、Promise、async、awaitの仕組みに関する筆者のYouTube動画をご覧ください。Reactのあらゆる側面についてゼロから詳しく知りたい方は、筆者の「Understanding React（Reactを理解する）」コースをぜひチェックしてみてください。このコースでは、Reactのソースコードを掘り下げることで、JSX、Fiber、コンポーネント、フック、フォームなどの仕組みを理解していただくことができます。...
Next.jsのPages RouterからApp Routerに移行する
about 1 year ago
Next.jsプロジェクトをアップグレードする Next.jsの従来のPages Routerから新しいApp Routerに移行しましょう。ここの移行により、アプリケーションのルーティング効率と柔軟性が向上します。App Routerは、ファイルシステムベースのルーティング機能が改善されたほか、React Server Componentsが導入されたことなどにより、開発体験を向上させます。 依存関係をチェックする package.jsonファイルのバージョンが最新であることが重要です。依存関係をすべてチェックし、新しいApp Routerと互換性があることを確認しましょう。必要であればアップグレードしてください。この準備を行うことで、移行時に互換性の問題が発生するのを避けることができます。 依存関係はnpmを使用することで簡単にチェックできます。以下のコマンドを実行してください。 $...