Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
PythonとJavaScriptで作成したアプリをTypeScriptでリプレースしてみた
ohmori_yusuke
November 02, 2022
Technology
0
44
PythonとJavaScriptで作成したアプリをTypeScriptでリプレースしてみた
ゆるWeb勉強会@札幌 OnLine #21
ohmori_yusuke
November 02, 2022
Tweet
Share
More Decks by ohmori_yusuke
See All by ohmori_yusuke
ILインターンシップ
ohmori_yusuke
0
170
PythonでCLIツールを作ってみた
ohmori_yusuke
0
590
ポートフォリオサイト制作について
ohmori_yusuke
0
74
3DCGについて
ohmori_yusuke
0
120
Other Decks in Technology
See All in Technology
20230121_BuriKaigi
oyakata2438
0
160
ML PM, DS PMってどんな仕事をしているの?
line_developers
PRO
1
210
AKIBA.SaaS資料
yasumuusan
0
160
日本ディープラーニング協会主催 NeurIPS 2022 技術報告会講演資料
tdailab
0
980
20230123_FinJAWS
takuyay0ne
0
110
PHPのimmutable arrayとは
hnw
1
140
Media JAWS 2023/1
matsuihidetoshi
1
100
OCI DevOps 概要 / OCI DevOps overview
oracle4engineer
PRO
0
470
経営統合をきっかけに会社をエンジニアリングした話 / btconjp-2023
carta_engineering
0
110
【NGK2023S】 ノードエディタ形式の画像処理ツール「Image-Processing-Node-Editor」
kazuhitotakahashi
0
230
LINE iOSエンジニアの日々 / LINE iOS Engineer Days
line_developers
PRO
1
130
【Oracle Cloud ウェビナー】事例から見る規模別クラウド・データベースの選び方 (Oracle Database) (2023年1月18日)
oracle4engineer
PRO
0
100
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
35
11k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
13
5.4k
5 minutes of I Can Smell Your CMS
philhawksworth
198
18k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
2
390
Atom: Resistance is Futile
akmur
256
24k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
10
1.3k
Embracing the Ebb and Flow
colly
75
3.6k
Building Better People: How to give real-time feedback that sticks.
wjessup
346
17k
What’s in a name? Adding method to the madness
productmarketing
12
1.9k
The Power of CSS Pseudo Elements
geoffreycrofte
52
4.3k
Building an army of robots
kneath
301
40k
Reflections from 52 weeks, 52 projects
jeffersonlam
338
18k
Transcript
PythonとJavaScriptで作成したアプリを TypeScriptでリプレースしてみた ゆるWeb勉強会@札幌 OnLine #21 うーたん
自己紹介 うーたん 所属 : 公立千歳科学技術大学 twitter : @uutan1108 github :
OHMORIYUSUKE 趣味 : アニメを見ること 今期は、 ぼっち・ざ・ろっく チェーンソーマン
目次 1. 作ったもの 2. 進化の過程 a. PHPバージョン b. Pythonバージョン c.
TypeScriptバージョン 3. 工夫した点 a. zod b. ts-node c. cheerio 4. 苦戦した点 5. 良かった点 6. 感想
作ったもの
作ったもの Anime Library
進化の過程
PHPバージョン
PHPバージョン(2年前) - リクエストごとにスクレイピング - 30秒かかる - 素のPHP - ペライチコード -
UI - Bootstrap
Pythonバージョン
Pythonバージョン(1年前) - github actionsで定期実行 - ユーザーの画面の表示速度は改善 - ペライチコード - エラーハンドリングなし
- data classもなし - 型ヒントなし - 読めない - UI - Chakra UI - React(JavaScript)
今回、作ったもの TypeScriptバージョン
作ったもの Anime Library
使った技術 - バックエンド - TypeScript(Node.js) - GitHub Actions - フロントエンド
- React(TypeScript) - Chakra UI
構成図 定期実行 スクレイピング、 JSONを保存
工夫した点
Zod
Zod - Schema firstなvalidationライブラリ - 様々なvalidationがある - stringがurlかどうか - stringがemailかどうか
- など
スキーマ APIからのJSONを パース -> zodオブジェクト を返す
ts-node
ts-node - 毎回、TSをコンパイルする必要なし - コマンド1回でTSを実行可能
cheerio
cheerio - スクレイピングするためのライブラリ WEBページから HTMLを取得 ライブラリにHTMLを与える、$としてセット $(タグを指定).attr(属性)で中身を取 得
苦戦した点
苦戦した点 - 型のエラー - JSONがzodでパースできなかった - Date型かと思ったらString型だった - Promise -
Promise<void>を返す関数でawaitをつけ忘れる - バグる
良かった点
良かった点 - 型があるのでundefinedとかのエラーがなかった - 型で怒られることが多かった - eslint(Linter)を入れていたので、エディタ上で怒られていた - 実行時に怒られない -
JSを触っていたので、楽にTSに入れた
感想
感想 - クラスとかを使いながらコーディングできた - 非同期処理も勉強できた - おそらく1年後に読んでも読める(多分) - TSもJS辛いこともあった -
NaN(Number)が発生する(0/0=>NaN) - 意外とTSもすんなり入れた