開発生産性を高めたOSS3選

505 Views

November 02, 23

スライド概要

2023/11/02(木) 19:00 〜 20:30
Lightning TechTalks #2 〜フロントエンドで導入してよかったOSS〜

https://hireroo.connpass.com/event/297090/

profile-image

HireRooは、エンジニア採用のコーディング試験サービスです。🦘エンジニアの技術力を多角的かつ定量的に評価することで、候補者と企業のミスマッチを防ぎます。

シェア

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

開発生産性を高めたOSS3選 @Himenon 1

2.

イントロダクション 自己紹介 姫野 滉盛 @Himenon 所属 ● 株式会社ハイヤールー SNS ● ● GitHub: Himenon Twitter: himenoglyph エンジニアリング領域 ● Webフロントエンド(メイン) ● 開発支援ツールを作るのが趣味 宣伝 ● JSConf 2023で発表します 代表的なOSS ● Himenon/openapi-typescript-code-generator 2

3.

Agenda 1 ReactのState管理を素のJavaScriptで書く! 第1選 2 JSON.parseの結果をより安全に! 第2選 3 フォームを含む実装を高速に開発! 第3選

4.

01 ReactのState管理を素のJavaScriptで書く!

5.
[beta]
課題解決開発生産性を高めた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

6.

02 JSON.parseの結果をより安全に!

7.
[beta]
課題解決開発生産性を高めた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

8.

03 フォームを含む実装を高速に開発!

9.

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

10.

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