2 ヶ月かけてブルーベリー本を写経したら TypeScript 力がついた
2 ヶ月かけてブルーベリー本を写経したら TypeScript 力がついた
要約すると
- TypeScript力をつけるため、入門書を1冊写経しました。
- 技術面のよかったこと：JavaScriptの基礎力＆静的型付けの強力さを学べる。
- メンタル面のよかったこと：自己成長感＆達成感が持てる。
対象読者
- 新しい言語を学ぼうと思っている方
- TypeScriptについて、どうやって勉強していいかわからない方
やったこと
毎日以下のサイクルを続けました。
- ブルーベリー本に書いてあるコードを写経
- そのコードが動くことを確かめてコミット
コミットメッセージ：p●● 気になったとことをメモ - 書いたコードで気になったところは、
console.logで途中結果を出力
ブルーベリー本というのは、TypeScriptに興味がある方ならご存じの方も多いと思いますが、
「プロを目指す人のためのTypeScript入門安全なコードの書き方から高度な型の使い方まで」の事です。
TypeScriptを体系的に学べ、TypeScriptをもっと知りたくなれる本になっているため初学者は本書から学べば間違えないです。
背景
実務でTypeScriptを使用するためです。
独学でJavaScriptを少しやっていましたが実務で利用できるレベルではなかったため、
「なんとかせにゃ、、、」と思ってました。
そんな中、『「技術書」の読書術』を読んだところ、言語学習には以下を意識する必要であると記載がありました。
- あくまで「手段」、「目的」を持つ
- 複数言語を習得する
- 動くものを作り、自分の手で確かめる
また、@t_wadaさんの以下ツイートをどこかで目にしました。
これを日々の学習に落とし込めればと思い、毎日1コミットするルールを自分で設けて写経を始めました。
結果
写経達成!
数値的には以下通りです。
こうしてみると2000行近く書いていていることに驚きました。塵も積もれば山となるですね。
（旅行中もコミットできていた自分をほめたい、、、！）
| 達成期間 | ページ | コミット | ステップ |
|---|---|---|---|
| 9/28 ～ 11/30 | 387 | 278 | 2113 |
途中経過はLTにて報告しました。
技術面のよかったこと
基礎になる JavaScript への理解が深まった
「独学でJavaScriptを少しやっていました」レベルだと、本書で言われている「式と文」の違いや、「JavaScript関数は第一級オブジェクト」を説明できないレベルにあると思います。
その点この本は、JavaScriptの特徴を丁寧に説明してもらえるおかげで、TypeScriptで躓くところがあらかじめ舗装されていたことに感動しました。
以下にあいまいに理解していた例を出します。
分割代入
この{ }でオブジェクトを展開する構文、これを読んでから実務でバリバリ使えるようになりました。
const { foo, bar } = obj; // objのプロパティを変数に
const {
foo,
obj: { bar },
} = obj; // objのプロパティがネストしていても分割代入可能
const arr = [1, 2, 3];
const { first, second, third } = arr; // 配列を変数に
非同期処理
正直この本を読むまで、Promiseを理解できていませんでした、、、
例えば、なぜ以下コードがメソッドチェーン的になっているのか？について説明できませんでした。
const p = readFile("foo.txt", "utf-8")
.then(() => sleepReject(1000))
.then(
(result) => {
console.log("OK");
},
(error) => {
console.log("E",error);
);
「静的型付け言語」である良さと深さを知ることができた
この本の「イントロダクション」に以下の記載があります。
静的型付けを備えたプログラミング言語は多々ありますが、その中でも TypeScript の型システムはほかに類を見ない高い表現力を持っています。高い表現力というのは、簡単に言えば型でいろいろなロジックを表すことが出来るということです。
最初見たときは「??？」でしたが、章を進めるにつれて、納得感が得られました。
ユニオン型やリテラル型など1つ1つの技術要素はそこまで複雑ではないですが、それらを組み合わせることによって実現できることの幅の広いこと。これらは本などで学習しないと理解は難しいな。と思いました。
以下TypeScriptでの学びの例です。
関数型の部分型関係
部分型関係は、2つの型に互換性があるときに発生する関係で、それを関数型に応用したパターンです。
ある型の値が必要な場合に、別の型を持つ値で代用でき、汎用性の高い実装をできます。
type HasNameAndAge = {
name: string;
age: number;
}; // S
type HasName = {
name: string;
}; // T
const fromAge = (): HasNameAndAge => ({ name: "John", age: 10 }); // 戻り値：S
const f: () => HasName = fromAge; //SはTの部分型のため、戻り値TをSとみなせる
ジェネリクス
型引数を受け取る関数を作る機能の事で、型引数持つ関数は呼び出すたびに<>で、好きな型を指定できます。
型引数（Typeでの表現）とジェネリクス（functionでの表現）の違いすら分かってなかった自分はここの理解が山場でした。
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)); // 数値型でも使用可能
};
メンタル面のよかったこと
達成感が得られる
400ページある技術書を1文字1文字追う経験をしたことがなかった自分にとっては、
計画当初は不可能に思えましたが、中盤から出勤前の朝に読むというルーティンを組み込んでから、テンポよく進められました。
写経し終えたときの達成感は山登りに近い達成感がありました。
（登山系の苦行が苦にならないタイプはこの学習スタイルはおすすめです。）
言語学習へのモチベーションがわいた
今までUdemyやネット記事等で言語学習を中心に行なってきましたが、体系的に理解でき、かつ、学習した内容がすぐ参照できるというのは本ならではのメリットだと思います。
また、「読むだけだと理解できない」 ことが身に沁みて感じました。
このスタイルで、Vueの復習もやっています。
最後に
この学習スタイルの課題としては、アウトプットが少し弱いのかなと感じています。
言語学習の目的はプロダクトのためにあるは思います。
そのための手段として写経をしていましたが、写経自体が目標になってしまっていました。
アウトプットを補完するために、この写経後に個人開発で活用できたらかなりの言語理解につながるのでは、と考えております。
※こちらの記事について、Qiitaから移行した記事になります。
Discussion