PythonとJavaScriptで作成したアプリをTypeScriptでリプレースしてみた

ゆるWeb勉強会@札幌 OnLine #21
https://mild-web-sap.connpass.com/event/262287/

Transcript

1. PythonとJavaScriptで作成したアプリを TypeScriptでリプレースしてみた ゆるWeb勉強会@札幌 OnLine #21 うーたん
2. 自己紹介 うーたん 所属 : 公立千歳科学技術大学 twitter : @uutan1108 github : OHMORIYUSUKE 趣味 : アニメを見ること 　　 　　今期は、 ぼっち・ざ・ろっく チェーンソーマン
3. 目次 1. 作ったもの 2. 進化の過程 a. PHPバージョン b. Pythonバージョン c. TypeScriptバージョン 3. 工夫した点 a. zod b. ts-node c. cheerio 4. 苦戦した点 5. 良かった点 6. 感想
4. 作ったもの
5. 作ったもの Anime Library
6. 進化の過程
7. PHPバージョン
8. PHPバージョン(2年前) - リクエストごとにスクレイピング - 30秒かかる - 素のPHP - ペライチコード - UI - Bootstrap
9. Pythonバージョン
10. Pythonバージョン(1年前) - github actionsで定期実行 - ユーザーの画面の表示速度は改善 - ペライチコード - エラーハンドリングなし - data classもなし - 型ヒントなし - 読めない - UI - Chakra UI - React(JavaScript)
11. 今回、作ったもの TypeScriptバージョン
12. 作ったもの Anime Library
13. 使った技術 - バックエンド - TypeScript(Node.js) - GitHub Actions - フロントエンド - React(TypeScript) - Chakra UI
14. 構成図 定期実行 スクレイピング、 JSONを保存
15. 工夫した点
16. Zod
17. Zod - Schema firstなvalidationライブラリ - 様々なvalidationがある - stringがurlかどうか - stringがemailかどうか - など
18. スキーマ APIからのJSONを パース -> zodオブジェクト を返す
19. ts-node
20. ts-node - 毎回、TSをコンパイルする必要なし - コマンド１回でTSを実行可能
21. cheerio
22. cheerio - スクレイピングするためのライブラリ WEBページから HTMLを取得 ライブラリにHTMLを与える、$としてセット $(タグを指定).attr(属性)で中身を取 得
23. 苦戦した点
24. 苦戦した点 - 型のエラー - JSONがzodでパースできなかった - Date型かと思ったらString型だった - Promise - Promise<void>を返す関数でawaitをつけ忘れる - バグる
25. 良かった点
26. 良かった点 - 型があるのでundefinedとかのエラーがなかった - 型で怒られることが多かった - eslint(Linter)を入れていたので、エディタ上で怒られていた - 実行時に怒られない - JSを触っていたので、楽にTSに入れた
27. 感想
28. 感想 - クラスとかを使いながらコーディングできた - 非同期処理も勉強できた - おそらく１年後に読んでも読める(多分) - TSもJS辛いこともあった - NaN(Number)が発生する(0/0=>NaN) - 意外とTSもすんなり入れた