Reactアプリの一部にIonicコンポーネントを使う方法

Ionic Frameworkは「モバイルアプリのUIをWebで再現できるUIフレームワーク」として多くのアプリ開発の現場で利用されているのは広く知られているところです。Ionic teamがIonic Conferenceの時にだした次のConference Appをみると、その再現度の高さに気づけるかと思います。

しかしWeb開発の現場において、モバイルアプリ開発はニーズのごく一部に過ぎません。ストアに配信するアプリではなく、ブラウザのみで配信することも多いでしょう。そういう案件によっては、Human Interface GuidelinesやMaterial Designに沿って、プッシュ遷移・ポップアップ遷移までは求めることはありません。

しかし、近年モバイルUIとWeb UIの間の境はほとんどなくなってきており、Web UIにおいてもToastやAction Sheet、Floating Actionといったモバイル起源のUIを使うことも増えてきました。そこで、本記事ではアプリの一部にIonicコンポーネントを使う方法をご紹介しましょう。IonicのUIコンポーネントはすべてがLazyLoadingになっているので、追加してもアプリ立ち上げ時に必要なbundleサイズにはほとんど影響しません！

はじめ方

scriptタグではじめる

おそらく現代でフロントエンドを行うほとんどの人にニーズはありませんが、まずは懐かしのscriptタグではじめる方法を整理しましょう。

Ionicは導入検討をすばやく行うために、CDN「jsdelivr」を使ってコンポーネントの配信をしています。これをタグで読み込むだけで使い始めることができます。あなたのプロジェクトに追加するのは、以下のたったの3行だけです。

<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" />

1行目は[type=module]ですので、ES Module対応ブラウザのためのものです。2行目はnomoduleですので非対応ブラウザのためのスクリプトを読み込みます。まぁ、こうやって対応ブラウザをみると2行目はもう必要ない気もしますが、公式ドキュメントに残っているので案内しておきます。

そして、3行目はIonicデフォルトのスタイルシートを読み込みます。これには以下のすべてが含まれています。

用意するのはこれだけ。簡単ですね。これはWeb Componentsとして読み込みますので、IonicのドキュメントでもReact向けのComponentをimportする方法ではなく、ただのDOMと同じように扱います。例えば、 ion-datetime を取り扱う場合は以下のように書きます。

<ion-datetime></ion-datetime>

JSX内でもこのような表記になることご注意ください。

npm installではじめる

IonicはReact用のラッパーライブラリを提供しているので、Web Componentsとしてではなく、React Componetsとしても取り扱うことができます。まずはインストールしてみましょう。

% npm install @ionic/react

続いて、必要なCSSをReactプロジェクトに追加します。 index.tsx に以下のCSSをインポートしてください。

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

/* Basic CSS for apps built with Ionic */
import '@ionic/react/css/normalize.css';
// import '@ionic/react/css/structure.css';
import '@ionic/react/css/typography.css';

/* Optional CSS utils that can be commented out */
import '@ionic/react/css/padding.css';
import '@ionic/react/css/float-elements.css';
import '@ionic/react/css/text-alignment.css';
import '@ionic/react/css/text-transformation.css';
import '@ionic/react/css/flex-utils.css';
import '@ionic/react/css/display.css'

今回はReact Routerを使っていないので、 structure.css のインポートはしません（hydrateの関係で display:none になってしまうため）

また、IonicのスタイルをLazy Loadingで読み込むために以下のコードも index.tsx に追加します。

import { setupIonicReact } from '@ionic/react';
setupIonicReact();

　これだけではじめることができます。簡単ですね。利用する時は、普通のReact Componentを扱うように、取り扱うComponetsをimportしてから扱います。例えば、create-react-appでつくったアプリで、skelten-textを導入する時には以下のようにします。

+ import { IonSkeletonText } from '@ionic/react';

  function App() {
    return (
      <div className="App">
+       <IonSkeletonText animated={true} ></IonSkeletonText>

これだけでアニメーションのついたスケルトンテキストが表示できました。簡単ですね。

（このgifアニメーションは複数のskelten-textを組み合わせています）。

おわりに

この設定だけで、以下のすべてのコンポーネントを利用することができるようになります。しかもUIコンポーネントはLazy Loadingなので、少ないコストで！！

本稿では「一部にIonicコンポーネントを使う」としましたので、これだけだとReactのRouterをハックしたプッシュ遷移などはできませんが、それでもIonicのコンポーネントのすばらしさと使いやすさを体験してもらえると思います。

ぜひReactプロジェクトのUIコンポーネントのひとつにIonicを候補として検討してもらえればと思います。

それではまた！