Ionic Kitchen Sink を Reactで書いてみた。 #ionic

# はじめに

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

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

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

実は、去年（2019年）の10月に正式に React がサポートされました！！
詳しくはこちらの[記事](https://ionicframework.com/blog/announcing-ionic-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 にあるスクリプトを追加するだけです。簡単ですね！

```html
<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">
```

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

```html: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` ファイルで動作させると、次の画面が表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101517/3150d910-ca54-b7fe-0269-4087633b153d.png)


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

https://plnkr.co/edit/pW4VvByLzNh0zIHA?open=lib%2Fscript.js&preview

# Ionic Kitchen Sink for React

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

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

[正式サイト](https://github.com/kozake/docs-demo-react-v5) が一番、React 情報が豊富なのですが、そのサイトにあるこちらの[デモ](https://github.com/ionic-team/docs-demo)は、Stencil（Ionicチームが Web Components を作るために作った新たなフレームワーク）で記述されているので、混乱を招きやすいです。

そのような事もあり、自分の素振りも兼ねて、[デモ](https://github.com/ionic-team/docs-demo)である「Ionic Kitchen Sink」をReactで書き直してみました。
そのコードが、次のリポジトリです。

https://github.com/kozake/docs-demo-react-v5

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

https://ecstatic-perlman-9f3265.netlify.app/

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

<a target="_blank"  href="https://www.amazon.co.jp/gp/product/4863542925/ref=as_li_tl?ie=UTF8&camp=247&creative=1211&creativeASIN=4863542925&linkCode=as2&tag=kozake0a-22&linkId=18a7b323be4dd1b886f8eec464ef51c0"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&MarketPlace=JP&ASIN=4863542925&ServiceVersion=20070822&ID=AsinImage&WS=1&Format=_SL250_&tag=kozake0a-22" ></a><img src="//ir-jp.amazon-adsystem.com/e/ir?t=kozake0a-22&l=am2&o=9&a=4863542925" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />