🫐

2 ヶ月かけてブルーベリー本を写経したら TypeScript 力がついた

2022/12/17に公開約4,500字

2ヶ月かけてブルーベリー本を写経したらTypeScript力がついた

要約すると

  • TypeScript 力をつけるため、入門書を 1 冊写経しました。
  • 技術面のよかったこと:JavaScript の基礎力&静的型付けの強力さを学べる。
  • メンタル面のよかったこと:自己成長感&達成感が持てる。

対象読者

  • 新しい言語を学ぼうと思っている方
  • TypeScript について、どうやって勉強していいかわからない方

やったこと

毎日以下のサイクルを続けました。

  1. ブルーベリー本に書いてあるコードを写経
  2. そのコードが動くことを確かめてコミット
    コミットメッセージ:p●● 気になったとことをメモ
  3. 書いたコードで気になったところは、console.logで途中結果を出力

ブルーベリー本というのは、TypeScript に興味がある方ならご存じの方も多いと思いますが、
「プロを目指す人のための TypeScript 入門 安全なコードの書き方から高度な型の使い方まで」の事です。

https://www.amazon.co.jp/プロを目指す人のためのTypeScript入門-安全なコードの書き方から高度な型の使い方まで-Software-Design-plus/dp/4297127474/ref=sr_1_1_sspa?__mk_ja_JP=カタカナ&crid=2POB14OWQDKYW&keywords=typescript&qid=1670118355&sprefix=typescript%2Caps%2C295&sr=8-1-spons&psc=1&spLa=ZW5jcnlwdGVkUXVhbGlmaWVyPUExNlNOMDBUR1QyNVpXJmVuY3J5cHRlZElkPUEwMDI1NDM5MjFDMFRRRFZSTDE3TCZlbmNyeXB0ZWRBZElkPUE3OUw5OFpENDAwRE0md2lkZ2V0TmFtZT1zcF9hdGYmYWN0aW9uPWNsaWNrUmVkaXJlY3QmZG9Ob3RMb2dDbGljaz10cnVl

TypeScript を体系的に学べ、TypeScript をもっと知りたくなれる本になっているため初学者は本書から学べば間違えないです。

背景

実務で TypeScript を使用するためです。
独学で JavaScript を少しやっていましたが実務で利用できるレベルではなかったため、
「なんとかせにゃ、、、」と思ってました。
そんな中、『「技術書」の読書術』を読んだところ、言語学習には以下を意識する必要であると記載がありました。

  • あくまで「手段」、「目的」を持つ
  • 複数言語を習得する
  • 動くものを作り、自分の手で確かめる

また、@t_wadaさんの以下ツイートをどこかで目にしました。

https://twitter.com/t_wada/status/9000231741?lang=ja

これを日々の学習に落とし込めればと思い、毎日 1 コミットするルールを自分で設けて写経を始めました。

結果

写経達成!

数値的には以下通りです。
こうしてみると 2000 行近く書いていていることに驚きました。塵も積もれば山となるですね。
(旅行中もコミットできていた自分をほめたい、、、!)

達成期間 ページ コミット ステップ
9/28 ~ 11/30 387 278 2113

途中経過は LT にて報告しました。

https://speakerdeck.com/2nofa11/kayue-ban-kakete-typescriptben-woxie-jing-sitahua

技術面のよかったこと

基礎になる 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 の型システムはほかに類を見ない高い表現力を持っています。高い表現力というのは、簡単に言えば型でいろいろなロジックを表すことが出来るということです。

最初見たときは「???」でしたが、章を進めるにつれて、納得感が得られました。
ユニオン型やリテラル型など一つ一つの技術要素はそこまで複雑ではないですが、それらを組み合わせることによって実現できることの幅の広いこと。これらは本などで学習しないと理解は難しいな。と思いました。
以下 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 から移行した記事になります。

GitHubで編集を提案

Discussion

ログインするとコメントできます