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

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

今日やったこと

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

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

ざっくりサマリー

式と演算子で短く書く

• ショートサーキット評価(短絡評価)

  • OR演算子(||)でつなぐと左辺がfalsyな値の場合は右辺に評価がわたされる
  • AND演算子(&&)でつなぐと左辺がtrutyな値の場合は右辺に評価がわたされる
  • 動的に変数を初期化できる
  • if文の代わりに使える

• optional chaining

  • ?.演算子でつなぐと明示的に確認せず,プロパティが存在しなかったらundefinedを返す

• nullish coalescing(Null 合体演算子)

  • nullやundefinedのときだけ右辺が評価される
  • OR演算子よりもこっちを使うほうが良い

  • 意図的に,0や空文字をいれることもあるので

    JavaScript の鬼門、this を理解する

• ついにきたthis

  • 感覚で使ってるから今回ちゃんと覚えるぞ

• this とは、その関数が実行されるコンテキストであるオブジェクトへの 参照が格納されている『暗黙の引数』

  • 。。。。引数？
  • 関数内で実行時は引数として考えた方がわかりやすい

• thisの中身4つのパターン

  1. new 演算子で呼ばれる場合 → 新規生成されるオブジェクト
  2. メソッドとして実行される場合 → その所属するオブジェクト
  3. 1,2以外の関数(非Strictモード) → グローバルオブジェクト
  4. 1,2以外の関数(Strictモード) → undefined

• thisを使うときの原則

  • this はクラス構文内でしか使わない

  • クラス構文内では、メソッドを含めたあらゆる関数の定義をアロー関数式で行う

• んーまだもやもやするから腹落ちはしてない

  • やっぱ使いつつ原則を確認していく作業が必要なんだろうな

    モジュールを読み込む

• モジュールシステムがないころ

  • ベタで読み込む
  • 依存関係を自分で解決する必要があった

• Node.js登場 → CommonJS という標準API仕様を定めるプロジェクトが立ち上がる

  • モジュールを読み込むのにrequireAPIがつかわれる
  • CommonJSはフロントには向いていなかった

• その問題克服のためAMDという仕様が提起される

  • RequireJSというモジュールローダーができる
  • そこまで広まらなかった
• ES2015で標準機能としてモジュールシステム(ESM)が盛り込まれた

• webpackのすごいところ

  • ESM,CommonJS,AMD様々なモジュール構文をサポートして,異なるモジュール構文が混在しても依存関係を解決してバンドルしてくれる
  • すげー

• モジュールバンドラがやってくれてること

  • Minify → ファイル容量の圧縮
  • Tree Shaking → 使われてないモジュールをバンドル対象から外す
  • 画像データのインライン埋め込み → 画像をデータURL化して埋め込む
  • コード分割
  • キャッシュ管理

• デフォルトエクスポート

  • 名前無しでのエクスポート
  • 1モジュール(1ファイル)につき1回まで

まとめ

何気なくつかってたwebpackだけど,色々できるんですね。
モジュールの読み込みにも歴史があって試行錯誤した結果複雑になっているんだな。
便利なライブラリのおかげで難しいこと考えずに開発できるからありがたいことですね。
やっとこさ言語仕様が終わって次は関数型プログラミングです。
関数型プログラミングがなんなのかはイマイチわかっていません。。。

それではまた明日。