📐

Angular v20 "スタイルガイド" の変更点まとめ

すずとも

2025/08/26に公開

2025年5月にリリースされた Angular v20 には派手な新機能はありませんでしたが、実はスタイルガイドが大きく更新されました。
この記事では、スタイルガイドに注目して v19 からの変更点を見ていきたいと思います！
!「v19 からの変更点」としていますが、v19 より前のバージョンでは細かい修正はありつつもほぼ変わっていませんでした。

v20 ではセクション分けから内容まで大きく変わっているため、v20 前後での変更点として見ていただければと思います！

 どう変わったかの概要v19 では「Style 01-01」のようにナンバリングがされていましたが、v20 では普通のセクション分けでの記述に変わりました。
また、Angular 固有のものではない、プログラミング・TypeScript のベストプラクティスは、ガイドから削除されています。

（TypeScript に関しては、Google TypeScript Style Guide を見るようにリンクが追加されています。）
その他、古かったガイドや、冗長なガイドなどもなくなり、かなりスッキリした印象です。

 更新についてv19 と v20 のスタイルガイドを比較して、ざっと、

変わらないもの・変わったもの・追加されたもの・削除されたもの

に分けてみました。
※ 厳密に同じ意味ではなくてもほぼ同じであれば 変わらないもの としている部分もあります🙇

 変わらないガイド変わらないのでサラッと流します
ブートストラップコードは src 直下の main.ts にしてください
アプリケーションのコードは src フォルダ内に含めてください

components や directices,  services のようなフォルダにまとめるのではなく、機能別にフォルダを分けてください
関連するファイルはフォルダに分けましょう
ファイル名の単語は dash-case にしてください
テストファイル名は .spec.ts で終わってください
TypeScript のクラス名とファイル名は対応させてください
TypeScript、テンプレート、スタイルのファイル名は同じ名前にしてください

@Component の selector は dash-case にしてください[1]
接頭語を使うことを推奨しています（ng 以外で）


@Output や output のイベント名で、すでに定義されているものや on prefix はつけないでください[1:1]

@Directive の selector は lowerCamelCase にしてください

@Pipe の name は lowerCamelCase を、クラス名には name を UpperCamelCase にして Pipe の接尾語をつけてください[1:2]
ライフサイクル型（ngOnInit など）を implements で使ってください
テンプレート内に過度に複雑なロジックを書くのは避けてください
コンポーネント、ディレクティブの中身は表示に関連するものに重点をおいてください

 変更になったガイドv19 と v20 で違いがあったガイドです

 コンポーネントで属性セレクタを使う場合具体的には以下のようなとき
v20 で挙げられていた例
// https://angular.dev/guide/components/selectors#when-to-use-an-attribute-selector
@Component({
  selector: 'button[yt-upload]',
   ...
})
export class YouTubeUploadButton { }
v19
Consider：コンポーネントは属性セレクタではなくタグ名で使ってください
v19 の例 では Avoid（避けましょう）となっています
v19 では Avoid の例として紹介
// https://v19.angular.dev/style-guide#example-16
/* avoid */
@Component({
  selector: '[toHeroButton]',
  templateUrl: './hero-button.component.html',
})
export class HeroButtonComponent {}
v20
属性セレクタ名を使う場合はハイフン区切りにしてください
「属性セレクタではなく」という表記はなくなり、「使う場合は」に変わっていることから、使うことを避ける必要はなくなっていそうでした。

aria-label の有効活用もできる と書いてあることからも、ネガティブな表現ではなくなったと捉えて良さそうです。
ただ、命名規則がもともと Directive に似せた lowerCamelCase だったのが、dash-case にするよう明記されました。

 プロパティの記述場所プロパティの記述場所に関して少しだけ変更がありました。
v19
Consider：@Input, @Output は同じところにまとめるとよいです
v20
Angular 特有のプロパティ（inject, input, output など）は関数定義の前に持ってきてください
対象が、@Input, @Output だけから「Angular 特有のプロパティ」に変更され、まとめるとよい という表記から「関数定義の前に」と場所も含めて明記されました
特有のプロパティなので、@Input や @Output だけでなく signal 系の input computed なども対象になると思われます。

 【大きな変更】 接尾語に関する話v19
Do：ファイル名のタイプは . で区切ってください

Do： .component,.service  などの慣例的な名前を使用してください

Do：接尾語 Component, Service などをつけてください（ファイル名と同じく）

Do：接尾語には Service をつけてください
v20

削除
コンポーネントには Component .component.ts をつけましょう

サービスには Service .service.ts をつけましょう
というところがごっそりなくなっています。
スタイルガイドから無くなっているだけでなく、ng generate で作成されるコンポーネントやサービス、ディレクティブからも接尾語が無くなっていることから、ガイドの変更と捉えて良さそうです。
ただ、この変更は賛否両論があり、ng generate pipe でのパイプの作成でもまだ接尾語がつく（ng cli v20.1.4） 状況なので、もしかすると今後変わる可能性もあるのかなと思っています 🤔

 @Component の host プロパティv19
Consider：host プロパティよりも @HostBinding 等を使ってください
v20

削除
これまでは、@HostBinding を使うことが推奨されていましたが、

シグナル変数では @HostBinding が使えないことから、逆に host プロパティの方を推奨とするように変更されました
参照：Host elements • Angular
host プロパティの型補完も最近で改善されており、昔よりも使い勝手は良くなっていると感じます😄

 追加されたガイドv20 で新たに追加されたガイドです

 Angular とはあまり関係ないけどコーディングのガイドライン的なもの1ファイルには1つのコンセプトにしてください

イベントハンドラの関数名は機能を表すようにしてください（handleClick() ではなく saveUserData() みたいに）

ライフサイクルメソッド（ngOnInit など）の中身は簡潔にしてください（細かい実装は関数に抽出してください）

 inject 関数について明記コンストラクタでのインジェクションより inject 関数を使いましょう
v14 から追加された inject 関数を使うように明記されました

 インラインでのクラス・スタイル指定方法についてngClass, ngStyle よりも class.xxx などを使ってください
読みやすさやパフォーマンスの観点から、個別に指定するほうが良いと追加されました

 アクセス修飾子について・テンプレートからしか使われない変数は protected をつけてください

・input, model, output には readonly をつけてください

 削除されたガイドv19 で記述があったものの、v20 ではなくなっていたガイドです

 プログラミング全般のベストプラクティスだったものDo：データ操作などはサービスにまとめましょう

Consider：コードは400行以内にしましょう

Do：ファイル名は一貫した名前を使用してください

Do：クラス名には一貫した名前を使用してください

Do：サービス名には一貫した名前を使用してください

Do：テンプレート・スタイルが3行より多い場合は別ファイルに分けてください

 TypeScript（JS） のスタイルガイドに関係するものDo：クラス名にはキャメルケースを使用してください

 古くなっていたものDo：inputs, outputs は使わずに @Input 等を使ってください
!ここでいう inputs, outputs はシグナルのことではなく @Component デコレータ内で指定する表記のことです。
@Component({
  selector: 'toh-hero-button',
  template: `<button type="button"></button>`,
  inputs: ['label'],
  outputs: ['heroChange'],
})
export class HeroButtonComponent {
  heroChange = new EventEmitter<any>();
  label: string = '';
}

 冗長だったものConsider：ts に付随のファイル css 等 がある場合はフォルダーを作るとよいです

Do：遅延ロードに関連するファイルは、まとめてフォルダに含めてください
別で「関連するファイルはフォルダに分けましょう」というガイドもあり、そのガイドに含まれていると考えていいと思います

 その他サービス系
Do：サービスはシングルトンとして使ってください

Do：providedIn: 'root' を使いましょう

Do：@Injectable() を使いましょう
@Component での templateUrl, styleUrl などの話
Do：相対パスで使用してください
その他
Avoid：input,output にエイリアスを設定することは避けてください

Do：テンプレートのないロジックがある場合は Directive にしてください

 まとめAngular のスタイルガイドに注目して、v20 での変更点を見てきました。
Angular のスタイルガイドは、コーディング中に迷ったときの指標となるようなガイドも多く、チームでの合意を取るためにも役立つものとなっています。
Angular 使っているけどまだ読んだことないよ、という方はぜひ一度スタイルガイドを読んでみることをオススメします！

 参考・リンクStyle Guide • Angular v20
Style Guide • Angular v19

脚注
スタイルガイドからは記載がなくなっていますが、それぞれのドキュメントページに記述が移動した形になります ↩︎ ↩︎ ↩︎

jig.jp Engineers' BlogPublication

jig.jp のエンジニアたちがアプリ開発などの情報を発信するエンジニアブログです

Angular v20 "スタイルガイド" の変更点まとめ

どう変わったかの概要

更新について

変わらないガイド

変更になったガイド

コンポーネントで属性セレクタを使う場合

プロパティの記述場所

【大きな変更】接尾語に関する話

`@Component` の `host` プロパティ

追加されたガイド

Angular とはあまり関係ないけどコーディングのガイドライン的なもの

`inject` 関数について明記

インラインでのクラス・スタイル指定方法について

アクセス修飾子について

削除されたガイド

プログラミング全般のベストプラクティスだったもの

TypeScript（JS）のスタイルガイドに関係するもの

古くなっていたもの

冗長だったもの

その他

まとめ

参考・リンク

Discussion

どう変わったかの概要

更新について

変わらないガイド

変更になったガイド

コンポーネントで属性セレクタを使う場合

プロパティの記述場所

【大きな変更】 接尾語に関する話

@Component の host プロパティ

追加されたガイド

Angular とはあまり関係ないけどコーディングのガイドライン的なもの

inject 関数について明記

インラインでのクラス・スタイル指定方法について

アクセス修飾子について

削除されたガイド

プログラミング全般のベストプラクティスだったもの

TypeScript（JS） のスタイルガイドに関係するもの

古くなっていたもの

冗長だったもの

その他

まとめ

参考・リンク

Discussion

【大きな変更】接尾語に関する話

`@Component` の `host` プロパティ

`inject` 関数について明記

TypeScript（JS）のスタイルガイドに関係するもの