SolidJS + UnoCSS + Capacitorでハイブリッドアプリを作ってみる
2022.04.14 19:45
nuxtjs blog

SolidJS とは


Solid は、一方向性のデータフロー、リード/ライトの分離、不変のインターフェースなど、React と同じ哲学を持っています。しかし、仮想 DOM を使わない、全く異なる実装になっています。

らしい。Typescript に全然慣れないので、勉強のために Typescript で使ってみました。SolidJS + UnoCSS + Capacitor なテンプレートが公開されていたので使ってみました。 UnoCSS は Tailwindcss の超便利版みたいな感じ。(初めて使ったけどとても良い)

インストール


Github を参考に以下を実行。

npx degit ionic-team/capacitor-solidjs-templates/ts-unocss my-project
cd my-project
npm install

Dev 環境を起動。

npm run dev

アイコン追加、実機デバッグやホットリロード、デバイスに合わせた表示分岐とかもできるのでそのうち手順をまとめます。 UI コンポーネントも公開されているのでハイブリッドなアプリが簡単に作成できそう。

参考サイト


SolidJS https://www.solidjs.com/
テンプレート https://github.com/ionic-team/capacitor-solidjs-templates