diff --git a/adev-ja/src/content/events/v21.md b/adev-ja/src/content/events/v21.md index ae3f6bb5b6..d26d5ce36c 100644 --- a/adev-ja/src/content/events/v21.md +++ b/adev-ja/src/content/events/v21.md @@ -1,29 +1,37 @@ -![A retro 8-bit, pixel art style graphic announcing the upcoming release of Angular v21. The large, gradient 'v21' text dominates the frame. Next to it, in smaller text, are the words 'The Adventure Begins' and the release date '11-20-2025' inside a pink pixelated box. The Angular logo is in the bottom right corner.](assets/images/angular-v21-hero.jpg 'Angular v21 Hero Image') +![A retro 8-bit, pixel art style graphic announcing the upcoming release of Angular v21. The large, gradient 'v21' text dominates the frame. Next to it, in smaller text, are the words 'The Adventure Begins' and the release date '11-20-2025' inside a pink pixelated box. The Angular logo is in the bottom right corner.](assets/images/v21-event/angular-v21-hero.jpg 'Angular v21 Hero Image') # Angular v21: The Adventure Begins +## Release Blog + **Angular v21 is live**: check out the [v21 release blog](http://goo.gle/angular-v21-blog) to learn about all of the amazing new features coming your way. -## Save the Date November 20, 2025 +## Experience the v21 Release + +Explore the Angular v21 release with this interactive game world. Curious how we made it? Click the `Show Code` button below to view the source code for this Angular app. - - - - + -
+## Angular v21 Developer Event [Full Version] -Join the Angular team this November for a brand new release adventure. With modern AI tooling, performance updates and more, Angular v21 delivers fantastic new features to improve your developer experience. Whether you’re creating AI-powered apps or scalable enterprise applications, there has never been a better time to build with Angular. +Angular v21 is being delivered to you as a brand new release adventure. With modern AI tooling, performance updates and more, Angular v21 delivers fantastic new features to improve your developer experience. Whether you’re creating AI-powered apps or scalable enterprise applications, there has never been a better time to build with Angular. 🔥 What's coming in v21 - New Angular MCP Server tools to improve AI-powered workflows and code generation - Your first look at Signal Forms, our new streamlined, signal-based approach to forms in Angular -- Exciting new details about the Angular ARIA package - -That’s just a taste of what’s coming in our upcoming major release event. You won't want to miss it. - - - - - +- Exciting new details about the Angular Aria package + +
+ +
diff --git a/adev-ja/src/content/guide/aria/overview.en.md b/adev-ja/src/content/guide/aria/overview.en.md index 02838912d0..d0d04473b4 100644 --- a/adev-ja/src/content/guide/aria/overview.en.md +++ b/adev-ja/src/content/guide/aria/overview.en.md @@ -52,24 +52,34 @@ In this one scenario, developers need to consider: ## What's included? -Angular Aria includes directives for common interactive patterns: - -| Component | Description | -| --------------------------------------- | ---------------------------------------------------------------------- | -| [Accordion](guide/aria/accordion) | Collapsible content panels that can expand individually or exclusively | -| [Autocomplete](guide/aria/autocomplete) | Text input with filtered suggestions that appear as users type | -| [Combobox](guide/aria/combobox) | Primitive directive that coordinates a text input with a popup | -| [Grid](guide/aria/grid) | Two-dimensional data display with cell-by-cell keyboard navigation | -| [Listbox](guide/aria/listbox) | Single or multi-select option lists with keyboard navigation | -| [Menu](guide/aria/menu) | Dropdown menus with nested submenus and keyboard shortcuts | -| [Menubar](guide/aria/menubar) | Horizontal navigation bar for persistent application menus. | -| [Multiselect](guide/aria/multiselect) | Multiple-selection dropdown pattern with compact display | -| [Select](guide/aria/select) | Single-selection dropdown pattern with keyboard navigation | -| [Tabs](guide/aria/tabs) | Tabbed interfaces with automatic or manual activation modes | -| [Toolbar](guide/aria/toolbar) | Grouped sets of controls with logical keyboard navigation | -| [Tree](guide/aria/tree) | Hierarchical lists with expand/collapse functionality | - -Each component includes comprehensive documentation, working examples, and API references. +Angular Aria includes directives with comprehensive documentation, working examples and API references for common interactive patterns: + +### Search and selection + +| Component | Description | +| --------------------------------------- | -------------------------------------------------------------- | +| [Autocomplete](guide/aria/autocomplete) | Text input with filtered suggestions that appear as users type | +| [Listbox](guide/aria/listbox) | Single or multi-select option lists with keyboard navigation | +| [Select](guide/aria/select) | Single-selection dropdown pattern with keyboard navigation | +| [Multiselect](guide/aria/multiselect) | Multiple-selection dropdown pattern with compact display | +| [Combobox](guide/aria/combobox) | Primitive directive that coordinates a text input with a popup | + +### Navigation and call to actions + +| Component | Description | +| ----------------------------- | ----------------------------------------------------------- | +| [Menu](guide/aria/menu) | Dropdown menus with nested submenus and keyboard shortcuts | +| [Menubar](guide/aria/menubar) | Horizontal navigation bar for persistent application menus | +| [Tabs](guide/aria/tabs) | Tabbed interfaces with automatic or manual activation modes | +| [Toolbar](guide/aria/toolbar) | Grouped sets of controls with logical keyboard navigation | + +### Content organization + +| Component | Description | +| --------------------------------- | ---------------------------------------------------------------------- | +| [Accordion](guide/aria/accordion) | Collapsible content panels that can expand individually or exclusively | +| [Tree](guide/aria/tree) | Hierarchical lists with expand/collapse functionality | +| [Grid](guide/aria/grid) | Two-dimensional data display with cell-by-cell keyboard navigation | ## When to use Angular Aria @@ -89,24 +99,4 @@ Angular Aria might not fit every scenario: ## Next steps -Explore the component guides to find the pattern that fits your needs: - -**Search and selection** - -- Autocomplete - Search and filter options as users type -- Listbox - Select one or multiple items from a list -- Select - Choose one option from a list of options -- Multiselect - Choose one option from a list of options - -**Navigation and call to actions** - -- Menu - Action menus with optional nested submenus -- Tabs - Switch between related content panels -- Toolbar - Group related controls and actions - -**Content organization** - -- Accordion - Show and hide sections of content -- Tree - Display hierarchical data structures - Data display -- Grid - Navigate and interact with tabular data +Check out a component from the side nav or [list above](#whats-included), or start with [Toolbar](guide/aria/toolbar) to see a complete example of how Angular Aria directives work! diff --git a/adev-ja/src/content/guide/aria/overview.md b/adev-ja/src/content/guide/aria/overview.md index 20874bc079..891ec331ea 100644 --- a/adev-ja/src/content/guide/aria/overview.md +++ b/adev-ja/src/content/guide/aria/overview.md @@ -52,24 +52,34 @@ npm install @angular/aria ## 含まれているもの {#whats-included} -Angular Ariaには、一般的なインタラクティブパターンに対応するディレクティブが含まれています: +Angular Ariaには、包括的なドキュメント、動作するサンプル、およびAPIリファレンスを備えた、一般的なインタラクティブパターンに対応するディレクティブが含まれています: + +### 検索と選択 {#search-and-selection} | Component | 説明 | | --------------------------------------- | ---------------------------------------------------------------------- | -| [Accordion](guide/aria/accordion) | 個別に、または排他的に展開できる折りたたみ可能なコンテンツパネル | | [Autocomplete](guide/aria/autocomplete) | ユーザーが入力するにつれて表示される、フィルタリングされたサジェスト付きのテキスト入力 | -| [Combobox](guide/aria/combobox) | テキスト入力とポップアップを連携させるプリミティブなディレクティブ | -| [Grid](guide/aria/grid) | セル単位のキーボードナビゲーションを備えた2次元のデータ表示 | | [Listbox](guide/aria/listbox) | キーボードナビゲーション付きの単一選択または複数選択のオプションリスト | -| [Menu](guide/aria/menu) | ネストされたサブメニューとキーボードショートカットを持つドロップダウンメニュー | -| [Menubar](guide/aria/menubar) | 永続的なアプリケーションメニュー用の水平ナビゲーションバー | -| [Multiselect](guide/aria/multiselect) | コンパクトな表示を持つ複数選択のドロップダウンパターン | | [Select](guide/aria/select) | キーボードナビゲーション付きの単一選択のドロップダウンパターン | -| [Tabs](guide/aria/tabs) | 自動または手動のアクティベーションモードを持つタブ付きインターフェース | -| [Toolbar](guide/aria/toolbar) | 論理的なキーボードナビゲーションを持つ、グループ化されたコントロールのセット | -| [Tree](guide/aria/tree) | 展開/折りたたみ機能を持つ階層的なリスト | +| [Multiselect](guide/aria/multiselect) | コンパクトな表示を持つ複数選択のドロップダウンパターン | +| [Combobox](guide/aria/combobox) | テキスト入力とポップアップを連携させるプリミティブなディレクティブ | + +### ナビゲーションとCTA {#navigation-and-call-to-actions} + +| Component | 説明 | +| ----------------------------- | ---------------------------------------------------- | +| [Menu](guide/aria/menu) | ネストされたサブメニューとキーボードショートカットを持つドロップダウンメニュー | +| [Menubar](guide/aria/menubar) | 永続的なアプリケーションメニュー用の水平ナビゲーションバー | +| [Tabs](guide/aria/tabs) | 自動または手動のアクティベーションモードを持つタブ付きインターフェース | +| [Toolbar](guide/aria/toolbar) | 論理的なキーボードナビゲーションを持つ、グループ化されたコントロールのセット | -各コンポーネントには、包括的なドキュメント、動作するサンプル、およびAPIリファレンスが含まれています。 +### コンテンツの構成 {#content-organization} + +| Component | 説明 | +| --------------------------------- | --------------------------------------------------------------- | +| [Accordion](guide/aria/accordion) | 個別に、または排他的に展開できる折りたたみ可能なコンテンツパネル | +| [Tree](guide/aria/tree) | 展開/折りたたみ機能を持つ階層的なリスト | +| [Grid](guide/aria/grid) | セル単位のキーボードナビゲーションを備えた2次元のデータ表示 | ## Angular Ariaを使用する場面 {#when-to-use-angular-aria} @@ -89,24 +99,4 @@ Angular Ariaはすべてのシナリオに適しているわけではありま ## 次のステップ {#next-steps} -コンポーネントガイドを調べて、ニーズに合ったパターンを見つけてください: - -**検索と選択** - -- Autocomplete - ユーザーの入力に応じてオプションを検索・フィルタリングします -- Listbox - リストから1つまたは複数の項目を選択します -- Select - オプションのリストから1つのオプションを選択します -- Multiselect - オプションのリストから1つのオプションを選択します - -**ナビゲーションとCTA** - -- Menu - ネスト可能なサブメニューを持つアクションメニュー -- Tabs - 関連するコンテンツパネルを切り替えます -- Toolbar - 関連するコントロールとアクションをグループ化します - -**コンテンツの構成** - -- Accordion - コンテンツのセクションを表示・非表示にします -- Tree - 階層的なデータ構造を表示します - データ表示 -- Grid - 表形式のデータをナビゲートし、操作します +サイドナビまたは[上記のリスト](#whats-included)からコンポーネントを確認するか、[Toolbar](guide/aria/toolbar)から始めて、Angular Ariaディレクティブの動作の完全な例を確認してください！ diff --git a/adev-ja/src/content/guide/tailwind.en.md b/adev-ja/src/content/guide/tailwind.en.md index c7b9d078e6..8a6efbf617 100644 --- a/adev-ja/src/content/guide/tailwind.en.md +++ b/adev-ja/src/content/guide/tailwind.en.md @@ -2,7 +2,27 @@ [Tailwind CSS](https://tailwindcss.com/) is a utility-first CSS framework that can be used to build modern websites without ever leaving your HTML. This guide will walk you through setting up Tailwind CSS in your Angular project. -## Setting up Tailwind CSS +## Automated Setup with `ng add` + +Angular CLI provides a streamlined way to integrate Tailwind CSS into your project using the `ng add` command. This command automatically installs the necessary packages, configures Tailwind CSS, and updates your project's build settings. + +First, navigate to your Angular project's root directory in a terminal and run the following command: + +```shell +ng add tailwindcss +``` + +This command performs the following actions: + +- Installs `tailwindcss` and its peer dependencies. +- Configures the project to use Tailwind CSS. +- Adds the Tailwind CSS `@import` statement to your styles. + +After running `ng add tailwindcss`, you can immediately start using Tailwind's utility classes in your component templates. + +## Manual Setup (Alternative Method) + +If you prefer to set up Tailwind CSS manually, follow these steps: ### 1. Create an Angular project @@ -61,7 +81,7 @@ If you're using SCSS, add `@use` to `./src/styles.scss`. ### 5. Start using Tailwind in your project -You can now start using Tailwind's utility classes in your component templates to style your application. +You can now start using Tailwind's utility classes in your component templates to style your application. Run your build process with `ng serve` and you should see the styled heading. For example, you can add the following to your `app.html` file: @@ -71,10 +91,6 @@ For example, you can add the following to your `app.html` file: -### 6. Start using Tailwind in your project - -Run your build process with `ng serve` and you should see the styled heading. - ## Additional Resources - [Tailwind CSS Documentation](https://tailwindcss.com/docs) diff --git a/adev-ja/src/content/guide/tailwind.md b/adev-ja/src/content/guide/tailwind.md index a64ee3fa9a..b177c9e21e 100644 --- a/adev-ja/src/content/guide/tailwind.md +++ b/adev-ja/src/content/guide/tailwind.md @@ -2,7 +2,27 @@ [Tailwind CSS](https://tailwindcss.com/)は、HTMLを離れることなくモダンなウェブサイトを構築するために使用できる、ユーティリティファーストのCSSフレームワークです。このガイドでは、AngularプロジェクトでTailwind CSSをセットアップする方法を説明します。 -## Tailwind CSSのセットアップ {#setting-up-tailwind-css} +## `ng add`を使用した自動セットアップ {#automated-setup-with-ng-add} + +Angular CLIは、`ng add`コマンドを使用してTailwind CSSをプロジェクトに統合する合理的な方法を提供します。このコマンドは、必要なパッケージを自動的にインストールし、Tailwind CSSを設定し、プロジェクトのビルド設定を更新します。 + +まず、ターミナルでAngularプロジェクトのルートディレクトリに移動し、次のコマンドを実行します: + +```shell +ng add tailwindcss +``` + +このコマンドは以下のアクションを実行します: + +- `tailwindcss`とそのpeer dependencyをインストールします。 +- Tailwind CSSを使用するようにプロジェクトを設定します。 +- Tailwind CSSの`@import`ステートメントをスタイルに追加します。 + +`ng add tailwindcss`を実行した後、コンポーネントのテンプレートでTailwindのユーティリティクラスをすぐに使い始めることができます。 + +## 手動セットアップ（代替方法） {#manual-setup-alternative-method} + +Tailwind CSSを手動でセットアップする場合は、次の手順に従ってください: ### 1. Angularプロジェクトを作成する {#create-an-angular-project} @@ -61,7 +81,7 @@ SCSSを使用している場合は、`@use`を`./src/styles.scss`に追加しま ### 5. プロジェクトでTailwindを使い始める {#start-using-tailwind-in-your-project} -これで、コンポーネントのテンプレートでTailwindのユーティリティクラスを使用して、アプリケーションのスタイルを設定できるようになります。 +これで、コンポーネントのテンプレートでTailwindのユーティリティクラスを使用して、アプリケーションのスタイルを設定できるようになります。`ng serve`でビルドプロセスを実行すると、スタイルが適用された見出しが表示されるはずです。 たとえば、次の内容を`app.html`ファイルに追加できます: @@ -71,10 +91,6 @@ SCSSを使用している場合は、`@use`を`./src/styles.scss`に追加しま -### 6. プロジェクトでTailwindを使い始める {#start-using-tailwind-in-your-project} - -`ng serve`でビルドプロセスを実行すると、スタイルが適用された見出しが表示されるはずです。 - ## その他のリソース {#additional-resources} - [Tailwind CSSドキュメント](https://tailwindcss.com/docs) diff --git a/adev-ja/src/content/reference/releases.en.md b/adev-ja/src/content/reference/releases.en.md index d07356b0d7..55429d05f6 100644 --- a/adev-ja/src/content/reference/releases.en.md +++ b/adev-ja/src/content/reference/releases.en.md @@ -97,8 +97,8 @@ The following table provides the status for Angular versions under support. | Version | Status | Released | Active ends | LTS ends | | :------ | :----- | :--------- | :---------- | :--------- | -| ^21.0.0 | Active | 2025-11-19 | 2026-05-20 | 2026-11-18 | -| ^20.0.0 | LTS | 2025-05-28 | 2025-11-21 | 2026-11-21 | +| ^21.0.0 | Active | 2025-11-19 | 2026-05-19 | 2027-05-19 | +| ^20.0.0 | LTS | 2025-05-28 | 2025-11-19 | 2026-11-28 | | ^19.0.0 | LTS | 2024-11-19 | 2025-05-28 | 2026-05-19 | Angular versions v2 to v18 are no longer supported. diff --git a/adev-ja/src/content/reference/releases.md b/adev-ja/src/content/reference/releases.md index 3b4c19af83..b52b8e8a75 100644 --- a/adev-ja/src/content/reference/releases.md +++ b/adev-ja/src/content/reference/releases.md @@ -97,8 +97,8 @@ HELPFUL: 概算の日付は一般的なガイダンスとして提供されて | バージョン | ステータス | リリース済み | アクティブ終了 | LTS終了 | | :--------- | :--------- | :----------- | :------------- | :--------- | -| ^21.0.0 | Active | 2025-11-19 | 2026-05-20 | 2026-11-18 | -| ^20.0.0 | LTS | 2025-05-28 | 2025-11-21 | 2026-11-21 | +| ^21.0.0 | Active | 2025-11-19 | 2026-05-19 | 2027-05-19 | +| ^20.0.0 | LTS | 2025-05-28 | 2025-11-19 | 2026-11-28 | | ^19.0.0 | LTS | 2024-11-19 | 2025-05-28 | 2026-05-19 | Angularバージョンv2からv18はサポートされなくなりました。 diff --git a/origin b/origin index 183d194025..2ecdb221d3 160000 --- a/origin +++ b/origin @@ -1 +1 @@ -Subproject commit 183d194025bfb3d9f1d9ae03b4d01c0d7b4db9d1 +Subproject commit 2ecdb221d3bd80ddfd1817385d9ecc23c9002b5a