Ionic React クイックスタート入門

Ionic Framework とは？

まず初めに、初めての方、ようこそ！Ionic は、iOS、Android、Electron、Web で実行されるアプリを構築するための、無料でオープンソースのコンポーネントライブラリです。使い慣れたテクノロジー（HTML、CSS、JavaScript）を使用して一度アプリを作成し、あらゆるプラットフォームにデプロイできます。

UI コンポーネントに加えて、Ionic は新しいアプリを作成するためのコマンドラインツールと、サポートするさまざまなプラットフォームへのデプロイを提供します。

このガイドでは、React と Ionic の両方の基礎と、Ionic 固有の機能について説明します。React に精通している場合は、このガイドをお楽しみいただき、Ionic について新しいことを学びましょう。どちらにも慣れていない場合でも、心配ありません！このガイドでは、基礎を網羅し、アプリを実行するのに十分な情報を提供します。

Ionic CLI を使用したプロジェクトの作成

開始するには、Ionic CLI の最新バージョンをインストールしましょう。

npm install -g @ionic/cli

ここから、グローバルコマンド `ionic` を使用して、Ionic とその他の依存関係を含む React プロジェクトを作成できます。新しいプロジェクトを作成するには、次のコマンドを実行します。

ionic start myApp blank --type=react
cd myApp

ここでは、`ionic serve` を実行して、ブラウザでプロジェクトを実行します。

React コンポーネントの概要

アプリのベースは `src` ディレクトリにあり、メインのエントリポイントは `index.tsx` です。プロジェクトをコードエディタで開き、`src/index.tsx` を開くと、次のようになります。

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

では、何が起きているのでしょうか？最初の 3 行は、いくつかの依存関係を取り込んでいます。最初は React 自体です。これにより、JSX と呼ばれる HTML に似た構文でコンポーネントを作成できます。JSX については後で詳しく説明します。

2 番目のインポートは ReactDOM です。`ReactDOM.render` メソッドは、コンポーネントを取得して指定された DOM ノードにレンダリングするための、ブラウザ/DOM 固有の方法です。

最後のインポートは、アプリのルートコンポーネントで、単に `App` と名付けられています。これは私たちの最初の React コンポーネントであり、React アプリのブートストラッププロセスで使用されます。

`App.tsx` を開くと、次のようになります。

import React from 'react';
import { Route } from 'react-router-dom';
import { IonApp, IonRouterOutlet } from '@ionic/react';
import { IonReactRouter } from '@ionic/react-router';
import Home from './pages/Home';

/* Core CSS required for Ionic components to work properly */
import '@ionic/react/css/core.css';

const App: React.FC = () => (
  <IonApp>
    <IonReactRouter>
      <IonRouterOutlet>
        <Route path="/home" component={Home} exact={true} />
        <Route exact path="/" render={() => <Redirect to="/home" />} />
      </IonRouterOutlet>
    </IonReactRouter>
  </IonApp>
);

一見すると、多くのことが起こっているように見えるため、最初のインポートのグループから分解してみましょう。

import React from 'react';
import { Route } from 'react-router-dom';
import { IonApp, IonRouterOutlet } from '@ionic/react';
import { IonReactRouter } from '@ionic/react-router';
import Home from './pages/Home';

`index.tsx` と同様に、まず JSX を使用するために React をインポートする必要があります。

次のインポートは `react-router-dom` からです。Route をインポートしています。これは、アプリの URL をレンダリングするコンポーネントと一致させる方法です。

ReactRouter の後、Ionic の最初のインポートがあります。React でコンポーネントを使用するには、最初にインポートする必要があります。そのため、Ionic の場合、Button や Card を使用したいときはいつでも、インポートに追加する必要があります。App コンポーネントの場合、`IonApp`、`IonRouterOutlet`、`IonReactRouter` のみを使用しています。

`IonReactRouter` は、ReactRouter の BrowserRouter コンポーネントをラップするコンポーネントです。いくつかの違いはありますが、BrowserRouter とほぼ同じように動作します。これらの違いについては、React ナビゲーションドキュメントで詳しく説明しています。

最後の重要なインポートは `Home` コンポーネントのインポートです。これは、アプリ内で移動できるコンポーネントです。ナビゲーションについては後で説明します。

CSS のインポートは、パディング、タイポグラフィなど、Ionic のユーティリティスタイルを取り込んでいます。

すべてのインポートを確認した後、React コンポーネントを初めて見てみましょう。

const App: React.FC = () => (
  <IonApp>
    <IonReactRouter>
      <IonRouterOutlet>
        <Route path="/home" component={Home} exact={true} />
        <Route exact path="/" render={() => <Redirect to="/home" />} />
      </IonRouterOutlet>
    </IonReactRouter>
  </IonApp>
);

この React コンポーネントは、アプリの初期ルーティングを設定し、アニメーションとレイアウトのためのいくつかのコア Ionic コンポーネント（IonRouterOutlet と IonApp）を含みます。注目すべき点は、React ではデータバインディングを行うために、値が波括弧（`{}`）で渡されることです。そのため、`Route` コンポーネントでは、`component` の値を前の `Home` コンポーネントに設定できます。これは、React がその値が文字列ではなく、コンポーネントへの参照であることを認識する方法です。

注記

ここで重要なのは、これらがすべて標準の React DOM ライブラリであるということです。つまり、カスタム統合レイヤーやトランスパイルステップはありません。

スタイル付きコンポーネント

さて、`App` はここで変更するものがほとんどありません。コンテナコンポーネントの基本的な例です。ルーターロジックが設定されているため、その役割は、指定された URL ルートに一致するコンポーネントをレンダリングすることだけです。すでに 1 つのコンポーネント/ルーターが設定されているため、`Home` コンポーネントを変更しましょう。

現在、`Home` コンポーネントは次のようになっています。

import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
import React from 'react';

const Home: React.FC = () => {
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Ionic Blank</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent className="ion-padding">
        The world is your oyster.
        <p>
          If you get lost, the{' '}
          <a target="_blank" rel="noopener" href="https://ionic.dokyumento.jp/docs/">
            docs
          </a>{' '}
          will be your guide.
        </p>
      </IonContent>
    </IonPage>
  );
};

最初に開始した `App` コンポーネントと同様に、特定の Ionic コンポーネントのインポート、React のインポート、そして React コンポーネント自体があります。

`IonPage` はすべてのページ（ルート/URL を持つコンポーネント）の基本コンポーネントであり、ヘッダー、タイトル、コンテンツコンポーネントなど、フルスクリーンコンポーネントの一般的な構成要素を含んでいます。

注記

独自のページを作成する場合は、`IonPage` をルートコンポーネントにすることを忘れないでください。`IonPage` をルートコンポーネントにすることは重要です。なぜなら、トランジションが適切に機能することを保証し、Ionic コンポーネントが依存する基本的な CSS を提供するのに役立つからです。

`IonHeader` は、その名前が示すように、ページの上部に存在することを目的としたコンポーネントです。`IonHeader` 自体は、フレックスボックスベースのレイアウトの処理を除いて、ほとんど何も行いません。`IonToolbar` や `IonSearchbar` などの他のコンポーネントを保持することを目的としています。

`IonContent` は、その名前が示すように、ページのメインコンテンツ領域です。ユーザーが操作するスクロール可能なコンテンツと、アプリで使用できるスクロールイベントを提供する役割があります。

現在のコンテンツは比較的単純ですが、実際のアプリで使用できるものは何も含まれていないため、それを変更しましょう。

注記

簡潔にするために、関数宣言や他のコンポーネントのインポートステートメントなど、コンポーネントの繰り返し部分を省略しています。

<IonPage>
  ...
  <IonContent>
    <IonList>
      <IonItem>
        <IonCheckbox labelPlacement="end" justify="start">
          <h1>Create Idea</h1>
          <IonNote>Run Idea by Brandy</IonNote>
        </IonCheckbox>
        <IonBadge color="success" slot="end">
          5 Days
        </IonBadge>
      </IonItem>
    </IonList>
  </IonContent>
</IonPage>

ここでは `IonContent` に `IonList` とより複雑な `IonItem` コンポーネントを追加しています。`IonItem` を見てみましょう。これはここの中心的な部分です。

<IonItem>
  <IonCheckbox labelPlacement="end" justify="start">
    <h1>Create Idea</h1>
    <IonNote>Run Idea by Brandy</IonNote>
  </IonCheckbox>
  <IonBadge color="success" slot="end">
    5 Days
  </IonBadge>
</IonItem>

コードを見ると、`slot` という特別な属性があります。これは、`IonItem` がレンダリング時に `IonBadge` をどこに配置するかを知らせるための鍵となります。これは React API ではなく、Web 標準 API であり、多くの Ionic Framework コンポーネントで使用されています。（スロットの詳細については、こちらの MDN ドキュメントを参照してください。）

Ionicのもう一つのコンポーネント、FABを見てみましょう。フローティングアクションボタンは、アプリの他の部分から際立たせた主要なアクションを提供する良い方法です。このFABには、FAB、FABボタン、アイコンの3つのコンポーネントが必要です。

import { add } from ‘ionicons/icons’;
…

<IonContent>
  <IonList>
  ...
  </IonList>

  <IonFab vertical="bottom" horizontal="end" slot="fixed">
    <IonFabButton>
      <IonIcon icon={add} />
    </IonFabButton>
  </IonFab>

</IonContent>

メインのIonFabでは、vertical属性とhorizontal属性を使用して配置を設定しています。また、slot属性でレンダリング場所を「fixed」に設定しています。これにより、IonFabはIonContent内のスクロール可能なコンテンツの外側にレンダリングされます。

次に、これに対するクリックハンドラーを接続しましょう。ボタンをクリックしたときに、新しいページに移動したいと考えています（これは後で作成します）。そのためには、React RouterのuseHistoryフックAPIにアクセスする必要があります。ありがたいことに、useHistoryフックはreact-routerパッケージからインポートできるので、簡単に実現できます。

import { add } from 'ionicons/icons';
import { useHistory } from 'react-router';
...
const Home: React.FC<RouteComponentProps> = () => {
  const history = useHistory();
  return (
    <IonPage>
      <IonHeader>...</IonHeader>
      <IonContent>
        <IonList>...</IonList>
        <IonFab vertical="bottom" horizontal="end" slot="fixed">
          <IonFabButton onClick={() => history.push('/new')}>
            <IonIcon icon={add} />
          </IonFabButton>
        </IonFab>
      </IonContent>
    </IonPage>
  );
}
export default Home;

コンポーネントの宣言では、RouteComponentProps型（react-routerからインポート）のpropsを渡しています。このpropsオブジェクトにより、React Routerの履歴APIにアクセスできるため、ナビゲーションスタックに新しいルートをプッシュできます。IonFabButtonにクリックハンドラーを追加し、props.history.pushを呼び出して新しいルートを渡すことができます。この例では、newに移動します。

<IonFabButton onClick={() => props.history.push('/new')} >

新しいルートの作成

アプリ内を移動するための準備が整ったので、新しいコンポーネントを作成し、新しいルートをルーターの宣言に追加する必要があります。App.tsxファイルを開いて、新しいルートを追加しましょう。

...
import Home from './pages/Home';

import NewItem from './pages/NewItem';
...
const App: React.FC = () => {
  const isAuthed = true;
  return (
    <IonApp>
      <IonReactRouter>
        <IonRouterOutlet>
          <Route path="/home" component={Home} />
          <Route path="/new" component={NewItem} />
          <Redirect exact from="/" to="/home" />
        </IonRouterOutlet>
      </IonReactRouter>
    </IonApp>
  );
}
export default App;

ルーターに/newルートのエントリが追加されたので、必要なコンポーネントNewItemを作成します。これはsrc/pages/NewItem.tsxに存在します。

現時点では、NewItem.tsxにプレースホルダーコンテンツを入力しましょう。

import { IonBackButton, IonButtons, IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
import React from 'react';

const NewItem: React.FC = () => {
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonButtons slot="start">
            <IonBackButton />
          </IonButtons>
          <IonTitle>New Item</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent></IonContent>
    </IonPage>
  );
};
export default NewItem;

注記

各ビューにはIonPageコンポーネントを含める必要があります。これがないと、ページ遷移が正しく動作しません。詳細については、IonPageドキュメントを参照してください。

ここでの内容は非常にシンプルで、Homeコンポーネントと似ているはずです。新しいのはIonBackButtonコンポーネントです。これは前のルートに戻るために使用されます。非常に簡単ですね？では、ページをリロードした場合はどうでしょうか？

この場合、メモリ内の履歴が失われるため、戻るボタンが表示されなくなります。これを解決するために、履歴がない場合に移動するURLをdefaultHref属性値に設定できます。

return (
  <IonPage>
    <IonHeader>
      <IonToolbar>
        <IonButtons slot="start">
          <IonBackButton defaultHref="/home" />
        </IonButtons>
        <IonTitle>New Item</IonTitle>
      </IonToolbar>
    </IonHeader>
    <IonContent />
  </IonPage>
);

ここでは、リロード時にアプリの履歴が存在しない場合、ホームルートに戻ることができます。

アイコンの追加

Ionic Reactには、(https://ionic.io/ionicons/)がプリインストールされています。必要なのは、ioniconsパッケージから選択したアイコンをインポートし、iconプロパティを介してIonIconコンポーネントに渡すだけです。

import React from 'react';
import { IonButton, IonContent, IonIcon } from '@ionic/react';
import { camera } from 'ionicons/icons';

export const IconExample: React.FC = () => {
  <IonContent>
    <IonButton>
      <IonIcon icon={camera} />
      Take Picture
    </IonButton>
  </IonContent>;
};

Reactの場合、アイコン名を文字列としてではなく、インポートされたSVG参照を渡すことに注意してください。

開発者は、モードに基づいて異なるアイコンを設定することもできます。

import React from 'react';
import { IonButton, IonContent, IonIcon } from '@ionic/react';
import { logoAndroid, logoApple } from 'ionicons/icons';

export const IconExample: React.FC = () => {
  <IonContent>
    <IonButton>
      <IonIcon ios={logoApple} md={logoAndroid} />
    </IonButton>
  </IonContent>;
};

ネイティブアプリの構築

これで、いくつかのUIコンポーネントとナビゲーションを含むIonic Reactアプリの基本ができました。Ionicのコンポーネントの優れた点は、iOS、Android、PWAなど、どこでも動作することです。モバイルなどに展開するには、IonicのクロスプラットフォームアプリランタイムCapacitorを使用します。これは、アプリが可能な限りWeb標準に準拠しながら、それをサポートするプラットフォームで豊富なネイティブデバイス機能にアクセスできるようにする、一貫性のあるWeb中心のAPIセットを提供します。

ネイティブ機能の追加は簡単です。まず、プロジェクトにCapacitorを追加します。

ionic integrations enable capacitor

次に、プロジェクトをビルドし、選択したプラットフォームを追加します。

ionic build
ionic cap add ios
ionic cap add android

標準のネイティブIDE（XcodeとAndroid Studio）を使用して、iOSとAndroidプロジェクトを開き、ビルドし、実行します。

ionic cap open ios
ionic cap open android

詳細については、こちらを参照してください。

次に、使用可能なすべてのAPIを確認してください。Camera APIなど、優れた機能がいくつかあります。数行のコードで写真撮影機能を実装できます。

import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonButton } from '@ionic/react';
import React, { useState } from 'react';
import { Plugins, CameraResultType } from '@capacitor/core';

const Home: React.FC = () => {
  const { Camera } = Plugins;
  const [photo, setPhoto] = useState();
  const takePhoto = async () => {
    const image = await Camera.getPhoto({
      quality: 90,
      allowEditing: true,
      resultType: CameraResultType.Uri,
    });
    setPhoto(image.webPath);
  };
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Ionic Blank</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent className="ion-padding">
        <img src={photo} />
        <IonButton onClick={takePhoto}>Take Photo</IonButton>
      </IonContent>
    </IonPage>
  );
};

export default Home;

今後のステップ

このガイドでは、Ionic Reactアプリの作成、基本的なナビゲーションの追加、およびネイティブアプリの構築方法としてのCapacitorの紹介について説明しました。ReactとCapacitorを使用して完全なIonicアプリの構築をさらに深く掘り下げるには、最初のアプリガイドに従ってください。

Ionicのコンポーネントの詳細については、コンポーネントAPIページを参照してください。Reactの詳細については、Reactドキュメントを確認してください。ネイティブ機能の構築を続けるには、Capacitorドキュメントを参照してください。

楽しいアプリ開発を！🎉