SvelteKitアプリの一部に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行だけです。

SvelteKitの場合は、 app.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 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css" />

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

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

用意するのはこれだけ。簡単ですね。

npm installではじめる

npm installでIonicコンポーネントを追加していきましょう。IonicはSingle Page Applicationで動かす必要があるため、Staticサイトとして構築して、SSRを無効化するようにします。

% npm i -D @sveltejs/adapter-static
% npm remove @sveltejs/adapter-auto

まず、 @sveltejs/adapter-static をインストールして、デフォルトの @sveltejs/adapter-auto と入れ替えましょう。 svelte.config.js の設定を変更します・

- import adapter from '@sveltejs/adapter-auto';
+ import adapter from '@sveltejs/adapter-static'

  /** @type {import('@sveltejs/kit').Config} */
  const config = {
  	  // Consult https://kit.svelte.dev/docs/integrations#preprocessors
	  // for more information about preprocessors
	  preprocess: vitePreprocess(),

	  kit: {
-         adapter: adapter()
+    	  adapter: adapter({
+   		  pages: 'build',
+   		  assets: 'build',
+   		  fallback: 'index.html',
+   		  precompress: false
+   	  })
	  }
};

そして、SSRを無効化します。 src/routes/+layout.js （TSの場合は src/routes/+layout.ts）を作成して、以下の1行をいれます。

export const ssr = false;

これで、Staticページ + SSR無効化の用意ができました。

続いて、 +layout.svelte でIonicのインポートとセットアップを行います。

  <script>
  	  import Header from './Header.svelte';
	  import './styles.css';

+     import { initialize } from '@ionic/core/components';
+	  initialize({});
  </script>

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

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

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

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

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

　これだけではじめることができます。簡単ですね。利用する時は、普通のWeb Componentを扱うように書きます。例えばskelten-textを導入する時には以下のようにします。

+ <ion-skeleton-text animated></ion-skeleton-text>

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

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

おわりに

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

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

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

それではまた！