🤔

SolidJS + Capacitor 現時点の所感

2022/04/24に公開約2,600字

SolidJS

https://www.solidjs.com

Reactからの移行は簡単であるが、まだエコシステムが足りない現状があり、Reactのエコシステムに依存しているプロジェクトからは移行の難しさはあります

Capacitor

https://capacitorjs.com

webからネイティブブリッジできる機能がありなかなか良い。Ionic製プロジェクトでアプリを提供しているプロジェクトでは一緒に使われているケースが多い。それぞれのプラットフォームであるようなUI・機能などIonic(= web component)よりCapacitorを使うことでブラウザへの負担を減らさせられる

背景

ionic blog からこの記事 が投稿されたのでどこまで無理せず開発できるか試してみたかった。またSolidJS自体以前から興味があり、この機会に一緒にキャッチアップしてみようと思ったのが背景

目的

留意点であるが、この記事そのまま確認して作られたテンプレートを確認するだけのものである
SolidJS, Ionic + Capacitor そのものを確認してみるものではない

動かしてみる

$ npx degit ionic-team/capacitor-solidjs-templates/ts CapacitorSampleSolidApp
$ cd CapacitorSampleSolidApp
$ npm install
$ npm run build
$ npx cap run ios

iOSエミュレータ端末選択

テンプレート(ディレクトリ構成)の中身確認

いたって ionic + capacitor プロジェクトの構成と同じ
SolidJSについては上記の記述同様割愛させていただきます

初期開発してみる

Capacitor / Dialog で起動時でアラートがでるか確認してみる

$ npm install @capacitor/dialog@latest
$ npx cap sync
  • App.tsx
import { Component, createEffect } from 'solid-js';
import { Dialog } from '@capacitor/dialog';
import logo from './logo.svg';
import styles from './App.module.css';

const App: Component = () => {

  createEffect(() => {
    Dialog.confirm({
      title: '確認',
      message: 'テストですか?',
      cancelButtonTitle: 'キャンセル',
      okButtonTitle: 'OK'
    })
    .then(confirm => {
      if (confirm.value) {
        console.log('hogehogehoge');
      }
    })
  })

  return (
    <div class={styles.App}>
      <header class={styles.header}>
        <img src={logo} class={styles.logo} alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          class={styles.link}
          href="https://github.com/solidjs/solid"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn Solid
        </a>
      </header>
    </div>
  );
};

export default App;
$ npm run build
$ npx cap run ios

起動時アラート確認

所感

SolidJS + Capacitor でアプリ開発ができるのは画期的であり嬉しい
npx cap コマンドのオプションでホットリロード機能がない(ionic cliはそれをカバーしている)ので、ネイティブでのデバッグが面倒である。開発時は npm run dev webでの確認だけで一旦はよさそう。

https://github.com/ionic-team/capacitor-solidjs-templates
こちらに vitest 版のサンプルテンプレートの例があるので、プロジェクトに合ったものを使うのも良い

また一からネイティブUIを作ることはめんどくさいのでIonicComponentを使いたいところであるがプロジェクト(テンプレート)作成後にIonicComponentを導入できるのかわからない。

新しいJSライブラリの対応に ionic社がSvelteを選択するのかSolidJSを選択するのかはたまた両方対応としてくるのか今後の見どころではある。今からでももうionic v7が楽しみである

Discussion

ログインするとコメントできます