Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
PythonとJavaScriptで作成したアプリをTypeScriptでリプレースしてみた
Search
uutan1108
November 02, 2022
Technology
0
210
PythonとJavaScriptで作成したアプリをTypeScriptでリプレースしてみた
ゆるWeb勉強会@札幌 OnLine #21
https://mild-web-sap.connpass.com/event/262287/
uutan1108
November 02, 2022
Tweet
Share
More Decks by uutan1108
See All by uutan1108
「何か」を求めて参加したカンファレンスから持ち帰ってきた「熱」を維持して、活用するために
ohmori_yusuke
2
310
1人150秒、2人で5分 LT
ohmori_yusuke
2
76
Tidy First?個人で実践する経験主義的ソフトウェア設計を読んでみた感想
ohmori_yusuke
2
59
今年始めた 「アニメから得た学びを発表会」
ohmori_yusuke
2
1.9k
行き当たりばったりの二年
ohmori_yusuke
1
360
技書博に参加したら執筆できた
ohmori_yusuke
1
1.8k
開発終了後こそ成長のチャンス!プロダクト運用を見送った先のアクションプラン
ohmori_yusuke
2
300
学生の時に開催したPerl入学式をきっかけにエンジニアが組織に馴染むために勉強会を主催や仲間と参加して職能間の境界を越えていく
ohmori_yusuke
2
670
やりっぱなしで終わらない勉強法
ohmori_yusuke
3
520
Other Decks in Technology
See All in Technology
1行のコードから社会課題の解決へ: EMの探究、事業・技術・組織を紡ぐ実践知 / EM Conf 2025
9ma3r
11
3.8k
Share my, our lessons from the road to re:Invent
naospon
0
140
Visualize, Visualize, Visualize and rclone
tomoaki0705
9
83k
生成AI “再”入門 2025年春@WIRED TUESDAY EDITOR'S LOUNGE
kajikent
0
120
ExaDB-XSで利用されているExadata Exascaleについて
oracle4engineer
PRO
3
260
Snowflake ML モデルを dbt データパイプラインに組み込む
estie
0
100
あなたが人生で成功するための5つの普遍的法則 #jawsug #jawsdays2025 / 20250301 HEROZ
yoshidashingo
2
290
JAWS FESTA 2024「バスロケ」GPS×サーバーレスの開発と運用の舞台裏/jawsfesta2024-bus-gps-serverless
ma2shita
3
200
クラウド関連のインシデントケースを収集して見えてきたもの
lhazy
8
1.1k
IAMのマニアックな話2025
nrinetcom
PRO
4
650
大規模アジャイルフレームワークから学ぶエンジニアマネジメントの本質
staka121
PRO
3
1.2k
Goで作って学ぶWebSocket
ryuichi1208
3
2.8k
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
YesSQL, Process and Tooling at Scale
rocio
172
14k
How to train your dragon (web standard)
notwaldorf
91
5.9k
The Pragmatic Product Professional
lauravandoore
32
6.4k
Building an army of robots
kneath
303
45k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
Code Review Best Practice
trishagee
67
18k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
BBQ
matthewcrist
87
9.5k
Testing 201, or: Great Expectations
jmmastey
42
7.2k
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もすんなり入れた