Ionicは、HTML・CSS・JavaScriptで書いた単一のコードベースから、iOSやAndroidのネイティブ品質アプリとPWAを作るためのUIツールキットです。中核はStencilJSで実装されたWeb Componentsで、READMEに明記された通りAngular・Vue・Reactの3フレームワーク向けラッパーパッケージが用意されています。本リポジトリは、そのコンポーネント実装とテスト一式を含むモノレポです。
core/src/componentsの下に、ion-accordionやion-action-sheetなどコンポーネントごとのフォルダがあり、TSXファイルとSCSSファイルが対になっています。SCSSはaccordion.ios.scssとaccordion.md.scssのように分かれていて、iOS風デザインとMaterial Design風デザインを切り替える仕組みです。core/package.jsonのbuildスクリプトはnpm run build.cssでSassをCSSに変換した後、stencil build --es5 --docs-json dist/docs.jsonを実行し、dist・components・hydrate・loaderという出力を作ります。package.jsonのexportsフィールドには、importとrequireの両方、さらにhydrate用やloader用の入口が個別に定義されています。Angular・Vue・React向けのラッパーは、devDependenciesにある@stencil/angular-output-target、@stencil/vue-output-target、@stencil/react-output-targetというStencilの公式出力ターゲットから生成されます。品質保証はJestの単体テスト(accordion.spec.tsなど)、Playwrightのe2eテスト(accordion.e2e.ts)、見た目のスクリーンショット比較という3段構成です。スクリーンショットはiOS・Material Designの2デザイン、LTR・RTLの2方向、Chrome・Firefox・Safariの3ブラウザごとに保存されています。eslint-plugin-custom-rulesという自作ESLintプラグインも用意され、Playwrightのawait忘れなどコード規約を機械的に縛っています。CIは.github/workflows以下に、フレームワークごとのビルド・テストactionが分割定義されています。
- STEP 01
core/ディレクトリでnpm installを実行すると、@stencil/core、Playwright、Jestなど多数のdevDependenciesがダウンロードされ、package-lock.jsonの規模通り時間がかかります。
- STEP 02
npm run build.cssを実行すると、sass --embed-sources --style compressed src/css:./cssでSassがCSSに変換され、続いてcleancssで圧縮されます。
- STEP 03
npm run buildを実行すると、stencil build --es5 --docs-json dist/docs.jsonが走り、core/dist・components・hydrate・loaderの各フォルダにWeb Componentsの出力が生成されます。
- STEP 04
core/Dockerfileを使ってmcr.microsoft.com/playwright公式イメージ上でビルドすると、core/playwright.config.tsに基づくe2eテストをホスト環境差なく実行できます。
- STEP 05
各コンポーネントのtest配下のindex.html(例accordion/test/a11y/index.html)をビルド後のdist経由で開くと、ion-accordion-groupなど実コンポーネントの挙動をブラウザで直接確認できます。
- STEP 06
npm run eslintを実行すると、eslint-plugin-custom-rulesによる独自ルール(no-component-on-ready-methodなど)の違反がコード上で検出されます。
実行して手に入るのは、@ionic/coreのビルド出力(dist・components・hydrate・loaderフォルダ)と、それに対応するSassビルド済みCSSです。Angular・Vue・React向けパッケージのソースも同梱されていますが、実際のアプリに組み込むにはpackages/*/README.mdに書かれた各フレームワーク固有の手順が別途必要です。
core/package.jsonのengines指定はnode 16以上ですが、typescript依存が^6.0.0と先進的で、周辺ツールの組み合わせ次第でインストールエラーが起きる可能性があります。
本リポジトリはフレームワーク本体のソースで、READMEのQuickstartはionicframework.com上のCLI手順を指しています。このリポジトリ単体をnpm installしただけでは「動くアプリ」は得られません。
e2eテストはPlaywrightの特定バージョン(core/Dockerfile記載のv1.64.0)での画面キャプチャに依存します。ローカルのOSやブラウザが違うとスクリーンショット比較が崩れやすいです。
既にIonicアプリを運用していて、ion-accordionなどの内部実装を読んだりコントリビュートしたい開発者、あるいはStencilベースのWeb Componentsライブラリの設計(TSXとSCSSの対構成、Playwrightスナップショットテストの組み方)を参考にしたいエンジニアに向いています。README記載のパッケージ構成、core/package.jsonのビルドスクリプト、実際のコンポーネントフォルダとテストファイルの構成が一貫しているため、インストールせずに読むだけでもリポジトリの実体と品質保証の仕組みは判断できます。