Skip to content

Commit 6f427e9

Browse files
authored
Merge pull request #143 from reactjs/sync-d615c5b7
Sync with reactjs.org @ d615c5b
2 parents 99c57fa + 64a9469 commit 6f427e9

32 files changed

+87
-88
lines changed

content/docs/accessibility.md

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,8 @@ React はアクセシビリティを備えたウェブサイトの構築を全
1919
以下の WCAG のチェックリストはその概要を示します。
2020

2121
- [WCAG checklist from Wuhcag](https://www.wuhcag.com/wcag-checklist/)
22-
- [WCAG checklist from WebAIM](http://webaim.org/standards/wcag/checklist)
23-
- [Checklist from The A11Y Project](http://a11yproject.com/checklist.html)
22+
- [WCAG checklist from WebAIM](https://webaim.org/standards/wcag/checklist)
23+
- [Checklist from The A11Y Project](https://a11yproject.com/checklist.html)
2424

2525
### WAI-ARIA {#wai-aria}
2626

@@ -114,7 +114,7 @@ function ListItem({ item }) {
114114
以下の資料にはその方法が示されています:
115115

116116
- [W3C による要素にラベルを付ける方法の解説](https://www.w3.org/WAI/tutorials/forms/labels/)
117-
- [WebAIM による要素にラベルを付ける方法の解説](http://webaim.org/techniques/forms/controls)
117+
- [WebAIM による要素にラベルを付ける方法の解説](https://webaim.org/techniques/forms/controls)
118118
- [The Paciello Group によるアクセシブルな名前についての解説](https://www.paciellogroup.com/blog/2017/04/what-is-an-accessible-name/)
119119

120120
React でこれらの標準的な HTML の実践知識を直接使用できますが、JSX では `for` 属性は `htmlFor` として記述されることに注意してください。
@@ -129,13 +129,13 @@ React でこれらの標準的な HTML の実践知識を直接使用できま
129129
すべてのユーザがエラーの起きた状況を理解できる必要があります。以下のリンクはどのようにエラーテキストをユーザーと同じくスクリーンリーダにも公開するかを解説しています。
130130

131131
- [W3C によるユーザーへの通知方法の例示](https://www.w3.org/WAI/tutorials/forms/notifications/)
132-
- [WebAIM によるフォームバリデーションの解説](http://webaim.org/techniques/formvalidation/)
132+
- [WebAIM によるフォームバリデーションの解説](https://webaim.org/techniques/formvalidation/)
133133

134134
## フォーカス制御 {#focus-control}
135135

136136
あなたのウェブアプリケーションが完全にキーボードだけで操作できることを確かめてください:
137137

138-
- [WebAIM によるキーボードアクセシビリティの解説](http://webaim.org/techniques/keyboard/)
138+
- [WebAIM によるキーボードアクセシビリティの解説](https://webaim.org/techniques/keyboard/)
139139

140140
### キーボードフォーカスとフォーカス時のアウトライン(輪郭線){#keyboard-focus-and-focus-outline}
141141

@@ -151,13 +151,13 @@ React でこれらの標準的な HTML の実践知識を直接使用できま
151151

152152
スキップリンクやスキップナビゲーションリンクとは、ユーザがキーボードでページを操作する場合にのみ出現する、隠れたナビゲーションリンクです。これらのリンクはページ内アンカーといくらかのスタイルを用いて、とても簡単に実装できます:
153153

154-
- [WebAIM - Skip Navigation Links](http://webaim.org/techniques/skipnav/)
154+
- [WebAIM - Skip Navigation Links](https://webaim.org/techniques/skipnav/)
155155

156156
`<main>``<aside>` のようなランドマーク要素とロール属性も活用してページの領域を区切り、補助技術を使うユーザが素早くこれらのセクションに移動できるようにしてください。
157157

158158
アクセシビリティを強化する、これらの要素の使い方についての詳細は以下を読んでください:
159159

160-
- [Accessible Landmarks](http://www.scottohara.me/blog/2018/03/03/landmarks.html)
160+
- [Accessible Landmarks](https://www.scottohara.me/blog/2018/03/03/landmarks.html)
161161

162162
### プログラムによりフォーカスを管理する {#programmatically-managing-focus}
163163

@@ -375,7 +375,7 @@ class BlurExample extends React.Component {
375375
それぞれの種類のウィジェットはそれぞれ特定のデザインパターンを持っており、ユーザやユーザーエージェントはそれらが特定の方法で機能することを期待します:
376376

377377
- [WAI-ARIA Authoring Practices - Design Patterns and Widgets](https://www.w3.org/TR/wai-aria-practices/#aria_ex)
378-
- [Heydon Pickering - ARIA Examples](http://heydonworks.com/practical_aria_examples/)
378+
- [Heydon Pickering - ARIA Examples](https://heydonworks.com/practical_aria_examples/)
379379
- [Inclusive Components](https://inclusive-components.design/)
380380

381381
## その他に考慮すべきポイント {#other-points-for-consideration}
@@ -384,7 +384,7 @@ class BlurExample extends React.Component {
384384

385385
ページテキストで使用する自然言語を明示して、読み上げソフトが適切な音声設定を選ぶために利用できるようにしてください:
386386

387-
- [WebAIM - Document Language](http://webaim.org/techniques/screenreader/#language)
387+
- [WebAIM - Document Language](https://webaim.org/techniques/screenreader/#language)
388388

389389
### ドキュメントの title の設定 {#setting-the-document-title}
390390

@@ -400,15 +400,15 @@ React では [React Document Title Component](https://github.com/gaearon/react-d
400400

401401
- [WCAG - Understanding the Color Contrast Requirement](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)
402402
- [Everything About Color Contrast And Why You Should Rethink It](https://www.smashingmagazine.com/2014/10/color-contrast-tips-and-tools-for-accessibility/)
403-
- [A11yProject - What is Color Contrast](http://a11yproject.com/posts/what-is-color-contrast/)
403+
- [A11yProject - What is Color Contrast](https://a11yproject.com/posts/what-is-color-contrast/)
404404

405-
適切な色の組み合わせをウェブサイト内の全てのケースについて手作業で行うのは面倒になりがちなので、代わりに[アクセシブルなカラーパレット全体を Colorable で計算する](http://jxnblk.com/colorable/)ことができます。
405+
適切な色の組み合わせをウェブサイト内の全てのケースについて手作業で行うのは面倒になりがちなので、代わりに[アクセシブルなカラーパレット全体を Colorable で計算する](https://jxnblk.com/colorable/)ことができます。
406406

407407
以下に述べる aXe および WAVE ツールのどちらも同じように色のコントラストのテストを備えておりコントラストの違反を報告してくれます。
408408

409409
コントラストをチェックする能力を拡張したい場合は、以下のツールが利用できます:
410410

411-
- [WebAIM - Color Contrast Checker](http://webaim.org/resources/contrastchecker/)
411+
- [WebAIM - Color Contrast Checker](https://webaim.org/resources/contrastchecker/)
412412
- [The Paciello Group - Color Contrast Analyzer](https://www.paciellogroup.com/resources/contrastanalyser/)
413413

414414
## 開発とテストのツール {#development-and-testing-tools}
@@ -455,7 +455,7 @@ Deque System はアプリケーションの自動化された E2E アクセシ
455455

456456
#### WebAIM WAVE {#webaim-wave}
457457

458-
[Web Accessibility Evaluation Tool](http://wave.webaim.org/extension/) はアクセシビリティに関する別のブラウザ拡張機能です。
458+
[Web Accessibility Evaluation Tool](https://wave.webaim.org/extension/) はアクセシビリティに関する別のブラウザ拡張機能です。
459459

460460
#### アクセシビリティ検査ツールとアクセシビリティツリー {#accessibility-inspectors-and-the-accessibility-tree}
461461

@@ -481,7 +481,7 @@ Deque System はアプリケーションの自動化された E2E アクセシ
481481

482482
NVDA を最大限に活用する方法は以下のガイドを参照してください:
483483

484-
- [WebAIM - Using NVDA to Evaluate Web Accessibility](http://webaim.org/articles/nvda/)
484+
- [WebAIM - Using NVDA to Evaluate Web Accessibility](https://webaim.org/articles/nvda/)
485485
- [Deque - NVDA Keyboard Shortcuts](https://dequeuniversity.com/screenreaders/nvda-keyboard-shortcuts)
486486

487487
#### VoiceOver と Safari {#voiceover-in-safari}
@@ -490,26 +490,26 @@ VoiceOver は Apple 社製品に統合されたスクリーンリーダです。
490490

491491
VoiceOver を有効化して使用する方法は以下のガイドを参照してください:
492492

493-
- [WebAIM - Using VoiceOver to Evaluate Web Accessibility](http://webaim.org/articles/voiceover/)
493+
- [WebAIM - Using VoiceOver to Evaluate Web Accessibility](https://webaim.org/articles/voiceover/)
494494
- [Deque - VoiceOver for OS X Keyboard Shortcuts](https://dequeuniversity.com/screenreaders/voiceover-keyboard-shortcuts)
495495
- [Deque - VoiceOver for iOS Shortcuts](https://dequeuniversity.com/screenreaders/voiceover-ios-shortcuts)
496496

497497
#### JAWS と Internet Explorer {#jaws-in-internet-explorer}
498498

499-
[Job Access With Speech](http://www.freedomscientific.com/Products/Blindness/JAWS) もしくは JAWS は、Windows 上での使用例が豊富なスクリーンリーダです。
499+
[Job Access With Speech](https://www.freedomscientific.com/Products/software/JAWS/) もしくは JAWS は、Windows 上での使用例が豊富なスクリーンリーダです。
500500

501501
JAWS を最大限に活用する方法は以下のガイドを参照してください:
502502

503-
- [WebAIM - Using JAWS to Evaluate Web Accessibility](http://webaim.org/articles/jaws/)
503+
- [WebAIM - Using JAWS to Evaluate Web Accessibility](https://webaim.org/articles/jaws/)
504504
- [Deque - JAWS Keyboard Shortcuts](https://dequeuniversity.com/screenreaders/jaws-keyboard-shortcuts)
505505

506506
### 他のスクリーンリーダ {#other-screen-readers}
507507

508508
#### ChromeVox と Google Chrome {#chromevox-in-google-chrome}
509509

510-
[ChromeVox](http://www.chromevox.com/) は Chromebook に統合されたスクリーンリーダで、Google Chrome では[拡張機能](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn?hl=en)として利用可能です。
510+
[ChromeVox](https://www.chromevox.com/) は Chromebook に統合されたスクリーンリーダで、Google Chrome では[拡張機能](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn?hl=en)として利用可能です。
511511

512512
ChromeVox を最大限に活用する方法は以下のガイドを参照してください:
513513

514514
- [Google Chromebook Help - Use the Built-in Screen Reader](https://support.google.com/chromebook/answer/7031755?hl=en)
515-
- [ChromeVox Classic Keyboard Shortcuts Reference](http://www.chromevox.com/keyboard_shortcuts.html)
515+
- [ChromeVox Classic Keyboard Shortcuts Reference](https://www.chromevox.com/keyboard_shortcuts.html)

content/docs/add-react-to-a-website.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -149,7 +149,7 @@ return (
149149

150150
これらふたつのスニペットはまったく同じ内容です。**JSX の使用は[完全にオプションです](/docs/react-without-jsx.html)**が、React はもちろん他のライブラリで UI を記述する際にも、JSX は多くの人に支持されています。
151151

152-
[このコンバーター](http://babeljs.io/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=Q&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2%2Cstage-3&prettier=true&targets=Node-6.12&version=6.26.0&envVersion=)上で JSX を使って遊んでみてください。
152+
[このコンバーター](https://babeljs.io/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=Q&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2%2Cstage-3&prettier=true&targets=Node-6.12&version=6.26.0&envVersion=)上で JSX を使って遊んでみてください。
153153

154154
### JSX を手軽に試してみる {#quickly-try-jsx}
155155

@@ -197,6 +197,6 @@ npx babel --watch src --out-dir . --presets react-app/prod
197197

198198
**[このお手本の JSX コード](https://cdn.rawgit.com/gaearon/c8e112dc74ac44aac4f673f2c39d19d1/raw/09b951c86c1bf1116af741fa4664511f2f179f0a/like_button.js)**を参考に `src/like_button.js` というファイルを作成すると、先ほど起動したコマンドがブラウザでの実行に適した `like_button.js` に変換してくれます。JSX ファイルを編集したら、自動的に再変換してくれます。
199199

200-
さらにこの変換コマンドのおかげで、古いブラウザの互換性を気にすることなく、クラス構文といったモダンな JavaScript の構文を使うこともできるようになります。このツールは Babel というもので、もっと詳しく知りたければ[公式ドキュメント](http://babeljs.io/docs/en/babel-cli/)をご覧になってみてください。
200+
さらにこの変換コマンドのおかげで、古いブラウザの互換性を気にすることなく、クラス構文といったモダンな JavaScript の構文を使うこともできるようになります。このツールは Babel というもので、もっと詳しく知りたければ[公式ドキュメント](https://babeljs.io/docs/en/babel-cli/)をご覧になってみてください。
201201

202202
ビルドツールの便利さを体感して、もっとたくさんのことをツールに任せたいと思っていただけたなら、[次のセクション](/docs/create-a-new-react-app.html)ではさらにいくつかの人気で扱いやすいツールチェーンを紹介しています。そうでもない場合は… `<script>` タグだけでも十分な機能を果たせます!

content/docs/addons-perf.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,8 @@ In addition to giving you an overview of your app's overall performance, `Perf`
2727
See these articles for an introduction to React performance tooling:
2828

2929
- ["How to Benchmark React Components"](https://medium.com/code-life/how-to-benchmark-react-components-the-quick-and-dirty-guide-f595baf1014c)
30-
- ["Performance Engineering with React"](http://benchling.engineering/performance-engineering-with-react/)
31-
- ["A Deep Dive into React Perf Debugging"](http://benchling.engineering/deep-dive-react-perf-debugging/)
30+
- ["Performance Engineering with React"](https://benchling.engineering/performance-engineering-with-react/)
31+
- ["A Deep Dive into React Perf Debugging"](https://benchling.engineering/deep-dive-react-perf-debugging/)
3232

3333
### Development vs. Production Builds {#development-vs-production-builds}
3434

content/docs/addons-shallow-renderer.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ expect(result.props.children).toEqual([
5151

5252
> 補足:
5353
>
54-
> また Enzyme の [Shallow Rendering API](http://airbnb.io/enzyme/docs/api/shallow.html) をチェックすることをお勧めします。それは同じ機能上でより良くより高いレベルの API を提供します。
54+
> また Enzyme の [Shallow Rendering API](https://airbnb.io/enzyme/docs/api/shallow.html) をチェックすることをお勧めします。それは同じ機能上でより良くより高いレベルの API を提供します。
5555
5656
## リファレンス {#reference}
5757

content/docs/addons-test-utils.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,13 @@ var ReactTestUtils = require('react-dom/test-utils'); // ES5 with npm
1515

1616
## Overview {#overview}
1717

18-
`ReactTestUtils` makes it easy to test React components in the testing framework of your choice. At Facebook we use [Jest](https://facebook.github.io/jest/) for painless JavaScript testing. Learn how to get started with Jest through the Jest website's [React Tutorial](http://facebook.github.io/jest/docs/en/tutorial-react.html#content).
18+
`ReactTestUtils` makes it easy to test React components in the testing framework of your choice. At Facebook we use [Jest](https://facebook.github.io/jest/) for painless JavaScript testing. Learn how to get started with Jest through the Jest website's [React Tutorial](https://jestjs.io/docs/tutorial-react).
1919

2020
> Note:
2121
>
2222
> We recommend using [`react-testing-library`](https://git.io/react-testing-library) which is designed to enable and encourage writing tests that use your components as the end users do.
2323
>
24-
> Alternatively, Airbnb has released a testing utility called [Enzyme](http://airbnb.io/enzyme/), which makes it easy to assert, manipulate, and traverse your React Components' output.
24+
> Alternatively, Airbnb has released a testing utility called [Enzyme](https://airbnb.io/enzyme/), which makes it easy to assert, manipulate, and traverse your React Components' output.
2525
2626
- [`act()`](#act)
2727
- [`mockComponent()`](#mockcomponent)

content/docs/addons-update.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ var update = require('react-addons-update'); // ES5 with npm
2121

2222
React lets you use whatever style of data management you want, including mutation. However, if you can use immutable data in performance-critical parts of your application it's easy to implement a fast [`shouldComponentUpdate()`](/docs/react-component.html#shouldcomponentupdate) method to significantly speed up your app.
2323

24-
Dealing with immutable data in JavaScript is more difficult than in languages designed for it, like [Clojure](http://clojure.org/). However, we've provided a simple immutability helper, `update()`, that makes dealing with this type of data much easier, *without* fundamentally changing how your data is represented. You can also take a look at Facebook's [Immutable-js](https://facebook.github.io/immutable-js/docs/) and the [Advanced Performance](/docs/advanced-performance.html) section for more detail on Immutable-js.
24+
Dealing with immutable data in JavaScript is more difficult than in languages designed for it, like [Clojure](https://clojure.org/). However, we've provided a simple immutability helper, `update()`, that makes dealing with this type of data much easier, *without* fundamentally changing how your data is represented. You can also take a look at Facebook's [Immutable-js](https://facebook.github.io/immutable-js/docs/) and the [Advanced Performance](/docs/advanced-performance.html) section for more detail on Immutable-js.
2525

2626
### The Main Idea {#the-main-idea}
2727

@@ -67,7 +67,7 @@ const newData = update(myData, {
6767
});
6868
```
6969

70-
While the syntax takes a little getting used to (though it's inspired by [MongoDB's query language](http://docs.mongodb.org/manual/core/crud-introduction/#query)) there's no redundancy, it's statically analyzable and it's not much more typing than the mutative version.
70+
While the syntax takes a little getting used to (though it's inspired by [MongoDB's query language](https://docs.mongodb.com/manual/crud/#query)) there's no redundancy, it's statically analyzable and it's not much more typing than the mutative version.
7171

7272
The `$`-prefixed keys are called *commands*. The data structure they are "mutating" is called the *target*.
7373

content/docs/code-splitting.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@ Next.js も同様です。
9999
もし Webpack を自分でセットアップしていた場合には、Webpack の[コード分割に関するガイド](https://webpack.js.org/guides/code-splitting/)を読むと良いでしょう。
100100
きっとあなたの Webpack の設定はだいたい[このように](https://gist.github.com/gaearon/ca6e803f5c604d37468b0091d9959269)なると思います。
101101

102-
もし [Babel](http://babeljs.io/) を使用している場合は、Babel が動的インポート構文をパースできても変換してしまわないようにする必要があります。
102+
もし [Babel](https://babeljs.io/) を使用している場合は、Babel が動的インポート構文をパースできても変換してしまわないようにする必要があります。
103103
そのためには [babel-plugin-syntax-dynamic-import](https://yarnpkg.com/en/package/babel-plugin-syntax-dynamic-import) を利用すると良いでしょう。
104104

105105
## `React.lazy` {#reactlazy}

0 commit comments

Comments
 (0)