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

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

今日やったこと

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

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

ざっくりサマリー

あらためて JavaScript ってどんな言語?

• Redmonkってとこで言語ランキング見れるんだ

  • 直近でもJSは一位なのね参考
  • 時代はJSなんだなぁ。。。
• 当時流行ってたJavaに名前と構文を似せるっていう発想がすごいおもしろい
• 中身はメロンとメロンパンくらい違うけど

• AltJS(Alternative JavaScript)

  • JSの代替言語。コンパイラされてJSのコードに変換される
  • コンパイルターゲットはES5が多い
• ES6 = ES2015

• ES2015で大きな改変があった

  • モダンな仕様が一気に盛り込まれた

• JSは後方互換性を大事にしてる

  • これすごいよなー普通にプログラミングしてると後方互換性なんて壊しまくりだわ

    変数の宣言

• varで変数宣言をしない！

  • なぜなら…
  • 再宣言可能
  • 変数の参照が巻き上げられる
  • スコープ単位が関数
  • ブロックスコープになれてるとやらかす

• 基本はconstで変数宣言

  JavaScript のデータ型

• 静的型付けと動的型付け

  • 静的型付け
  • プログラム実行前に型が決まってる
  • 一度宣言した変数には同じ型のデータしか入れれない
  • 動的型付け
  • プログラム実行時に値によって型が動的に変わる
  • 一度宣言した変数に異なる型のデータが入れれる
• プリミティブ型とオブジェクト型

• プリミティブ型

  • Number型
  • 整数も小数も同じNumber型
  • 数値ならNumberか。intとかdoubleとか考えなくていいからわかりやすいっちゃわかりやすい
  • BigInt型
  • Number型で扱えない大きな数値を扱える
  • Number型と互換性はない
  • 使う機会なさそう
  • Symbol型
  • これまじでわからん。いつ使うん。
  • Undefine型
  • null型とは明確に区別されてる
  • 宣言のみ行われた変数,オブジェクト内の存在しないプロパティへのアクセスに割り当てられる

• falsyな値

  • false
  • 0
  • NaN (Number型のくせに数値じゃない場合)
  • ” (空文字)
  • null
  • undefined
• truthyな値 → falsyな値じゃないやつすべて

• リテラル

  • Boolean型
  • true,falseが真偽値リテラル
  • Number型
  • 先頭に0xで16進数,0oで8進数,0bで2進数
  • String型
  • シングルクォート,ダブルクォートで囲むと文字列リテラル
  • バッククォートで囲むと改行出来たり${}内で式を展開できるテンプレートリテラル
  • 要するに代入する値を判断して型定義してくれるってことかな？
• リテラルで定義された値はプリミティブ型
• プリミティブ型でメソッド使えるのはラッパーオブジェクトに自動変換されているから

• JSのオブジェクトには広義のオブジェクトと狭義のオブジェクトがある

  • 狭義のオブジェクト → 一般的に連想配列のこと。RubyのハッシュやJavaのHashMap相当
  • 広義のオブジェクト → プリミティブ型以外のすべてのもの

  • 意味が2つあるとややこしいな…でも文脈でわかるのか…

    関数の定義

• 文と式

  • 変数に代入できるものが式。出来ないものが文
  • if文は文。for文も文
  • 三項演算子は式
• 式にはセミコロンが必要だが,文にはセミコロンが必要ない
• 関数宣言にはvarと同じ問題を抱えているので,constを使った関数式を基本使うように

• 第一級オブジェクト

  • 変数に代入
  • 配列の要素
  • オブジェクトのプロパティ
  • 引数
  • 戻り値
  • などに設定できる

• 第一級関数

  • 関数を第一級オブジェクトとして扱えるプログラミング言語の特性
• Functionコンストラクタで関数を作るとグローバルスコープで実行される危険性があるからやっちゃダメ

• JSではオブジェクトのプロパティになっている関数をメソッドと呼ぶ

  • 他の言語とメソッドの意味が違ってややこしい…
  • あくまでプロパティなんだな。

• アロー関数式

  • const addOne = ( n ) => { return n + 1; };
  • 引数一つならカッコが省略できる
  • 本文がreturn文だけのときはretrurn文のブロックを省略できる
  • const addOne = n => n + 1;

• 無名関数

  • 匿名関数ともいう
  • 変数に代入されないと消滅する関数

• 関数の設計では重要な引数ほど前に持ってくるべき

  • ちゃんと意識したことなかったな
  • 出てくる順に書いてる気がする

• ES2015から使える引数の表現

  • デフォルト引数
  • 省略可能
  • RestParameters
  • ...プレフィックスをつけることで残りの引数を配列として受けれる
  • 可変長引数(引数の数が固定じゃない)を受けることができる

まとめ

言語仕様あたりの勉強って眠くなるけど,りあクトだと物語になってるから楽しい。
結構感覚でJS書いてるところがあるから改めて学ぶことで発見が沢山ある。
基礎ができてない証拠ですねw
スピードアップしてやってくぞと思ったけどやっとパート1が1/3終わったくらいか…
いつまでも勉強だけして実践しないやつの典型になっている気がする。

それではまた明日。