Skip to content

Commit f1b0b73

Browse files
committed
unify into lower case
1 parent f71e47a commit f1b0b73

File tree

1 file changed

+19
-19
lines changed

1 file changed

+19
-19
lines changed

content/docs/error-boundaries.md

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -7,22 +7,22 @@ permalink: docs/error-boundaries.html
77
かつて、コンポーネント内で発生した JavaScript エラーは React の内部状態を破壊し、以降のレンダーで[不可解な](https://github.com/facebook/react/issues/4026) [エラーを](https://github.com/facebook/react/issues/6895) [引き起こして](https://github.com/facebook/react/issues/8579)いました。このようなエラーはアプリケーションコード中のどこか前の段階で発生したエラーによって引き起こされますが、React はエラーをコンポーネント内で適切に処理する方法を提供していなかったため回復できませんでした。
88

99

10-
## Error Boundary とは {#introducing-error-boundaries}
10+
## error boundary とは {#introducing-error-boundaries}
1111

12-
UI の一部に JavaScript エラーがあってもアプリ全体が壊れてはいけません。React ユーザーがこの問題に対応できるように、React 16 では “Error Boundary” という新しい概念を導入しました。
12+
UI の一部に JavaScript エラーがあってもアプリ全体が壊れてはいけません。React ユーザーがこの問題に対応できるように、React 16 では “error boundary” という新しい概念を導入しました。
1313

14-
Error Boundary**自身の子コンポーネントツリーで発生した JavaScript エラーをキャッチ**し、**エラーを記録**し、クラッシュしたコンポーネントツリーの代わりに**フォールバック用の UI を表示**する React コンポーネントです。Error Boundary は配下のツリー全体のレンダリング中、ライフサイクルメソッド内、およびコンストラクタ内で発生したエラーをキャッチします。
14+
error boundary**自身の子コンポーネントツリーで発生した JavaScript エラーをキャッチ**し、**エラーを記録**し、クラッシュしたコンポーネントツリーの代わりに**フォールバック用の UI を表示**する React コンポーネントです。error boundary は配下のツリー全体のレンダリング中、ライフサイクルメソッド内、およびコンストラクタ内で発生したエラーをキャッチします。
1515

1616
> 補足
1717
>
18-
> Error Boundary は以下のエラーをキャッチ**しません**
18+
> error boundary は以下のエラーをキャッチ**しません**
1919
>
2020
> * イベントハンドラ([詳細](#how-about-event-handlers)
2121
> * 非同期コード(例:`setTimeout``requestAnimationFrame` のコールバック)
2222
> * サーバーサイドレンダリング
23-
> * (子コンポーネントではなく)Error Boundary 自身がスローしたエラー
23+
> * (子コンポーネントではなく)error boundary 自身がスローしたエラー
2424
25-
クラスコンポーネントに、ライフサイクルメソッドの [`static getDerivedStateFromError()`](/docs/react-component.html#static-getderivedstatefromerror)[`componentDidCatch()`](/docs/react-component.html#componentdidcatch) のいずれか(または両方)を定義すると、Error Boundary になります。`static getDerivedStateFromError()` はエラーがスローされた後にフォールバック UI をレンダリングするために使用します。 `componentDidCatch()` はエラー情報をログに記録するために使用します。
25+
クラスコンポーネントに、ライフサイクルメソッドの [`static getDerivedStateFromError()`](/docs/react-component.html#static-getderivedstatefromerror)[`componentDidCatch()`](/docs/react-component.html#componentdidcatch) のいずれか(または両方)を定義すると、error boundary になります。`static getDerivedStateFromError()` はエラーがスローされた後にフォールバック UI をレンダリングするために使用します。 `componentDidCatch()` はエラー情報をログに記録するために使用します。
2626

2727
```js{7-10,12-15,18-21}
2828
class ErrorBoundary extends React.Component {
@@ -60,29 +60,29 @@ class ErrorBoundary extends React.Component {
6060
</ErrorBoundary>
6161
```
6262

63-
Error Boundary はコンポーネントに対して JavaScript の `catch {}` ブロックのように動作します。Error Boundary になれるのはクラスコンポーネントだけです。実用上、一度だけ Error Boundary を定義してそれをアプリケーションの至るところで使用することがよくあります。
63+
error boundary はコンポーネントに対して JavaScript の `catch {}` ブロックのように動作します。error boundary になれるのはクラスコンポーネントだけです。実用上、一度だけ error boundary を定義してそれをアプリケーションの至るところで使用することがよくあります。
6464

65-
**Error Boundary は配下のツリー内のコンポーネントで発生したエラーのみをキャッチする**ことに注意してください。Error Boundary は自身で起こるエラーをキャッチできません。Error Boundary がエラーメッセージのレンダリングに失敗した場合、そのエラーは最も近い上位の Error Boundary に伝搬します。この動作もまた、JavaScript の catch {} ブロックの動作と似ています。
65+
**error boundary は配下のツリー内のコンポーネントで発生したエラーのみをキャッチする**ことに注意してください。error boundary は自身で起こるエラーをキャッチできません。error boundary がエラーメッセージのレンダリングに失敗した場合、そのエラーは最も近い上位の error boundary に伝搬します。この動作もまた、JavaScript の catch {} ブロックの動作と似ています。
6666

6767
## ライブデモ {#live-demo}
6868

69-
[React 16](/blog/2017/09/26/react-v16.0.html)[Error Boundary を宣言して利用する例](https://codepen.io/gaearon/pen/wqvxGa?editors=0010)を確認してください。
69+
[React 16](/blog/2017/09/26/react-v16.0.html)[error boundary を宣言して利用する例](https://codepen.io/gaearon/pen/wqvxGa?editors=0010)を確認してください。
7070

7171

72-
## Error Boundary を配置すべき場所 {#where-to-place-error-boundaries}
72+
## error boundary を配置すべき場所 {#where-to-place-error-boundaries}
7373

74-
Error Boundary の粒度はあなた次第です。サーバサイドフレームワークがクラッシュを処理する際によく見られるように、最上位のルートコンポーネントをラップしてユーザーに “Something went wrong” メッセージを表示してもいいでしょう。各ウィジェットを個別にラップしてアプリケーションの残りの部分をクラッシュから守るのもいいでしょう。
74+
error boundary の粒度はあなた次第です。サーバサイドフレームワークがクラッシュを処理する際によく見られるように、最上位のルートコンポーネントをラップしてユーザーに “Something went wrong” メッセージを表示してもいいでしょう。各ウィジェットを個別にラップしてアプリケーションの残りの部分をクラッシュから守るのもいいでしょう。
7575

7676

7777
## エラーがキャッチされなかった場合の新しい動作 {#new-behavior-for-uncaught-errors}
7878

79-
この変更には重要な意味があります。 **React 16 から、どの Error Boundary でもエラーがキャッチされなかった場合に React コンポーネントツリー全体がアンマウントされるようになりました。**
79+
この変更には重要な意味があります。 **React 16 から、どの error boundary でもエラーがキャッチされなかった場合に React コンポーネントツリー全体がアンマウントされるようになりました。**
8080

8181
この決定については議論がありましたが、我々の経験上、壊れた UI をそのまま表示しておくことは、完全に削除してしまうよりももっと悪いことです。例えば、Messenger のような製品において壊れた UI を表示したままにしておくと、誰かが誤って別の人にメッセージを送ってしまう可能性があります。同様に、支払いアプリで間違った金額を表示することは、何も表示しないよりも悪いことです。
8282

83-
この変更のため、React 16 に移行すると、これまで気付かれていなかったアプリケーションの既存の不具合が明らかになることでしょう。Error Boundary を追加することで、問題が発生したときのユーザー体験を向上できます。
83+
この変更のため、React 16 に移行すると、これまで気付かれていなかったアプリケーションの既存の不具合が明らかになることでしょう。error boundary を追加することで、問題が発生したときのユーザー体験を向上できます。
8484

85-
例えば、Facebook Messenger はサイドバー、情報パネル、会話ログ、メッセージ入力欄といったコンテンツを個別の Error Boundary でラップしています。これらの UI エリアの一部のコンポーネントがクラッシュしても、残りの部分はインタラクティブなままです。
85+
例えば、Facebook Messenger はサイドバー、情報パネル、会話ログ、メッセージ入力欄といったコンテンツを個別の error boundary でラップしています。これらの UI エリアの一部のコンポーネントがクラッシュしても、残りの部分はインタラクティブなままです。
8686

8787
また、本番環境で発生したキャッチされなかった例外について知って修正できるように、JS エラー報告サービスを利用(もしくは自身で構築)することもお勧めします。
8888

@@ -122,13 +122,13 @@ try {
122122
<Button />
123123
```
124124

125-
Error Boundary は React の宣言型という性質を保持しつつ、期待通りの動作をします。例えば、`componentDidUpdate` メソッドで発生したエラーがツリー内のどこか深い場所にある `setState` によって引き起こされていた場合でも、最も近い Error Boundary にそのことが正しく伝播します。
125+
error boundary は React の宣言型という性質を保持しつつ、期待通りの動作をします。例えば、`componentDidUpdate` メソッドで発生したエラーがツリー内のどこか深い場所にある `setState` によって引き起こされていた場合でも、最も近い error boundary にそのことが正しく伝播します。
126126

127127
## イベントハンドラについて {#how-about-event-handlers}
128128

129-
Error Boundary はイベントハンドラ内で発生したエラーをキャッチ**しません**
129+
error boundary はイベントハンドラ内で発生したエラーをキャッチ**しません**
130130

131-
イベントハンドラ内のエラーから回復するのに Error Boundary は不要です。レンダリングメソッドやライフサイクルメソッドとは異なり、イベントハンドラはレンダリング中には実行されません。そのためイベントハンドラ内でエラーが発生しても、React が画面に表示する内容は変わりません。
131+
イベントハンドラ内のエラーから回復するのに error boundary は不要です。レンダリングメソッドやライフサイクルメソッドとは異なり、イベントハンドラはレンダリング中には実行されません。そのためイベントハンドラ内でエラーが発生しても、React が画面に表示する内容は変わりません。
132132

133133
イベントハンドラ内のエラーをキャッチする必要がある場合は、普通の JavaScript の `try` / `catch` 文を使用してください:
134134

@@ -157,10 +157,10 @@ class MyComponent extends React.Component {
157157
}
158158
```
159159

160-
上記の例は標準の JavaScript の動作説明であって Error Boundary を使用していないことに注意してください。
160+
上記の例は標準の JavaScript の動作説明であって error boundary を使用していないことに注意してください。
161161

162162
## React 15からの命名の変更 {#naming-changes-from-react-15}
163163

164-
React 15 は Error Boundary を異なるメソッド名(`unstable_handleError`)で非常に限定的にサポートしていました。このメソッドはもう動作しないため、16ベータ版リリース以降はコードを `componentDidCatch` に変更する必要があります。
164+
React 15 は error boundary を異なるメソッド名(`unstable_handleError`)で非常に限定的にサポートしていました。このメソッドはもう動作しないため、16ベータ版リリース以降はコードを `componentDidCatch` に変更する必要があります。
165165

166166
この変更について、自動的にコードを移行できる [codemod](https://github.com/reactjs/react-codemod#error-boundaries) が提供されています。

0 commit comments

Comments
 (0)