Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
一か月半かけて、TypeScript本を写経した話
Search
ツノ
November 15, 2022
Programming
910
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
一か月半かけて、TypeScript本を写経した話
ツノ
November 15, 2022
More Decks by ツノ
See All by ツノ
エンジニア達の_完全に理解した_-コードでの契約ってなんだ_.pdf
2nofa11
1
230
Vite完全に理解した その1
2nofa11
2
340
年末年始に「chibivue」で Vueヂカラをつけた
2nofa11
0
310
「世界一流のエンジニアの思考法」 を完全に理解した
2nofa11
1
360
書籍「プログラマー脳」を完全に理解した
2nofa11
0
94
VuexからPinia移行に向けて
2nofa11
0
480
VueTestUtilbrのキホンの『キ』
2nofa11
0
190
Other Decks in Programming
See All in Programming
Atomic Design, Enforced: Scaling Mobile Design Systems (next.app devCon / droidCon Berlin 2026)
steliosf
PRO
0
180
Railsのためのパスキー実践入門 〜マルチテナントSaaSでの意思決定〜
utakaha
3
1k
Agentic Software Factoryに、すごく賢いIF文を。 / super smart IF statement into the Agentic Software Factory.
rkaga
8
2.3k
🇪🇸 React Alicante 2026 (Workshop)
ythecombinator
PRO
0
100
オーケストレーション記述言語 Katari
yukikurage
0
160
ジョジョの世界をXRで再現する
mofurune
0
180
Kotlinの15年とServer-Side Kotlin
n_takehata
1
160
PyConTW 2026 - AI Coding 不只是工具升級, 區域醫院醫療資訊系統協作開發與資訊團隊轉型實踐
cclai999
0
140
R8 の設定見直しでアプリサイズ削減
andpad
0
220
Herb in Rails 8.2: Your ERB views, now HTML-aware @ Kaigi on Rails 2026, Tokyo, Japan
marcoroth
2
310
[2026-10-09]一枚の布で作らなくてもいい。 信頼性は「パッチワーク」で紡がれる~既存の運用と新しい可能性をつなぎ合わせてきたCREの話~
tosite
0
110
Jetpack Compose Mechanisms
skydoves
3
840
Featured
See All Featured
Docker and Python
trallard
47
4.2k
GitHub's CSS Performance
jonrohan
1033
470k
Designing Powerful Visuals for Engaging Learning
tmiket
1
610
Public Speaking Without Barfing On Your Shoes - THAT 2023
reverentgeek
1
610
The SEO Collaboration Effect
kristinabergwall1
1
600
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
68
59k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.7k
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
aleyda
2
2.2k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
12
1.3k
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
signer
PRO
0
3.8k
Redefining SEO in the New Era of Traffic Generation
szymonslowik
1
480
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
szymonslowik
1
1.4k
Transcript
一か月半かけて、 TS 本を写経した話 ツノ:@2nofa11
質問 どうやって開発言語の習得していますか?
「技術書」の読書術では プログラミング学習は以下の 3 つを意識する あくまで「手段」、「目的」を持つ 複数言語を習得する 動くものを作り、自分の手で確かめる
やったこと TypeScript を習得することを目的 「プロを目指す人のための TypeScript 入門」
具体的な写経内容 1. GitHub 上に Repository を作る 2. 書いてあるコードを黙々と写経&コミット コミットメッセージ:p•• 気になったとことをメモ
3. 書いたコードで気になったところは、 console.log で途中結果を出す
ルール 毎日 1 コミット以上 どんなに自明な内容でコーディングする
写経達成! 成果 ① 内容 ① 成果 ② 内容 ② 期間
9/28 ~ コミット 245 コミット ページ数 375 ページ ステップ数 1994 行 今年のコミット履歴
学んだこと例1-1 JavaScript の知識を学習(復習)することができた 分割代入(パターン = 式) ⇒ 実装できるレベルまで理解することができた const {
foo, bar } = obj; // objのプロパティを変数に const { num, obj: { bar }, } = obj; // objのプロパティがネストしていても分割代入可能 const arr = [1, 2, 3]; const { first, second, third } = arr; // 配列を変数に
学んだこと例1-2 非同期処理 ⇒Promise 文がスラスラ読めるようになった (前までは Promise チェーンへの理解が浅かった) const p =
readFile("foo.txt", "utf-8") .then(() => sleepReject(1000)) .then( (result) => { console.log("OK"); }, (error) => { console.log("E",error); );
学んだこと例2 TypeScript が「型安全である」ということが腑に落ちた! 写経前 文字列型や数値型があるから、JavaScript より安全...? 写経後 型レベルの算術やリテラル型&タプル型を駆使すると、 大規模開発でもコードの揺れがなくなる! TypeScript
の解像度を上げることができた
学んだこと例3-1 TypeScript の便利な機能を学ぶことができた 関数型の部分型関係 ⇒ 型安全かつ、自由度の高い設計が可能になる type HasNameAndAge = {
name: string; age: number; }; // S type HasName = { name: string; }; // T const fromAge = (): HasNameAndAge => ({ name: "John", age }); // 戻り値:S const f: () => HasName = fromAge; //SはTの部分型のため、戻り値TをSとみなせる
学んだこと例3-2 ジェネリクスと型引数 ⇒ 汎用性の高い関数が作成可能になる const generics = () => {
function repeat<T>(element: T, length: number): T[] { const result: T[] = []; for (let i = 0; i < length; i++) { result.push(element); } return result; } console.log(repeat<string>("a", 5)); // 文字列型でも使用可能 console.log(repeat<number>(0, 5)); // 数値型でも使用可能 };
課題 本の写経だけでは、100%理解はできない 現場のリアルなコードとは違う
学習方法自体の振り返り 登山のような達成感がある 正直、効率は悪い (自明でもコーディングする) でも、新たな発見があったりする (!!式 の仕組み等) 1 行 1
行の意味を理解して書いたのに、 忘れている部分も多数出てきている
EOL