Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

ゆるWeb勉強会@札幌 OnLine #21

ohmori_yusuke

November 02, 2022
Tweet

More Decks by ohmori_yusuke

Other Decks in Technology

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をコンパイルする必要なし - コマンド1回で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. 感想 - クラスとかを使いながらコーディングできた - 非同期処理も勉強できた - おそらく1年後に読んでも読める(多分) - TSもJS辛いこともあった -

    NaN(Number)が発生する(0/0=>NaN) - 意外とTSもすんなり入れた