Skip to content

Commit 7d51244

Browse files
author
akfm.sato
committed
fix hydration error on Layout/HomeContent
1 parent 345b341 commit 7d51244

File tree

1 file changed

+56
-51
lines changed

1 file changed

+56
-51
lines changed

‎src/components/Layout/HomeContent.js‎

Lines changed: 56 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -167,11 +167,11 @@ export function HomeContent() {
167167
ユーザインターフェースを作成
168168
</Header>
169169
<Para>
170-
React ではユーザインターフェースを、{}
170+
React ではユーザインターフェースを、{''}
171171
コンポーネントと呼ばれる部品を使って構築できます。
172172
<Code>Thumbnail</Code>、<Code>LikeButton</Code>、
173173
<Code>Video</Code>
174-
といった React コンポーネントを書き、{}
174+
といった React コンポーネントを書き、{''}
175175
それらを組み合わせて画面やページやアプリの全体を組み立てましょう。
176176
</Para>
177177
</Center>
@@ -180,9 +180,10 @@ export function HomeContent() {
180180
</FullBleed>
181181
<Center>
182182
<Para>
183-
独りで開発していても、数千の開発者と共同開発していても、{}
184-
React の開発体験は同じです。個人、チーム、大規模な組織によって{}
185-
書かれたさまざまなコンポーネントを、シームレスに組み合わせながら{}
183+
独りで開発していても、数千の開発者と共同開発していても、{''}
184+
React の開発体験は同じです。個人、チーム、大規模な組織によって{''}
185+
書かれたさまざまなコンポーネントを、シームレスに組み合わせながら
186+
{''}
186187
開発できる。それが React の設計理念です。
187188
</Para>
188189
</Center>
@@ -196,7 +197,7 @@ export function HomeContent() {
196197
コンポーネントを作成
197198
</Header>
198199
<Para>
199-
React コンポーネントは単なる JavaScript の関数です。{}
200+
React コンポーネントは単なる JavaScript の関数です。{''}
200201
条件によってコンテンツの表示を変えたければ <Code>if</Code>{' '}
201202
文を使いましょう！ リストを表示したいなら配列の <Code>map()</Code>{' '}
202203
を使いましょう！ React
@@ -209,7 +210,7 @@ export function HomeContent() {
209210
<Center>
210211
<Para>
211212
このマークアップ構文は JSX と呼ばれます。React が普及させた
212-
JavaScript の構文拡張です。JSX マークアップは関連する{}
213+
JavaScript の構文拡張です。JSX マークアップは関連する{''}
213214
レンダリングロジックのすぐそばに配置できるので、React
214215
コンポーネントは簡単に作成、保守、削除ができます。
215216
</Para>
@@ -225,9 +226,10 @@ export function HomeContent() {
225226
</Header>
226227
<Para>
227228
React
228-
コンポーネントはデータを受け取り、画面に表示するものを返します。{}
229-
入力フィールドへのタイピングなどのユーザ操作によって{}
230-
新しいデータができたら、コンポーネントにそれを渡します。{}
229+
コンポーネントはデータを受け取り、画面に表示するものを返します。
230+
{''}
231+
入力フィールドへのタイピングなどのユーザ操作によって{''}
232+
新しいデータができたら、コンポーネントにそれを渡します。{''}
231233
React が新しいデータに基づいて画面を更新します。
232234
</Para>
233235
</Center>
@@ -259,10 +261,10 @@ export function HomeContent() {
259261
フルスタックな開発を
260262
</Header>
261263
<Para>
262-
React はライブラリです。{}
263-
コンポーネントを組み合わせることはできますが、{}
264-
ルーティングやデータフェッチの方法までは指定しません。{}
265-
React でアプリ全体を構築する場合は、{}
264+
React はライブラリです。{''}
265+
コンポーネントを組み合わせることはできますが、{''}
266+
ルーティングやデータフェッチの方法までは指定しません。{''}
267+
React でアプリ全体を構築する場合は、{''}
266268
<Link href="https://nextjs.org">Next.js</Link> や{' '}
267269
<Link href="https://remix.run">Remix</Link>{' '}
268270
のようなフルスタックのフレームワークをお勧めします。
@@ -273,10 +275,10 @@ export function HomeContent() {
273275
</FullBleed>
274276
<Center>
275277
<Para>
276-
React とはアーキテクチャでもあります。{}
277-
フレームワークでは、サーバやビルド時に動作する{}
278-
非同期コンポーネントを使ってデータの取得が可能です。{}
279-
ファイルやデータベースからデータを読み込んで、{}
278+
React とはアーキテクチャでもあります。{''}
279+
フレームワークでは、サーバやビルド時に動作する{''}
280+
非同期コンポーネントを使ってデータの取得が可能です。{''}
281+
ファイルやデータベースからデータを読み込んで、{''}
280282
インタラクティブなコンポーネントに渡しましょう。
281283
</Para>
282284
<div className="flex justify-start w-full lg:justify-center">
@@ -298,12 +300,12 @@ export function HomeContent() {
298300
能力を最大限に活用
299301
</Header>
300302
<Para>
301-
人々はウェブを愛し、そしてネイティブアプリを愛しています。{}
302-
その理由は様々です。{}
303+
人々はウェブを愛し、そしてネイティブアプリを愛しています。{''}
304+
その理由は様々です。{''}
303305
React
304-
を使えば、同じスキルを使ってウェブアプリとネイティブアプリの{}
305-
両方を構築できます。{}
306-
各プラットフォームが持つ独自の強みを活かし、{}
306+
を使えば、同じスキルを使ってウェブアプリとネイティブアプリの{''}
307+
両方を構築できます。{''}
308+
各プラットフォームが持つ独自の強みを活かし、{''}
307309
どんなプラットフォームにおいても自然なインターフェースを実現します。
308310
</Para>
309311
</div>
@@ -322,11 +324,11 @@ export function HomeContent() {
322324
</h4>
323325
<p className="lg:text-xl leading-normal text-secondary">
324326
人々はウェブアプリが素早く読み込まれることを期待します。
325-
{}
327+
{''}
326328
React を使用すれば、サーバ上でデータが取得中でも HTML
327329
のストリーミングを開始でき、JavaScript
328-
コードが読み込まれる前に{}
329-
コンテンツを段階的にロードすることができます。{}
330+
コードが読み込まれる前に{''}
331+
コンテンツを段階的にロードすることができます。{''}
330332
クライアント側では、React は標準的な Web API
331333
を使用して、レンダーの最中でも UI の応答性を保ちます。
332334
</p>
@@ -410,18 +412,18 @@ export function HomeContent() {
410412
</h4>
411413
<p className="h-full lg:text-xl text-secondary dark:text-secondary-dark leading-normal">
412414
人々はネイティブアプリがそのプラットフォームに見合った
413-
{}
415+
{''}
414416
ルック＆フィールを持つことを期待します。
415417
<Link href="https://reactnative.dev">
416418
React Native
417419
</Link>{' '}
418420
や{' '}
419421
<Link href="https://github.com/expo/expo">Expo</Link>{' '}
420422
を使えば、React で Android、iOS
421-
などのアプリを構築できます。{}
422-
ネイティブアプリのように感じるのは、{}
423-
ウェブビューではなく真のネイティブ UI だからです。{}
424-
React コンポーネントは、プラットフォーム固有の、{}
423+
などのアプリを構築できます。{''}
424+
ネイティブアプリのように感じるのは、{''}
425+
ウェブビューではなく真のネイティブ UI だからです。{''}
426+
React コンポーネントは、プラットフォーム固有の、{''}
425427
本物の Android や iOS のビューを表示できます。
426428
</p>
427429
</div>
@@ -432,11 +434,11 @@ export function HomeContent() {
432434
</div>
433435
<div className="px-5 lg:px-0 max-w-4xl mx-auto lg:text-center text-secondary dark:text-secondary-dark">
434436
<Para>
435-
React を使えば、{}
436-
ウェブ開発者にもネイティブアプリ開発者にもなれるのです。{}
437-
ユーザー体験を犠牲にすることなく、{}
438-
多くのプラットフォームでリリースを行えます。{}
439-
ひとつのプラットフォームに縛られることなく、{}
437+
React を使えば、{''}
438+
ウェブ開発者にもネイティブアプリ開発者にもなれるのです。{''}
439+
ユーザー体験を犠牲にすることなく、{''}
440+
多くのプラットフォームでリリースを行えます。{''}
441+
ひとつのプラットフォームに縛られることなく、{''}
440442
すべての機能をエンドツーエンドで担当するチームを作れます。
441443
</Para>
442444
<div className="flex justify-start w-full lg:justify-center">
@@ -458,18 +460,19 @@ export function HomeContent() {
458460
リリースされる
459461
</Header>
460462
<Para>
461-
React は開発アプローチの変更に慎重に取り組みます。{}
462-
すべてのコミットは 10 億人以上のユーザによる{}
463-
ビジネスクリティカルな環境においてテストされます。{}
464-
Meta にある 10 万以上の React コンポーネントが、{}
463+
React は開発アプローチの変更に慎重に取り組みます。{''}
464+
すべてのコミットは 10 億人以上のユーザによる{''}
465+
ビジネスクリティカルな環境においてテストされます。{''}
466+
Meta にある 10 万以上の React コンポーネントが、{''}
465467
すべての移行戦略の検証を支援します。
466468
</Para>
467469
<div className="order-last pt-5">
468470
<Para>
469471
React チームは、常に React
470-
を改善する方法を模索していますが、{}
471-
研究によっては成果が出るまでに何年もかかることもあります。{}
472-
研究のアイデアをリリースするまでの高いハードルを越えた、{}
472+
を改善する方法を模索していますが、{''}
473+
研究によっては成果が出るまでに何年もかかることもあります。
474+
{''}
475+
研究のアイデアをリリースするまでの高いハードルを越えた、{''}
473476
実証済みのアプローチだけが React の一部となるのです。
474477
</Para>
475478
<div className="hidden lg:flex justify-start w-full">
@@ -519,7 +522,7 @@ export function HomeContent() {
519522
</Header>
520523
<Para>
521524
あなたは 1 人ではありません。世界中から毎月 200 万人の開発者が
522-
React ドキュメントに訪れています。{}
525+
React ドキュメントに訪れています。{''}
523526
人々とチームが共感できる技術、それが React なのです。
524527
</Para>
525528
</Center>
@@ -528,13 +531,15 @@ export function HomeContent() {
528531
<div className="mx-auto flex flex-col max-w-4xl">
529532
<Center>
530533
<Para>
531-
React は単なるライブラリやアーキテクチャ、{}
532-
あるいはエコシステム以上の存在です。{}
533-
React とはコミュニティです。{}
534-
ヘルプを求め、チャンスを見つけ、新しい友人に会える場所です。{}
535-
開発者やデザイナ、初心者やエキスパート、{}
536-
研究者やアーティスト、教師や学生と出会える場所です。{}
537-
私たちのバックグラウンドはさまざまですが、React を通じて皆で{}
534+
React は単なるライブラリやアーキテクチャ、{''}
535+
あるいはエコシステム以上の存在です。{''}
536+
React とはコミュニティです。{''}
537+
ヘルプを求め、チャンスを見つけ、新しい友人に会える場所です。
538+
{''}
539+
開発者やデザイナ、初心者やエキスパート、{''}
540+
研究者やアーティスト、教師や学生と出会える場所です。{''}
541+
私たちのバックグラウンドはさまざまですが、React を通じて皆で
542+
{''}
538543
ユーザーインターフェースの創造に取り組んでいるのです。
539544
</Para>
540545
</Center>

0 commit comments

Comments
 (0)