[Ionic][Vue3][Storybook]IonicでStorybookを使う雛形

たまには真面目に手抜き

作れる技術は多少持ち合わせてるのに、残念なことにアイデアが全然湧いてこない。
どうも体はオジサン・頭脳は残念な、え～すけさんですよ。

スマホアプリをionic＋vue3で作る際に、前の画面が出来てないと画面表示とか出来なくね？みたいなことって有るよね？
ログイン→トップ→画面A-1→画面A-2→画面A-3　見たいな遷移の時に、ログインできてないけどスケジュール上画面A-1～3から作らないとイケないみたいな状況ね。
_{※あっ、このタイミングだとVue関係ないわ。。。}

そんな時にStorybookを使って、とりあえず作ったページを表示するようなものが作れれば、わざわざ前画面の製造を待つことなく同時進行で画面作れんじゃね？という安易な考えで
そんなこんなでとりあえず雛形だけ作ってみる試みです。

まずはこんな環境紹介

• Win11
• Node:22.14.0
• npm:10.9.2
• ionic cliをgloballyでインストール済み
  →npm install -g @ionic/cli
• Storybook:8.6.12

※Nodeのインストールとかnvmとかでの切り替えが面倒くさいなら、DevContainerでNodeの環境を使ってもいいかなと思ってる。

作り方

まず普通にIonicのプロジェクトを作る

ionic startを実行してとりあえずionicのプロジェクトを作成する
→自分はsidemenuをよく利用します。blankから作るの面倒くさいし、tabだけのアプリなんてあまり無いし、だいたいサイドメニューから対象機能に移動するでしょ？

Ionicで使いたいライブラリとかをインストール

今回は状態管理としてpiniaを採用しました。
上で作ったプロジェクトのルートフォルダに移動して以下コマンドを実行
npm install pinia

で、piniaを使えるようにするため、main.tsを修正

main.ts(createApp部分抜粋)

const app = createApp(App)
                .use(IonicVue)
                .use(createPinia())
                .use(router);

Storybookを入れる

上で作ったプロジェクトのルートフォルダに移動して以下コマンドを実行
npx storybook@latest init

そうすると何か色々とプロンプトに出てきて、localhost:6006でアクセス出来るような状態までいってくれる。
→次回起動はpackage.jsonの【storybook】npm run storybookで出来る

とりあえずサンプルで、以下のようなものが有る状態で作成される。

.storybookのpreview.tsを直す

このままだとIonicのスタイルだったりタグだったりスタイルが使えないため、
src/main.tsに定義されている内容をpreview.tsにちょいちょい移動する。

preview.ts

import { IonicVue } from "@ionic/vue";
import type { Preview } from "@storybook/vue3";
import { setup } from "@storybook/vue3";
import { createPinia } from "pinia";

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

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

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

/**
 * Ionic Dark Mode
 * -----------------------------------------------------
 * For more info, please see:
 * https://ionicframework.com/docs/theming/dark-mode
 */

/* @import '@ionic/vue/css/palettes/dark.always.css'; */
/* @import '@ionic/vue/css/palettes/dark.class.css'; */
import "@ionic/vue/css/palettes/dark.system.css";

/* Theme variables */
import "../src/theme/variables.css";

setup((app) => {
  app.use(IonicVue).use(createPinia());
});

const preview: Preview = {
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
  },
};
export default preview;

あとは

src/stories下のファイルなどを修正・追加していけばOKかと（雑

開発・保守の運用フロー的には。。。

画面（routerで遷移する系の画面）を追加する場合

1. viewsに対象機能の画面ファイル追加
2. routerに追加
3. storiesに対象画面のstoryファイルを追加
4. 何か色々とやる（適当

コンポーネント・ダイアログ的なのを追加する場合

1. 対象のコンポーネントやダイアログのファイルを追加
2. storiesに対象画面のstoryファイルを追加
   →対象コンポーネント単体のものや、ダイアログの場合はボタンから起動するような形で作成
3. 何か色々とやる（適当

【何か色々やる】部分をちゃんと書けって話ですが、一旦今回はここまでで（真面目に手抜き