2024年1月最新のIonic Angular構成をチェックする
2023年は、IonicもAngularも大きく進化した年でした。最新バージョンにアップデートすると自動的に追随する仕様とは異なり、多くの進化はOptionalで提供されているので、キャッチアップしないとプロダクトは古い書き方のままになってしまいます。そこで、2024年1月時点でのIonic Angularの構成をチェックしてみましょう。
2024年1月時点でのIonic Angularの構成
1. Ionic New Form Syntax
昨年4月にリリースされたIonicのNew Form Syntaxです。以前は、 ion-input 等のForm Syntaxは ion-label とセットに使う必要がありましたが、New Form Syntaxでは、 ion-label は不要になり、 label 属性でラベルを定義するようになりました。
旧Syntax
<ion-item fill="outline">
<ion-label>Email:</ion-label>
<ion-input placeholder="hi@ionic.io"></ion-input>
<div slot="helper">Please enter a valid email address</div>
</ion-item>
新Syntax
<ion-input
label="Email:"
placeholder="hi@ionic.io"
fill="outline"
helper-text="Please enter a valid email address"
></ion-input>
Ionic v7以降のバージョンでは、以前の書き方もサポートされておりConsoleに警告がでるだけですが、今後（v8を目処に）廃止される可能性が高いので、新Syntaxに移行しておくことをおすすめします。より詳しくはこちらをお読みください。
2. AngularのStandalone構成
Angular v17からデフォルトでStandalone構成が導入されました。 ng generate @angular/core:standalone で自動移行できるので、すでに多くの方がプロジェクトの構成を変更しているのではないでしょうか。Moduleを学ぶ必要がなくなり、より直感的にアプリを構築できるようになりましたね。 より詳しくはこちらをお読みください。
3. IonicのStandalone構成
@ionic/angular も、AngularのStandalone構成に合わせて、Standalone構成に対応しました。自動アップデート用に、npx @ionic/angular-standalone-codemods コマンドが用意されておりますので、Ionic AngularをStandalone構成に移行することをおすすめします。より詳しくはこちらをお読みください。
4. AngularのControl Flowの導入
今まで、Angularの制御構文は、 ng-container を用いたり、 *ngIf を使うDOMベースのものでしたが、DOMと混在しやすく見通しが悪い一面がありました。そういった開発者体験を改善するために、新しいControl Flowが導入されました。
<!-- 以前の書き方 -->
<app-dashboard *ngIf="user.loggedIn; else loginBlock" />
<ng-template #loginBlock><app-login /></ng-template>
<!-- Control Flow -->
@if (user.loggedIn) {
<app-dashboard />
} else {
<app-login />
}
https://zenn.dev/carimatics/articles/angular_2023_builtin_control_flow
自動アップデート用に ng generate @angular/core:control-flow のコマンドが提供されているので、自動アップデートが可能です。より詳しくは以下をご覧ください。
まとめ
古い書き方のまま走ってしまうと、いつかは大きな変更が必要になってしまいます。都度追随をしていくことで、大きな変更を避け、プロダクトをメンテナンスしていきましょう。 Ionic Angularは、Angularの最新機能を積極的に取り入れているので、Ionic Angularを使っている場合は、Angularの最新機能にも目を通しておくことをおすすめします。
Discussion