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

by Tsubasa Miyazaki

Slide 1

Slide 1 text

本資料は、トグルホールディングス株式会社に許可なく複製・転載をしないようお願いします。  トグルホールディングス株式会社  宮崎翼   TypeScript × Paper.js 型安全で実現する 2Dグラフィックアプリ開発

Slide 2

Slide 2 text

2  © toggle holdings inc. IT機器営業から転職してエンジニアへ現在はフルスタックに開発に従事しています @tsubasa55102 宮崎翼

Slide 3

Slide 3 text

3  © toggle holdings inc. アジェンダ ❖ プロダクト紹介 ❖ どんな機能が必要だったのか ❖ 実際に Paper.js を用いて開発したもの ❖ なぜ、Paper.js を選んだのか ❖ まとめ

Slide 4

Slide 4 text

4  © toggle holdings inc. プロダクト紹介

Slide 5

Slide 5 text

5  © toggle holdings inc. ホームページ https://tsukuru.ai/deve-navi

Slide 6

Slide 6 text

6  © toggle holdings inc. どんな機能が必要だったのか

Slide 7

Slide 7 text

7  © toggle holdings inc. 画像に合わせて、エリアを視覚化して値を取得する機能を作りたかった

Slide 8

Slide 8 text

8  © toggle holdings inc. 画像に合わせて、エリアを視覚化して値を取得する機能を作りたかった ● 点、辺、多角形の描画 ● 面積計算 ● 角度の計算

Slide 9

Slide 9 text

9  © toggle holdings inc. 実際に paper.js を用いて開発したもの

Slide 10

Slide 10 text

10  © toggle holdings inc. なぜ Paper.js を選んだのか ★ 豊富な描画機能 ○ パス、グループ、レイヤー管理など。 ★ 直感的なAPI ○ 簡単に複雑な図形を描画・操作可能。 ★ イベントハンドリング ○ マウスイベントやツール機能によるインタラクティブな操作。 ★ TypeScript サポート ○ 公式にTypeScriptサポートがされており、型定義ファイルがライブラリに含まれている。

Slide 11

Slide 11 text

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/

Slide 12

Slide 12 text

12  © toggle holdings inc. 型安全が担保されている！！ Paper.js

Slide 13

Slide 13 text

13  © toggle holdings inc. 例えば...

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

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)) 型安全