ペロハム大学

ﾔﾙｿﾞｰ

プロを目指す人のためのTypeScript入門 読書メモ⑦ 第5章（1）

TypeScript

■ 思ったこと

TypeScriptでクラスを使う意味を探っていこう

■ 第5章 クラスの宣言と使用（5.1～5.1.11）

クラスを使うにはクラス宣言

  • TypeScriptにおけるクラスって一種のオブジェクト
  • そんで、クラスってnewしてオブジェクトを生成するもの！（ついでに、オブジェクトの中身がプロパティ）
  • クラスによって生成されたオブジェクトがインスタンス
  • クラス宣言の構文はclass クラス名{}、実際に使うならconst 変数 = new クラス{}でインスタンス化しましょDo it！
  • ・・つまり、{}の中で書かれる処理まで含めてクラス宣言というわけね
  • {}の中ではプロパティ宣言したりメソッド作ったり
  • アクセシビリティ修飾子（public、protected、private）もいつも通り使えますわよ。privateおさらい、使う側が知らなくていい情報（処理に使いたいだけの変数とか）を外に漏らさない術！
  • プロパティ名に#つけてあげるとそれでもプライベートになる。こっちはJavaScriptにある機能だからより厳密なんだって
    • #つけたプロパティはcosole.logとかしても見れない
    • privateは見える
  • 型引数も使える、クラス名のあとに＜オリジナル型名＞ってしてあげればOK、実行ごとに型変えられるアレですね！？

コンストラクタ

  • も使えるぜ。newしたときにまず呼ばれるところだったね。それってオブジェクト作ってる最中に実行される操作らしい！
  • constructor(){}みたいにメソッド宣言しないといけないらしい！javaと違う！
  • 引数受け取ってthisで初期化するのがサイテッキ、読み取り専用変数にも使える、オブジェクト作ってる途中のことだから。
  • 引数に修飾子つけてあげるとプロパティ宣言を省略できる。同時にプロパティ宣言してると見なしてくれるのだ
  • こんな感じで書いてもよくなる・・しかし！これはJavaScriptには存在しない構文らしい。そもそも修飾子がTypeScriptにしかないとな
class User {
  // name: string = "";
  // age: number = 0;
  constructor(private name: string, private age: number) {
    // this.name = name;
    // this.age = age;
  }
}

静的プロパティ・静的メソッド…って！？

  • プロパティ・メソッドの前にstaticをつければ、インスタンスじゃなくて、クラスそのものに属するプロパティ・メソッドになる
  • インスタンス化しなくてもクラス名.プロパティとかクラス名.メソッドってやれば直に使えるって感じだけど…正直あんま使わん！

こっちもあるぞ！クラス式

  • クラス宣言はclass クラス名{}だったけど、クラス式はconst クラス名 = class {}、クラスが変数に代入されるのさ
  • こうなると修飾子は使えなくなる、そうなんだ。

■ 感想

またクラスの呼び方忘れていた。クラスを呼んであげるにはインスタンス化するしかないのに、どうやって処理呼ぼう！？とあたふたしてしまった。私は愚かだ。でも＠InjectすればDIされるからnewしなくてもいいのさ！これ、javaの話…なんかさ、仕事中に「クラス名 変数」だけ書かれてるの見て混乱してしまったよ。てか、水曜の禁煙デスゲームめちゃくちゃ面白かった、まなぶの目が。。！追いつめられる姿を笑いとして提供してくれてありがとう。

プロを目指す人のためのTypeScript入門 読書メモ⑥ 第4章（3）

TypeScript

■ 思ったこと

今回特にむずいぞ、気をつけろ！！

■ 第4章 TypeScriptの関数（4.2～4.6.4）

そもそも関数自体に型がある

  • 関数型は(引数リスト) => 返り値の型、最初のほうにこんがらかったとこだ！今ならわかる
    • 引数内なら() => voidでいいのよ
    • 型なので、type文で別名だって付けられるぜ

型省略問題

  • 返り値
    • 型推論があるから省略できるけど、望んだとおりに解釈されるかはちょっと微妙
    • 正直型注釈ある方が分かりやすいし、書いた方がいい派
  • 引数
    • 原則省略できない！が！「逆方向の型推論」が働く場合は書かなくてOK・・なんて！？
    • 通常の型推論は、式から型を推論する
    • その逆なので、式の型が先にわかってれば推論できる…？
    • もっと分かりやすい例！関数型がtypeとかで先に宣言されていたら、式が先にわかってるね？だからその型を基に代入する式は引数が省略できる…宣言したときに型注釈されてるから！！
    • 分かりきったことを何度も書くぐらいだったら省略を許してくれるのだ
    • もいっこ例があるよ、関数引数の時（コールバック関数とかね）も省略してOK。配列の型から推論できる

コールシグネチャという構文がある

  • オブジェクト型の中で使用できる構文、関数型の表現に仕えるものとな？
  • 構文は(引数リスト): 返り値の型、なんかよく見る感じだけど・・？
  • この書き方すれば関数とみなされる、メソッド記法と似てるな
  • なんか、一つのオブジェクト型に対し、プロパティと関数、両方の性質を併せ持つ❤みたいなことができるらしい
  • あんま使わなそうだ・・！

再び登場！関数型の部分型

  • 型のを別の型で代用できるアレですね？・・やばい！ここあんま理解できてないぞ

まずは復習！部分型

  • 2つの型の互換性を表す概念
  • 「型Sが型Tの部分型である」は「S型の値がT型の値」に同じ！
  • 型Sと型Tのプロパティが一個でも一致していれば、部分型関係になる。こいつらは今、プロパティの包括関係にあるのだ
  • 型Tが持つプロパティがすべて型Sにある、かつ！かぶってる部分の型が同じであればOK
  • こうなれば、型Tの代わりに型Sを使ってもいいんだぜ
  • 覚え方は「少ない方ベースに大きいの入れるのはいいけど、大きい方ベースに小さい方は無理！」プロパティが足りないからね
type FooBar = {
  foo: string;
};

type FooBarBaz = {
  foo: string;
  bar: number;
  baz: boolean;
};

const fooBarObj: FooBar = {
  foo: "hi",
};

const fooBarBazObj: FooBarBaz = {
  foo: "hi",
  bar: 1,
  baz: false,
};

// これはいいけど
const okObj: FooBar = fooBarBazObj;

// これはエラーなるよ
// 型 'FooBar' には 型 'FooBarBaz' からの次のプロパティがありません: bar, bazts(2739)
const errObj: FooBarBaz = fooBarObj;
  • ちなみにokObjの中には本来なさそーなbaz: falseもちゃんと入る
  • 型によってデータが削られたりはないってことさ。第1章でやった通り、TypeScripyの型はあくまでエラーチェック用なのだ

再び登場！関数型の部分型（TAKE2）

  • 関数型だって部分型関係になることがある
  • 返り値の型による部分型
    • 返り値の型が部分型関係であればOK
    • しかし、引数が一致していないとダメだぞ！
    • void型同士は引数一致してればすぐ条件満たす
  • 引数の型による部分型
    • 引数の型違っても部分型関係になるよ
    • おなじく、引数の型が部分型関係であればOK
    • おっきい方のオブジェクトに入ったデータををちっさい方のオブジェクトで受け取って必要な部分を使える
  • 引数の数による部分型
    • もう何となくわかった！引数多い関数のオブジェクトに引数少ない関数入れられるんだろ！
    • 余った引数は捨てられる

ジェネリクス関数

  • 型引数（プロパティの型ね）を持つ関数
  • 関数には＜型引数リスト＞で受け取る予定のオリジナル型名を設定する、こんな感じで関数＜オリジナル型引数＞(引数): 戻り値
    • 引数、戻り値にはオリジナル型名を使用できる
  • 呼び出す側でオリジナル型引数に具体的な型を設定してあげればよい、stringとかnumberとか
  • つまり、呼び出すたびに異なる型で受け取れる！返せる！
  • 処理に使いたい型は違えど、処理は同じ時にいいかも
  • 因みに、呼び出す側の型引数は省略できる、型推論があるからわざわざ書かなくてもいいとな！？

力試し

  • 関数編
    • FizzBuzzを関数で作り直してみようの巻
    • 回答みると、戻り値に変数使わずに早期リターンしていた。そうだ、早期リターン、また忘れていた・・！
    • 細かく処理を分けよう！
    • letは前も言った通り、中身が変わるので追うのが大変・・だから、影響範囲を狭めることでカバーするのだ。そういう意味でも処理を分けるのは大事！
  • callback編
    • 「T型で受け取り、U型で返す」を読み飛ばして混乱した！ジェネリクスはだいぶ関数の自由度が上がる
    • 今回だと、引数は毎回number[]だけど戻す型は呼び出すごとに変えたり

■ 感想

4章長かった！！かつてまったく分からなかった部分型が多少理解できたが、まだ使いどころが微妙！共変反変の話はまだ理解できる段階になく、すっ飛ばした！！

プロを目指す人のためのTypeScript入門 読書メモ⑤ 第4章（2）

TypeScript

■ 思ったこと

壁のキュウめちゃくちゃ面白かった！！これからも出てほしい！！

■ 第4章 TypeScriptの関数（4.1.7～4.1.10）

可変長引数

  • 可変長引数？Restパラメータを使うみたいだが覚えてるか！？...変数名、これね！
  • 構文は...変数名: 型、受け取った引数を全て可変長引数にぶち込むので、型注釈で配列型を書いてほしいナ！
  • 可変長引数を最後に設定すれば、他の配列と併用してOK、残余引数と一緒ね

逆に、関数を呼ぶならスプレッド構文

  • 可変長引数に対して、関数呼び出し時にスプレッド構文が使うこともできる。構文は関数(...式)
const sum = (...args: number[]): number =>{
    // 処理
};
const nums = [1,2,3,4,5];
console.log(sum(...nums));
  • ちなみに可変長引数もスプレッド構文も使わないとこう・・正直まだうまみが分かる段階にない！
const sum = (args: number[]): number =>{
    // 処理
};
const nums = [1,2,3,4,5];
console.log(sum(nums));

オプショナル引数

  • 渡しても渡さなくてもいい引数！
  • ?つかったり初期値入れたりした時の呼び方なのね

コールバック関数

  • 関数の引数に関数を渡すこと！
  • これをうまく使って関数を抽象化できるとな
  • 配列のメソッド使うときに相性がいいらしい・・？
  • ていうのも、配列はコールバックに特化した関数をデフォで持ってるから
  • 例えば配列.map(関数)だと、配列のすべての要素に対して関数呼んで結果で新しい配列作ってくれたり
  • できた配列は返り値の型になる
  • 直接関数を書いても関数式を変数で渡してもいい
  • ほかに代表的なfindは条件に一致した最初の要素を返す、filterは条件に一致した要素をすべて返す
  • このよーなコールバック関数を高階関数ともいう、聞きなじみねえ～…！

■ 感想

４章はまだまだ続くぞ！！findとかfilterは使ったことあるけど、これらがコールバック関数だったのか。関係ないが、この前ラヴィットで見たイージードゥダンサーズが強烈でもはやダンビラムーチョが最近気になる！・・歌がうまい！

プロを目指す人のためのTypeScript入門 読書メモ④ 第4章（1）

TypeScript

■ 思ったこと

親知らずを抜いた後がこんなにキツイとは、思わなかったねえ・・！！

■ 第4章 TypeScriptの関数（4.1～4.1.6）

関数は、プログラムを部分的にまとめることだね。再利用とかできて便利なアレ

関数を作ろう（関数宣言編）

  • 作り方はいろいろあるけど、まずは関数宣言での作り方から、文の一種！！
  • 構文はfunction 関数名(引数リスト): 返り値の型{ 実行されえるプログラム }
    • 返り値の型は型注釈の一種であることが、わかるだろう？
    • returnで返してあげればOK
function range(min: number, max: number): number[] {
    // ここに処理書く
}
  • 関数宣言より前に関数を使うことを、巻き上げというらしい。へえ・・それってつまり、関数宣言で作られた関数はプログラム実行時に存在してるってこと！

返り値いらないよーって人はvoidを使おう

  • 返り値の型をvoidにすればOKの助
  • 返すものがないからreturnは不要だけど、不要な処理をすっ飛ばす早期リターンを使うのはアリ。

早期リターン

  • 条件に当てはまらない場合、さっさと処理を終わらせるテク
  • ifelseでもいいけど、こっちのがネストせずスッキリかけるので、積極的に使うべし
numberCheak(11);

function numberCheak(num: number): void {

  if (num > 10) {
    console.log(`10以下を入力してください、入力された数字は${num}です。`);
    // 早期リターン
    return;
  }
  {
    //10以下の場合
    //正しい処理をこっちに書く
  }
}

関数を作ろう（関数式編）

  • こっちは名前の通り、式になります
  • 構文はfunction (引数リスト): 返り値の型{ 実行されえるプログラム }
    • 宣言と比べると、関数名がなくなっている
    • 式だから、評価結果自体が関数とな
    • ・・つまり！関数式は変数に入れてあげてナンボということ！！
const numberCheak = function (num: number): void {
    // ここに処理書く
};
numberCheak(11);
  • お気づきでしょうか、関数式は式なので、変数宣言とセットです。それゆえ、変数宣言前に関数が使えないよ！
  • ・・それ以外に関数式との違いは特にない

関数を作るんだ（アロー関数式編）

  • 式というからには、関数式の仲間
  • 構文は(引数リスト): 返り値の型 => { 実行されるプログラム }、チャームポイントは=>
const numberCheak = (num: number): void => {
    // ここに処理書く
};
numberCheak(11);
  • 正直、functionを書かなくなっただけ

アロー関数式は省略OK

  • 従来のアロー関数式
type NumberObj = {
    num1: number;
    num2: number;
};

const inputNum: NumberObj ={
    num1: 100,
    num2: 200
}; 

const numberAdd = ({num1,num2}:NumberObj): number => {
  return num1 + num2;
};

console.log(`結果は${numberAdd(inputNum)}です。`);
  • 省略すると
type NumberObj = {
  num1: number;
  num2: number;
};

const inputNum: NumberObj = {
  num1: 100,
  num2: 200,
};

const numberAdd = ({ num1, num2 }: NumberObj): number => num1 + num2;

console.log(`結果は${numberAdd(inputNum)}です。`);
  • 違いはというと・・returnとそれに付随する{}が消え去ってるよ！return書くまでもなく実行結果を変数に入れたいなら使うべし
  • 返り値がオブジェクトリテラルの場合は({})で囲まなきゃいけないので注意よ、文法的にね

関数を作れ！（メソッド記法編）

  • こちらはプロパティを定義する記法の一種、オブジェクトリテラルの中で使える

  • 構文はプロパティ名(引数リスト): 返り値の型 { 実行されるプログラム }、プロパティ名はメソッド名の理解でおけ、というかややこしいし、メソッドと呼ぼう。

type NumberObj = {
  num1: number;
  num2: number;
};

const inputNum: NumberObj = {
  num1: 100,
  num2: 200,
};

const calculation = {
  //普通に書く
  numberMinus({ num1, num2 }: NumberObj): number { return num1 - num2;},
  //アロー関数式
  numberAdd: ({ num1, num2 }: NumberObj): number => num1 + num2,
};

console.log(`引き算結果は${calculation.numberMinus(inputNum)}です。`);
console.log(`足し算結果は${calculation.numberAdd(inputNum)}です。`);

■ 感想

メソッド記法ってなんか便利そう。

ウエストランドANN→面白かった！素晴らしい啓蒙活動、井口のいうことは正しい・・皆目見当違いの崩れ方も良かったし、リスナーとの絡みも笑えた！
天ピANN→犬洗う頻度の話笑った、雑談感が楽しく聞けたので、違うコーナーでまた聞いてみたい！
ビスブラANN0→やっぱ面白い人は漏らしてるんだの定説が濃くなった！とにかく濃密な時間！中でもマシュマロちゃんが強烈すぎる

プロを目指す人のためのTypeScript入門 読書メモ③ 第3章（2）

TypeScript

■ 思ったこと

マヂラブの単独ライブ「客なし漫才八幡宮」を見た勢いでFF7に興味を持つ

■ 第3章 オブジェクトの基本とオブジェクトの型（3.5.6～3.8.3）

for-of文って何！？

  • 構文はfor (const 変数 of 式)、この場合の変数はfor文で使う用の変数、式は配列
  • 要素を順番に変数に入れてくから、その都度ループで処理できる
  • const に再代入しているようにみえるが、実際は各ループで変数が作り直されてる動きなので問題ない

タプル型も何！？

  • 要素数が固定された配列だ。その代わり、いろんな型を入れてOK・・いったん置いとこう！

分割代入も何だ！？？

  • オブジェクトのプロパティを一気に同名の変数に代入できる
  • 必要なのはオブジェクトじゃなくてその中身なので、さっさと取り出して変数に入れちまえ！
  • 構文的にはパターン = 式、変数名？ここではパターンと呼びます
const obj = { name: "neko", age: 1 };

// オブジェクトの中身を複数の変数に一気に代入できる、変数名は同名
const { name, age } = obj;

// 意味的にはこれと同じ
// const name = obj.name;
// const age = obj.age;

残余引数（Restパラメータ）

  • パターンの一番最後に...変数名を使うことで、分割代入の残りすべてを一気に代入できる
  • 安全のために既存のオブジェクトをコピーして新しいオブジェクト作るって感じかしら
const obj = { name: "ねこ", age: 1 , status: "元気"};

const { ...restObj1 } = obj;
console.log(restObj1);

const { name, ...restObj2 } = obj;
console.log(restObj2);

//

プロを目指す人のためのTypeScript入門 読書メモ② 第3章（1）

TypeScript

■ 思ったこと

正月のテレビ、面白すぎ！！！！

■ 第3章 オブジェクトの基本とオブジェクトの型（3.1～3.5.5）

TypeScriptのオブジェクトとは

  • いくつかの値をまとめたデータ！連想配列とよばれる
  • オブジェクトにも当然オブジェクトリテラルがいる
const obj = {
 hoge: 'hoge'  // ここがオブジェクトリテラル！
}
  • オブジェクトリテラルはプロパティ名: 式で出来ている
  • オブジェクトの中身・・それがすなわちプロパティなんですね。こっから値を取得することをプロパティアクセスという
  • 例えば変数objのhogeを取得したければobj.hoge
  • またはobj['hoge']、プロパティ名は文字列なので[]の中はStringが基本
const name = '名無しさん';

const user = {
    name,
    age: 20,
};

console.log(user.name);
user.name = '名無しさん＠あけおめ';
console.log(user['name']);

// [console]
// 名無しさん
// 名無しさん＠あけおめ
  • ちょっと待って！！nameはconstなのに再代入してるじゃん！！・・それは、オブジェクトの中身がいくら変わろうが、変数name の中身自体が同じであればOKということらしい。逆に言うと書き換えできちゃってるってこと、いいのか悪いのか！？

スプレッド構文

  • を使うと、オブジェクトの作成時にプロパティを別のオブジェクトからコピーできます
  • プロパティ名: 式の位置を...式と書けばOK
  • 同じ名前のプロパティがあれば上書きされる、あくまでコピーなので元のやつは変化なし、まったく別物だよ！
const name = '名無しさん';

const user1 = {
    name,
    age: 20,
};

const user2 = {
    ...user1,
    name: '名無しさん＠あけおめ',
};

console.log(user1);
console.log(user2);

// [console]
// { name: '名無しさん', age: 20 }
// { name: '名無しさん＠あけおめ', age: 20 }

オブジェクトの型

  • オブジェクト自体を表す型
// これがオブジェクトの構文だったら
const obj = {
 hoge: 'hoge',
}

// これがオブジェクトの型！
const obj = {
 hoge: string;
}

// つまり、こういうこと
const obj = {
 hoge: string;
} = {
 hoge: 'hoge',
};

type文で型に別名を

  • 型名を宣言する文、TypeScriptにしかない書き方だぜ！ので、コンパイルすると消える
  • 構文はtype 型名　= 型;、これで型に別名が付けれるので、今後は型名として使える
type HogeObj = {
 hoge: string;
};

const obj: hoge = {
 hoge: 'hoge',
};
  • あくまで使用されるのは型チェックの時なので、各順番場所はどこでもいい。なんかわかってきた感じがする！
  • どの型にでも使える

interface宣言でも型に別名を

  • type文と同じく型名を新規作成できるけど、こっちはオブジェクト型に対してしか使えない
  • 構文はinterface 型名 オブジェクト型
  • type文で足りるのでinterfaceはあんまり使う機械ないかも？
interface HogeObj = {
 hoge: string;
};

const obj: hoge = {
 hoge: 'hoge',
};

オプショナルなプロパティ

  • あってもなくてもいいプロパティのこと、構文は型名?: 型
  • 実際はundefinedを許容されたユニオン型、業務でよく使った記憶

読み取り専用オブジェクト

  • にしてあげると、再代入時にエラーとなる。プロパティ名前にreadonlyつけてあげればOK

typeofキーワードで型をGET

  • 型推論の結果を型として抽出して型名つけて使える・・ちょいむず！

部分型

  • ある型がある型に部分的に一致していたら、それはそれで入れても良いよ♪てきな…使いながら覚えよう！

type文で使え！型引数

  • 構文は型名<型引数>、型引数は複数あってもOKで、プロパティの型として使えマス
  • 型引数を持つ型はジェネリクス型とも呼ばれる
  • 型引数自体の型は使うときに書いてあげる、こーすることで、構造を保ちながらいろんな型作れる
  • 目的としては抽象化・・実際に使ってみないとなかなかピンとコナイネ
type pet<Dog,Cat> = {
    inu: Dog;
    nuko: Cat;
}

const obj1: pet<number, string> = {
    inu: 0,
    nuko: "1"
}

const obj2: pet<boolean, boolean> = {
    inu: false,
    nuko: true
}
  • 型引数の後ろにextendsつけると必ず部分型これにしろみたいな制約つけれるけど利点が分からんうちは置いとこうかな・・
  • 型引数 = 型で初期値を入れられる。これで省略できるんだって、便利なことはわかる！

出たわね、配列！

  • 最初に言っとくと、TypeScriptの配列はオブジェクトの一種わよ！なんでって・・値がプリミティブとオブジェクトしかないからね、前者じゃないからね
  • やっぱりここでも。配列は配列リテラルで作る！[]の中に色々書くやつ、、これが評価されて配列ができていたのか
  • 配列の中身は要素（element）と呼ぶ
  • 要素の型は一個に限らずなんでも混ぜちゃってOK（ユニオン型だね）
  • 要素にはスプレッド構文も使える、別の配列の中身コピったり

読み取り専用配列型

  • こちらも型の前にreadonlyつけてあげればOK、可読性上がるので積極的に使うべし

便利、配列のメソッド！

  • push
    • おなじみ、配列の後ろに要素追加する、プッシュプッシュ～！
  • unshift
    • …知らん！先頭に要素追加できるんだって、そんなのあったのか・・
  • includes
    • 配列の中に引数が含まれてるか、booleanで返ってくる、便利
  • indexOf
    • 引数が配列の何番目に含まれているか？ない場合は-1が返ってくる、これが結構大事よね

■ 感想

フットンダで印象残ったのは河本の替え歌だ・・三四郎のラジオにたまに来る様子を見ると、変なぶっこみが多くて突っ込む人がいると結構笑える。三四郎ANNは年越し特番も年末空気抜群のわちゃわちゃ感で楽しかったぜ！そんでフットンダ、テレビで川北がハマりまくってるの初めて見たかもしれん！粗品との対決すごくよかった！ヂ寄席は去年見たからの男前激スベリ展開が面白過ぎる、一体感高めで超よかった！優勝ネタ祭りも見ごたえあったし、いぬ、めっちゃワクワクした好き！！座王もまさかの決勝だったしシンパイショーも相変わらず面白い・・ああ、正月最高！！

プロを目指す人のためのTypeScript入門 読書メモ① 第1～2章

TypeScript

■思ったこと

JavaScriptすっ飛ばしていきなりTypeScriptやる人も読んで良いよ♪と書いてあったのでこちらの書籍にいたしました。本を読むために本を読む、おれはまるで人間ネスト構文・・！

■ 第1章 イントロダクション

TypeScriptとJavaScriptの違いって

  • TypeScriptは型注釈を書けるのがJavaScriptとの大きな違い、型チェックは静的に行われる（実行前にエラーがあると赤くなるよね）
  • そんで、型情報は型チェックのためだけに利用される。だからコンパイル後にJavaScriptに変換されてもなんの問題もないわけだ
  • 結局実行時はJavaScriptなるので、TypeScriptは実装するときに安全ってのが使う意味
  • tsからjsへの変換はトランスパイルという。変換を簡単に言うと型注釈を取り除くこと

ECMAScript

  • JavaScriptのもう一つの名、が、もっぱら言語仕様の意味で使われる
  • ECMAScript仕様書によって言語仕様が定義されている
  • 調べると日本語訳してくださっているサイトがあります、これはすごい量！！そしていきなり読むには難しい！ xn--ecmascript2020-tt9vf572amitfjlc.com

■ 第2章 基本的な文法・基本的な型

君は文と式の違いを感じたことがあるか

  • TypeScriptのプログラムは文を並べていくことで作られている！TypeScriptの文は;（セミコロン）で終わるよ
  • 式は文の中に現れる
  • 例えばconst text = "hoge";は文だけど、"hoge"の部分は「hoge」という文字列を作り出している、文字列リテラルという式なのだ（この感覚、ムジ～！）
  • const 変数名 = 式;で覚えよう
  • 文と式の違いは、結果があるかどうか！
  • 式の後にセミコロンを書く文は式文というらしい。特に結果もなく、与えられた式を実行させるだけのヤツ

変数

  • constは再代入不可、letは再代入OKだし初期値入れなくても良い
  • constって定数のイメージだけど、TypeScriptの場合はあくまで変数とみるのが主流なんだって
  • letは中身を追うのに読む側の負担があるため、極力使わないでほしいという思い
  • そうするとletが使われるのはループ処理とかがほとんど

値っていうけど

  • 値はプログラムで扱うデータのこと
  • TypeScriptでいう値はほとんどプリミティブで構成される

プリミティブ？誰よその女！！

  • TypeScriptの値はプリミティブとオブジェクトに分けられる
  • プリミティブでググると「原始的な（もの）、根源的な（もの）」って出るように、それ以上分解できない値のこと
  • プリミティブに含まれる値は文字列、数値、真偽値、BigInt、null、undifined、シンボルの七種類
  • シンボルはあまり使わないのでここでの紹介はカッツ・アイ

数値型

  • 正数も少数もひっくるめてnumber型、いいじゃねえか…

リテラル

  • 何らかの値を生み出すための式のこと

数値リテラル

  • 結果が数値になる式のこと

BigInt

  • ES2020で追加された新キャラ、まだまだnumberが主流だけど、今後のために覚えておこう
  • 任意精度の正数をを表す、要するに誤差のない正確な正数！
  • しかし、計算速度はnumberのほうが高速なので、使いどころは限られる？
  • BigIntリテラルは正数の後に「n」を書けばOK
  • 整数のみなので、小数点とかあると丸められちゃうよ

文字列

  • 「""」でも「''」のどっち使っても良かったんだって、そうだったのか…だいたい統一されてるから知らなかった！
  • 改行するなら「/n」

テンプレートリテラル

  • 「``」で囲われた文字列リテラルのこと、この中では改行できる、もちろんエスケープも使える
const hoge: string = `hoge\nhoge
hoge`;
console.log(hoge);

//[console]
// hoge
// hoge
// hoge
  • ES2015で追加されたので比較的新しい書き方なんだって、なんか納得！
  • 変数を${式}で使える書き方はテンプレートリテラル特有の機能だった！式の定義は覚えているか？例えばconst text: string = "hoge"だったら${text}となるわけだけど、textってイコール"hoge"だよね、これって文字列リテラル、式が入ってるんです！結果として、文字列「hoge」が表示される
  • もっと分かりやすくすると、${1+1}だったら2が表示される、馴染みやすい式！

真偽値（boolean）

  • 真偽値リテラルとしてはtrueとfalseの二種類だけ

nullとundefined

  • どっちもデータがないことを表すが、使うのはundefined推奨・・サポートが手厚いから！

演算子

算術演算子

  • 二項演算子
    • 二つの式をつないで新たな式を作る
  • 単項演算子
    • 一つの式に付与して新たな式を作る
    • -式とか、小技だけど+文字列ってやると数値に変換できる。私も筆者さんと同じくNumber(文字列)派だ
  • 比較演算子
    • 式の比較を行う
  • 等価演算子
    • 一致判定を行う
    • 「===」で一致を判定しよう！「==」は暗黙の型変換してくれるおかげでちょっと微妙
    • 「===」はオペランドの型が違えば即、false！！
    • ただし、x == nullに限っては、同時にundefinedのチェックもしてくれるから場合によっては使ってもいいかも
  • 論理演算子
    • 「&&」とか「||」とか、結果がbooleanになるもの
    • ||は型注釈で使うと、引数がない場合のデフォルト値にも使える、これは空文字=falseに変換される挙動から
    • 短絡評価なのも特徴、評価とは式の値を実際に計算すること！左がflaseなら右は見てもくれない。IPAの試験みたいだあ・・
    • 「??」はES2020に追加された新しい論理演算子、左がnullかundefinedの時は右を評価してくれる。SQLのCOALESCE()的な
  • 条件演算子（三項演算子）
    • これがこれならコレ、違うならソレ
    • if分と違って式、短絡評価だよ
  • 代入演算子
    • そのまんま、変数への代入を行う演算子
    • 代入演算子の返り値もそのまんま右の値、そういう考え方したことなかったな！？

■感想

やっぱ基本の勉強大事すぎる・・式の話知らなすぎた！TypeScriptの年表がゲームのリリースノートみたいでおもしろかった、みんなゲームの大型アプデ並みに喜んだろうな！