Ionic Framework
Ionic Framework（アイオニックフレームワーク）は、Ionic社が開発している、モバイルアプリ開発フレームワークです。
モバイルアプリといえば、AndroidであればKotlin言語（Jetpack Compose）、iOSアプリであればSwift言語（Swift UI）でUIを組むのが一般的です。一方で、Ionic FrameworkはWeb技術に寄り添った開発体験のために、ブラウザ技術を流用してUIを表示しています。そのため、HTML、CSS、JavaScriptを用いてモバイルアプリを開発できるのです。
また、Ionic Frameworkはモバイルアプリのよくある画面部品を広く押さえたデザインシステムを構築しており、Web Components仕様で振る舞いとスタイルを整備したUIライブラリを構築しています。本連載で紹介してきたLitではなく、Ionic社が開発したStencilというフレームワークでWeb Componentsの画面部品を実装してありますが、最終的にはWeb Componentsの仕様にしっかりと則ったカスタム要素が提供されるので、HTMLファイルやLit製のコンポーネントからでも問題なく利用できます。
Ionic Frameworkを用いたモバイルアプリ開発では、Web Components製のカスタム要素を、さらにAngularやReact、Vueといったフレームワークで加工したものを利用することで、大規模なアプリケーションの状態管理にも耐えられるようになっています。
また、Capacitorというモバイルアプリエンジンの上でこれらを動かすことで、Webの技術で作られた画面群がAndroidアプリやiOSアプリとして動作できるようになっています。
さて、このようにさまざまな技術を組み合わせてモバイルアプリを組み上げるIonic Frameworkですが、デザインシステムとしてのエッセンスはWeb Components部分に凝縮されています。簡単なWebサイトを作るだけなら、Web Components製のUIライブラリとしてIonic Frameworkを利用するだけでも、十分な価値があるのです。
本記事では、デザインシステムがWeb Components実装に落とし込まれたUIライブラリとしてのIonic Frameworkに着目し、実際にブラウザ上で動かしてみます。もし、本記事をきっかけにIonic FrameworkのUIが気に入った場合は、もう少し学習の範囲を広げて、Node.jsやNPM、Angularなどを学び、モバイルアプリをストアに公開できるところまで進んでみてください。
はじめてのIonic Framework
それでは、実際にIonic Frameworkの画面部品をブラウザに表示してみましょう。Ionic Frameworkは、通常はNode.jsのパッケージマネージャであるNPMを用いてセットアップすることが想定されています。
しかし、本連載ではNPMを用いずにブラウザの機能のみでライブラリを利用したいので、script要素へCDN（コンテンツ配信ネットワーク）サービスのURLを指定して、ライブラリを読み込む方式をとります。CDNを利用する場合のインストール方法は、こちらのドキュメントに記載されています。
まずは簡単な例で、動作することを確認してみましょう。リスト1のHTMLファイルを用意して、何らかのWebサーバーに設置し、ブラウザで表示してみてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ionic FrameworkでリッチなUIを扱う</title>
<!-- (1) Ionic Frameworkのライブラリ読み込み (ES Modules) -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
<!-- (2) Ionic Frameworkのライブラリ読み込み (ES Modules非対応ブラウザ向け) -->
<script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
<!-- (3) Ionic Frameworkのスタイルシート読み込み -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css" />
</head>
<body>
<!-- (6) Ionic Frameworkのコンポーネントを使う -->
<ion-app>
<!-- (7) ヘッダー -->
<ion-header>
<ion-toolbar>
<ion-title>Ionic FrameworkでリッチなUIを扱う</ion-title>
</ion-toolbar>
</ion-header>
<!-- (8) コンテンツ -->
<ion-content class="ion-padding">
<!-- (9) テキストを表示 -->
<ion-text color="primary">color=primaryのテキストです</ion-text>
<!-- (10) ボタンを表示 -->
<ion-button>
<!-- (11) ボタンの左端にアイコンを表示 -->
<ion-icon slot="start" name="add-circle"></ion-icon>
追加
</ion-button>
</ion-content>
</ion-app>
<!-- (4) Ioniconsのライブラリ読み込み (ES Modules) -->
<script type="module" src="https://cdn.jsdelivr.net/npm/ionicons/dist/ionicons/ionicons.esm.js"></script>
<!-- (5) Ioniconsのライブラリ読み込み (ES Modules非対応ブラウザ向け) -->
<script nomodule src="https://cdn.jsdelivr.net/npm/ionicons/dist/ionicons/ionicons.js"></script>
</body>
</html>
リスト1をブラウザに表示すると、図3のような表示になります。
セットアップは簡単です。公式ドキュメントの通りに、 <head>要素の中に（1）（2）のJavaScript読み込みと（3）のCSS読み込みを記載し、 <body>要素の末尾に（4）（5）のJavaScript読み込みを記載するだけです。
（1）（2）はWeb Componentsで作成した画面部品群の読み込み、（3）は個別のカスタム要素に隠蔽しなかった汎用的なスタイルの読み込みで、この3つは必ず記載する必要があります。（4）（5）は、Ionic Frameworkの独自のアイコン集であるIonicons（アイオニコンズ）を利用したい場合に読み込みます。
Ioniconsの利用はオプションではありますが、利用することでUIが華やかになるので、ぜひ利用すると良いでしょう。
（6）の <ion-app>と、その内側が、Ionic Frameworkの提供するカスタム要素による実装になります。（7）の<ion-header>は画面上部に固定したUIを配置するためのレイアウト用カスタム要素です。実際にUIとして表示されている「影がついたヘッダー」は、その直下に指定した<ion-toolbar>によって表示されています。（8）の<ion-content>がWebサイトの本文やWebアプリのメインコンテンツを表示する部分です。
今回は（3）で読み込んだCSSを適用してpaddingを付けるためにion-paddingのクラス指定を行いました。（9）はテキスト表示です。デザインシステムのテーマ機能で定義したカラーパレットの色の名前をcolor属性に指定することで、文字の色を変えることができます。使用できる色の名前は、公式ドキュメントのテーマに関するページの「配色」の項で確認できます。
執筆時点では、図4のような色が使用できました。
（9）ではcolor="primary"を指定したので、青い色でテキストが描画されたわけですね。（10）では<ion-button>を使用してボタンを表示しています。内側には直接テキストだけを書いても使用できますが、（11）のように内部に<ion-icon>を配置することで、アイコン付きのボタンにして、視認性を向上することもできます。
お手元で表示して、ボタンを押してみるとわかりますが、しっかりとクリック時のフィードバックのアニメーションもついており、アプリを作っているような気分にさせてくれます。
Web Componentsであることを確認する
動作環境のセットアップ自体は、ほぼ<script>要素を配置しただけで終わってしまったので、まるで魔法のようにも見えてしまいますね。しかし、これは間違いなく、これまで学んできたWeb Componentsの仕組みで作られたカスタム要素の組み合わせによるものなのです。
試しに、ブラウザの開発者ツールを開いてみてください。ボタンのDOM要素を調べてみると、図5のように、Web Componentsの構成要素であるShadow DOMによる描画が行われていることがわかります。
また、カスタム要素内のシャドウホスト（擬似クラス:hostによって表現される）に紐づいたスタイルも確認できますね。これは間違いなく、本連載で扱ってきたWeb Componentsの仕組みによって作られていることがわかります。
