Skip to content

Commit

Permalink
chore: address lint errors
Browse files Browse the repository at this point in the history
  • Loading branch information
lacolaco committed Jan 22, 2025
1 parent 73ac052 commit ac565d9
Show file tree
Hide file tree
Showing 3 changed files with 14 additions and 12 deletions.
4 changes: 3 additions & 1 deletion .textlintrc
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
"preset-ja-technical-writing": {
"sentence-length": false,
"max-comma": false,
"max-ten": false,
"no-mix-dearu-desumasu": {
"preferInList": ""
},
Expand All @@ -42,7 +43,8 @@
"変更検知戦略",
"推移的依存関係",
"三重等号演算子",
"入力変換関数"
"入力変換関数",
"等価比較関数"
]
},
"ja-no-mixed-period": false
Expand Down
8 changes: 4 additions & 4 deletions adev-ja/src/content/guide/hydration.md
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ bootstrapApplication(App, {

IMPORTANT: サーバーサイドレンダリング操作によって生成されたHTMLは、**サーバーとクライアントの間で**変更されては**なりません**

サーバーとクライアントのDOMツリー構造にミスマッチがあると、ハイドレーションプロセスは、期待される内容と、DOMに実際に存在する内容を一致させる際に問題が発生します。ネイティブDOM APIを使用して直接DOM操作を行うコンポーネントが最も一般的な原因です
サーバーとクライアントのDOMツリー構造にミスマッチがあると、ハイドレーションプロセスは、期待される内容と、DOMに実際に存在する内容を一致させる際に問題が発生します。ネイティブDOM APIを使用して直接DOM操作するコンポーネントが最も一般的な原因です

### 直接DOM操作 {#direct-dom-manipulation}

Expand Down Expand Up @@ -121,7 +121,7 @@ HELPFUL: この設定が、サーバーの`tsconfig.server.json`とブラウザ

## エラー {#errors}

ノードのミスマッチから、`ngSkipHydration`が有効なホストノードで使用された場合まで、様々なハイドレーション関連のエラーが発生する可能性があります。最も一般的なエラーケースは、ネイティブAPIを使用して直接DOM操作を行ったため、ハイドレーションがサーバーでレンダリングされたクライアントの期待されるDOMツリー構造を見つけられないか、一致させることができない場合です。この種のエラーが発生する可能性のあるもう1つのケースは、前の[有効なHTML構造](#valid-html-structure)セクションで述べたものです。そのため、テンプレートのHTMLが有効な構造を使用していることを確認してください。そうすれば、そのエラーケースを回避できます。
ノードのミスマッチから、`ngSkipHydration`が有効なホストノードで使用された場合まで、様々なハイドレーション関連のエラーが発生する可能性があります。最も一般的なエラーケースは、ネイティブAPIを使用して直接DOM操作したため、ハイドレーションがサーバーでレンダリングされたクライアントの期待されるDOMツリー構造を見つけられないか、一致させることができない場合です。この種のエラーが発生する可能性のあるもう1つのケースは、前の[有効なHTML構造](#valid-html-structure)セクションで述べたものです。そのため、テンプレートのHTMLが有効な構造を使用していることを確認してください。そうすれば、そのエラーケースを回避できます。

ハイドレーション関連のエラーに関する完全なリファレンスについては、[エラーリファレンスガイド](/errors)を参照してください。

Expand Down Expand Up @@ -153,7 +153,7 @@ HELPFUL: これによりレンダリングの問題は解決されますが、

## ハイドレーションのタイミングとアプリケーションの安定性

アプリケーションの安定性は、ハイドレーションプロセスの重要な部分です。ハイドレーションとハイドレーション後のプロセスは、アプリケーションが安定状態を報告した後にのみ実行されます。安定性が遅れる原因はいくつかあります。例としては、タイムアウトや間隔の設定、未解決のプロミス、保留中のマイクロタスクなどがあります。これらの場合、[アプリケーションは不安定なままです](errors/NG0506)というエラーが発生する可能性があり、これはアプリケーションが10秒後も安定状態に達していないことを示しています。アプリケーションがすぐにハイドレーションされない場合は、アプリケーションの安定性に影響を与える要因を調べ、リファクタリングして遅延を防いでください。
アプリケーションの安定性は、ハイドレーションプロセスの重要な部分です。ハイドレーションとハイドレーション後のプロセスは、アプリケーションが安定状態を報告した後にのみ実行されます。安定性が遅れる原因はいくつかあります。例としては、タイムアウトや間隔の設定、未解決のPromise、保留中のマイクロタスクなどがあります。これらの場合、[アプリケーションは不安定なままです](errors/NG0506)というエラーが発生する可能性があり、これはアプリケーションが10秒後も安定状態に達していないことを示しています。アプリケーションがすぐにハイドレーションされない場合は、アプリケーションの安定性に影響を与える要因を調べ、リファクタリングして遅延を防いでください。

## I18N

Expand All @@ -175,7 +175,7 @@ bootstrapApplication(AppComponent, {
```

## サーバーサイドとクライアントサイドでのレンダリングの一貫性
`@if`ブロックや、サーバーサイドレンダリング時とクライアントサイドレンダリング時で異なるコンテンツを表示するその他の条件分岐(Angularの`isPlatformBrowser`関数を使用する`@if`ブロックなど)は使用しないでください。これらのレンダリングの違いはレイアウトのずれを引き起こし、ユーザーエクスペリエンスとCore Web Vitalsに悪影響を与えます。
`@if`ブロックや、サーバーサイドレンダリング時とクライアントサイドレンダリング時で異なるコンテンツを表示するその他の条件分岐(Angularの`isPlatformBrowser`関数を使用する`@if`ブロックなど)は使用しないでください。これらのレンダリングの違いはレイアウトのずれを引き起こし、ユーザー体験とCore Web Vitalsに悪影響を与えます。

## DOM操作を行うサードパーティライブラリ

Expand Down
14 changes: 7 additions & 7 deletions adev-ja/src/content/tools/cli/deployment.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,12 @@ Angularアプリケーションをリモートサーバーにデプロイする

AngularのCLIコマンドである`ng deploy`はあなたのプロジェクトに紐づいた`deploy` [CLI builder](guide/cli-builder)を実行します。
多数のサードパーティのビルダーが異なるプラットフォームで機能するよう実装しています。
`ng add`によって、それらのいずれかをあなたのプロジェクトに追加することが可能です
`ng add`によって、それらのいずれかをあなたのプロジェクトに追加できます

デプロイ機能が入ったパッケージを追加すると、選択されたプロジェクトに対する`deploy`セクションを伴うワークスペースの設定(`angular.json`ファイル)が自動的に更新されます。
その後、そのプロジェクトにデプロイするために`ng deploy`コマンドを使うことが可能です。

例えば、以下のコマンドは[Firebase](https://firebase.google.com/)にプロジェクトを自動的にデプロイすることが可能です
例えば、以下のコマンドは[Firebase](https://firebase.google.com/)にプロジェクトを自動的にデプロイできます

<docs-code language="shell">

Expand All @@ -36,7 +36,7 @@ ng deploy
| [GitHub pages](https://pages.github.com) | [`ng add angular-cli-ghpages`](https://npmjs.org/package/angular-cli-ghpages) |
| [Amazon Cloud S3](https://aws.amazon.com/s3/?nc2=h_ql_prod_st_s3) | [`ng add @jefiozie/ngx-aws-deploy`](https://www.npmjs.com/package/@jefiozie/ngx-aws-deploy) |

もし自己管理されたサーバーにデプロイする場合や、お気に入りのクラウドプラットフォームのビルダーがない場合、`ng deploy`コマンドを使うことを許容する[ビルダーを作成する](tools/cli/cli-builder)か、アプリケーションを手動でデプロイする方法を学ぶためのこのガイドを読み通すかのどちらかの方法を取る事が可能です
もし自己管理されたサーバーにデプロイする場合や、お気に入りのクラウドプラットフォームのビルダーがない場合、`ng deploy`コマンドを使うことを許容する[ビルダーを作成する](tools/cli/cli-builder)か、アプリケーションを手動でデプロイする方法を学ぶためのこのガイドを読み通すか、どちらかの方法を取る事が可能です

## リモートサーバーへの手動デプロイ

Expand Down Expand Up @@ -71,7 +71,7 @@ Angularのルーターを迂回して、ブラウザは`/users/42`に対する

静的なサーバーは`http://my-app.test/`に対するリクエストを受け取ると決まって`index.html`を返します。
しかし、デフォルトでほとんどサーバーは`index.html`を代わりに返すよう設定されて*いないかぎり*`http://my-app.test/users/42`を拒否して`404 - Not Found`エラーを返します。
フォールバックルートを設定するか、サーバー上で404ページを`index.html`にする設定することで、Angularはディープリンクに関するサービスを提供し、正しいルートを表示することができます
フォールバックルートを設定するか、サーバー上で404ページを`index.html`にする設定することで、Angularはディープリンクに関するサービスを提供し、正しいルートを表示できます
いくつかのサーバーはこのフォールバックの挙動を"Single-Page Application"(SPA)モードと呼びます。

一度ブラウザがアプリケーションをロードすると、Angularのルーターはどのページにあるのかを判断するためにURLを読み込み、`/users/42`を正しく表示しようとします。
Expand All @@ -90,7 +90,7 @@ Angularのルーターを迂回して、ブラウザは`/users/42`に対する

## プロダクションの最適化

`ng build`は特に設定を行わない限り`production`設定を使います。この設定はビルド最適化機能を有効にします。
`ng build`は特に設定しない限り`production`設定を使います。この設定はビルド最適化機能を有効にします。

| 機能 | 詳細 |
|:--- |:--- |
Expand All @@ -112,7 +112,7 @@ CLIのビルドオプションとそれらの効果についてより多く知
* より詳細なエラーメッセージ。
* [デバッグ関数](api#core-global)および[Angular DevTools](tools/devtools)をサポートするグローバルな`ng`変数のような追加のデバッグユーティリティ。

これらの機能は開発中は便利ですが、アプリに追加のコードが必要で、プロダクションでは望まれません。
これらの機能は開発中は便利ですが、アプリケーションに追加のコードが必要で、プロダクションでは望まれません。
エンドユーザーのためのバンドルサイズにネガティブな影響を与えないよう、これらの機能を安全に使うために、Angular CLIは
プロダクションをバンドリングする際のバンドルから開発時のみのコードを削除します。

Expand All @@ -130,5 +130,5 @@ ng build --deploy-url /my/assets

`--deploy-url`の効果と目的は[`<base href>`](guide/routing/common-router-tasks)と重なります。両者とも初期のスクリプト、スタイルシート、遅延して読み込まれるスクリプト、cssリソースのために使用できます。

`<base href>`実行時に一か所で定義することができる`<base href>`とは違い、`--deploy-url`はビルド時にアプリケーションでハードコーディングされる必要があります。
`<base href>`実行時に一か所で定義できる<base href>`とは違い、`--deploy-url`はビルド時にアプリケーションでハードコーディングされる必要があります。
可能であれば`<base href>`の方が好ましいです。

0 comments on commit ac565d9

Please sign in to comment.