TypeScript × Paper.js 型安全で実現する 2Dグラフィックアプリ開発

このプレゼンテーションでは、TypeScript と Paper.js を組み合わせて、型安全性を保ちながら 2D グラフィックアプリケーションを開発した事例を紹介します。プロダクトの概要、必要な機能、実際の開発内容、そして Paper.js を採用した理由を解説し、特徴、型安全についてまとめました。
Paper.js の型定義を活用することで、API の誤用を防止し、コードの可読性や保守性を大幅に向上させました。

Transcript

1. 本資料は、トグルホールディングス株式会社に許可なく複製・転載をしないようお願いします。
 トグルホールディングス株式会社
 宮崎 翼 
 TypeScript × Paper.js 型安全で実現する 2Dグラフィックアプリ開発
2. 2
 © toggle holdings inc. IT機器営業から転職してエンジニアへ 現在はフルスタックに開発に従事しています @tsubasa55102 宮崎 翼
3. 3
 © toggle holdings inc. アジェンダ ❖ プロダクト紹介 ❖ どんな機能が必要だったのか ❖ 実際に Paper.js を用いて開発したもの ❖ なぜ、Paper.js を選んだのか ❖ まとめ
4. 4
 © toggle holdings inc. プロダクト紹介
5. 5
 © toggle holdings inc. ホームページ https://tsukuru.ai/deve-navi
6. 6
 © toggle holdings inc. どんな機能が必要だったのか
7. 7
 © toggle holdings inc. 画像に合わせて、エリアを視覚化して値を取得する機能を作りたかった
8. 8
 © toggle holdings inc. 画像に合わせて、エリアを視覚化して値を取得する機能を作りたかった • 点、辺、多角形の描画 • 面積計算 • 角度の計算
9. 9
 © toggle holdings inc. 実際に paper.js を用いて開発したもの
10. 10
 © toggle holdings inc. なぜ Paper.js を選んだのか ★ 豊富な描画機能 ◦ パス、グループ、レイヤー管理など。 ★ 直感的なAPI ◦ 簡単に複雑な図形を描画・操作可能。 ★ イベントハンドリング ◦ マウスイベントやツール機能によるインタラクティブな操作。 ★ TypeScript サポート ◦ 公式にTypeScriptサポートがされており、型定義ファイルがライ ブラリに含まれている。
11. 11
 © toggle holdings inc. その他グラフィックライブラリ • Konva ◦ https://konvajs.org/index.html • Three Fiber ◦ https://r3f.docs.pmnd.rs/getting-started/intro duction • Fabric.js ◦ https://fabricjs.com/
12. 12
 © toggle holdings inc. 型安全が担保されている！！ Paper.js
13. 13
 © toggle holdings inc. 例えば...
14. 14
 © toggle holdings inc. (x=100, y=200) (x=100, y=200) 例1：円(Circle)を描画する実装
15. 15
 © toggle holdings inc. ❌ 例1： paper.Point クラス に誤った型を渡す（型エラー）
16. 16
 © toggle holdings inc. ❌ 例2: paper.Layer に addChild するオブジェクトの型ミス（型エラー）
17. 17
 © toggle holdings inc. ✅ 例2: addChild には paper.Item のインスタンスを渡す
18. 18
 © toggle holdings inc. カテゴリ 型エラーの例 修正方法 間違った型の引数を 渡す new paper.Point("100", "200") new paper.Point(100, 200) 無効なオブジェクト testLayer.addChild({ x: 100, y: 100 }) testLayer.addChild(circle) メソッドの誤用 point.add(50) point.add(new paper.Point(50, 50)) 間違ったオブジェク トでメソッドを呼ぶ point.addChild(circle) layer.addChild(circle) 演算結果の型ミス const addPoint: number = point.add(new paper.Point(50, 50)) const addPoint: paper.Point = point.add(new paper.Point(50, 50)) 型安全
19. 19
 © toggle holdings inc. 型エラーが起きていなかったら大体動く！！
20. 20
 © toggle holdings inc. 　　　TypeScript × Paper.js 型安全の恩恵により、開発効率とコードの信頼性が向上する まとめ
21. 21
 © toggle holdings inc. ご清聴ありがとうございました