【Web Components入門】Ionic Frameworkで使えるカスタム要素を学ぼう

再利用性とカプセル化のためのWeb Componentsを基礎から学ぶ 第6回

　再利用性とカプセル化は、Web Componentsという技術の重要なコンセプトでした。これは言い換えると、どこでも使うことができ、所定のインターフェースを守っていれば内部実装を知らなくてもカスタマイズができる、画面部品が提供されうるということです。Ionic Frameworkはまさにその用途にぴったりのライブラリです。今回は、どんな部品が提供されているのかを解説します。

対象読者

• 再利用可能なHTMLやCSSを整備したいJavaScriptエンジニア

前提環境

　筆者の検証環境は以下の通りです。

• macOS Ventura 13.4
• Google Chrome 115.0.5790.170
• @ionic/core 7.3.1

Ionic Frameworkが提供するUI部品群

　前回解説したとおり、Ionic Frameworkはブラウザ技術を用いてモバイルアプリを開発するためのフレームワークです。状態管理のフレームワークとしては、Angularをはじめとして、ReactやVueにも対応していますが、どれを使っても同じUIが表示されます。これは、Web Components製のUI部品をベースにしているためです。このWeb Components製の部品もライブラリとして利用可能なので、本記事ではどんな部品があるのかを解説します。

豊富なUI部品

　まずはIonic FrameworkのUI部品を浅く広く眺めてみましょう。公式ドキュメントにコンポーネント（UI部品）の一覧が列挙されています。

図1：Ionic Frameworkのコンポーネント一覧

　図1で列挙されたコンポーネントは、一般的なGUIアプリケーションを生み出すために十分な多様性を持っています。どれがどんな役割なのか、ただ眺めるだけでは分かりづらいので、本記事では特に使い勝手の良い、次の3つのジャンルに当てはまるコンポーネントを解説します。

• レイアウトを行うためのもの
• データを入力する
• データを表示する

　各ジャンルの主立ったコンポーネントについて解説していきます。