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
220
WebエンジニアがSwiftをブラウザで動かすプレイグラウンドを作ってみた
ohmori_yusuke
0
170
アニメがエンジニアをつなぐ!「エンジニアニメ」勉強会が巻き起こすCo-Creationの波
ohmori_yusuke
0
140
組織が大きく変わろうとするとき、自分はどうありたいかを考えている
ohmori_yusuke
19
6.5k
技術以外をきっかけに交流するエンジニア向け勉強会
ohmori_yusuke
0
54
デザインって“感覚”だけじゃないVibe Codingからの気づき
ohmori_yusuke
3
87
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
150
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
1
560
市町村のオープンデータを使って「公園・トイレの口コミマップ」を作ってみた
ohmori_yusuke
0
370
Other Decks in Technology
See All in Technology
KMP の Swift export
kokihirokawa
0
340
Exadata Database Service on Dedicated Infrastructure(ExaDB-D) UI スクリーン・キャプチャ集
oracle4engineer
PRO
2
5.5k
小学4年生夏休みの自由研究「ぼくと Copilot エージェント」
taichinakamura
0
500
SwiftUIのGeometryReaderとScrollViewを基礎から応用まで学び直す:設計と活用事例
fumiyasac0921
0
150
許しとアジャイル
jnuank
1
130
Adminaで実現するISMS/SOC2運用の効率化 〜 アカウント管理編 〜
shonansurvivors
3
360
AIが書いたコードをAIが検証する!自律的なモバイルアプリ開発の実現
henteko
1
350
M5製品で作るポン置きセルラー対応カメラ
sayacom
0
160
AWSにおけるTrend Vision Oneの効果について
shimak
0
140
生成AI_その前_に_マルチクラウド時代の信頼できるデータを支えるSnowflakeメタデータ活用術.pdf
cm_mikami
0
120
英語は話せません!それでも海外チームと信頼関係を作るため、対話を重ねた2ヶ月間のまなび
niioka_97
0
130
From Prompt to Product @ How to Web 2025, Bucharest, Romania
janwerner
0
120
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Side Projects
sachag
455
43k
Code Review Best Practice
trishagee
72
19k
Documentation Writing (for coders)
carmenintech
75
5k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Speed Design
sergeychernyshev
32
1.1k
How to train your dragon (web standard)
notwaldorf
96
6.3k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.7k
A designer walks into a library…
pauljervisheath
209
24k
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もすんなり入れた