SolidでLeacTion!をリプレイスしてみた！

Transcript

1. SolidでLeacTion!をリプレイスしてみた！ いっちる
2. About me 名前：いっちる（三浦 壱生） 所属会社：合同会社ノマドリ 技術スタック：React / Vue.js / TypeScript 好きな言語：TypeScript
3. 概要 • なぜこのタイトルを話そうと思ったのか • Solidについて • Solidのメリット・デメリット • SolidのStateについて • 感想
4. なぜこのタイトルを話そうとおもっ たのか • 現在LeacTion(LT用コメント投稿ツール)のVue3→Solidへの移行 をしている(桑畑さんと一緒に)。Vue3とは書き方が大きく変わり、学 びがあったため • Solidの採用理由として、技術動向の流れが確認できる「The State of 2021」の満足度部門でランキング1位だったため。トレンドの技 術に触れてみたいという思いで採用に至った。
5. The State of 2021 URL: https://2021.stateofjs.com/en-US/libraries/front-end-frameworks/#front_end_frameworks_experience_ranking
6. Solidについて • • • 宣言的型のJavaScriptフレームワーク 仮想DOMを用いない 。直接DOMを更新することで、UIを表示す る(同様のフレームワークにSvelteがある) Reactライクで記載できる
7. Solidメリット • 直接DOM操作によるレンダリングで高いパフォーマンス が発揮できる • Reactと違ってコンポーネントが一回しかレンダリングさ れない。(ReactはローカルStateが更新されると親子コン ポーネントがレンダリングされる ) リアクティブな値が更新された時に、部分的にレンダリン グされる • JSXを採用しているため、 Reactを使った人があるなら親 しみやすい。見た目は Reactにみえる。
8. Solidのデメリット(個人的に感じた) • 日本語の技術記事が少ない。 • リアクティブな値が変更されない時のデバッグがつらい ◦ ある程度はeslintが指摘してくれる
9. SolidのLocalState管理
10. SolidのGlobalState管理
11. VueとSolidのメソッド比較 Vue Solid LocalState Vue2: data Vue3: ref, reactive createSignal createStore GlobalState Vuex / Pinia Provide・Inject createSignal createStore memo computed createMemo ライフサイクル Vue2: beforeMount, mounted … Vue3: onBeforeMount, onMounted … onMount / onCleanup
12. 感想 • Reactはメモ化(memo, useCallback)など考慮しないといけなかったが、 Solidはコンポーネントが一度しか読み込まれないのでこの値は楽になっ た。 • ただ、createSignal, createStoreなどの更新をする時のパフォーマンスは意 識すると複雑だったりするので、ドキュメントをしっかり読み込む必要はあり そう • ライブラリのスター数が全体的に少ないため、技術選定に迷う