Ionic Vue クイックスタート

Ionic Frameworkとは

まず、ここに来たばかりの人を歓迎します！Ionic Frameworkは、 iOS, Android, Electron, Web上で動作するアプリを構築するための、無償でオープンソースのコンポーネントライブラリです。使い慣れたテクノロジ(HTML、CSS、JavaScript)を使用してアプリケーションを一度作成したら、任意のプラットフォームに展開することができます。

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

このガイドでは、Ionic Framework特有の機能を含め、VueとIonic Frameworkの基本について説明します。Vueに精通している方は、ガイドを楽しみ、Ionic Frameworkについて新しいことを学んでください。どちらにも詳しくない方はご安心ください!このガイドでは、基本的なことを説明し、アプリケーションを起動して実行するのに十分な情報を提供します。

Ionic CLIを使ったプロジェクト新規作成

はじめに、Ionic CLIの最新版をインストールしましょう。

npm install -g @ionic/cli@latest

これによって使えるようになった、グローバルコマンド ionic によって、Ionic Frameworkと他の依存関係を持つVueプロジェクトを作成することができます。新しいプロジェクトを作成するには、次のコマンドを実行します。

ionic start myApp blank --type vue
cd myApp

これで、 ionic serve を実行することによって、プロジェクトをブラウザで実行することができます。

Vueコンポーネントの確認

アプリケーションのベースは src ディレクトリにあり、メインのエントリポイントは main.ts になります。エディタでプロジェクトを開き、main.ts を確認すると、次のように表示されます:

import { createApp } from 'vue';
import { IonicVue } from '@ionic/vue';

import App from './App.vue'
import router from './router';

const app = createApp(App)
  .use(IonicVue)
  .use(router);

router.isReady().then(() => {
  app.mount('#app');
});

CopyCopied

ここでは何が実行されているのでしょうか。最初の4行は依存するパッケージを呼び出しています。 createApp 関数を使用してVueアプリケーションを初期化していますが、引数に指定している IonicVue は、Vue環境でIonic Frameworkを使用できるプラグインです。

3番目にimportされているのはIonicのルートコンポーネントで、単純に App と名付けられています。これはアプリが起動したら最初に呼び出されるVueコンポーネントで、Vueアプリの起動プロセスで使われます。

4番目のimportでは、ルーティング設定を取得します。これについては、後で詳しく説明します。

App.vue を開くと、次のように表示されます:

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

<script lang="ts">
import { IonApp, IonRouterOutlet } from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'App',
  components: {
    IonApp,
    IonRouterOutlet
  }
});
</script>

CopyCopied

scriptに書かれているimportのグループを分解してみていきましょう。

import { IonApp, IonRouterOutlet } from '@ionic/vue';

CopyCopied

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

次に、テンプレートを見てみましょう。

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

CopyCopied

すべてのVueコンポーネントには <template> が必要です。その中に IonApp と IonRouterOutlet のコンポーネントを配置します。

最後に、コンポーネント定義を見てみましょう:

import { IonApp, IonRouterOutlet } from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'App',
  components: {
    IonApp,
    IonRouterOutlet
  }
});

CopyCopied

Vue 3では、ツールのサポートを改善するために、コンポーネントを作成する際に、新しく defineComponent 関数を提供しています。最初にコンポーネントの名前を定義し、次にテンプレートで使用するコンポーネントを指定します。

ここで指定できる引数は、 methods, setup などです。これはVueのComposition API Documentationドキュメントで説明されています。

ここで疑問に思われるかもしれませんが、コンポーネントへのパスを記述するときに @ を使用するのはなぜでしょうか。 @ 記号は、 src ディレクトリからの相対パスを記述するためのショートカットです。これは、複数のフォルダにあるファイルでコンポーネントを参照する場合に便利です。 '../../../views/Home.vue' の代わりに、単に '@/views/Home.vue' とすることもできます。

コンポーネントのスタイル

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

現在、 Home コンポーネントはこうなっています:

Vue home component

<template>
  <ion-page>
    <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/jp/docs/components">UI Components</a></p>
      </div>
    </ion-content>
  </ion-page>
</template>

<script lang="ts">
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'Home',
  components: {
    IonContent,
    IonHeader,
    IonPage,
    IonTitle,
    IonToolbar
  }
});
</script>

<style scoped>
#container {
  text-align: center;

  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

#container strong {
  font-size: 20px;
  line-height: 26px;
}

#container p {
  font-size: 16px;
  line-height: 22px;

  color: #8c8c8c;

  margin: 0;
}

#container a {
  text-decoration: none;
}
</style>

CopyCopied

最初に確認した App コンポーネントと同様に、特定のIonic Frameworkコンポーネントのインポート、Vueからのインポート、Vueコンポーネント、そして私たちのコンポーネントに合わせたスタイルがあります。

スタイルに scoped を指定していることに注目してください。つまり、ここで記述するスタイルは、このコンポーネントにのみ適用されます。これは、スタイルがコンポーネントから漏れてアプリケーションの他の部分に影響するのを防ぐのに役立ちます。Ionic Vueアプリケーションでは、 scoped のついたスタイルを使用することを強くお勧めします。

IonPage はすべてのページ(route/URLを持つコンポーネント)の基本コンポーネントであり、header, title, contentコンポーネントなど、フルスクリーンコンポーネントの一般的な構成要素がいくつか含まれています。

独自のページを作成する場合は、 IonPage をそのルート・コンポーネントにすることを忘れないでください。 IonPage をルートコンポーネントにすることは、Ionic Frameworkコンポーネントが依存するベースCSSを提供するだけでなく、トランジションが適切に動作することを保証するために重要です。

IonHeader は、ページの先頭に配置されるコンポーネントです。これは、フレックスボックスベースのレイアウトを処理する以外には、単独ではあまり機能しません。これは、IonToolbar や IonSearchbarなどのコンポーネントを保持するためのものです。

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

現在のコンテンツは比較的シンプルで実際のアプリで使えるものは何も入っていないので、それを変えましょう。

Note: 簡潔に表記するために、関数宣言や他のコンポーネントからのインポート文など、コンポーネントの繰り返し部分を除外します。

<template>
  <ion-page>
    ...
    <ion-content>
      <ion-list>
        <ion-item>
          <ion-checkbox slot="start"></ion-checkbox>
          <ion-label>
            <h1>Create Idea</h1>
            <ion-note>Run Idea By Brandy</ion-note>
          </ion-label>
          <ion-badge color="success" slot="end">
            5 Days
          </ion-badge>
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-page>
</template>

CopyCopied

ここでは、 IonContent に IonList と IonItem コンポーネントを追加します。ここでは IonItem を中心に説明します。

<ion-item>
  <ion-checkbox slot="start"></ion-checkbox>
  <ion-label>
    <h1>Create Idea</h1>
    <ion-note>Run Idea By Brandy</ion-note>
  </ion-label>
  <ion-badge color="success" slot="end">
    5 Days
  </ion-badge>
</ion-item>

CopyCopied

コードを見ると、 slot という特殊な属性があります。これは、レンダリング時に IonCheckbox を配置する場所を IonItem に知らせるためのキーです。これはVue APIではなく、Web標準APIです。また、Vue 2のslot APIとは異なります。

Ionic Frameworkの別のコンポーネントであるFAB（フローティング・アクション・ボタン）を見てみましょう。FABは、アプリケーションの他の部分よりも上位のメイン・アクションを提供する優れた方法です。このFABには、FAB、FABボタンおよびアイコンの3つのコンポーネントが必要です。

<ion-content>
  <ion-list>
  ...
  </ion-list>

  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
    <ion-fab-button>
      <ion-icon :icon="add"></ion-icon>
    </ion-fab-button>
  </ion-fab>

</ion-content>

<script>
import { add } from 'ionicons/icons';

...

export default defineComponent({
  name: 'Home',
  ...,
  setup() {
    return {
      add
    }
  }
})
</script>

CopyCopied

メインの IonFab では、縦方向と横方向の属性（vertical/horizontal）で表示位置を設定しています。また、slot属性を使用して、レンダー位置を"fixed"に設定します。これにより、 IonContent 内のスクロール可能なコンテンツの外側でレンダリングするよう IonFab に指示します。

次に、これにクリックハンドラを設定します。FABボタンをクリックすると、新しいページ(この後、すぐに作成します)に移動します。これを行うには、Vue RouterのナビゲーションAPIにアクセスする必要があります。これは useRouter パッケージから vue-router をインポートすることで実現できます。

import { add } from 'ionicons/icons';

<ion-content>
  <ion-list>
  ...
  </ion-list>

  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
    <ion-fab-button @click="() => router.push('/new')">
      <ion-icon :icon="add"></ion-icon>
    </ion-fab-button>
  </ion-fab>

</ion-content>

<script>
import { add } from 'ionicons/icons';

...

export default defineComponent({
  name: 'Home',
  components: {
    IonContent,
    IonFab,
    IonFabButton,
    IonHeader,
    IonIcon,
    IonPage,
    IonTitle,
    IonToolbar
  },
  setup() {
    return {
      router: useRouter(),
      add
    }
  }
});
</script>

CopyCopied

このコンポーネントファイルでは、 useRouter 関数をインポートしています。この関数を呼び出すと、コンポーネントからルーティングを操作することができます。つまり、Vue Routerから履歴APIにアクセスし、新しいrouteをナビゲーションスタックにプッシュすることができます。利用方法は IonFabButton にクリックイベントを追加し、router.push を呼び出すだけです。この場合、私たちは /new というrouteにナビゲーションします。

<ion-fab-button @click="() => router.push('/new')">
  ...
</ion-fab-button>

CopyCopied

新しいrouteを作成する

これで、アプリケーション内をナビゲートするための環境が整ったので、新しいコンポーネントを作成し、新しいrouteをルーターの宣言に追加する必要があります。 router/index.ts を開いて、 new のrouteを追加します。

import { createRouter, createWebHistory } from '@ionic/vue-router';
import { RouteRecordRaw } from 'vue-router';
import Home from '@/views/Home.vue'
import NewItem from '@/views/NewItem.vue';

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',
    name: 'Home',
    component: Home
  },
  {
    path: '/new',
    name: 'NewItem',
    component: NewItem
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

CopyCopied

routeに /new を追加したので、該当するコンポーネントとなる NewItem を作成します。これは views/NewItem.vue に作成します。

新しく NewItem.vue ファイルを作成します。

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-back-button></ion-back-button>
        </ion-buttons>
        <ion-title>New Item</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content></ion-content>
  </ion-page>
</template>

<script>
import {
  IonBackButton,
  IonButtons,
  IonContent,
  IonHeader,
  IonPage,
  IonTitle,
  IonToolbar
} from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'NewItem',
  components: {
    IonBackButton,
    IonButtons,
    IonContent,
    IonHeader,
    IonPage,
    IonTitle,
    IonToolbar
  }
});
</script>

CopyCopied

ここでの内容は、 Home コンポーネントに似ています。異なるのは、 IonBackButton コンポーネントです。これは、前のrouteに戻るために使用されます。簡単でしょ?わかりました、でもページをリロードしたらどうなりますか?

この場合、インメモリ内から履歴は失われるため、戻るボタンは表示されません。この問題を解決するには、 default-href 属性値を、履歴がない場合にナビゲートするURLに設定します。

<ion-back-button default-href="/home"></ion-back-button>

CopyCopied

これで、アプリの履歴がない場合も、home routeに戻るための戻るボタンを表示することができます。

アイコンの追加

Ionic Vueには Ionicons がプリインストールされています。開発者がアプリケーションで使用できるオプションはいくつかあります。

ダイナミックインポート

Ioniconsを使用する場合は、ダイナミックインポートを使用することをお勧めします。これには、選択したアイコンを ionicons パッケージからインポートし、テンプレートに渡すことが含まれます:

<template>
  <ion-page>
    <ion-content>
      <ion-icon :icon="heart"></ion-icon>
    </ion-content>
  </ion-page>
</template>

<script>
import { heart } from 'ionicons/icons';
import {
  IonContent,
  IonPage,
} from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'Icon',
  components: {
    IonContent,
    IonPage,
  },
  setup() {
    return { heart }
  }
});
</script>

CopyCopied

ここでやっていることを詳しく説明しましょう。まず、 heart のアイコンを ionicons/icons からインポートします。これにより、アイコンの適切なSVGデータがロードされます。

次に、 setup メソッドで heart データをテンプレートに渡します。

最後に、 icon プロパティーを使用してアイコンデータを ion-icon コンポーネントに渡します。

開発者は、モードに応じて異なるアイコンを設定することもできます:

<template>
  <ion-page>
    <ion-content>
      <ion-icon :ios="logoApple" :md="logoAndroid"></ion-icon>
    </ion-content>
  </ion-page>
</template>

<script>
import { logoAndroid, logoApple } from 'ionicons/icons';
import {
  IonContent,
  IonPage,
} from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'Icon',
  components: {
    IonContent,
    IonPage,
  },
  setup() {
    return { logoAndroid, logoApple }
  }
});
</script>

CopyCopied

Note: これらのアイコン名は、読み込み時にはキャメルケースで読み込む必要があります。

グローバルインポート

もう1つのオプションは、特定のアイコンをグローバルにインポートすることです。アプリケーションを起動するたびにアイコンが強制的にロードされ、アプリケーションの初期チャンク・サイズが大きくなる可能性があるため、通常は推奨しません。

とはいえ、特定のアイコンをグローバルにロードすることに意味があるユースケースがあるかもしれません:

main.ts

import { addIcons } from 'ionicons';
import { heart } from 'ionicons/icons';

addIcons({
  'heart': heart 
});

CopyCopied

Home.vue

<template>
  <ion-page>
    <ion-content>
      <ion-icon icon="heart"></ion-icon>
    </ion-content>
  </ion-page>
</template>

<script>
import {
  IonContent,
  IonPage,
} from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'Home',
  components: {
    IonContent,
    IonPage,
  }
});
</script>

CopyCopied

main.ts で addIcons 関数を利用すると、アイコンをグローバルに登録し、キーとして文字列で指定することができます。この場合、 Home コンポーネントでキーでアイコンを参照します。

ネイティブアプリとしてビルド

UIコンポーネントやナビゲーションなど、Ionic Vueアプリの基本的な部分はすでに完成しています。Ionic Frameworkのコンポーネントの素晴らしいところは、iOS、Android、PWAを含むどこでも動作することです。モバイル、デスクトップ、その他にもデプロイするために、Ionicのクロスプラットフォームライブラリ Capacitor を使用することができます。一貫性のあるWebに特化したAPIセットを提供することで、 Web標準をサポートするプラットフォーム上の豊富なネイティブデバイス機能にアクセスしながら、アプリケーションを可能な限りWeb標準に近づけることが可能になります。

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

ionic integrations enable capacitor

次に、プロジェクトをビルドしてから利用するプラットフォームを選択します:

ionic build
ionic cap add ios
ionic cap add android

iOSとAndroidのプロジェクトを開いたり、ビルド、実行するのに、ネイティブのIDE(Xcode と Android Studio)を使います:

ionic cap open ios
ionic cap open android

詳細はこちらをご覧ください。

次に、すべての利用可能なAPIs を確認します。Camera API を含むすばらしい機能があります。以下の数行のコードでカメラ機能を実装することができます￥:

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-title>Ionic Blank</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content class="ion-padding">
      <img :src="photo" />
      <ion-button @click="takePhoto()">Take Photo</ion-button>
    </ion-content>
  </ion-page>
</template>

<script lang="ts">
import {
  IonButton,
  IonContent,
  IonHeader,
  IonPage,
  IonTitle
} from '@ionic/vue';
import { defineComponent, ref } from 'vue';
import { Plugins, CameraResultType } from '@capacitor/core';
const { Camera } = Plugins;

export default defineComponent({
  name: 'Home',
  components: {
    IonButton,
    IonContent,
    IonHeader,
    IonPage,
    IonTitle
  },
  setup() {
    const imageSrc = ref('');
    const takePhoto = async () => {
      const image = await Camera.getPhoto({
        quality: 90,
        allowEditing: true,
        resultType: CameraResultType.Uri
      });

      imageSrc.value = image.webPath;
    }

    return {
      photo: imageSrc,
      takePhoto
    }
  }
})
</script>

CopyCopied

次にすること

このガイドでは、Ionic Vueアプリの作成の基本、基本的なナビゲーションの追加、ネイティブアプリを構築する方法としてのCapacitorの紹介について説明した。VueとCapacitorを使って完全なIonic Frameworkアプリを構築するには、我々の First App guide をご覧ください。

Ionic Frameworksのコンポーネントの詳細については、 component API pages を参照してください。Vueの詳細については、 Vue Docs を参照のこと。ネイティブ機能の構築を続けるには、Capacitor docs を参照してください。

アプリ構築をお楽しみください! 🎉