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行だけです。
Qwikの場合は、 header.tsx に追記してください。
<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デフォルトのスタイルシートを読み込みます。これには以下のすべてが含まれています。
用意するのはこれだけ。簡単ですね。
おわりに
この設定だけで、以下のすべてのコンポーネントを利用することができるようになります。しかもUIコンポーネントはLazy Loadingなので、少ないコストで！！
本稿では「一部にIonicコンポーネントを使う」としましたので、これだけだとQwikのRouterをハックしたプッシュ遷移などはできませんが、それでもIonicのコンポーネントのすばらしさと使いやすさを体験してもらえると思います。
ぜひQwikプロジェクトのUIコンポーネントのひとつにIonicを候補として検討してもらえればと思います。
それではまた！