山田 祥寛
静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。
主な著書に「独習」シリーズ、「これからはじめるReact実践入門」、「改訂3版 JavaScript本格入門」他、著書多数。
いまRemix v3を学ぶ意味。Reactとの使い分けから考える技術選定の基準
最終回となる今回は、まずフォーム送信の段階的強化とミドルウェア設計という2つの実践パターンを紹介します。これらは、第1回で描いた「薄いフレームワーク」の思想が、実際のアプリケーション開発でどのように機能するかを示す好例です。その上で、Remix v3がどのようなプロジェクトに適しているのか技術選定の視点から考察し、筆者なりの評価と今後の展望を述べます。
Remix v3をサンプルコードで体験する。React非依存で“明示的に”UI制御できるコア機能3つ
今回は、実際にコードを書きながらRemix v3の特徴を体験します。概念として理解することと、手を動かして体感することは異なります。本稿では、配布サンプルコードを用いて、手動リアクティビティ、型安全ルーティング、合成イベントシステムの3つの機能を実践的に学んでいきましょう。
React状態管理ライブラリの選択指針：「ローカル/グローバル/サーバー」における使い分けの基準
「このプロジェクトの状態管理、どうする？」Redux Toolkit？ Zustand？ Jotai？ 各ライブラリのドキュメントを読んでも、「結局どれを選べばいいのか」という判断基準が見えてこない。今回は、状態の種類に応じた実践的なライブラリ選択指針と、状態管理パターンの進化について解説します。
Remix v3とReactのトレードオフを徹底考察：AI時代に再評価される「Web標準」への回帰
Webアプリケーションの開発を続けていると、「いつの間にかフレームワークの学習ばかりしている」と感じたことはないでしょうか。この課題は、フレームワークが「厚く」なることで生まれます。多機能で便利な反面、学習コストが高く、Web標準から遠ざかった独自の概念が増えていく。その結果、バージョンアップのたびに学び直しを強いられることになります。AIツールが普及した現代では、この問題はより深刻です。
Reactコンポーネントの不要な再レンダリングを制御する。useMemo/useCallbackの使いどころとPropsの粒度管理
適切なPropsの扱い方は、コンポーネントの再レンダリングを制御し、ユーザーエクスペリエンスの向上に大きく貢献します。本記事では、メモ化フックやPropsの粒度管理による、Propsの最適化テクニックを紹介。パフォーマンスと保守性を損なう代表的なアンチパターンもまとめました。
Reactデザインパターン「Compound Components」実践ガイド。TypeScriptの型設計でPropsを意のままに操る
「このボタンコンポーネントにどこまでのPropsを持たせるべき？」判断に迷ったことはありませんか。Propsのバケツリレーを避け、TypeScriptによる型安全性とCompound Componentsによる構造の柔軟性を両立するUIコンポーネント設計を解説します。
「State of CSS 2025」でCSS機能の進化を知る。認知度、評価、ブラウザ互換性を比較
「新発見！フロントエンド技術の今」第18回のテーマはCSSの最新トレンドです。2025年8月に公開されたCSSに関するサーベイ「State of CSS 2025」の結果をふまえ、注目の機能をピックアップ。ブラウザのサポート状況や開発者の評価も紹介します。
App Router時代における「大規模React開発」のフォルダ設計術。Colocationによる関心の分離
Reactフォルダ設計における「機能別分類」。その理論を実際のプロジェクトでどう実装するか、具体的なアプローチを紹介。index.tsによる公開API設計、Next.js App Routerとの組み合わせ方から、FSDなど選択肢を広げるための知識まで、ポイントを解説します。
Reactフォルダ構造の最適解。コンポーネントの数に合わせて選ぶ基本方針
React公式にフォルダ構造の規定はないため、規模に応じた選択が重要だ。迷いが生じにくい「フラット構造」や、「技術別」「機能別」分類など、それぞれの特徴と導入時の注意点を解説。プロジェクトに最適な構造を見つけるためのヒントを紹介する。
Atomic Designの分類を見直す。3階層から始める、UI変更に強いコンポーネント設計
一時期大きな注目を集めたUI設計手法"Atomic Design"。プロダクトやチームの性質によってはかえって不便になることも。本記事では、Atoms/Organisms/Pagesの3階層に分けることで、開発効率を向上させるアプローチを紹介します。
デグレと手戻りを減らす。今こそコンポーネントの話をしよう
WINGSプロジェクトによる新連載。初回はコンポーネント設計の基本的な考え方を押さえつつ、メリットやアンチパターンを解説。「なぜ今コンポーネント設計を学ぶのか？」の問いに答えます。
処理高速化や利便性向上に期待。「State of JavaScript」最新版で見るJS開発者注目の新メソッド
配列、非同期、セット、オブジェクトの各機能からビルドツールまで。State of JavaScript最新版から注目すべき新項目をピックアップし、技術トレンドを解説します。
「State of HTML 2024」でキャッチアップ。HTMLの最新トレンドと注目機能
「新発見！フロントエンド技術の今」の連載。第15回は、HTMLに実装された新しいタグやAPIについて解説します。
フロントエンド開発で使える開発環境をおさらい。スタンドアロンからクラウドIDEまでの注目機能や特徴を紹介
「新発見！フロントエンド技術の今」の連載。第14回は、昨今ではフロントエンド開発でも当たり前に使われる開発環境について解説します。
フロントエンドテストはやっぱり大事！人気のテストフレームワークとともに種類別に解説
「新発見！フロントエンド技術の今」の連載。第13回はアプリの品質向上に欠かせないフロントエンドテストについて解説します。
主要バンドラーの仕様を徹底比較。Import Maps、Viteなど「脱バンドラー」の動きも
「新発見！フロントエンド技術の今」の連載。第12回ではフロントエンドアプリの配布に欠かせないビルドツール「バンドラー」について解説します。
フレームワークだけじゃない！ 「State of JavaScript 2023」で見直すJavaScriptの人気ライブラリ
「新発見！フロントエンド技術の今」の連載。第11回のテーマはアプリ開発に便利に使える「JavaScriptライブラリ」です。
群雄割拠のCSSフレームワークのトレンドを理解する
CSSフレームワークを活用してスタイル設計を効率化する方法を詳しく紹介。Bootstrap, Tailwind CSS, PureCSS, UnoCSS, Open Propsの特徴と使い方を徹底解説。
JavaScriptの標準規格「ECMAScript」を見直す。これからの注目機能も紹介
「新発見！フロントエンド技術の今」の連載。第7回のテーマはJavaScriptの標準規格「プログラミング言語ECMAScript」を扱います。「State of JS」2022年度版をもとに、JavaScriptのStage4前の注目機能も紹介
SPAは万能じゃない。「革新的」と言われているPWAはどこがすごいのか？
【新発見！フロントエンド技術の今】フロントエンド開発を取り巻く環境が刻々と変化するなか、進化を遂げる技術とプロダクトの最新事情を紹介します。連載第6回は、「革新的」と言われているPWA(Progressive Web App)の魅力を解説します
CSSは日々進化している！知ったら使いたくなる「モダンCSS」機能紹介
【新発見！フロントエンド技術の今】フロントエンド開発を取り巻く環境が刻々と変化するなか、進化を遂げる技術とプロダクトの最新事情を紹介します。連載第5回は、昨今注目されている「モダンCSS」をいくつかピックアップし紹介いたします
静的ホスティングサービスの仕組みと使いどころ。そのメリットや使用の注意点も解説
【新発見！フロントエンド技術の今】フロントエンド開発を取り巻く環境が刻々と変化するなか、進化を遂げる技術とプロダクトの最新事情を紹介します。連載第4回は、昨今注目されている「静的ホスティング」についてその仕組と役割について紹介します。
フレームワーク「Svelte」「Solid」が話題。画期的だった仮想DOMと脱仮想DOMへの流れ
「フロントエンド技術の今」の連載。第3回のテーマは「仮想DOM」。字面を捉えるとDOMを仮想化したものですが、その目的はDOM更新の高速化です。今回は、画期的だった仮想DOMと脱仮想DOMへの流れと、現在話題のフレームワークを紹介します。
- 1