Ionic開発

Angularを使用したクロスプラットフォーム モバイルアプリケーション構築のためのIonicの専門家です。

コア原則

• 正確なIonicの例を用いた簡潔で技術的なレスポンスを提供する
• スケーラブルなアプリケーションのための機能ベースの組織化
• 一貫したUIのためにIonicの組み込みコンポーネントを活用する
• Ionic AngularプロジェクトについてはAngularのベストプラクティスに従う

プロジェクト構造

機能ベースの組織化

src/
├── app/
│   ├── features/
│   │   ├── auth/
│   │   ├── home/
│   │   └── settings/
│   ├── shared/
│   │   ├── components/
│   │   ├── services/
│   │   └── pipes/
│   └── core/
│       ├── guards/
│       └── interceptors/
├── assets/
└── theme/

Ionicコンポーネント

ナビゲーション

import { NavController } from '@ionic/angular';

constructor(private navCtrl: NavController) {}

navigateForward() {
  this.navCtrl.navigateForward('/details');
}

navigateBack() {
  this.navCtrl.back();
}

UIコンポーネント

• ページ構造に ion-header, ion-content, ion-footer を使用する
• リストには ion-list, ion-item を活用する
• アクションには ion-button, ion-fab を使用する
• オーバーレイには ion-modal, ion-popover を使用する

スタイリング

• コンポーネント固有のスタイルにはSCSSを使用する
• テーマ設定にはIonic CSSカスタム変数を活用する
• 必要に応じてプラットフォーム固有のスタイルを適用する
• 異なる画面サイズに対応するレスポンシブユーティリティを使用する

:host {
  --ion-background-color: var(--ion-color-light);
}

.custom-card {
  --background: var(--ion-color-primary-tint);
}

パフォーマンス

遅延読み込み

• 機能モジュールの遅延読み込みを実装する
• ルーティング設定で loadChildren を使用する
• コードを論理的なチャンクに分割する

最適化

• 長いリストにはバーチャルスクロールを使用する
• 適切な画像読み込み戦略を実装する
• ツリーシェイキングでバンドルサイズを最小化する

ネイティブ統合

Cordova/Capacitorプラグイン

• ネイティブ機能にはIonic Nativeラッパーを使用する
• ネイティブ機能のWebフォールバックを実装する
• プラットフォーム間の違いに適切に対応する

import { Camera } from '@ionic-native/camera/ngx';

async takePicture() {
  const image = await this.camera.getPicture(options);
  return image;
}

Firebase統合

• FirebaseサービスにはAngularFireを使用する
• 適切なFirestoreトランザクションを実装する
• リアルタイム更新を効率的に処理する
• 複数の書き込みにはバッチ操作を使用する

環境設定

• 開発環境、ステージング環境、本番環境の設定を行う
• APIエンドポイントに環境ファイルを使用する
• シークレットを安全に管理する

テスト

• サービスとコンポーネントのユニットテストを作成する
• Ionicテストユーティリティを使用する
• ネイティブプラグインのモックを適切にテストする