Skip to content

Commit

Permalink
chore: re-enable CI job for lint/test
Browse files Browse the repository at this point in the history
  • Loading branch information
lacolaco committed Jul 15, 2024
1 parent f538257 commit 37eb4e4
Show file tree
Hide file tree
Showing 16 changed files with 933 additions and 121 deletions.
79 changes: 0 additions & 79 deletions .github/workflows/build-and-test.yml

This file was deleted.

46 changes: 46 additions & 0 deletions .github/workflows/ci.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
name: ci

on: [pull_request]

permissions:
contents: read

jobs:
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
with:
submodules: true
- uses: actions/setup-node@v4
with:
node-version-file: '.node-version'
cache: yarn
- run: yarn install
- run: yarn lint
- run: yarn test
# build-windows:
# runs-on: windows-latest
# steps:
# - uses: actions/checkout@v4
# with:
# submodules: true
# - uses: actions/setup-node@v4
# with:
# node-version-file: .node-version
# cache: yarn
# - run: yarn install
# - run: yarn build
# shell: pwsh
# build-macos:
# runs-on: macos-latest
# steps:
# - uses: actions/checkout@v4
# with:
# submodules: true
# - uses: actions/setup-node@v4
# with:
# node-version-file: '.node-version'
# cache: yarn
# - run: yarn install
# - run: yarn build
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
.tmp
.env
.textlintcache
build
node_modules
1 change: 1 addition & 0 deletions .textlintignore
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
**/*.en.md
27 changes: 26 additions & 1 deletion .textlintrc
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,32 @@
},
"rules": {
"prh": {
"rulePaths": ["prh.yml"]
"rulePaths": [
"./prh.yml"
]
},
"preset-ja-spacing": {
"ja-space-after-question": false,
"ja-space-after-exclamation": false
},
"preset-ja-technical-writing": {
"sentence-length": {
"skipPatterns": [
"Angular",
"NgOptimizedImage",
"Core Web Vitals"
]
},
"no-mix-dearu-desumasu": {
"preferInList": ""
},
"no-exclamation-question-mark": false,
"ja-no-weak-phrase": false,
"max-kanji-continuous-len": {
"allow": [
"二重中括弧構文"
]
}
}
}
}
18 changes: 9 additions & 9 deletions adev-ja/src/content/introduction/essentials/components.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<docs-decorative-header title="コンポーネント" imgSrc="adev/src/assets/images/components.svg"> <!-- markdownlint-disable-line -->
Angular でアプリケーションを作成するための基本的な構成要素
Angularでアプリケーションを作成するための基本的な構成要素
</docs-decorative-header>

コンポーネントは、プロジェクトを理解しやすい部品に分割し、明確な責任を持たせることで、コードの保守性とスケーラビリティを向上させます。

Todo アプリケーションをコンポーネントのツリーに分解する例を示します
Todoアプリケーションをコンポーネントのツリーに分解する例を示します

```mermaid
flowchart TD
Expand All @@ -15,18 +15,18 @@ flowchart TD
D[TodoListItem]
```

このガイドでは、Angular でコンポーネントを作成および使用する方法について説明します
このガイドでは、Angularでコンポーネントを作成および使用する方法について説明します

## コンポーネントの定義

すべてのコンポーネントには、核となる次のプロパティがあります。

1. いくつかの設定を含む `@Component`[デコレーター](https://www.typescriptlang.org/docs/handbook/decorators.html)
2. DOM にレンダリングされる内容を制御する HTMLテンプレート
3. HTML でコンポーネントがどのように使用されるかを定義する [CSSセレクター](https://developer.mozilla.org/docs/Learn/CSS/Building_blocks/Selectors)
4. 状態管理、ユーザー入力処理、サーバーからのデータフェッチなどの動作を持つ TypeScriptクラス
2. DOMにレンダリングされる内容を制御するHTMLテンプレート
3. HTMLでコンポーネントがどのように使用されるかを定義する [CSSセレクター](https://developer.mozilla.org/docs/Learn/CSS/Building_blocks/Selectors)
4. 状態管理、ユーザー入力処理、サーバーからのデータフェッチなどの動作を持つTypeScriptクラス

TodoListItem コンポーネントの簡略化された例を次に示します
TodoListItemコンポーネントの簡略化された例を次に示します

```ts
// todo-list-item.component.ts
Expand All @@ -44,7 +44,7 @@ export class TodoListItem {
コンポーネントでよく見られるその他のメタデータには次のものがあります。

- `standalone: true` — コンポーネントの作成を簡素化する推奨アプローチ
- `styles`コンポーネントに適用する CSSスタイルを含む文字列または文字列の配列
- `styles`コンポーネントに適用するCSSスタイルを含む文字列または文字列の配列

これを踏まえて、`TodoListItem` コンポーネントの更新バージョンを示します。

Expand All @@ -70,7 +70,7 @@ export class TodoListItem {

### HTMLとCSSを別ファイルに分離する

HTMLやCSSを別ファイルで管理することを好むチーム向けに、Angular は `templateUrl``styleUrl` の2つの追加プロパティを提供します。
HTMLやCSSを別ファイルで管理することを好むチーム向けに、Angularは `templateUrl``styleUrl` の2つの追加プロパティを提供します。

前の `TodoListItem` コンポーネントを使用して、代替アプローチは次のようになります。

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ export class IngredientList {

#### `track`プロパティ

Angularが`@for`を使用して要素のリストをレンダリングすると、これらのアイテムは後で変更または移動される可能性があります。Angularは、通常、アイテムのプロパティを一意の識別子またはキーとして扱うことで、再順序付けを通じて各アイテムを追跡する必要があります。
Angularが`@for`を使用して要素のリストをレンダリングすると、これらのアイテムは後で変更・移動される可能性があります。Angularは、通常、アイテムのプロパティを一意の識別子として扱うことで、再順序付けを通じて各アイテムを追跡する必要があります。

これにより、リストへの更新がUIに正しく反映され、特に状態のある要素やアニメーションの場合に、Angular内で適切に追跡されます。

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@

要素にイベントハンドラーを追加するには、次の手順に従います。

1. イベント名を含む属性を括弧内に追加します
2. イベントが発生したときに実行するJavaScript文を指定します
1. イベント名を含む属性を括弧内に追加する
2. イベントが発生したときに実行するJavaScript文を指定する

```html
<button (click)="save()">保存</button>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

## 状態とは?

コンポーネントを使用すると、アプリケーションの個別部分の責任をきれいにカプセル化できます。たとえば、`SignUpForm`コンポーネントは、ユーザーが特定の操作を実行できるようにする前に、フォームが有効かどうかを追跡する必要がある場合があります。その結果、コンポーネントが追跡する必要があるさまざまなプロパティは、しばしば「状態」と呼ばれます。
コンポーネントを使用すると、アプリケーションの個別部分の責任をきれいにカプセル化できます。たとえば、`SignUpForm`コンポーネントは、ユーザーが特定の操作をする前に、フォームが有効かどうかを追跡しなければならない場合があります。その結果、コンポーネントが追跡する必要のあるさまざまなプロパティは、しばしば「状態」と呼ばれます。

## 状態の定義

Expand Down
2 changes: 1 addition & 1 deletion adev-ja/src/content/introduction/essentials/next-steps.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<docs-decorative-header title="次のステップ" imgSrc="adev/src/assets/images/roadmap.svg"> <!-- markdownlint-disable-line -->
</docs-decorative-header>

Angular の基本概念について学んだので、学んだことをインタラクティブなチュートリアルで実践し、詳細なガイドでさらに学びましょう。
Angularの基本概念について学んだので、学んだことをインタラクティブなチュートリアルで実践し、詳細なガイドでさらに学びましょう。

## プレイグラウンド

Expand Down
4 changes: 2 additions & 2 deletions adev-ja/src/content/introduction/essentials/overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@

## 始める前に

ほとんどのモダンなフレームワークと同様に、Angular では HTML、CSS、JavaScript についての知識が必要です。フロントエンド開発が完全に初めての場合は、最初のステップとしてフレームワークに飛び込むのはあまり良い考えではありません。基本を理解してから戻ってきてください!他のフレームワークの経験は役に立ちますが、必須ではありません。
ほとんどのモダンなフレームワークと同様に、AngularではHTML、CSS、JavaScriptについての知識が必要です。フロントエンド開発が完全に初めての場合は、最初のステップとしてフレームワークに飛び込むのはあまり良い考えではありません。基本を理解してから戻ってきてください!他のフレームワークの経験は役に立ちますが、必須ではありません。

さらに、次の概念についても理解しておく必要があります。

Expand All @@ -13,7 +13,7 @@

## 次のステップ

飛び込む準備はできましたか? Angular のコンポーネントについて学ぶ時です
飛び込む準備はできましたか? Angularのコンポーネントについて学ぶ時です

<docs-pill-row>
<docs-pill title="コンポーネントによる構築" href="essentials/components" />
Expand Down
4 changes: 2 additions & 2 deletions adev-ja/src/content/introduction/essentials/sharing-logic.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,15 @@
依存性の注入を使用するとコードを共有できます。
</docs-decorative-header>

コンポーネント間でロジックを共有する必要がある場合、Angular は[依存性の注入](guide/di)の設計パターンを活用します。これにより、「サービス」を作成できます。サービスを使用すると、コードをコンポーネントに注入しながら、信頼できる唯一の情報源から管理できます。
コンポーネント間でロジックを共有する必要がある場合、Angularは[依存性の注入](guide/di)の設計パターンを活用します。これにより、「サービス」を作成できます。サービスを使用すると、コードをコンポーネントに注入しながら、信頼できる唯一の情報源から管理できます。

## サービスとは

サービスは、注入できる再利用可能なコードの断片です。

コンポーネントの定義と同様に、サービスは以下で構成されます。

- `@Injectable`を使用してクラスをAngularサービスとして宣言する**TypeScriptデコレータ**`providedIn`プロパティ(通常は`'root'`)を使用して、サービスにアクセスできるアプリケーションのどの部分かを定義できます。これにより、サービスをアプリケーション内のどこからでもアクセスできます。
- `@Injectable`を使用してクラスをAngularサービスとして宣言する**TypeScriptデコレーター**`providedIn`プロパティ(通常は`'root'`)を使用して、サービスにアクセスできるアプリケーションのどの部分かを定義できます。これにより、サービスをアプリケーション内のどこからでもアクセスできます。
- サービスが注入されたときにアクセスできる目的のコードを定義する**TypeScriptクラス**

以下は、`Calculator`サービスの例です。
Expand Down
14 changes: 7 additions & 7 deletions adev-ja/src/content/introduction/what-is-angular.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ Googleの専門チームによって管理されているAngularは、
Angularは、チームの規模やコードベースの規模に合わせて拡張できる、
高速で信頼性の高いアプリケーションを構築するための堅牢なプラットフォームを提供します。

**コードを確認したいですか?** Angular の使い方の概要を簡単に確認するには
**コードを確認したいですか?** Angularの使い方の概要を簡単に確認するには
[基本要素](essentials)にアクセスしてください。
ステップバイステップの手順に従いたい場合は、[チュートリアル](tutorials/learn-angular)で始めることができます。

Expand All @@ -25,12 +25,12 @@ Angularは、チームの規模やコードベースの規模に合わせて拡
疎結合かつテスト可能に保つことができます。
</docs-card>
<docs-card title="シグナルに基づいたきめ細かなリアクティビティで高速な状態更新を実現する" href="guide/signals" link="Angularシグナルを探索">
コンパイル時の最適化と組み合わせたきめ細かなリアクティビティモデルは、開発を簡素化し、より高速なアプリの構築をデフォルトで支援します
コンパイル時の最適化と組み合わせたきめ細かなリアクティビティモデルは、開発を簡素化し、より高速なアプリケーションの構築をデフォルトで支援します

アプリケーション全体で状態がどのように、どこで使用されているかを詳細に追跡し、高度に最適化された命令を通じてフレームワークが高速な更新をレンダリングできるようにします。
</docs-card>
<docs-card title="SSR、SSG、ハイドレーション、次世代の遅延読み込みでパフォーマンス目標を達成する" href="guide/ssr" link="SSRについて読む">
Angular は、完全なDOMハイドレーションと並んで、サーバーサイドレンダリング (SSR) と
Angularは、完全なDOMハイドレーションと並んで、サーバーサイドレンダリング (SSR) と
静的サイト生成 (SSG) の両方をサポートします。テンプレート内の `@defer` ブロックを使用して、
テンプレートを遅延読み込み可能な部分へ宣言的に分割することが簡単にできます。
</docs-card>
Expand Down Expand Up @@ -74,15 +74,15 @@ Angularは、チームの規模やコードベースの規模に合わせて拡
数え切れない現実世界のシナリオを表す_数十万_のテストでチェックされてます。

Angularは、Google Cloudを含むGoogleの最大級の製品の安定性にコミットしています。
このコミットメントにより、変更点が十分にテストされ、後方互換性があり
可能な限り移行ツールが含まれることが保証されます
このコミットメントにより、変更点が十分にテストされ、後方互換性を保ち
可能な限り移行ツールが含まれることを保証します
</docs-card>
<docs-card title="明確なサポートポリシーと予測可能なリリーススケジュール" href="reference/releases" link="バージョニングとリリース">
Angularの予測可能な時間ベースのリリーススケジュールにより、
組織はフレームワークの安定性と後方互換性について自信を持つことができます。
長期サポート (LTS) ウィンドウにより、必要なときに重要なセキュリティ修正を入手できます。
ファーストパーティの更新ツールやガイド、自動移行Schematicsは、
アプリをフレームワークとWebプラットフォームの最新の発展に合わせて最新の状態に保つのに役立ちます
アプリケーションをフレームワークとWebプラットフォームの最新の発展に合わせて最新の状態に保つのに役立ちます
</docs-card>
</docs-card-container>

Expand Down Expand Up @@ -135,7 +135,7 @@ Angularは、チームの規模やコードベースの規模に合わせて拡
<docs-card title="他のGoogleテクノロジーとのパートナーシップ">
Angularは、他のGoogleテクノロジーやチームと緊密に連携してWebを改善しています。

ChromeのAuroraとの継続的なパートナーシップにより、NgOptimizedImageなどの組み込みパフォーマンス最適化や Angular のCore Web Vitalsの改善など、Web 全体でのユーザーエクスペリエンスの向上を積極的に探求しています
ChromeのAuroraとの継続的なパートナーシップにより、NgOptimizedImageなどの組み込みパフォーマンス最適化やAngularのCore Web Vitalsの改善など、Web全体でのユーザー体験の向上を積極的に探求しています

また、[Firebase](https://firebase.google.com/)[Tensorflow](https://www.tensorflow.org/)[Flutter](https://flutter.dev/)[Material Design](https://m3.material.io/)[Google Cloud](https://cloud.google.com/) と連携して、開発者ワークフロー全体で有意義な統合を提供しています。
</docs-card>
Expand Down
Loading

0 comments on commit 37eb4e4

Please sign in to comment.