はじめに
今まで、ReactやVueやAngularなどのフロントエンドFWを色々使ってきましたが、最近話題のSolidJSを勉強がてら触ってみようかと思います。
作ったもの
SolidJSを使って、Markdownを書けるEditorを作りました。
リポジトリはこちらです。
https://github.com/eda-yoshizaki/learn-solidjs
SolidJSとは？
- ReactやVue.jsと同様にコンポーネント指向のアプローチを採用し、仮想DOMを使用する代わりにテンプレートを実際のDOMノードにコンパイルすることで高速なリアルタイムレンダリングを実現するJavaScriptのUIライブラリです
- TypeScriptをサポートし、拡張性や再利用性も高く、状態管理や副作用の処理が容易になるフックシステムを持っています
- また、Svelteに似たイミュータブルなステート管理も可能です
チュートリアルを実施してみて感じたこと
基本的には、チュートリアルを一通り実施してからサンプルの作成を始めました。
そこでチュートリアルを実施してみて、感じたことを、少し共有していこうと思います。
テンプレートを使える
- 作りたいプロジェクトによって、使用するテンプレートを選ぶことができます
- SolidJSでは、Viteをメインとした、複数のテンプレートが用意されています
- 今回私は、
Typescript + tailwindcss templateを採用しました - テンプレートを使わず、一応既存のプロジェクトにも追加することはできそうです
制御フローについて
- 条件付きレンダー
-
v-ifやjsを絡ませることがなくなったので、シンプルに描けるようになリました Showコンポーネントで when と fallback を使うことで再現するようです- 複数条件の場合は、Switch/Match を使える
-
- 繰り返し処理
-
<For>タグを使用して、実現するが、Reactなどと書き味はあまり変わらなさそう
-
ライフサイクルフックについて
-
onMount を effect のエイリアスで用意してくれている
- これがReactにもあれば、、、
- 他のフレームワークでいうところの
destroyedはcleanupとなっています -
ReactのuseEffectの代わりが、createEffectのようです
Component関連
- ref も使えます
- propsでも使えます
- 属性をスプレッド演算子で展開できるのは、
Reactと同じでした -
useを使うとカスタムディレクティブが使えるそうです -
mergePropsで props をマージできるそうです -
splitpropsで props を分けることもできるそうです
その他
- ストア使えるけど
reduxとは違いそう -
providerも使えるそうです -
Reactは更新の伝搬で複数の値を更新するが、batch関数を使ってまとめて更新することができるそうです
触った感触
-
reactにかなり近いと感じました- 公式としても、
特に React と Knockout という巨人の肩の上に立っていますと発言しているので、やはり感覚は間違っていなさそうです - Reactを使ったことある人は、導入は割と早いかもしれません
-
tsx形式がそのまま使えるのも割とグッドです
- 公式としても、
-
viteも使える- こちらは、最近のフロントエンドフレームワークならば、ほとんど対応していますが、とてもありがたいです。
- 個人的には、最近はWebpackではなくVite一択となってきているので、その記事も書いていきたいなと思っています
- まだまだドキュメントが少ない
- 公式のチュートリアルは割と充実しているが、他のライブラリと組み合わせたりする際のに、実施した例があまりなかったです
- こちらは、今後増えることに期待しましょう
- パフォーマンスの速さを実感できていない
- 「仮想DOMからの脱却をして、速度がかなり向上しました」とはあるものの、私が作った規模ではあまり感じることができませんでした
- というのも、複雑なUIやAPI呼び出しの部分さえないので、パフォーマンス面はいつか試してみようと思います
まとめ
-
reactにかなり近いせいもあるが、構文が要所要所異なるので、この違いに最初のうちは困惑しそう- 慣れてくれば、かなり使いやすいフレームワークだとは感じました
- ただ、ライブラリの対応状況が不明なことも多いので、本格的に開発に採用する際も、大きいプロジェクトではなく、小さいものから入るのが良さそうです
- とは言いつつ、今後ユーザーが増えることに期待は大きいです
- まだメインで使うことはなさそうですが、機会があれば採用してみたいなとも思えるほど魅力的ではありました
参考
告知
最後にお知らせとなりますが、イーディーエーでは一緒に働くエンジニアを募集しております。
詳しくは採用情報ページをご確認ください。
https://eda-inc.jp/recruit/
みなさまからのご応募をお待ちしております。