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
220
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
勉強会から始まった僕のDevRel~新卒エンジニアがつないだ2年間の軌跡~
ohmori_yusuke
1
250
WebエンジニアがSwiftをブラウザで動かすプレイグラウンドを作ってみた
ohmori_yusuke
0
170
アニメがエンジニアをつなぐ!「エンジニアニメ」勉強会が巻き起こすCo-Creationの波
ohmori_yusuke
0
140
組織が大きく変わろうとするとき、自分はどうありたいかを考えている
ohmori_yusuke
19
6.6k
技術以外をきっかけに交流するエンジニア向け勉強会
ohmori_yusuke
0
56
デザインって“感覚”だけじゃないVibe Codingからの気づき
ohmori_yusuke
3
89
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
150
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
1
580
市町村のオープンデータを使って「公園・トイレの口コミマップ」を作ってみた
ohmori_yusuke
0
370
Other Decks in Technology
See All in Technology
防災デジタル分野での官民共創の取り組み (2)DIT/CCとD-CERTについて
ditccsugii
0
310
LLMアプリの地上戦開発計画と運用実践 / 2025.10.15 GPU UNITE 2025
smiyawaki0820
1
640
AI Agent Dojo #2 watsonx Orchestrateフローの作成
oniak3ibm
PRO
0
130
Databricks AI/BI Genie の「値ディクショナリー」をAmazonの奥地(S3)まで見に行く
kameitomohiro
1
140
このままAIが発展するだけでAGI達成可能な理由
frievea
0
120
能登半島地震で見えた災害対応の課題と組織変革の重要性
ditccsugii
0
1k
コンテキストエンジニアリング入門〜AI Coding Agent作りで学ぶ文脈設計〜
kworkdev
PRO
3
1.7k
Implementing and Evaluating a High-Level Language with WasmGC and the Wasm Component Model: Scala’s Case
tanishiking
0
140
AI時代におけるデータの重要性 ~データマネジメントの第一歩~
ryoichi_ota
0
700
AWS Control Tower に学ぶ! IAM Identity Center 権限設計の第一歩 / IAM Identity Center with Control Tower
y___u
1
200
Introdução a Service Mesh usando o Istio
aeciopires
0
200
エンタメとAIのための3Dパラレルワールド構築(GPU UNITE 2025 特別講演)
pfn
PRO
0
520
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
620
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
4 Signs Your Business is Dying
shpigford
185
22k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
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もすんなり入れた