開発生産性を高めたOSS3選

開発生産性を高めた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

• https://github.com/pmndrs/valtio

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

• https://github.com/colinhacks/zod
• https://codesandbox.io/s/valtio-plus-zod-qkd85z

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

• https://github.com/react-hook-form/react-hook-form
• https://codesandbox.io/s/resuse-form-field-component-kllms4?file=/src/index.tsx

課題解決開発生産性を高めたOSS3 まとめ 紹介した開発生産性を高めたOSS 選定理由 valtio ReactのState管理を素のJavaScriptでできるようになった zod JSON.parseが型安全に利用できる react-hook-form 実装の足並みが揃う + Fieldコンポーネントの再利用性が増す 10

• https://github.com/pmndrs/valtio
• https://github.com/colinhacks/zod
• https://github.com/react-hook-form/react-hook-form