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
デザインって“感覚”だけじゃないVibe Codingからの気づき
ohmori_yusuke
3
27
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
130
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
410
市町村のオープンデータを使って「公園・トイレの口コミマップ」を作ってみた
ohmori_yusuke
0
43
エンジニアが組織に馴染むために勉強会を主催してチームの壁を越える
ohmori_yusuke
2
140
学びは趣味の延長線
ohmori_yusuke
0
88
言葉にするとやる気を再確認できる
ohmori_yusuke
1
22
生成AIで知るお願いの仕方の難しさ
ohmori_yusuke
1
160
APIサーバーが止まったので、GitHub Actions内にAPIサーバーを立てた話
ohmori_yusuke
2
190
Other Decks in Technology
See All in Technology
United Airlines Customer Service– Call 1-833-341-3142 Now!
airhelp
0
170
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
10
130k
QuickSight SPICE の効果的な運用戦略~S3 + Athena 構成での実践ノウハウ~/quicksight-spice-s3-athena-best-practices
emiki
0
240
VGGT: Visual Geometry Grounded Transformer
peisuke
1
550
american aa airlines®️ USA Contact Numbers: Complete 2025 Support Guide
aaguide
0
470
アクセスピークを制するオートスケール再設計: 障害を乗り越えKEDAで実現したリソース管理の最適化
myamashii
1
250
20250707-AI活用の個人差を埋めるチームづくり
shnjtk
6
4.1k
SREのためのeBPF活用ステップアップガイド
egmc
1
780
AWS CDK 入門ガイド これだけは知っておきたいヒント集
anank
4
490
第64回コンピュータビジョン勉強会「The PanAf-FGBG Dataset: Understanding the Impact of Backgrounds in Wildlife Behaviour Recognition」
x_ttyszk
0
130
Contributing to Rails? Start with the Gems You Already Use
yahonda
2
120
Delegating the chores of authenticating users to Keycloak
ahus1
0
170
Featured
See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Side Projects
sachag
455
42k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Code Review Best Practice
trishagee
69
19k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Facilitating Awesome Meetings
lara
54
6.5k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
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もすんなり入れた