#日本語ドキュメントができました (2021-07-24)

なのでこんなスクラップを見るよりこっちを見ましょう https://www.solidjs.com/docs/latest/api?lang=ja

SolidJS

Solid is a purely reactive library. It was designed from the ground up with a reactive core. It's influenced by reactive principles developed by previous libraries.

www.solidjs.com

SolidJS の日本語ドキュメントが公開されました

zenn.dev

#(2021-06-03)

仮想DOMはパフォーマンスが悪いみたいな記事を見てへーと思って非仮想DOMのなにかを試してみようと思った この分野だと間違いなくSvelteが一番ポピュラーで人気上昇中だがどうしてもあのテンプレート構文的なのが好きになれない・・・ というわけで見つけたのが https://github.com/solidjs/solid

Reactと同じようにjsxが使えてそれでいて仮想DOMを使わないライブラリとのこと。もうすぐ1.0リリースらしい。もうrcに到達してる

#(2021-06-03)

情報があまりなかったのでためらっていたが絶賛制作中の公式サイトを見つけた https://github.com/solidjs/solid-site/tree/dev のでそこにあるチュートリアルを一足先にやっていく おそらく1.0に合わせて公開される気がするのでもうすぐなにもしなくても https://solidjs.com から見れるようになる気がする

#(2021-06-03)

公式サイトにももちろんsolidjsが使われていて、さらにバンドラーにはViteを使っているようだ。Vite用のプラグインもある。(https://github.com/solidjs/vite-plugin-solid)

ローカルで開発中のサイトを起動する

$ git clone https://github.com/solidjs/solid-site
$ git checkout dev
$ pnpm i
$ pnpm dev

https://localhost:3000 にアクセスするといい感じのサイトが立ち上がっている。

やはりViteはビルドが爆速で素晴らしい

#(2021-06-03)

トップページを見るといろいろよさげな事が書いてある。 リアクティブプログラミングや単方向データバインディングなどのReactの哲学に従いつつ仮想DOMではない方法でレンダリングをしているとのこと。 また、コンポーネントは1度しか実行されず、hooksとバインディング(effectとかのこと？)が再実行されるらしい。Reactはコンポーネントが再実行されるんだったような気がするからそこが違いなんだろうか

Resoucesのページにはsolidjsの作者の記事がいろいろ載っている。 https://dev.to/this-is-learning/components-are-pure-overhead-hpm

#(2021-06-03)

まだ開発中のようだがTutorialがしっかり整備されていてMonacoエディタで快適にチュートリアルを進めることができる。

基本のカウンターアプリはこんな感じ。(以下のコードは全てチュートリアルからのコピペ)

import { render } from "solid-js/web";
import { createSignal } from "solid-js";
 
function Counter() {
  const [count, setCount] = createSignal(0);
 
  setInterval(() => setCount(count() + 1), 1000);
 
  return <div>Count: {count()}</div>;
}
 
render(() => <Counter />, document.getElementById('app'));

createSignalはパッと見hooksだがsolidjsにはhooksのルールがないので自由な場所に書けるらしい。 またuseStateとは違い、値ではなくgetterが返ってくる。

#(2021-06-03)

Effectもある

import { render } from 'solid-js/web';
import { createSignal, createEffect } from 'solid-js';
 
function Counter() {
  const [count, setCount] = createSignal(0);
  createEffect(() => {
    console.log("The count is now", count());
  });
 
  return <button onClick={() => setCount(count() + 1)}>Click Me</button>;
}
 
render(() => <Counter />, document.getElementById('app'));

createMemoでメモ化もできる。useMemoと同じような感じかな？

#制御フロー (2021-06-03)

ここでShowコンポーネントという見慣れない物が登場

<Show
  when={loggedIn()}
  fallback={<button onClick={toggle}>Log in</button>}
>
  <button onClick={toggle}>Log out</button>
</Show>

仮想DOMを使わない代償として、jsxでそのままArray.prototype.mapとかやると全てのコンポーネントが再レンダリングされてしまうため、このような専用コンポーネントを用意しているようだ。 ただSolidのコンパイラは三項演算子をサポートしているとも書いてある。Showコンポーネントを使わなくてもいいということだろうか？

#(2021-06-03)

Showコンポーネントは出し分けをするだけだが他にも制御構造用のコンポーネントがいろいろある。

For

<For each={cats()}>{(cat, i) =>
  <li>
    <a target="_blank" href={`https://www.youtube.com/watch?v=${cat.id}`}>
      {i() + 1}: {cat.name}
    </a>
  </li>
}</For>

Index

<Index each={cats()}>{(cat, i) =>
  <li>
    <a target="_blank" href={`https://www.youtube.com/watch?v=${cat().id}`}>
      {i + 1}: {cat().name}
    </a>
  </li>
}</Index>

ForとIndexの違いとして各アイテムとindexのプリミティブとgetterという関係が逆になっている。 恐らくForでは配列の中身に基いて再レンダリングが行われ、Indexではindexに基いて再レンダリングが行われている(日本語が下手) なので非プリミティブな配列にはForを使い、プリミティブなものにはIndexを使うとよいとのこと。

#(2021-06-03)

次にSwitchコンポーネント

<Switch fallback={<p>{x()} is between 5 and 10</p>}>
  <Match when={x() > 10}>
    <p>{x()} is greater than 10</p>
  </Match>
  <Match when={5 > x()}>
    <p>{x()} is less than 5</p>
  </Match>
</Switch>

正直いままでのもテンプレート構文味があって若干微妙に感じていたが、これに関してはtypescriptの型が正常に判定されないためかなりビミョーだと思った。 https://github.com/solidjs/solid/issues/199 一応ワークアラウンドはあるようだがいちいちこれを書くのかという感じでうーん

#(2021-06-03)

Portalコンポーネント

<Portal>
  <div class="popup">
    <h1>Popup</h1>
    <p>Some text you might need for something or other.</p>
  </div>
</Portal>

これはReactのポータルと同じような感じかな

ErrorBoundaryコンポーネント

import { render } from "solid-js/web";
import { ErrorBoundary } from "solid-js";
 
const Broken = (props) => {
  throw new Error("Oh No");
  return <>Never Getting Here</>
}
 
function App() {
  return (
    <>
      <div>Before</div>
      <ErrorBoundary fallback={err => err}>
        <Broken />
      </ErrorBoundary>
      <div>After</div>
    </>
  );
}
 
render(() => <App />, document.getElementById("app"));

ReactのError Boundaryと同じように例外をキャッチできるものだが、Reactのようにクラスコンポーネントでないと使えないみたいな制限はない。そもそもsolidjsには関数コンポーネントしかないはず

#ライフサイクル (2021-06-03)

solidのライフサイクルメソッドにはonMountとonCleanupがある。 特筆すべきことはなさそう？

#バインディング (2021-06-04)

#style

<div style={{
  color: `rgb(${num()}, 180, ${num()})`,
  "font-weight": 800,
  "font-size": `${num()}px`}}
>
  Some Text
</div>

Reactのようにstyleプロパティにオブジェクトを入れてスタイルを適用できるが、Reactと違いcamelCaseではなく、普通のhtmlで指定するのと同じkebab-caseを使う。 これの利点としてcss変数が使える。なるほど。

<div style={{ "--my-custom-color": state.themeColor }} />

#(2021-06-04)

#class

classNameではなく普通にclassが使える、またclassListというものもある。

<button
	class={current() === 'foo' ? 'selected' : ''}
	onClick={() => setCurrent('foo')}
>foo</button>
 
<button
	classList={{selected: current() === 'foo'}}
	onClick={() => setCurrent('foo')}
>foo</button>

#ref/forwardRef (2021-06-04)

特に難しいことをしなくても使える。useRefみたいなのはいらない。

let myDiv;
 
<div ref={myDiv}>My Element</div>

#カスタムディレクティブ (2021-06-04)

(element, valueAccesor)を受け取る関数をインポートして接頭辞としてuse:を関数名の前につけたディレクティブを設定することでカスタムディレクティブを使える。ReactにはないがVueとかにはあるようだ。 便利そうではあるが標準から外れているのでサンプルではdead codeとして削除されないようにしてたりするなどちょっと面倒臭いことがありそう。

#Props (2021-06-04)

// あとで読む

#🎉1.0 (2021-06-29)

v1.0がリリースされた。 https://github.com/solidjs/solid/releases/tag/v1.0.0

作者記事 https://dev.to/ryansolid/solidjs-official-release-the-long-road-to-1-0-4ldd

公式サイトも公開されていた。これで使う人が増えるかも？ https://www.solidjs.com