りあクト！輪読会 - その２

りあクト！ React TypeScript 輪読会 初学者

What is JavaScript？

const hoge = "Hello"

値のこと。上記コードで言えば、Helloがリテラル（文字リテラル） 変数の中にある値を示す。

オブジェクトはプロパティの集合です。プロパティとは名前（キー）と値（バリュー）が対になったものです。 プロパティのキーには文字列またはSymbolが利用でき、値には任意のデータを指定できます。 また、1つのオブジェクトは複数のプロパティを持てるため、1つのオブジェクトで多種多様な値を表現できます。

第一級関数とは？ 関数がその他の変数と同様に扱われる。 https://jsprimer.net/basic/function-declaration/#first-class-function

// 関数の定義の仕方①
function func1(str) {
  return str;
}
console.log(func1("これはfunc１です"));
// => "これはfunc1です"
==============================
// 関数の定義の仕方②　変数の中に関数を入れることもできる
const func2 = function(str) {
  return str;
}
console.log(func2("これはfuc2です"));
// => "これはfunc2です"
=============================
// 関数の定義の仕方③　アロー関数　
const func3 = (str) => {
  return str;
}
console.log(func3("これはfunc3です"))
// => "これはfunc3です"

// 関数の定義の仕方④　省略したアロー関数
const func3 = (str) => str;
console.log(func3("これはfunc3です"))
// => "これはfunc3です"

  • JavaScriptの標準仕様のことをECMAScriptといい、2021年の最新版はES2020

  • ES5とES6（ES2015）で大きく仕様が変わった。（もはや別の言語レベル）

  • JavaScriptは後方互換性を重視した言語であり、バージョンが変わることによるエラーはほぼ無い

  • ECMAScriptはバージョンではなくて、「仕様」（エディション）の名称。

2-2 変数の宣言

varは今後二度と使ってはいけません！！！！ 変数はconstとletで定義しましょう！！

できればletもあまり使わない様にしましょう！

変数を宣言する前に変数に代入して使用することを「巻き上げ」といい、他の言語ではあまり見られない仕様で、よくない。

# constを使った良い例
const a = 100;
console.log(a);

paiza.ioは話半分よりちょい上くらいの感覚で試してください 実際のコンソールでの挙動と若干違う時があります

以下はTypeScriptでの例
const
let
var
varを書かない

2-3 JavaScriptのデータ型

型とは

オブジェクトは全て型を持っていることを踏まえた上で考える。 静的型付けの場合は、データ型を先に宣言してから変数を定義して、値を代入する。そして、宣言した型以外の代入は認めない。（TypeScriptは静的型付け言語） 　　
- JavaScriptはRubyらと同じ動的型付け言語なので型が変わる

  • TypeScriptは静的型付けなのでエラーが出る

JavaScriptのデータ型はプリミティブ型とオブジェクト型に大別され、プリミティブ型はさらに７種類に分類される。 プリミティブ型はそれ自体はオブジェクトではないので、インスタンスメソッドが存在しない。

①Boolean型

trueもしくはfalse。真偽を表す値。

②Number型

整数も少数も含めた全ての数字。最大９千兆。

③BigInt型

Number型よりも大きな値。Numberとの互換性はない。 ※ 扱える環境が限定的だからあまり活用できる場面がない。

④String型

文字列

⑤Symbol型

固有の識別子を表現する際に用いる。プロパティキーとして仕様が可能。 ※ JSONでのパースができないのであまり活用できる場面がない。

⑥Null型

データが存在しない状態を明示している。

⑦Undefined型

宣言のみが行われた変数や、存在しないプロパティを参照した際の型

プリミティブ型とオブジェクト型

  • プリミティブ型
    • 一般的な文字の型（数字とか、文字とか）
    • 一度作成したらその値を変更することができない
  • オブジェクト型
    • 配列とか正規表現とか。。
    • 一度作成した後も、その値自体を変更することができる

ターミナルでTypeScriptを試す場合(REPLモード)

ts-node -v

で現環境にTypeScriptが入っているか確認します。 もし、入っていなかったら、

npm install -g typescript ts-node

で現環境にTypeScriptを導入しましょう。-vで確認が取れた段階で

ts-node  -- <--こいつレプル！

をターミナルで入力するとTypeScript用のコンソールを開くことができます。

truthyとfalsy

falsyとして定義された値 (つまり、false, 0, -0, 0n, "", null, undefined, NaN(Not a Number)) を除くすべての値はtruthyです。

parseInt() : 文字列を整数に変換する関数

参照

オブジェクト
- JavaScript Primer https://jsprimer.net/basic/object
プリミティブ型について
https://wa3.i-3-i.info/word15876.html
プリミティブ型とオブジェクト型の違い
https://qiita.com/ta1fukumoto/items/effaa42cd296a2648d41 truthyとfalsyについて https://developer.mozilla.org/ja/docs/Glossary/Truthy