Tweet
Tweet

Slide 1

Slide 1 text

PythonとJavaScriptで作成したアプリを TypeScriptでリプレースしてみた ゆるWeb勉強会@札幌 OnLine #21 うーたん

Slide 2

Slide 2 text

自己紹介 うーたん 所属 : 公立千歳科学技術大学 twitter : @uutan1108 github : OHMORIYUSUKE 趣味 : アニメを見ること 　　 　　今期は、 ぼっち・ざ・ろっく チェーンソーマン

Slide 3

Slide 3 text

目次 1. 作ったもの 2. 進化の過程 a. PHPバージョン b. Pythonバージョン c. TypeScriptバージョン 3. 工夫した点 a. zod b. ts-node c. cheerio 4. 苦戦した点 5. 良かった点 6. 感想

Slide 4

Slide 4 text

作ったもの

Slide 5

Slide 5 text

作ったもの Anime Library

Slide 6

Slide 6 text

進化の過程

Slide 7

Slide 7 text

PHPバージョン

Slide 8

Slide 8 text

PHPバージョン(2年前) - リクエストごとにスクレイピング - 30秒かかる - 素のPHP - ペライチコード - UI - Bootstrap

Slide 9

Slide 9 text

Pythonバージョン

Slide 10

Slide 10 text

Pythonバージョン(1年前) - github actionsで定期実行 - ユーザーの画面の表示速度は改善 - ペライチコード - エラーハンドリングなし - data classもなし - 型ヒントなし - 読めない - UI - Chakra UI - React(JavaScript)

Slide 11

Slide 11 text

今回、作ったもの TypeScriptバージョン

Slide 12

Slide 12 text

作ったもの Anime Library

Slide 13

Slide 13 text

使った技術 - バックエンド - TypeScript(Node.js) - GitHub Actions - フロントエンド - React(TypeScript) - Chakra UI

Slide 14

Slide 14 text

構成図 定期実行 スクレイピング、 JSONを保存

Slide 15

Slide 15 text

工夫した点

Slide 16

Slide 16 text

Zod

Slide 17

Slide 17 text

Zod - Schema firstなvalidationライブラリ - 様々なvalidationがある - stringがurlかどうか - stringがemailかどうか - など

Slide 18

Slide 18 text

スキーマ APIからのJSONを パース -> zodオブジェクト を返す

Slide 19

Slide 19 text

ts-node

Slide 20

Slide 20 text

ts-node - 毎回、TSをコンパイルする必要なし - コマンド１回でTSを実行可能

Slide 21

Slide 21 text

cheerio

Slide 22

Slide 22 text

cheerio - スクレイピングするためのライブラリ WEBページから HTMLを取得 ライブラリにHTMLを与える、$としてセット $(タグを指定).attr(属性)で中身を取 得

Slide 23

Slide 23 text

苦戦した点

Slide 24

Slide 24 text

苦戦した点 - 型のエラー - JSONがzodでパースできなかった - Date型かと思ったらString型だった - Promise - Promiseを返す関数でawaitをつけ忘れる - バグる

Slide 25

Slide 25 text

良かった点

Slide 26

Slide 26 text

良かった点 - 型があるのでundefinedとかのエラーがなかった - 型で怒られることが多かった - eslint(Linter)を入れていたので、エディタ上で怒られていた - 実行時に怒られない - JSを触っていたので、楽にTSに入れた

Slide 27

Slide 27 text

感想

Slide 28

Slide 28 text

感想 - クラスとかを使いながらコーディングできた - 非同期処理も勉強できた - おそらく１年後に読んでも読める(多分) - TSもJS辛いこともあった - NaN(Number)が発生する(0/0=>NaN) - 意外とTSもすんなり入れた