Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
拙作OSSライブラリvalidated-extendable.jsの紹介
Search
Yuki Takagi
November 09, 2024
Programming
84
1
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
拙作OSSライブラリvalidated-extendable.jsの紹介
Yuki Takagi
November 09, 2024
Other Decks in Programming
See All in Programming
UPDATE をやめる — EF Core でマスタをバージョン管理する
panda728
PRO
0
180
AgentCore CLI で進化した AWS での AI エージェントの作り方 : 必要な機能を必要な時に
icoxfog417
PRO
3
350
Snowflakeで業務アプリを作ろう。 Snowflakeのアプリ機能解説&実践ガイド
ayumu_yamaguchi
1
280
iOSDC Japan 2026 - Swiftで作って学ぼう!データベース自作入門
kaseken
2
170
モデルのリファクタリングが難しいと思ったら、そもそも複雑だったのはビジネス仕様だった ? / is-the-business-domain-the-real-complexity
hatsu38
0
350
新卒PdEのリアル
ryu1013
1
500
WebMCP Challenge に星空観察アプリで参加した話
okajun35
0
180
一人だけ、Kiroが静止する日
hideg
0
120
ゲームコントローラやキーボードのファームウェアをSwiftで書く
kishikawakatsumi
1
250
Are APIs Still Relevant in the AI Era?
soyuka
0
270
Heart of Swift Concurrency
koher
0
900
市販E-Readerを乗っ取れ 〜Embedded Swiftで電子ペーパーガジェットを制御する〜
trickart
0
190
Featured
See All Featured
New Earth Scene 8
popppiees
4
2.6k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
11
1k
For a Future-Friendly Web
brad_frost
183
10k
How to build a perfect <img>
jonoalderson
1
6k
Reflections from 52 weeks, 52 projects
jeffersonlam
356
21k
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
techseoconnect
PRO
0
680
AI Search: Where Are We & What Can We Do About It?
aleyda
0
8k
WENDY [Excerpt]
tessaabrams
14
39k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
10k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.8k
Are puppies a ranking factor?
jonoalderson
2
3.9k
The Pragmatic Product Professional
lauravandoore
37
7.4k
Transcript
拙作OSSライブラリ の紹介 validated-extendable.js
はじめに 今回のお話 • 最近小規模なTypeScript製ライブラリをOSSとして開発しNPMに公開した
はじめに 近況 NPMに公開 • 初コミットから1ヶ月半 • NPM上で約1000DL/週 • GitHubの⭐数: 10
TABLE OF CONTENTS モチベーション なぜライブラリを作り 始めたか 機能 ライブラリでできること ・使用例 OSSにして良かった点
OSSにしたことで得ら れた恩恵 苦戦した点 どの部分に時間をか けたか 既存ライブラリとの差 別化 類似ライブラリ・相違 点 まとめ 要約・感想 01 02 03 04 05 06
01 モチベーション
モチベーション Zodを使ったコードとクラスベースなコード の融合 Zodを使った型定義 クラスベースな型定義 • バリデーションを宣言的に 記述できる • 関連する操作をメソッドとして
紐付けられる
モチベーション Zodを使ったコードとクラスベースなコード の融合 Zodを使った型定義 クラスベースな型定義 記法が異なるため同時には使えない → Zodを使うことで、コードベースの一部分 が非クラスベースになる
モチベーション Zodを使ったコードとクラスベースなコード の融合 なんとか同時やろうとすると? • 記述量が多い • ボイラープレートのよう • name,
ageって何回書くねん! 一例:
モチベーション Zodを使ったコードとクラスベースなコード の融合 まとめ • Zodを使ったコードとクラスベースなコード、それぞれに特徴がある ◦ Zod: 宣言的なバリデーション ◦
クラス: メソッドの定義 • しかし、両方のいいとこ取りをしようとする長いボイラープレートを書くことになる この課題を解決するためにライブラリを作る
機能 02
Zodスキーマをもとにしたクラス定義 主な機能 機能 スキーマをもとにクラスのコンストラクタとプロパティを自動で定義する TypeScriptサポート コンストラクタやプロパティには、スキーマから推論された型が付けられる バリデーション コンストラクタ及びプロパティのセッターで、バリデーションを行う
機能 使用例 スキーマをクラスに
機能 使用例 スキーマをクラスに クラスを使用
機能 使用例 スキーマをクラスに バリデーション 型チェック
機能 使用例 スキーマをクラスに 元になったスキーマを取得
機能 使用例 可変なプロパティ • デフォルトでは、プロパティは readonlyになるようにしてい る • 可変にしたいときは Validatedの代わりに
ValidatedMutableを使う
機能 使用例 可変なプロパティ プロパティのセッターでもバリデーション
OSSにして良かった点 03
OSSにして良かった点 ユーザーからのバグ報告 • GitHubのissueでバグを報告してもらえた ◦ 認知していなかったバグを発見できてライブラリの改善に役立った
OSSにして良かった点 ユーザーからのバグ報告 • GitHubのissueでバグを報告してもらえた ◦ 認知していなかったバグを発見できてライブラリの改善に役立った
苦戦した点 04
苦戦した点 デュアルパッケージ化 • JavaScriptには大きく2種類のモジュールシステムが存在する ◦ ES Modules ◦ CommonJS •
利用者側の環境によってどちらが使われるかが変わる • ライブラリの場合、両方に対応しているのが望ましい(デュアルパッケージ) 背景
苦戦した点 デュアルパッケージ化 • CJSとESM両方のビルドをdistに含 める 対応
苦戦した点 デュアルパッケージ化 • CJSとESM両方のビルドをdistに含 める • pnpm run buildで2種類のビル ドが実行されるようにする
対応 package.json:
苦戦した点 デュアルパッケージ化 • CJSとESM両方のビルドをdistに含 める • pnpm run buildで2種類のビル ドが実行されるようにする
• package.jsonのexports ◦ CJSとして読み込まれたときと ESMとして読み込まれたとき で異なるファイルが読み込ま れるように指定できる 対応 package.json:
既存ライブラリとの 差別化 05
既存ライブラリとの 差別化 類似ライブラリ • オブジェクトのスキーマからクラスを定義する zod-class
既存ライブラリとの 差別化 類似ライブラリ • めっちゃ似てる😭 • ライブラリが完成したあとに見つけた zod-class
既存ライブラリとの 差別化 相違点 • オブジェクト型以外のスキーマもクラスにできる ◦ プリミティブ型(z.string(), z.number(), …) ▪
値オブジェクトを定義するのに便利 ◦ ユニオン型(z.union(), z.enum(), …) ◦ 配列型 ◦ … • コンストラクタだけでなくプロパティのセッターでもバリデーションが行われる
まとめ 06
まとめ 今回のお話 • 最近小規模なTypeScript製ライブラリをOSSとして開発しNPMに公開した • ライブラリを使用することで Zodを使ったコードとクラスベースなコードの融合が可能 になった • OSSにしたことでライブラリのユーザーからフィードバックをもらえてクオリティの向
上に役立った • 本格的なTypeScriptのパッケージを公開するのは初めてでデュアルパッケージ化 に苦戦した • 完成後に機能が被りまくりのライブラリを見つけてしまったが、それぞれにしかでき ないこともあった 感想 • 自分のような個人が開発する OSSでもフィードバックをくれるユーザーがいることに 驚いた • OSS開発は想像していた以上に気軽・身近なものなのかもしれない
CREDITS: This presentation template was created by Slidesgo, including icons
by Flaticon, infographics & images by Freepik THANKS ご清聴ありがとうございました! Please keep this slide for attribution