Svelte×Ionicでモバイルアプリのプロジェクトを作成してみた

RyotaF

Published in

nextbeat-engineering

Mar 15, 2023

はじめに
みなさん初めまして
株式会社ネクストビートでアプリエンジニアとして働いている福本と申します。
現在は主にiOS / Androidのアプリ開発を担当しています。

現在ネクストビートでは、SvelteとIonicを使用したモバイルアプリ開発を行なっています。
私は今まではネイティブのみで開発をしていたため、モバイルアプリ開発でSvelteを使用する方法が気になりました。

そこで、SvelteとIonicを使って開発できるプロジェクトを作成し、シミュレーターで動かしてみました。

プロジェクトを作成

まずはプロジェクトを作成します。

npm create vite example - app -- --template svelte-ts

Ionic導入

Ionic cliをインストールします。

npm install -g @ionic/cli

導入したIonicの初期化コマンドを実行します。

ionic init "Example App" --type=custom

ネイティブプロジェクトの追加

iOSプロジェクトを追加します。

ionic cap add ios

Androidプロジェクトを追加します。

ionic cap add android

webDirを変更

capacitor.config.ts内の webDirをdistに変更します。

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'io.ionic.starter',
  appName: 'Example App',
  webDir: 'dist',　←ここを 'www' から変更する
  bundledWebRuntime: false
};

export default config;

アプリを起動

フレームワーク選択時に customを選択しているためrunコマンド実行前に、package.jsonのscriptsに下記を追加します。

{ 
  "scripts" :  { 
    "ionic:build" :  "npm run build" , 
    "ionic:serve" :  "npm run dev" , 
    "dev:ios" :  "ionic cap run ios" , 
    "dev:android" :  " ionic cap run android" 
  } 
}

iOSでアプリを起動します。