Ionic Angular Quickstart

ようこそ！このガイドでは、Ionic Angular 開発の基本を説明します。開発環境のセットアップ、シンプルなプロジェクトの生成、プロジェクト構造の探索、Ionic コンポーネントの動作方法を学びます。最初の実際のアプリを構築する前に Ionic Angular に慣れるのに最適です。

Ionic Angular とは何か、Angular エコシステムにどのように適合するかの高レベルの概要をお探しの場合は、Ionic Angular の概要を参照してください。

前提条件

始める前に、マシンに Node.js と npm がインストールされていることを確認してください。 次を実行して確認できます：

node -v
npm -v

Node.js と npm がない場合は、こちらから Node.js をダウンロードしてください（npm が含まれています）。

Ionic CLI でプロジェクトを作成

まず、最新のIonic CLIをインストールします：

npm install -g @ionic/cli

次に、次のコマンドを実行して新しいプロジェクトを作成し、実行します：

ionic start myApp blank --type angular

cd myApp
ionic serve

最初のプロンプトで、Standaloneを選択します。

ionic serveを実行すると、プロジェクトがブラウザで開きます。

Explore the Project Structure

Your new app's directory will look like this:

└── src/
    └── app
        ├── app.component.html
        ├── app.component.scss
        ├── app.component.ts
        ├── app.routes.ts
        └── home/
            ├── home.page.html
            ├── home.page.scss
            ├── home.page.spec.ts
            └── home.page.ts

info

以下の例のすべてのファイルパスは、プロジェクトのルートディレクトリを基準にしています。

アプリの構造を理解するために、これらのファイルを見ていきましょう。

View the App Component

The root of your app is defined in app.component.ts:

src/app/app.component.ts

import { Component } from '@angular/core';
import { IonApp, IonRouterOutlet } from '@ionic/angular/standalone';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  imports: [IonApp, IonRouterOutlet],
})
export class AppComponent {
  constructor() {}
}

And its template in app.component.html:

src/app/app.component.html

<ion-app>
  <ion-router-outlet></ion-router-outlet>
</ion-app>

これにより、Ionic のion-appとion-router-outletコンポーネントを使用してアプリケーションのルートが設定されます。ルーターアウトレットは、ページが表示される場所です。

View Routes

Routes are defined in app.routes.ts:

src/app/app.routes.ts

import { Routes } from '@angular/router';

export const routes: Routes = [
  {
    path: 'home',
    loadComponent: () => import('./home/home.page').then((m) => m.HomePage),
  },
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full',
  },
];

ルート URL（/）にアクセスすると、HomePageコンポーネントが読み込まれます。

View the Home Page

The Home page component, defined in home.page.ts, imports the Ionic components it uses:

src/app/home/home.page.ts

import { Component } from '@angular/core';
import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
  imports: [IonHeader, IonToolbar, IonTitle, IonContent],
})
export class HomePage {
  constructor() {}
}

And the template, in the home.page.html file, uses those components:

src/app/home/home.page.html

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title> Blank </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Blank</ion-title>
    </ion-toolbar>
  </ion-header>

  <div id="container">
    <strong>Ready to create an app?</strong>
    <p>
      Start with Ionic
      <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a>
    </p>
  </div>
</ion-content>

これにより、ヘッダーとスクロール可能なコンテンツ領域を持つページが作成されます。2 番目のヘッダーは、コンテンツの上部にあるときに表示される折りたたみ可能な大きなタイトルを示し、スクロールダウンすると最初のヘッダーの小さなタイトルを表示するために縮小されます。

詳細情報

Ionic レイアウトコンポーネントの詳細については、Header、Toolbar、Title、Contentのドキュメントを参照してください。

Ionic コンポーネントを追加

より多くの Ionic UI コンポーネントで Home ページを強化できます。たとえば、ion-contentの最後にButtonを追加します：

src/app/home/home.page.html

<ion-content>
  <!-- existing content -->

  <ion-button>Navigate</ion-button>
</ion-content>

Then, import the IonButton component in home.page.ts:

src/app/home/home.page.ts

import { IonButton, IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';

@Component({
  // ...existing config...
  imports: [IonButton, IonContent, IonHeader, IonTitle, IonToolbar],
})

Add a New Page

To add a new page, generate it with the CLI:

ionic generate page new

A route will be automatically added to app.routes.ts.

In new.page.html, you can add a Back Button to the Toolbar:

src/app/new/new.page.html

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/"></ion-back-button>
    </ion-buttons>
    <ion-title>new</ion-title>
  </ion-toolbar>
</ion-header>

And import IonBackButton and IonButtons in new.page.ts:

src/app/new/new.page.ts

import { IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';

@Component({
  // ...existing config...
  imports: [IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar],
})

ion-back-buttonは、前のページへのナビゲーション、または履歴がない場合は/へのナビゲーションを自動的に処理します。

Navigate to the New Page

To navigate to the new page, update the button in home.page.html:

src/app/home/home.page.html

<ion-button [routerLink]="['/new']">Navigate</ion-button>

Then, import RouterLink in home.page.ts:

src/app/home/home.page.ts

import { RouterLink } from '@angular/router';

@Component({
  // ...existing config...
  imports: [IonButton, IonContent, IonHeader, IonTitle, IonToolbar, RouterLink],
})

info

Angular の Router サービスを使用してナビゲーションを実行することもできます。詳細については、Angular Navigation ドキュメントを参照してください。

新しいページにアイコンを追加

Ionic Angular にはIoniconsがプリインストールされています。ion-iconコンポーネントのnameプロパティを設定することで、任意のアイコンを使用できます。次のアイコンをnew.page.htmlに追加します：

src/app/new/new.page.html

<ion-content>
  <!-- existing content -->

  <ion-icon name="heart"></ion-icon>
  <ion-icon name="logo-ionic"></ion-icon>
</ion-content>

You'll also need to import and register these icons in new.page.ts:

src/app/new/new.page.ts

// ...existing imports...
import { IonBackButton, IonButtons, IonContent, IonHeader, IonIcon, IonTitle, IonToolbar } from '@ionic/angular/standalone';
import { addIcons } from 'ionicons';
import { heart, logoIonic } from 'ionicons/icons';

@Component({
  // ...existing config...
  imports: [IonBackButton, IonButtons, IonContent, IonHeader, IonIcon, IonTitle, IonToolbar],
})

Then, update the constructor of the page to use addIcons:

src/app/new/new.page.ts

export class NewPage implements OnInit {
  constructor() {
    addIcons({ heart, logoIonic });
  }

  ngOnInit() {}
}

または、app.component.tsでアイコンを登録して、アプリ全体で使用することもできます。

詳細については、Icon ドキュメントとIonicons ドキュメントを参照してください。

コンポーネントメソッドを呼び出す

コンテンツ領域を下部にスクロールできるボタンを追加しましょう。

Update the ion-content in your new.page.html to include a button and some items after the existing icons:

src/app/new/new.page.html

<ion-content [fullscreen]="true" #content>
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">new</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-icon name="heart"></ion-icon>
  <ion-icon name="logo-ionic"></ion-icon>

  <ion-button (click)="scrollToBottom()">Scroll to Bottom</ion-button>

  <!-- Add lots of content to make scrolling possible -->
  @for (item of items; track $index; let i = $index) {
  <ion-item>
    <ion-label>Item {{ i + 1 }}</ion-label>
  </ion-item>
  }
</ion-content>

In the component, add the ViewChild import, the new component imports and define the scrollToBottom function:

src/app/new/new.page.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import {
  IonBackButton,
  IonButton,
  IonButtons,
  IonContent,
  IonHeader,
  IonIcon,
  IonItem,
  IonLabel,
  IonTitle,
  IonToolbar,
} from '@ionic/angular/standalone';
import { addIcons } from 'ionicons';
import { heart, logoIonic } from 'ionicons/icons';

@Component({
  // ...existing config...
  imports: [
    IonBackButton,
    IonButton,
    IonButtons,
    IonContent,
    IonHeader,
    IonIcon,
    IonItem,
    IonLabel,
    IonTitle,
    IonToolbar,
  ],
})
export class NewPage implements OnInit {
  @ViewChild(IonContent) content!: IonContent;

  items = Array.from({ length: 50 }, (_, i) => i);

  constructor() {
    addIcons({ heart, logoIonic });
  }

  ngOnInit() {}

  scrollToBottom = () => {
    this.content.scrollToBottom(300);
  };
}

Ionic コンポーネントのメソッドを呼び出すには：

1. コンポーネントのViewChild参照を作成します
2. コンポーネントインスタンスでメソッドを直接呼び出します

各コンポーネントの利用可能なメソッドは、API ドキュメントのMethodsセクションで見つけることができます。

デバイスで実行

Ionic のコンポーネントは、iOS、Android、PWA のどこでも動作します。モバイルにデプロイするには、Capacitorを使用します：

ionic build
ionic cap add ios
ionic cap add android

ネイティブプロジェクトを IDE で開きます：

ionic cap open ios
ionic cap open android

詳細については、Capacitor の Getting Started ガイドを参照してください。

さらに探索

このガイドでは、Ionic Angular アプリの作成、ナビゲーションの追加、ネイティブビルド用の Capacitor の導入の基本をカバーしました。さらに深く掘り下げるには、以下を確認してください：

最初のアプリを構築

Ionic Angularとネイティブデバイス機能を使用して実際のPhoto Galleryアプリを構築します。

Angularドキュメント

公式Angularドキュメントから、Angularのコアコンセプト、ツール、ベストプラクティスについて詳しく学びます。

ナビゲーション

Angular Routerを使用してIonic Angularアプリでルーティングとナビゲーションを処理する方法を発見します。

コンポーネント

美しいアプリを構築するためのIonicの豊富なUIコンポーネントライブラリを探索します。

テーマ設定

Ionicの強力なテーマ設定システムを使用してアプリの外観と操作性をカスタマイズする方法を学びます。

Capacitorドキュメント

Capacitorを使用してネイティブデバイス機能にアクセスし、アプリをiOS、Android、Webにデプロイする方法を探索します。