進めてる(進めていく)教材とか

• HypertextCandy React入門チュートリアル 完了
• りあクト！ TypeScriptで始めるつらくないReact開発 3/14 完了
• Udemy フロントエンドエンジニアのための React ・ Redux アプリケーション開発入門 完了
• Udemy React Hooks 入門 - Hooksと Redux を組み合わせて最新のフロントエンド状態管理手法を習得しよう！ 完了
• React 公式チュートリアル 完了

今日やったこと

• りあクト！ TypeScriptで始めるつらくないReact開発 第3章 関数型プログラミングでいこう

りあクト！ TypeScriptで始めるつらくないReact開発 第3章 関数型プログラミングでいこう

ざっくりサマリー

JavaScript での非同期処理

• Promises

  • 標準ビルトインオブジェクト
  • 任意の非同期処理の完了を待って次の処理を行えるようにする
• 非同期処理をすべて同じ階層に書くと順番の保証がされない

• コールバックを使えば順番を保証することができる

  • ただし,可読性の悪い,いわゆるコールバック地獄におちいる
• Promiseを使えばコールバック地獄からは救われる

• async / await

  • 関数宣言時にasyncキーワードを付与するとその関数は非同期関数となる
  • 非同期関数の中では他の非同期関数をawait演算子をつけて呼び出せる
  • awaitをつけるとPromiseがresolveかrejectされるまで待ってくれるようになる

  • 非同期処理は基本的にasync / awaitをつかう

    りあクト！ TypeScriptで始めるつらくないReact開発 第4章 TypeScriptで型をご安全に

    ざっくりサマリー

    TypeScript はイケイケの人気言語?

• メジャーになった理由

  • 静的型付け
  • 型推論
  • Null 安全
  • 上記以外はJavaScriptと同じ構文
  • 近年のプログラミングのトレンドを抑えている
• TDDの文化はRubyコミュニティから広がったんだ

• 型推論

  • 言語処理の文脈からある程度 型を予測して型付けをしてくれる機能

• Null安全

  • コンパイルの段階でnullアクセスエラーになる可能性のあるコードをチェックしてくれる

    TypeScript の基本的な型

• 型アノテーション

  • value: someTypeのように宣言時に変数の型の注釈がつけれる
• プリミティブ型はJavaScriptと同じ

• 配列の型

  • 型名の後ろに[] ←こっちを使う
  • const numArr: number[] = [1, 2, 3];
  • Array<型名>
  • const strArr: Array<string> = ['one', 'two', 'three'];

• オブジェクト型を定義する場合は方に名前をつける

  • インターフェース(Interface)で定義できる

    interface hoge {
    readonly fuga: string;
    foo: number;
    bar?: string;
    [fizz: string]: number; }

  • readonly修飾子 → 書き換え不可
  • 末尾に？ → 省略可
  • [fizz: string](インデックスシグネチャ) → 任意のキーと値が追加できる

• リテラル型

  • let hoge = 'fuga' | 'foo' | 'bar' = 'fuga';
  • Enum型みたいに使える

• タプル型

  • const charAttrs: [number, string, boolean] = [1, 'patty', true];
  • 型と順番と個数を定義できる
  • 引数の型。。。

• Any、Unknown、Never

  • Any型 → 何でも入る
  • Unknown型 → any型の方安全版

  • Never型 → 何も代入できない

    関数とクラスの型

• tsconfig.jsonでnoImplicitlyAnyを指定しないとすべてany型に割り振られてしまうので設定する
• 戻り値は型推論が有効になる場合は省略できるが,引数は必ず型を指定する
• 引数と戻り値をまとめて定義する方法 → interfaceで定義する

• ジェネリックプログラミング (Generic Programming)

  • データの型に束縛されないよう型を抽象化してコードの再利用性を向上させつつ、 静的型付け言語の持つ型安全性を維持するプログラミング手法

• ジェネリクス(Generics)

  • 型引数を用いて表現するデータ構造
• TypeScriptではメンバー変数を最初に宣言する必要がある
• アクセス修飾子がある → Javaと一緒

• 継承よりも合成

  • 継承
  • 余計なメンバー変数も継承してしまう
  • 親クラスの実装を容易にに変更できない
  • 保守性が悪い
  • 親と子の責任の境界があいまい

  • 現代は継承そのものを避けるべきという認識が開発者の間に広まってきてる

  • そうなんだ。。。

  • React でもコンポーネントをクラスで作成するときは、継承を避けるよう公式ドキュメントに書かれてる

  • だから関数コンポーネント推奨な流れなのかな
• 独立性を高めた部品を組み合わせて問題を解決する

• 実装を伴った継承は避けるべき

  • abstract修飾子で抽象クラスを定義する ←使わない

• インターフェースを使ってクラスの型を定義してやる

  • アロー関数はオーバーロードできない

• クラスはインターフェース型宣言とコンストラクタ関数の宣言を同時に実行している

  • クラスはインターフェースとして使える

まとめ

ついにTypeScript来た！業務でJava使ってるからそこまでしんどくない。
むしろわかりやすい。
Javaやっててよかったー

それではまた明日。