サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
importReact from 'react'; import { ToastContainer, toast } from 'react-toastify'; function App(){ const notify = () => toast("Wow so easy!"); return ( <div> <button onClick={notify}>Notify!</button> <ToastContainer /> </div> ); } Easy to set up for real, you can makeit work in less than 10sec! Super easy to customize RTL support Swipe to close 👌 Can choose swipe direction Super easy to use an a
Propsの渡し方は、アプリケーションの再レンダリング性能に大きな影響を与えます。特に重要なのは、参照の同一性とProps粒度の適切な管理です。毎回新しいオブジェクトや関数を作成することは、子コンポーネントの不要な再レンダリングを引き起こします。 // ❌ 毎回新しいオブジェクト・関数が作成される function ParentComponent() { return ( <ChildComponent style={{ marginTop: 10 }} // 毎回新しいオブジェクト onAction={() => console.log('action')} // 毎回新しい関数 /> ); } // ✅ 安定した参照を提供 const ChildComponent =React.memo(({ style, onAction }) => { // 子コンポーネントの実装 return
Reactにおいてプロダクトの品質を高く保つには、Reactのやり方に合ったコードを書くことが重要です。公式ドキュメントの名物ページ「そのエフェクトは不要かも」には、useEffectの望ましくない使い方と、それに代わるテクニックが紹介されています。 この記事で取り上げるのは、その中でも「props が変更されたときに一部の state を調整する」のセクションで紹介されている、レンダリング中にステートを更新するテクニックです。 このテクニックは一見すると奇妙で、知ってはいるけど使っていいのかよく分からないという方も多そうです。しかし、一見突飛に見える記述でも、深く理解すれば実はReactのデザインに完璧に則っているというのがReactの公式ドキュメントの特徴です。技術に対する向き合い方として、公式の説明であっても妄信せず批判的に見ることはとても重要です。しかし、Reactの場合は最終的に
はじめに 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年以上メンテナ
はじめにReact +TypeScriptでAPIを呼び出す際、エラーハンドリングは避けて通れません。しかし、「とりあえずtry-catchで囲む」だけでは不十分です。この記事では、実践的なエラーハンドリングパターンを解説します。 基本的なtry-catch-finallyパターンtypescriptconst handleNameSearch = async (e:React.FormEvent) => { e.preventDefault(); onLoadingChange(true); // ローディング開始 try { const response = await fetch('http://localhost:3000/api/v1/wines/search_by_name', { method: 'POST', headers: { 'Content-Type': '
前回は、フォルダ設計の基礎理論として、フラット構造から技術別分類、そして機能別分類への進化について学びました。特に機能別分類の優位性として、関連ファイルの物理的近接、変更影響範囲の明確化、チーム分業の責任範囲明確化という3つの重要なメリットを確認しました。 今回は、機能別分類の理論を実際のプロジェクトでどう実装するかに焦点を当てます。現代のReact開発で特に有効な具体的なパターン、Next.js App Routerとの組み合わせ方法、そしてプロジェクトの特性に応じた選択指針について詳しく解説していきましょう。 ▲Feature-based Patternのフォルダ階層 機能別分類の理論を理解したところで、実際にどのような構造で実装するかを見ていきましょう。ここでは現代のReact開発で特に有効な2つのパターンを詳しく解説します。 Feature-based Pattern：機能別分類の
はじめにweb制作をメインでやっていた時に毎回と言うほどGoogleMapのカスタムを実装していました。 当時はJqueryで実装していたのですが、Reactの場合はどんな感じで実装するんだろうと気になって試してみました！ この記事でわかることReactを使ったGoogleMapの実装 簡単なカスタマイズ方法 事前準備編GoogleMapを描画するライブラリを探す 選定をnpmtrends使って簡単に行いました。 DL数と更新頻度が新しいreact-google-maps-apiを使う事にしました。GoogleMapを表示する時に使うGoogleMapsAPI Keyを取得するAPI Keyがないと地図を描画できないため、取得します。 手順は公式のドキュメントを見ながら出来ました。 カードの登録が必要だから、ちょっとだけ手間。 実装編Reactは18を使います。 スタイルは
前書きReactとRemixは、どちらもJavaScriptでフロントエンドアプリケーションを構築するために使われますが、目的と機能が異なるため、構文や開発アプローチに大きな違いがあります。 1.React の特徴React の基本ReactはUIライブラリであり、アプリケーションのビュー（UI）を構築することに特化しています。 ルーティングやデータフェッチなどは提供されないため、必要に応じて外部ライブラリ（React Routerなど）を利用します。 基本構文 importReact from 'react'; function App() { return ( <div> <h1>Hello,React!</h1> </div> ); } export default App;Reactの重要な特徴は、以下のフックを使用して状態管理やライフサイクル管理を行えることです。
執筆 中川 幸哉 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表 山田祥寛）に所属するテクニカルライター。新潟県上越市出身。会津大学コンピュータ理工学部卒業後、現在は新潟市に在住。ReactやAndroidを軸に、モバイルアプリ開発やWebサイト制作、Webメディア編集部の業務改善や、プログラミング技術記事の執筆等に携わっている。著書に「たった1日で基本が身に付く!Androidアプリ開発超入門」（技術評論社）、「基礎から学ぶReact Native入門」（翔泳社）他。 監修 山田 祥寛 静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and DevelopmentTechnologies。執筆コミュニティ「
はじめに この記事の内容は、以下の動画でも解説しています。アニメーションでわかりやすくなっているので、ぜひ見てみてください。他にもWebに関する解説動画を投稿しているので、気になる人はチャンネル登録よろしくお願いします！ Remixとは？ Remix とは、公式サイト によると、React ベースのフルスタックの Web フレームワーク のことです。 Remix is a full stack web framework that lets you focus on the user interface and work back through web standards to deliver a fast, slick, and resilient user experience. （訳）Remixはフルスタックのウェブフレームワークで、ユーザーインターフェイスに集中し、ウェブスタンダ
React Router の Server Components 対応はプレビュー版で提供されています。今後変更される可能性がありますので、注意してください。React Router はプレビュー版として Server Components に対応しました。これにより以下のような機能が追加されました。 loader や actions を使用してデータを返す際にコンポーネント渡せるようになる Server Components ファーストのサーバーコンポーネントルート "use server" ディレクティブを使用したサーバー関数のサポート この記事ではReact Router の Server Components 対応を実際に試してみます。React Routerプロジェクトの作成 まずはReact Router のサーバーコンポーネント対応はプレビュー版で提供されている機能
React Hook FormReactでフォームを作るとき、フォームごとuseStateで入力値を管理したり、フォームのバリデーションを直接書いたりしてかなり大変です。 その時利用できるのがReact Hook FormのuseFormです。 今回は以下のサンプルで使った部分だけ絞って説明したいと思います。サンプルのデザインにはtailwindCSSを利用しています ソースコード 公式ドキュメント インストール $ npm installreact-hook-form //react18利用中にDependancyエラーの場合 //react18の場合まだ使えないため、後ろに --legacy-peer-deps をつけてインストールします $ npm installreact-hook-form --legacy-peer-deps
はじめに 長らくReactを雰囲気で書いてきました。コンポーネントを作り、propsを渡し、状態を管理する基本的な概念は理解していたものの、より体系的なアプローチや設計パターンについては深く考えずにコードを書いていました。しかし、より大規模で保守性の高いアプリケーションを構築するにつれ、単なる「動くコード」を超えた、堅牢な設計原則の必要性を痛感するようになりました。 この記事は、私自身の再学習を共有するものです。 ※2025/04/21時点、私が関わっているプロダクトのCrowd AgentのReactのバージョンは"18.3.1"です。 目次Reactデザインパターンとは HOC (高階コンポーネント) パターン[※React18以降では、カスタムフック推奨] Provider パターン Presentational と Container コンポーネントパターンReact Hook
Laravelでログイン機能のテストを、本番用DBに影響を与えずに実行するための手順です。 ✅ 1.phpunit.xmlでテスト用DBの設定を行うphpunit.xmlに以下の環境変数を追加します。これにより、テスト実行時はtest_dbに接続されます。 <php> <env name="APP_ENV" value="testing"/> <env name="DB_CONNECTION" value="mysql"/> <env name="DB_DATABASE" value="test_db"/> <env name="DB_HOST" value="db"/> <env name="DB_PORT" value="3306"/> <env name="DB_USERNAME" value="root"/> <env name="DB_PASSWORD" value="roo
カミナシで、Webフロントエンドエンジニアをしている osuzu です。 これまでフロントエンド専門外のエンジニアからReactを学ぶ良い方法やお勧めドキュメントを聞かれる度に、 公式ドキュメント のリンクを貼る日々を過ごしてきましたが、何かすごい上達方法がないものかと普段意識していることをこの記事で書き起こしてみました。 文字にした結果、中身になにか特別なことや魔法のテクニックは一つもなく、むしろプログラミング一般に通ずる話ばかりになりましたが、（自戒も込めて）凡事徹底することの難しさもあると感じておりその一助になれば幸いです。 ※ 凡事徹底：平凡なことを非凡なほどに実行すること。一つ一つの理解や実行は平易でも、それを実践し続けるのは難しい。React Server Component（以下RSC）を採用するかで変わる部分もありますが、記事の例はClient Componentの話が中
ここで重要なのは、ユーザーがダイナミックで迅速に反応するアプリケーションを期待しているという点です。そのため、React アプリケーションをより速く、応答性が高く、高性能にすることが重要です。これにより、エンドユーザーは期待するコンテンツをすぐに表示できるようになります。そして、アプリとのスムーズなインタラクションを促進するための最良の方法の一つが、Reactのサーバーサイドレンダリング（SSR）の利用です。Reactのサーバーサイドレンダリング（SSR）について詳しく見ていき、その使用方法、利点、そしてクライアントサイドレンダリング（CSR）との違いを探ります。これにより、Reactアプリケーションをどのように効率的に最適化するかが理解できるでしょう。Reactサーバーサイドレンダリング（SSR）とは何ですか？ サーバーサイドレンダリング（SSR） のプロセスは以下の通りです。 一方
Reactはシンプルなサイトから複雑なアプリケーションまで、非常に幅広く採用されている人気のフレームワークです。OSS化から10年以上の歴史がありながら、昨今もReact Server Componentsなど革新的なアイディアを我々に提案し続けています。 一方で、React Server Componentsへの批判的意見やBoomer Fetching問題などを見ていると、Reactチームと一部Reactユーザーの間には意見の相違が見て取れます。この意見の相違はそれぞれが置かれた状況の違いから生じるもの、つまり「見てる世界が違う」ことに起因してると筆者は感じています。本稿では「Reactチームの見てる世界」を歴史的経緯を踏まえながら考察し、Reactの根本にある思想やコンセプトに対する読者の理解を深めることを目指します。 要約ReactはMetaの大規模開発を支えるべく開発され、シ
「なにがしたいか」をベースにコメントをつけておくと、後で読むときのコストが下がりやすい。 実際にプロダクトコードで書いたことがあるコメント↓ (簡略化してます) // 画面内に入った動画を自動再生する+ほかの動画は停止する (すでに再生済みだったら再生しない) useEffect(() => { if (inView && !hasBeenPlayed && canAutoplay) { /* ... */ pauseOtherVideo(); play(); } /* ... */ }); このコンポーネントにはコレを含めて4つのコメント付きのuseEffectがあった。たびたび読み返す機会があったが、その度にこれらのコメントが大いに役立った。 なぜコメントが必要なのか? useEffectの中身はたいてい複雑な処理になる。しかもたいてい無名関数を渡すので、実現したい仕様に関する情報がな
CSR(Client Side Rendering) と SSR (Server Side Rendering)CreateReact App を使って作成されるアプリケーションは CSR(Client Side Rendering)で描画されます。CSR の場合、ブラウザは空のHTML をロードした後JavaScript ファイルをロードしてコンポーネントを描画します。一方 SSR では、最初にサーバーサイド側で静的なページとしてHTML を描画し、動的なJavaScript を後から注入します(hydration)。先に静的なページが表示されるため、初期描画の速度が上がります。React における Server Side RenderingReactDOMServer.renderToString() というメソッドを利用することで、React Component をサ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
