はじめに

こんにちは、毎日ジメジメして嫌ですね。
いつ梅雨は明けるのだろうか？
コロナ禍のせいであまりお出かけも出来ないので、久しぶりに記事を書いてみました。

最近ではお仕事で React を触ることが多いです。
React、シンプルでいいですね。Angular とはまた別の良さがあります。

ところで、Ionic も React をサポートしているのをご存じですか？
ご存じない？
Ionic 2 は Angular.js、Ionic 3 は Angular をサポートしていたので、「Ionic は Angular でハイブリッドアプリを作るプロダクト」と認識されているかたも多いかもしれません。

実は、去年（2019年）の10月に正式に React がサポートされました！！
詳しくはこちらの記事をどうぞ。

Ionic Core について

では、Angular のサポートが今後は薄くなるの？というと、そうではありません。
Ionic 4 から、Ionic の UI 部品は Web Components として提供されています。
Web Components をざっくり説明すると、「再利用できる独自の HTML タグ」を作れる技術です。そのような UI 部品が、Ionic Core パッケージで提供されています。

この Ionic Core を用いて、Angular や React 向けのパッケージが提供されているのです。ですので、Ionic は、どんなフロントエンドフレームワークでも、Vanilla JS でも動作させることができます。

Ionic on Vanilla JS

では、実際に Vanilla JS のみで Ionicの画面を作成してみましょう。

Ionic Core を導入するには、CDN にあるスクリプトを追加するだけです。簡単ですね！

<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
<link href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css" rel="stylesheet">

サンプルの全ソースコードはこちらです。

index.html

<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>Ionic CDN Sample</title>
    <script
      type="module"
      src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"
    ></script>
    <script
      nomodule
      src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"
    ></script>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css"
    />
    <script>
      openLoading = async () => {
        const loading = document.createElement("ion-loading");
        loading.message = "Please wait...";
        loading.duration = 3000;

        document.body.appendChild(loading);
        await loading.present();

        const { role, data } = await loading.onDidDismiss();
        console.log("Loading dismissed!");
      };
    </script>
  </head>
  <body>
    <ion-app>
      <ion-header>
        <ion-toolbar>
          <ion-title>Ionic CDN Sample</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content>
        <ion-toggle></ion-toggle>
        <ion-button expand="block" onClick="openLoading()">
          Open Loading
        </ion-button>
      </ion-content>
    </ion-app>
  </body>
</html>

このコードをローカルの index.html ファイルで動作させると、次の画面が表示されます。

また、Plnkrなどのサイトでも動作確認ができます。次のサイトで、上のソースコードの動作確認ができます。

Ionic Kitchen Sink for React

とはいえ、React での Ionic 情報が少ないという話を耳にします。サポートされて1年未満なのと、Angular の歴史も長かったことから、まだ React の情報は比較的少ないかもしれません。¹

正式サイトが一番、React 情報が豊富なのですが、そのサイトにあるこちらのデモは、Stencil（Ionicチームが Web Components を作るために作った新たなフレームワーク）で記述されているので、混乱を招きやすいです。

そのような事もあり、自分の素振りも兼ねて、デモである「Ionic Kitchen Sink」をReactで書き直してみました。
そのコードが、次のリポジトリです。

また、それをNetlify にアップしたサイトがこちらです。

React で Ionic アプリを作る際、ここどうすればいいんだろう？って時に参考になればと思います。
あ、因みに Angular で作りたいって方は、こちらに良い書籍があるのでお勧めしておきますね！

僕が過去に書いた Ionic 記事も、全部 Angular ですね。React版も用意しようかなー。 ↩