仕事ですぐに使えるTypeScript その5
目的
学習の記録と学びになった部分をアウトプットするため。
期限
対象書籍の読了・内容理解が8月中に完了していること。
対象
今回の対象は「基本構文」。
著作権者：フューチャー株式会社（Future Corporation）様
制御構文
三行サマリ
switch
- switch文では、caseで設定された値を厳密比較の演算子(===) で前から順番に探索し、最初にマッチした節を実行する。
- 一致した値がなければdefault節が実行される。
- また、caseの条件が重複している場合はeslintのno-duplicate-caseオプションで、breakがない場合はno-fallthroghオプションで検知することができる。
for
- C言語風
for(let i = 0; i< 5; i++) { ... }
for..in
- 配列のループにfor..inを使うのは通常のforループと比べて50~100倍遅くなるため使用しない。
- 現在ではあまり使用されていないので、for..ofを使うのが一般的。
for..of
- for..inより新しい記法。
- Object.keys()やarray.entries()、map.values()等をofの後に指定することができる。
for (const value of array or map or 文字列) { ... }
式
- 比較演算子の
===と==に関して、==の方は一度文字列に変換してから判定する。基本的には厳密比較を用いる。
仕事ですぐに使えるTypeScript その４
目的
学習の記録と学びになった部分をアウトプットするため。
期限
対象書籍の読了・内容理解が8月中に完了していること。
対象
今回の対象は「プリミティブ」。
著作権者：フューチャー株式会社（Future Corporation）様
変数
三行サマリ
リテラルとは
リテラルとは、それ以上分解できないシンプルなデータのこと。
booleanリテラル
- true/falseの2つの真偽値をとるデータ型。
- JavaScriptでは、Null、空文字、ゼロ、undefiend、NaNを変換するとfalseとなる。
ドモルガンの法則
if文が複雑なときにそれを簡単にするための法則。下記のような法則でNOTとANDとORの組み合わせを変換することができる。 特に下記の例では右側の式を左側に変換することがコードの可読性を高めることができる。 NOTの集合演算は基本的に普段の生活ではあまり出てこないので、集合のAND ORを考えてから逆転させる方が簡単にイメージすることができる。
!(P || Q) == !P && !Q !(P&&Q) == !P || !Q
数値型
- JavaScriptでは64bitの浮動小数点数で扱っており、これはどのCPUをしようしていても基本的に同じ制度をもつ。
- JavaScriptの正確な数値の上限は
Number.MAX_SAFE_INTEGER、下限はNumber.MIN_SAFE_INTEGERで調べることができる。 また、この数値が範囲内に収まっているかを確認したいときは、
Number.isSafeInteger(値)という関数で調べることができる。TypeScriptには
numberとbigintという二種類の数値型がある。- numberは浮動小数点を扱えるという点で、多くのケースでベストな選択肢になる。
bitintは整数のみしか扱えないものの、桁数の上限はない。しかしながら、
"target: esnext"でしか扱うことpはできない。また、number型は2進数で表した数値表現のため、0.1 + 0.2等、二進数で表現できない場合は数値に誤差ができてしまう。そのため、decimal.js等の外部ライブラリをしようして計算を行わなければならない。
const a = 0.1; const b = 0.2; console.log(a + b); // 0.30000000000000004
- 引数の中で最大値を求める
- Math.max(x, y, z...)
- Math.max(...array)
- 引数の中で最小値を求める
- Math.min(x, y, z...)
- Math.min(...array)
- 0以上1未満の擬似乱数を返す
- Math.random()
Mathオブジェクトのメソッドは下記を参考にする。 future-architect.github.io
stringリテラル
- JavaScirptの文字コードはJavaと同様のUTF-16。絵文字など一部の文字列で1文字で表現しきれず二文字を使って1文字を表現する物をサロゲートペアと呼ぶ。
- 範囲指定を行う場合は、絵文字の一部のみを拾ってしまう可能性があるので、絵文字も含めてテストをすることが大切。
文字コードの正規化
全角のアルファベットのAと半角のAはコードポイントが異なる。normalizeを使用することで、それを正規化することができる。 正規化する（フロント側でよし何やってあげる）ことで、ユーザーに全角を使って入力してもらうことを指定したり、そういったかっこ悪いUIをなくすことができる。
> "ＡＢＣｱｲｳｴｵ㍻".normalize("NFKC") 'ABCアイウエオ平成'
undefinedとnull
- TYpeScriptは補完がきくという風によく言われているが、本質的にはundefinedに遭遇するとわかっているコードを事前にチェックしてくれているということ。
- TypeScriptでは関数の引数の数が呼び出しごとに異なる場合は、クエスチョンマークをつけることで、省略可能となる。
function hoge(a: string, b?: int) { console.log(`a: ${a}, b: ${b || 'empty'}`) }
仕事ですぐに使えるTypeScript その３
目的
学習の記録と学びになった部分をアウトプットするため。
期限
対象書籍の読了・内容理解が8月中に完了していること。
対象
今回の対象は「変数」。
著作権者：フューチャー株式会社（Future Corporation）様
変数
三行サマリ
- 変数宣言では必ずconstを使用する。letを使用しなければならない場面でもconstで宣言できないかを考える。
- TypeScriptでは、「AでもBでも良いという柔軟な型定義」や「値も型システムで扱う」こと、またその両方ができる。
- varで変数宣言をすると、定義前であってもundefinedでエラーにはならない。（そもそももうvarを使うべきじゃない）
三種類の宣言構文
型が登場する場面は主に3つ。
- 変数（プロパティを含む）
- 関数の引数
- 関数の返り値
この章では変数について触れる。
- 変数宣言にはconst, let, varがあるが、基本的にはconstを使うべき。letを使わなければならない時であっても、なるべくconstを使用するように検討すべき。
- 変わる必要ばないものは「もう変わらない」と宣言することで、状態の数が減ってコードの複雑さが減り、理解しやすくなる。（下記記事参照）
let name;
if (mode === "slack") {
name = "小型犬";
} else if (mode === "twitter") {
name = "小動物";
}
// 三項演算子を使えばconstにもできる
const name = mode === "slack" ? "小型犬" : "小動物"
変数の型定義
- 変数の宣言は基本的に型推論を使用すれば良い。（明示的に示したい場合は記載する）
- 変数宣言をする際に、型定義を行わない場合はany型となる。
let address; // <- any型 let phone: number; // <- number型
より柔軟な型定義
- TypeScriptは、静的メモリ配置までの面倒は見ておらず、型システムがプログラミングのサポートまでしか行っていないため、柔軟な型システムを持っている。
- 「AでもBでも良いという柔軟な型定義」、「値も型システムで扱うことができる」。
「AでもBでも良いという柔軟な型定義」
let birthYear: number | string
「値も型システムで扱うことができる」
let food: "トマト" | "きゅうり"; let likeNumber: 2 | 10 | 14;
また、その二つも合わせることも可能。
let birthYear: number | "平成" | "令和";
変数の巻き上げ
// varは定義前に呼び出されるとundefinedになる function hoge() { console.log(`確認： ${v}`); var v = "fuga"; // undefinedが入っている変数がある扱いになり、エラーならず } hoge();
// let or constを使用した場合 function hoge() { console.log(`確認： ${v}`); let v = "fuga"; // 変数宣言より前ではエラーになる // error TS2448: Block-scoped variable 'v' used before its declaration. } hoge();
仕事ですぐに使えるTypeScript その２
目的
学習の記録と学びになった部分をアウトプットするため。
期限
対象書籍の読了・内容理解が8月中に完了していること。
対象
今回の対象は「Node.jsエコシステムを体験しよう」。
著作権者：フューチャー株式会社（Future Corporation）様
Node.jsのエコシステムを体験しよう
三行サマリ
- package.jsonにはプロジェクトで使用されているライブラリやバージョン、scriptsが記載されており、package.jsonを起点に解析するとわかりやすい。
- TypeScriptを使用したアプリケーションを実行する際は、最新のJavaScriptやTypeScriptを実行環境に合わせたJavaScriptへコンパイル作業と複数ファイルに記述されているJavaScriptを1つのファイルにまとめるバンドルという作業が必要。
- .tsのファイルを実行する際は、npx経由でts-nodeを実行する。
Node.jsのインストール
- npm init -yでカレントディレクトリにpackage.jsonを作成する。
-yオプションは全てyesで選択するときに使用するオプション。
- 他の人が行っているプロジェクトのコードを見るときに、package.jsonを起点に解析していくとわかりやすい。
また、
package.jsonにはnpmjs.orgにアップロードする際に必要な情報も入っている。プロジェクトを後悔することはないと思われるが、念のため"private: true"を追記しておくと安心。--save-devはproductionでは必要ないが、開発では必要という意味。本番環境でもしようしたい場合は--saveを使用する。- Node.jsは基本的に現在いるフォルダ以外のところにライブラリがインストールされることはなく、全てnode_modulesの中にインストールされる。（キャッシュはあるけど）そのため、プロジェクトごとにバージョンが異なる、といった事象は発生しない。node_modulesは基本的にgitignoreに入れとく。
プロジェクトフォルダ共有後の環境構築
| コマンド | 説明 |
|---|---|
npm install |
dependenciesとdevDependenciesの両方をインストール |
npm install --prod |
dependenciesのみインストール |
npm ci |
dependenciesとdevDependenciesの両方をインストールするが、package-lock.jsonは更新しない |
npm ci --prod |
dependenciesをインストールするが、package-lock.jsonは更新しない |
インストールしたコマンドの実行
- ts-nodeのREPLを使用したい場合は、下記のように実行できる
$ npx ts-node $ > const a: string = "aaa";
- npxとは
- npx とはnpmパッケージを簡単に実行できるコマンド。run scriptを使用せず、コマンドを実行することができる。
TypeScriptの環境設定
JavaScript系のツールのビルドは大きく分けて二つのフェーズがある。
- コンパイル
- TypeScriptを実行環境に合わせたJavaScriptに変換する。TypeScriptやBabelで対応できる。
- バンドル
- 複数のファイルに記載されたJavaScriptのコードを一つのファイルにまとめるもの。代表的なものだと、webpack, parcel, Browserify等がある。
- コンパイル
TypeScriptの設定はtsconfig.jsonで管理する。 作成する際は下記のコマンドを実行する。
$ npx tsc --init
ts-nodeを使ったTypeScriptの実行
下記を実行したい場合は、npx経由でts-nodeコマンドを実行する。
const hoge: string = "fuga"; console.log(hoge);
$ npx ts-node first.ts
もしくは、playgroundを使用するのもOK
仕事ですぐに使えるTypeScript その１
目的
学習の記録と学びになった部分をアウトプットするため。
期限
対象書籍の読了・内容理解が8月中に完了していること。
対象
今回の対象は「前書き」。
著作権者：フューチャー株式会社（Future Corporation）様
前書き
三行サマリ
- ユーザーがプライベートで使用するアプリケーションのフロントエンドがリッチ化し、エンプラアプリケーションにもそれが求められるようになってきた。
- 現代のブラウザは多様化し、ブラウザによってサポートしているJavaScriptのバージョンが異なるため、場合によってはBabelやTypeScriptを使用してトラディショナルなJavaScriptに変換することが必要。
- TypeScriptを使用すると、JavaScriptに型情報をつけることができ、tsconfig.jsonで指定したECMAScriptのバージョンに変換することができ、変換後のJavaScriptのコードはBabelよりも実行効率の良いコードになる。
本ドキュメントの位置付け
- 以前のエンプラアプリケーションはサーバーサイドレンダリングでCRUDを量産することが多かった。
- しかし、現在ユーザーがプライベートで触れるアプリケーションがリッチになっていき、フロントエンドのフレームワークも複雑化した。
- フロントエンドがリッチなアプリケーションに慣れたユーザーが１日の大半を過ごす仕事で使用するアプリケーションが時代遅れというのは大きくストレスを与える。
- 近年、ReactやVue.js等のフレームサークの導入はエンプラでも積極的に取り入れられるようになってきた。
- しかし、BootstrapやjQuery時代と比べると記載する分量も多く、しっかりとした設計が求められる。
- そうした背景から社内コンテンツとして本教材を作成している。
TypeScriptのウェブ開発における位置づけ
- JavaScriptはブラウザで動く言語である以上、ユーザーが使用しているブラウザによって最新のECMAScriptの文法が使用できるかがわからないという課題がある。
- そのため、高度なJavaScriptでコーディングし、それをトラディショナルなJavaScriptに変換する、という流れが加速した。
- 大規模になると（小規模でも）、型情報があるとエラーチェックが実装中に行われるので開発がしやすくなる
- そこで使用されたのがBabelとTypeScript
- Babel
- ECMAScriptの最新の文法を解釈し、古いJavaScript環境でも動くようコンパイルする。オープンソースで開発されている。
- Babelでもプラグインを使用して型情報をつけることができるFacebook作成のflowtypeがあるが、型情報を手作業で整備しなければならないため、あまりシェアが高くない。
- TypeScript
- MicroSoftが開発。JavaScriptに型情報を付与できるようにしたもの。
- 以前の静的型付け言語とは違い、型推論ができるのがいいところ。
TypeScriptを選んで開発する理由
- 理由は大きく3点。
- 型情報を付けて開発できること。
- 前述したように、現代ではブラウザによるECMAScriptのサポートがバラバラな中、TypeScriptを使用せずとも必ずBabel等で互換性の高いJavaScriptへの変換が必須。結局何かしらの変換ツールは入れなければならない。TypeScriptでは変換するJavaScriptのバージョンも指定できる。
- 型情報がわかった上で変換を行うので、Babelよりも実行効率の良いJavaScriptのコードを生成することができる。
