728 Views
November 02, 23
スライド概要
2023/11/02(木) 19:00 〜 20:30
Lightning TechTalks #2 〜フロントエンドで導入してよかったOSS〜
https://hireroo.connpass.com/event/297090/
開発生産性を高めたOSS3選 @Himenon 1
イントロダクション 自己紹介 姫野 滉盛 @Himenon 所属 ● 株式会社ハイヤールー SNS ● ● GitHub: Himenon Twitter: himenoglyph エンジニアリング領域 ● Webフロントエンド(メイン) ● 開発支援ツールを作るのが趣味 宣伝 ● JSConf 2023で発表します 代表的なOSS ● Himenon/openapi-typescript-code-generator 2
Agenda 1 ReactのState管理を素のJavaScriptで書く! 第1選 2 JSON.parseの結果をより安全に! 第2選 3 フォームを含む実装を高速に開発! 第3選
01 ReactのState管理を素のJavaScriptで書く!
課題解決開発生産性を高めたOSS3選
ReactのState管理を素のJavaScriptで書く!
valtio(pmndrs/valtio)
import { proxy, useSnapshot } from "valtio";
const state = proxy({ count: 0 });
Reactのライフサイクルと結合するための処理がProxyによって隠
state.count += 1
蔽されているため、素のJavaScriptで記述できる。
const Component = () => {
const snapshot = useSnapshot(state);
こういうことができる
return (
●
Reactが初期化される前にStateを更新できる
○
●
<div>
<p>Count: {snapshot.count}</p>
例) API経由で取得した情報をStateに入れる
<button onClick={() => { state.count += 1 }}>PLUS</button>
Componentの外側にstateを定義できるのでどこからでも更
</div>
新できる
);
}
5
02 JSON.parseの結果をより安全に!
課題解決開発生産性を高めたOSS3選
JSON.parseの結果をより安全に!
const schema = z.object({
count: z.number()
});
zod(colinhacks/zod)
●
JSON.parse後の結果を型安全にして扱うことができ
る。
●
const saveStateToLocalStorage = (state: StateSchema) => {
window.localStorage.setItem(“cacheKey”, JSON.stringify(state));
};
定義したzodのSchemaを部分的に再利用することが
できる。
●
type StateSchema = z.infer<typeof schema>;
const restoreStateFromLocalStorage = (): StateSchema | null => {
const data = window.localStorage.getItem(“cacheKey”);
他のライブラリや実装と組み合わせて使うとより強
if (!data) return null;
力になる!
try {
const result = schema.safeParse(JSON.parse(data));
return result.success ? result.data : null;
サンプルコード
https://codesandbox.io/s/valtio-plus-zod-qkd85z
} catch {
return null;
}
};
7
03 フォームを含む実装を高速に開発!
課題解決開発生産性を高めたOSS3選 フォームを含む実装を高速に開発! react-hook-form(react-hook-form/react-hook-form) ● ● 実装の足並みが揃う ○ Validation(zodとコラボレーションする) ○ State管理 Fieldコンポーネントの再利用性が増した サンプルコード ● https://codesandbox.io/s/resuse-form-field-component-kllms4?file=/src/index.tsx 9
課題解決開発生産性を高めたOSS3 まとめ 紹介した開発生産性を高めたOSS 選定理由 valtio ReactのState管理を素のJavaScriptでできるようになった zod JSON.parseが型安全に利用できる react-hook-form 実装の足並みが揃う + Fieldコンポーネントの再利用性が増す 10