# テーマとプラグインにおけるJSネイティブクラス構文への移行
**URL:** https://meta.discourse.org/t/moving-to-js-native-class-syntax-in-themes-and-plugins/356588
**Category:** Development
**Tags:** dev-news
**Created:** [2025 年 3 月 10 日午前 11:11 UTC](https://meta.discourse.org/t/moving-to-js-native-class-syntax-in-themes-and-plugins/356588 "2025-03-10T11:11:58Z")
**Posts on this page:** 2
**Page:** 1
### Author:  [@david](https://meta.discourse.org/u/david)
#### Post date: [2025 年 3 月 10 日午前 11:11 UTC](https://meta.discourse.org/t/moving-to-js-native-class-syntax-in-themes-and-plugins/356588/1 "2025-03-10T11:11:58Z")
ここ数年、Ember の従来の `.extend({ ... })` 構文から、`class extends Foo {...}` のようなネイティブクラス構文への移行を進めてきました。
従来の構文は技術的にはまだサポートされていますが、IDE や Prettier 3.0 を含む最新の JavaScript ツールは、従来のオブジェクトリテラルベースの構文でのデコレータをサポートしていません。推奨されるリンティング設定の最新バージョンでは、従来の構文を使用すると次のようなエラーが表示されます。
**ESLint** : `error Native JS classes should be used instead of classic classes ember/no-classic-classes`
**Prettier** : `SyntaxError: Decorators cannot be used to decorate object literal properties`
そのため、まだ更新していない場合は、テーマやプラグインのコードを新しい構文に更新する時期が来ています。更新する必要があるのは、主に新しいクラス定義と `modifyClass` の呼び出しの 2 つです。
## クラス定義
作業の多くは [ember-native-class-codemod](https://github.com/ember-codemods/ember-native-class-codemod) を使用して行うことができます。テーマ/プラグイン リポジトリの中から、次を実行します。
`NO_TELEMETRY=true npx ember-native-class-codemod@4.1.1 --no-classic-decorator **/*.js`
これにより、ファイルが処理され、新しいネイティブクラス構文に変換されます。場合によっては、手動で介入するように求められます。コードの変更は常に確認してください。完璧ではありません。
多くのテーマ/プラグインを更新する必要がある場合は、[mass-pr スクリプト](https://github.com/discourse/mass-pr/blob/main/scripts/js-native-class.rb) が役立つかもしれません。
## modifyClass の呼び出し
`modifyClass` の呼び出し内でデコレータを使用している場合は、新しいネイティブクラスベースの構文を使用する必要があります。詳細については、[ドキュメント](https://meta.discourse.org/t/using-modifyclass-to-change-core-behavior/262064) を参照してください。これらの変更を行う際は、記載されている制限事項を念頭に置いてください。
---
### Author:  [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [2025 年 4 月 13 日午後 6:37 UTC](https://meta.discourse.org/t/moving-to-js-native-class-syntax-in-themes-and-plugins/356588/2 "2025-04-13T18:37:58Z")
このトピックを見つけようと思ったきっかけとなったエラーは、[Prettier complains that @discourseComputed cannot be used to decorate literal properties](https://meta.discourse.org/t/prettier-complains-that-discoursecomputed-cannot-be-used-to-decorate-literal-properties/271141) で議論されていました。
```plaintext
SyntaxError: Decorators cannot be used to decorate object literal properties. (9:3)
```
編集：ああ。ここに書かれていますが、検索では見つからず、AIは1年前のトピックに誘導しました。
そして残念ながら、コントローラーとルートでは魔法が効きましたが、コンポーネントは修正されませんでした。