学習したことをAIで整理

目的

応用文法を理解し、言語の特性を理解したコーディングができる

そのために理解する必要がある項目

応用文法
・アロー関数
・テンプレートリテラル
・スプレッド構文
・ジェネリクス
・ユニオン型 / インターセクション型
・型ガード / 型アサーション
・コールバック関数

仕組み
・JavaScript と TypeScript の関係
・Polyfill
・ビルド

以下はそれぞれ 理解＋コード例＋仕組みを整理する。

1 アロー関数

関数の短縮構文。

通常の関数

function add(a, b) {
  return a + b
}

アロー関数

const add = (a, b) => a + b

特徴

thisの扱いが違う
短く書ける
コールバックでよく使う

例

const nums = [1,2,3]

const result = nums.map(n => n * 2)

console.log(result)
// [2,4,6]

2 テンプレートリテラル

文字列を埋め込みできる。

const name = "Taro"

const msg = `Hello ${name}`

console.log(msg)
// Hello Taro

複数行も書ける

const text = `
hello
world
`

3 スプレッド構文

配列やオブジェクトを展開する。

const arr1 = [1,2,3]

const arr2 = [...arr1,4]

console.log(arr2)
// [1,2,3,4]

オブジェクト

const user = {name:"taro"}

const copy = {...user, age:20}

console.log(copy)
// {name:"taro", age:20}

ビルドすると

...obj
↓
Object.assign

に変換されることもある。

4 コールバック関数

関数を引数として渡す仕組み。

例

const nums = [1,2,3]

nums.map(function(n){
 return n * 2
})

mapの定義

map(callback)

コールバック関数を受け取る。

アロー関数で書くと

nums.map(n => n * 2)

5 ジェネリクス

型を後から決める仕組み。

例

function identity<T>(value: T): T {
 return value
}

呼び出し

identity<number>(5)
identity<string>("hello")

mapの型定義

TypeScriptの配列

interface Array<T>

map

map<U>(
 callbackfn: (value: T) => U
): U[]

意味

T型配列 → U型配列

例

const nums = [1,2,3]

const result = nums.map(n => n.toString())

ここでは

T = number
U = string

6 reduce の型

reduceは

配列 → 1つの値

型定義

interface Array<T> {
  reduce<U>(
    callbackfn: (
      previousValue: U,
      currentValue: T,
      currentIndex: number,
      array: T[]
    ) => U,
    initialValue: U
  ): U
}

例

const nums = [1,2,3]

const sum = nums.reduce((acc,n) => acc + n, 0)

console.log(sum)
// 6

ここでは

T = number
U = number

7 ユニオン型

ORの型。

type Id = string | number

例

function printId(id: string | number) {
 console.log(id)
}

8 インターセクション型

ANDの型。

type A = {name:string}
type B = {age:number}

type User = A & B

結果

{
 name: string
 age: number
}

9 型ガード

ユニオン型を安全に扱う仕組み。

function printId(id: string | number) {

 if(typeof id === "string"){
   console.log(id.toUpperCase())
 }

}

ここで

typeof id === "string"

が型ガード。

10 型アサーション

型を明示する。

const el = document.getElementById("app") as HTMLDivElement

11 JavaScript と TypeScript の関係

TypeScriptは

JavaScript + 型

TypeScript

const a: number = 1

コンパイル後

const a = 1

型は消える。

12 Polyfill

古い環境に新しい機能を追加する。

例

古いブラウザには

includes

がない。

[1,2,3].includes(2)

動かない場合

if (!Array.prototype.includes) {

 Array.prototype.includes = function(value){

   for(let i=0;i<this.length;i++){
     if(this[i] === value){
       return true
     }
   }

   return false
 }

}

13 ビルド

新しい構文を古い構文に変換する。

例

const add = (a,b) => a + b

Babel変換

var add = function(a,b){
 return a + b
}

14 Reactのビルド

ReactのJSX

const App = () => <h1>Hello</h1>

ビルド後

const App = () => React.createElement("h1", null, "Hello")

15 ビルドツール

主なツール

Vite
Webpack
Babel

役割

TS → JS
JSX → JS
新しいJS → 古いJS
ファイル結合

まとめ

js/ts(2)レベルで理解しておくべきポイント

アロー関数
テンプレートリテラル
スプレッド構文
コールバック関数
ジェネリクス
ユニオン型
インターセクション型
型ガード
型アサーション
TS → JS コンパイル
Polyfill
ビルド

また

map
reduce

の型定義を読むことで

ジェネリクス
コールバック
型推論

の理解が深まる。

例

interface Array<T> {
  reduce<U>(
    callbackfn: (previousValue: U, currentValue: T) => U,
    initialValue: U
  ): U
}

ここで

T = 配列要素
U = 結果型

となる。

js/ts(2) 応用文法・仕組みまとめ（自分用整理メモ）