Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
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をコンパイルする必要なし - コマンド1回で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
感想 - クラスとかを使いながらコーディングできた - 非同期処理も勉強できた - おそらく1年後に読んでも読める(多分) - TSもJS辛いこともあった - NaN(Number)が発生する(0/0=>NaN) - 意外とTSもすんなり入れた