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

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

今日やったこと

• りあクト！ TypeScriptで始めるつらくないReact開発 第 2 章 エッジでディープな JavaScript の世界

りあクト！ TypeScriptで始めるつらくないReact開発 第 2 章 エッジでディープな JavaScript の世界

ざっくりサマリー

クラスを表現する

• メンバーメソッド？

  • クラスの中で定義されているメソッド
  • Javaやってるのにわからんかったwww
• メンバメソッドはアロー関数式で書ける
• コンストラクタはアロー関数式では書けないから注意

• JSのクラス構文は厳密にはクラスではなくシンタックスシュガー

  • シンタックスシュガー？
  • 既存構文を別の構文でわかりやすく同じことができるようにしたもの

• クラスベースとプロトタイプベース

  • クラスは実態を持たない抽象概念。プロトタイプは実態のあるオブジェクト。
  • 各オブジェクト値のプロトタイプがprotoに格納されている
  • 開眼JavaScriptでやったような内容だな
  • プロトタイプチェーンは最終的に空のオブジェクトを経てnullに到達する
  • すべてのジェクトはobjectオブジェクトである。。。。
  • objectオブジェクトこそが開祖
  • クラス構文のextendsによる継承はプロトタイプチェーンを作っている
  • 拡張性と柔軟性がプロトタイプベースの強み
  • なるほど。。。わかったようなわからないような。。。
  • エヴァはプロトタイプベースの世界w

  • ちょっとわかってきたかも。。。

    配列やオブジェクトの便利な構文

• オブジェクトのキー名も変数で指定できる
• プロパティ名のショートハンド → obj = { 変数名 } とすると { 変数名: 変数の値 }というようなオブジェクトを作ることができる
• 分割代入ははじめて見た時は？って感じだったけど覚えると便利※使いこなせてはいない
• スプレッド構文も便利だけど,｢ん？｣って一瞬なる。…ごめん。うそ一瞬じゃなくて結構時間かかる。

• オブジェクトのマージとコピー

  • Object.assign() → オブジェクトの追加と上書き
  • 第一引数にターゲットのオブジェクト
  • 第二引数以降に追加･上書きしたいオブジェクト
  • 破壊的メソッド
  • オブジェクトのコピーはスプレッド構文で代用
  • スプレッド構文でのコピー

  • シャローコピー

    • コピーの深さが1段階までしか有効じゃない
  • JSON.parse(JSON.stringify(obj))で文字列として展開してJSONにパースし直す方法でまるごとコピーする方法もある
  • ただし,関数などが入っているとうまく動かない
  • 現実的にはLodashのcloneDeep()を使うとかが選択肢となる

まとめ

開眼JavaScriptを読んでた(まだ途中)おかげでプロトタイプベースのあたりがなんとなくわかるような気がします。
エヴァに例えられたことでプロトタイプベースもエヴァもなんとなく腹に落ちたような気がします。
気がするを多用してるからホントはわかってない気もします。

それではまた明日。