サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
GPT-4o
ja.reactjs.org
クライアントレンダリング API への変更 まず React 18 をインストールすると、以下のような警告がコンソールに表示されます: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it’s running React 17. Learn more: https://reactjs.org/link/switch-to-createroot React では複数のルートを管理する際の使い勝手を改善する、新しいルート API を導入しています。新しいルート API によって新しい並行レンダラも有効になるため、並行処理機能にオプトインできるようになります。 // Befo
日本語版サイト (ja.reactjs.org) のブログセクションへの記事掲載には英語版サイトと比べてタイムラグがあります。 最新のブログ記事は英語版でご確認ください。 日本語版サイトでは英語版ブログに定期的に追従しつつ、2020 年以降の記事を随時翻訳しています。 React 18 が npm で利用可能になりました! 前回の投稿にて、アプリを React 18 にアップグレードするためのステップバイステップガイドを共有しました。この投稿では、React 18 の新機能や、将来に向けての展望をお伝えします。 この最新のメジャーバージョンには、自動バッチング (automatic batching) のような自動で有効になる機能改善、startTransition のような新たな API、そしてサスペンス (suspense) に対応したストリーミングでのサーバサイドレンダリング機能が含
日本語版サイト (ja.reactjs.org) のブログセクションへの記事掲載には英語版サイトと比べてタイムラグがあります。 最新のブログ記事は英語版でご確認ください。 日本語版サイトでは英語版ブログに定期的に追従しつつ、2020 年以降の記事を随時翻訳しています。 2021 年 11 月 15 日追記: React 18 はベータ版となりました。リリースに関する最新情報は React 18 ワーキンググループの投稿で確認できます。 React チームより幾つかのお知らせがあります! 次のメジャーバージョンとなる React 18 リリースに向けての作業を開始しました。 コミュニティが React 18 の新機能を段階的に導入できるようにするため、ワーキンググループを作成しました。 ライブラリの作者が試用してフィードバックを送れるようにするため、React 18 のアルファ版を公開しまし
この記事は古くなっており、今後更新されません。新しい React 日本語ドキュメントである ja.react.dev をご利用ください。 新ドキュメントのカスタム HTML 要素を参照してください。 React と Web Components は異なる課題を解決する為に構築されました。Web Components はコンポーネントをパッケージ化して、高い再利用性を与えます。一方で React は DOM とデータを同期させる為の宣言型のライブラリを提供しています。この 2 つの目標は互いを補完しあっています。あなたは開発者として、Web Components 内で React を使用することも、React 内で Web Components を使用することも、あるいはその両方を行うこともできます。 React を使用するほとんどの人は Web Components を使用しませんが、We
このセクションでは React コードベースの構成や規則そして実装についての概要を説明します。 あなたが React にコントリビュートしたい場合に、このガイドがあなたがより快適に変更を行えるように手助けとなる事を願っています。 これらの規約のいずれかをあなたの React アプリケーションで推奨しているというわけでは必ずしもありません。規約の多くは歴史的な理由で存在しており、時間とともに変化する可能性があります。 最上位フォルダ React リポジトリをクローンした後、プロジェクトのルートディレクトリに複数のフォルダがあることに気がつくでしょう: packages には React リポジトリの全てのパッケージのメタデータ(package.json など)や、ソースコード(src サブディレクトリ)が含まれています。あなたの変更がコードに関するものなら、各パッケージの src サブディレ
setState は何をしているのですか? setState() はコンポーネントの state オブジェクト更新をスケジュールします。state が更新されると、コンポーネントはそれに再レンダーで応じます。 state と props の違いは何ですか? props(“properties” を短くしたもの)と state は、両方ともプレーンな JavaScript のオブジェクトです。どちらもレンダー結果に影響を及ぼす情報を持ってはいますが、ある重要な一点が異なっています。つまり、props は(関数引数のように)コンポーネントへ渡されるのに対し、state は(関数内で宣言された変数のように)コンポーネントの内部で制御されます。 props と state のどちらをいつ使うべきかについて、こちらでより詳しく読むことができます。 Props vs State ReactJS: Pr
日本語版サイト (ja.reactjs.org) のブログセクションへの記事掲載には英語版サイトと比べてタイムラグがあります。 最新のブログ記事は英語版でご確認ください。 日本語版サイトでは英語版ブログに定期的に追従しつつ、2020 年以降の記事を随時翻訳しています。 本日、React 17 をリリースします! React 17 リリースの役割や含まれている変更点については React 17 RC のブログ記事で詳しく述べてあります。この記事はそちらの短いサマリとなりますので、RC の記事を既に読んでいる場合は、本記事は飛ばして構いません。 新機能 “なし” この React 17 リリースは普段のリリースと異なっており、開発者向けの新機能が何も追加されていません。代わりに、このリリースは React 自体のアップグレードを簡単にすることに焦点を当てています。 具体的には React 17
この記事は古くなっており、今後更新されません。新しい React 日本語ドキュメントである ja.react.dev をご利用ください。 以下の新しいドキュメントで最新の React の使い方が学べます。 react: コンポーネント react: フック react: API react: レガシー API React は React ライブラリのエントリポイントです。<script> タグから React を読み込む場合、これらの最上位 API をグローバルの React から利用できます。npm と ES6 を使う場合、import React from 'react' と書けます。npm と ES5 を使う場合、var React = require('react') と書けます。 概要 コンポーネント React コンポーネントを使用すると UI を独立した再利用可能な部分に分割
日本語版サイト (ja.reactjs.org) のブログセクションへの記事掲載には英語版サイトと比べてタイムラグがあります。 最新のブログ記事は英語版でご確認ください。 日本語版サイトでは英語版ブログに定期的に追従しつつ、2020 年以降の記事を随時翻訳しています。 React 17 には新機能はありませんが、新バージョンの JSX トランスフォーム (JSX transform) に対応します。この記事ではこれがどのようなもので、どのように試せるのかについて説明します。 JSX トランスフォームとは? ブラウザはそのままでは JSX を理解しないため、ほとんどの React ユーザは、Babel や TypeScript のようなコンパイラを利用して JSX コードを通常の JavaScript に変換 (transform) しています。Create React App や Next
React コンポーネントは他の JavaScript のコードと同じようにテストできます。 React コンポーネントをテストするのにはいくつか方法がありますが、大きく 2 つのカテゴリに分けられます。 コンポーネントツリーのレンダー をシンプルなテスト環境で行い、その結果を検証する アプリケーション全体の動作 をブラウザ同等の環境で検証する(end-to-end テストとして知られる) このセクションでは、最初のケースにおけるテスト戦略にフォーカスします。end-to-end テストが重要な機能のリグレッションを防ぐのに有効である一方で、そのようなテストは React コンポーネントとは特に関係なく、このセクションのスコープ外です。 トレードオフ テストツールを選定する時、いくつかのトレードオフを考慮することは価値があります。 実行速度 vs 環境の現実度: 変更を加えてから結果を見る
この記事は古くなっており、今後更新されません。新しい React 日本語ドキュメントである ja.react.dev をご利用ください。 以下の新しいドキュメントで最新の React の使い方がライブサンプル付きで学べます。 ref で DOM を操作する forwardRef ref のフォワーディングはあるコンポーネントを通じてその子コンポーネントのひとつに ref を自動的に渡すテクニックです。これは基本的にはアプリケーション内のほとんどのコンポーネントで必要ありません。しかし、コンポーネントの種類によっては、特に再利用可能なコンポーネントライブラリにおいては、便利なものとなるかもしれません。一般的なシナリオについて以下で述べます。 DOM コンポーネントに ref をフォワーディングする ネイティブの button DOM 要素をレンダーする FancyButton というコンポー
日本語版サイト (ja.reactjs.org) のブログセクションへの記事掲載には英語版サイトと比べてタイムラグがあります。 最新のブログ記事は英語版でご確認ください。 日本語版サイトでは英語版ブログに定期的に追従しつつ、2020 年以降の記事を随時翻訳しています。 本日 React 17 の最初のリリース候補を公開します。前回の React メジャーリリースから 2 年半が経過しており、これは我々の基準からしても長いものです! このブログ記事では、このメジャーリリースの役割、期待される変化、そしてどのように試すことができるのかについて説明します。 新機能 “なし” この React 17 リリースは普段のリリースと異なっており、開発者向けの新機能が何も追加されていません。代わりに、このリリースは React 自体のアップグレードを簡単にすることに焦点を当てています。 我々は React
このドキュメントを作成したのは、React が何をして何をしないのか、そして開発理念がどのようなものなのかをより理解できるようにするためです。私たちはコミュニティへの貢献を見ることにわくわくしています。しかしこれらの原則の 1 つ以上に違反する道を選ぶことはありません。 注意: このドキュメントは React を強く理解していることを前提としています。React のコンポーネントやアプリケーションではなく、React 自体の設計原則について説明しています。 React の紹介については、代わりに React の流儀を調べてください。 コンポジション React の主な機能はコンポーネントのコンポジションです。異なる人々によって書かれたコンポーネントは一緒にうまく動くべきです。コードベース全体に波及する変更を引き起こすことなく、コンポーネントに機能を追加できるということが重要です。 たとえば
render() { let className = 'menu'; if (this.props.isActive) { className += ' menu-active'; } return <span className={className}>Menu</span> } ヒント もしあなたが上記のようなコードを書くことが多い場合、classnames という npm パッケージを使うことで簡略化できます。 インラインスタイルは使えますか? はい、スタイルの書き方についてはこの資料をご覧ください。 インラインスタイルは悪なの? パフォーマンス観点から言えば、基本的に CSS クラスを使う方が、インラインスタイルを用いるよりも優れています。 CSS-in-JS とは? “CSS-in-JS” とは外部ファイルでスタイルを定義するのとは違い、JavaScript を用いて CSS を
この章は stack リコンサイラ (reconciler) の実装に関するメモを集めたものです。 これは非常に技術的な内容であり、React の公開 API だけでなく、React がどのようにコア、レンダラ (renderer) 、そしてリコンサイラに分割されているかについても、深く理解していることを前提としています。React のコードベースにあまり精通していないのであれば、まずコードベースの概要を読んでください。 また、これは React のコンポーネント、インスタンスおよび要素の違いについての理解を前提としています。 stack リコンサイラは、React 15 およびそれ以前のバージョンで使われていました。src/renderers/shared/stack/reconciler で見つけることができます。 動画:React をスクラッチで作成する このドキュメントは、Paul
この記事は古くなっており、今後更新されません。新しい React 日本語ドキュメントである ja.react.dev をご利用ください。 React は強力なコンポジションモデルを備えており、コンポーネント間のコードの再利用には継承よりもコンポジションをお勧めしています。 この章では、React を始めて間もない開発者が継承に手を出した時に陥りがちないくつかの問題と、コンポジションによりその問題がどのように解決できるのかについて考えてみます。 子要素の出力 (Containment) コンポーネントの中には事前には子要素を知らないものもあります。これは Sidebar や Dialog のような汎用的な “入れ物” をあらわすコンポーネントではよく使われています。 このようなコンポーネントでは特別な children という props を使い、以下のようにして受け取った子要素を出力するこ
この記事は古くなっており、今後更新されません。新しい React 日本語ドキュメントである ja.react.dev をご利用ください。 以下の新しいドキュメントで最新の React の使い方がライブサンプル付きで学べます。 リストのレンダー まず、JavaScript でリストを変換する方法についておさらいしましょう。 以下のコードでは、map() 関数を用い、numbers という配列を受け取って中身の値を 2 倍しています。map() 関数が返す新しい配列を変数 doubled に格納し、ログに出力します: const numbers = [1, 2, 3, 4, 5]; const doubled = numbers.map((number) => number * 2);console.log(doubled); このコードはコンソールに [2, 4, 6, 8, 10] と出力
この記事は古くなっており、今後更新されません。新しい React 日本語ドキュメントである ja.react.dev をご利用ください。 以下の新しいドキュメントで最新の React の使い方がライブサンプル付きで学べます。 <div> などの一般的なコンポーネント このリファレンスガイドでは、React のイベントシステムの一部を構成する SyntheticEvent(合成イベント)ラッパについて説明します。詳細については、イベント処理ガイドを参照してください。 概要 イベントハンドラには、SyntheticEvent のインスタンスが渡されます。これはブラウザのネイティブイベントに対するクロスブラウザ版のラッパです。stopPropagation() と preventDefault() を含む、ブラウザのネイティブイベントと同じインターフェイスを持ちつつ、ブラウザ間で同じ挙動をするよ
この記事は古くなっており、今後更新されません。新しい React 日本語ドキュメントである ja.react.dev をご利用ください。 以下の新しいドキュメントで最新の React の使い方がライブサンプル付きで学べます。 Common components (e.g. <div>) <input> <option> <progress> <select> <textarea> React はパフォーマンスとブラウザ間での互換性のために、ブラウザから独立した DOM システムを実装しています。このことを機に、ブラウザの DOM 実装にあるいくつかの粗削りな部分が取り払われました。 React では、DOM のプロパティと属性(イベントハンドラを含む)全てがキャメルケースで名前付けされる必要があります。例えば、HTML 属性 tabindex に React で対応する属性は tabInd
React はセマンティック バージョニング (semantic versioning; semver) の原則に従います。 すなわちバージョン番号は x.y.z になります。 バグ修正をする時、z の番号を変更することでパッチリリースをします(例 15.6.2 から 15.6.3)。 新機能追加をする時、y の番号を変更することでマイナーリリースをします(例 15.6.2 から 15.7.0)。 破壊的変更をする時、x の番号を変更することでメジャーリリースをします(例 15.6.2 から 16.0.0)。 メジャーリリースには新機能を含むことができ、全てのリリースにバグ修正を含められます。 マイナーリリースは、最も一般的なリリースです。 このバージョニングポリシーは Next と Experimental チャンネルのプレリリースビルドには適用されません。プレリリースについての詳細 破
この記事は古くなっており、今後更新されません。新しい React 日本語ドキュメントである ja.react.dev をご利用ください。 以下の新しいドキュメントで最新の React の使い方がライブサンプル付きで学べます。 StrictMode StrictMode はアプリケーションの潜在的な問題点を洗い出すためのツールです。Fragment と同様に、StrictMode は目に見える UI を描画しません。StrictMode の子孫要素に対しては、付加的な検査および警告が動くようになります。 補足: strict モードでの検査は開発モードでのみ動きます。本番ビルドには影響を与えません。 strict モードはアプリケーションの任意の箇所で有効にできます。下はその一例です。 import React from 'react'; function ExampleApplicatio
コンポーネントに(onClick のような)イベントハンドラを渡すには? イベントハンドラやその他の関数を props として、子コンポーネントに渡してください。 ハンドラ内で親コンポーネントにアクセスする必要がある場合は、関数をコンポーネントインスタンスにバインドする必要があります(以下を参照)。 関数をコンポーネントインスタンスにバインドするには? 使用する構文やビルドステップにより、this.props や this.state のようなコンポーネントの属性に、関数がアクセスできるようにする方法がいくつかあります。 コンストラクタでバインドする (ES2015) class Foo extends Component { constructor(props) { super(props); this.handleClick = this.handleClick.bind(this);
お勧めの React プロジェクトの構成は? React はファイルをどのようにフォルダ分けするかについての意見を持っていません。とはいえ、あなたが検討したいかもしれないエコシステム内でよく用いられる共通の方法があります。 機能ないしルート別にグループ化する プロジェクトを構成する一般的な方法の 1 つは、CSS や JS やテストをまとめて、機能別ないしルート別のフォルダにグループ化するというものです。 common/ Avatar.js Avatar.css APIUtils.js APIUtils.test.js feed/ index.js Feed.js Feed.css FeedStory.js FeedStory.test.js FeedAPI.js profile/ index.js Profile.js ProfileHeader.js ProfileHeader.css
このページは React のドキュメント、および関連する資料の概要となります。 React はユーザインターフェースを作成する為の JavaScript のライブラリです。ここのホームページ、またはこのチュートリアルから React がどういうものかを学びましょう。 React を試す React を学ぶ 最新の情報を追いたい人へ バージョン管理されたドキュメント 足りないものがある? React を試す React は当初より、既存のプロジェクトに徐々に追加していけるようなデザインとなっています。たくさん React を使うのでも、少しだけ使うのでも構いません。触りだけやってみるもよし、シンプルな HTML のページにインタラクティブな機能を追加するのに使うもよし、React をフル活用した複雑なアプリを作成するもよし。どのような目的にしても、このページにあるリンクが役に立つでしょう。
仮想 DOM とは? 仮想 DOM (virtual DOM; VDOM) は、インメモリに保持された想像上のまたは「仮想の」UI 表現が、ReactDOM のようなライブラリによって「実際の」DOM と同期されるというプログラミング上の概念です。このプロセスは差分検出処理 (reconciliation)と呼ばれます。 このアプローチにより React の宣言型 API が可能になっています。あなたは UI をどのような状態にしたいのか React に伝え、React は必ず DOM をその状態と一致させます。これにより、React なしではアプリケーションを構築するために避けて通れない属性の操作やイベントハンドリング、および手動での DOM 更新が抽象化されます。 “仮想 DOM” は特定の技術というよりむしろ 1 つのパターンなので、時たま違う意味で使われることがあります。React
この記事は古くなっており、今後更新されません。新しい React 日本語ドキュメントである ja.react.dev をご利用ください。 以下の新しいドキュメントで最新の React の使い方が学べます。 memo: props が変更されていない場合に再レンダーをスキップする React は UI の更新時に必要となる高コストな DOM 操作の回数を最小化するために、内部的にいくつかの賢いテクニックを使用しています。多くのアプリケーションでは React を使用するだけで、パフォーマンス向上のための特別な最適化を苦労して行わなくても、レスポンスの良いユーザインターフェースを実現できますが、それでもなお、React アプリケーションを高速化するための方法はいくつか存在します。 本番用ビルドを使用する React アプリケーションでベンチマークを行う場合やパフォーマンスの問題が発生している場
この記事は古くなっており、今後更新されません。新しい React 日本語ドキュメントである ja.react.dev をご利用ください。 以下の新しいドキュメントで最新の React の使い方がライブサンプル付きで学べます。 初めてのコンポーネント コンポーネントに props を渡す コンポーネントにより UI を独立した再利用できる部品に分割し、部品それぞれを分離して考えることができるようになります。このページではコンポーネントという概念の導入を行います。詳細な API リファレンスはこちらで参照できます。 概念的には、コンポーネントは JavaScript の関数と似ています。(“props” と呼ばれる)任意の入力を受け取り、画面上に表示すべきものを記述する React 要素を返します。 関数コンポーネントとクラスコンポーネント コンポーネントを定義する最もシンプルな方法は Jav
These docs are old and won’t be updated. Go to react.dev for the new React docs. These new documentation pages teach modern React and include live examples: lazy <Suspense> バンドル 多くの React アプリケーションは、Webpack、Rollup や Browserify などのツールを使ってファイルを「バンドル」しています。バンドルはインポートされたファイルをたどって、それらを 1 つのファイルにまとめるプロセスです。このバンドルされたファイルを Web ページ内に置くことによって、アプリ全体を一度に読み込むことができます。 例 App:
These docs are old and won’t be updated. Go to react.dev for the new React docs. These new documentation pages teach modern React: react-dom: Components react-dom: APIs react-dom: Client APIs react-dom: Server APIs react-dom パッケージではアプリのトップレベルで使うための DOM 特有のメソッドを提供しています。また必要に応じて React モデルから外に出るための避難ハッチ用メソッドも提供しています。
次のページ
このページを最初にブックマークしてみませんか?
『React – ユーザインターフェース構築のための JavaScript ライブラリ』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く