仕事ですぐに使えるTypeScriptを読んでいくその8
これは
TypeScriptの学習にとても役立ちそうなドキュメントを教えてもらったので
コツコツと読んでいく記事です。
参考記事
著作権者：フューチャー株式会社（Future Corporation）様
第7章
今日は第7章です。
読み進めていくとJavaScriptは制約が緩くいろんな書き方ができる
みたいな雰囲気を感じてきました。
もしかして他言語よりもっと複雑な闇が場合によってはあるんじゃないかとかそういうのも
7章では型について書かれています。
TypeScriptはJavaScriptに対して型をつける方向で作られているというのを念頭に置いて、読み進めていきます。
any
TypeScriptのコンパイラでの変数チェックはしなくなる
もっとも緩い型付けになるのがany
JavaScriptからTypeScriptへ持ってくるときにとりあえずanyを使っておけば
影響が少ないというメリットがある。
unknown
anyとよく似たunknown 型
変数にはどのようなデータもチェックなしに入れることができる。
イメージがわかりにくかったので下のページも参考にしました。
type
自分で命名する便利な型
ここはもっと掘り下げたい。
// 型は Union Type で複数列挙できる type BirthYear = number | string;
型ガード
...よくわからなかったので課題。
今日はここまで。
仕事ですぐに使える TypeScriptを読んでいくその7
これは
TypeScriptの学習にとても役立ちそうなドキュメントを教えてもらったので
コツコツと読んでいく記事です。
参考記事
著作権者：フューチャー株式会社（Future Corporation）様
第6章
今日は第6章です。
6章は基本的な構文として制御構文と、式についてです。
制御構文
基本的などの言語にもあるifやswitchなどです。
ほとんど他の言語と変わりがないのですが、5章でも取り上げていたforについては
いくつか種類があり、注意が必要そうでした。
・for
// Cなどでおなじみのfor文
// 変数宣言はvarではなくletを使うのが肝
for (let i = 0; i < 5; i++){
console.log(i);
}
・for..in
// for...ofを使うべきなのでこれから作るものは使わないようにしよう
// 見つけたら修正を検討したほうがいいのかも
// 特に配列のループでの使用は避けておくほうが良いらしい
// 50倍〜100倍遅い
for (let key in obj) {
if(obj.hasOwnProperty(key))
console.log(key, obj[key]);
}
}
・for...of
// ベターなチョイス。
// arrayの部分にはイテレータを返すメソッドや関数があって
// 便利に使うことができる
for (const value of array) {
console.log(value);
}
// 例
for (const [key, value] of Object.entries(obj)) {
console.log(key, value);
}
・for await of
// ES2018以降利用可能
// ループごとに非同期の待ち処理を入れる。
// 新しい機能なので利用できる用途も限定的。
// 並行処理を考えるならPromise.all()を使ったほうが効率的
for await (const body of response.body) {
console.log(body);
}
式
基本的に他の言語と一緒。
参考にも書かれている2点が躓きそうだった。
・比較演算子の「===」と「==」の使い分け
・「===」一致を厳密に比較する
・「==」文字列変換の後比較する
・**演算子について
x ** y でMath.pow(x, y)と同じ累乗計算を行う
これも参考資料に書かれているけれど、
ウェブフレームワークでは論理積と三項演算子が大事。
Reactなどでは特に三項演算子の活躍の場が。
今日はここまで。
仕事ですぐに使える TypeScriptを読んでいくその6
これは
TypeScriptの学習にとても役立ちそうなドキュメントを教えてもらったので
コツコツと読んでいく記事です。
参考記事
著作権者：フューチャー株式会社（Future Corporation）様
第5章
今日は第5章の続きです。
ループ
ループはfor...ofを使用することを推奨しています。
C言語由来のfor、forEach、for...ofが存在していて会社によっては
for..ofを禁止している場合もあるので、規約に従った使い分けが必要。
オブジェクト
まとまったデータを使いたい場合に使う。
配列との違いは要素へのアクセス方法が文字列であること。
// 定義はキー、コロン (:)、値を書く。要素間は改行
const key = 'favorite drink';
const smallAnimal = {
name: "小動物",
favorite: "小籠包",
'home town': "神奈川県警のいるところ",
[key]: "ストロングゼロ"
};
// 参照は `.`+ 名前、もしくは [名前]
console.log(smallAnimal.name); // 小動物
console.log(smallAnimal[key]); // ストロングゼロ
オブジェクトからのデータ取り出し
// まとめて取り出し。デフォルト値も設定可能
const {name, favorite, age=3} = smallAnimal;
// name 以外の要素の取り出し
const {name, ...other} = smallAnimal;
辞書用途はMapを使う。
const map = new Map<string, string>([ ["五反田", "約束の地"], ["戸越銀座", "TGSGNZ"] ]);
今日はここまで。
仕事ですぐに使える TypeScriptを読んでいくその5
これは
TypeScriptの学習にとても役立ちそうなドキュメントを教えてもらったので
コツコツと読んでいく記事です。
参考記事
著作権者：フューチャー株式会社（Future Corporation）様
第 5 章複合型
今日は第5章です。
昨日のプリミティブ型に続いて、今日は複合型。
そろそろ振り返りを含めていきたいので、今日は軽く書いて明日もう一度書きます。
配列とオブジェクト
章立てとしては大きく二つ。
配列とオブジェクトです。
ザクっと要約するとプリミティブでもあったように新旧の書き方が存在していて、
旧タイプではC言語よりの書き方をしていたが、最近は関数型の影響を受けて
わかりやすい書き方になっている。
２章でも書かれていたように、コンパイル時に指定するバージョンを意識して使いわけた方が良い
実行環境にどうも疑問が残り続けているので、検索とか下のサイトを参考にしながら見直しています。
少ないですが今日はここまで。
仕事ですぐに使える TypeScriptを読んでいくその4
これは
TypeScriptの学習にとても役立ちそうなドキュメントを教えてもらったので
コツコツと読んでいく記事です。
参考記事
著作権者：フューチャー株式会社（Future Corporation）様
第4章プリミティブ型
今日は第4章です。
TypeScriptの型は以下
・boolean 型
・number 型
・string 型
・配列
・オブジェクト
・関数
・undefined
・null
サクサクやっていきます。
数値
booleanは他とさして変わらないので置いておきます。
TypeScript(その下にいるJavaScript)ではnumber型は64bit浮動小数点数。
もう一つbigintがあるが、基本はnumber型でよい。
演算子は基本的なセットに「 **」というべき乗の演算子がある。
大好きなMathのセットもあるので、複雑な計算はMathをベースにしてあげればOKなようです。
string
stringはUTF-16。
// シングルクオートでは改行含みだとエラーになる const address = ' 東京都 品川区'; // バッククオートなら OK。ソースコード上の改行はデータ上も改行となる const address = `東京都 品川区 `;
文字や数値は書いていく中で理解していくのが良さそうです。
今日はここまで。
仕事ですぐに使える TypeScriptを読んでいくその3
これは
TypeScriptの学習にとても役立ちそうなドキュメントを教えてもらったので
コツコツと読んでいく記事です。
参考記事
著作権者：フューチャー株式会社（Future Corporation）様
第3章変数
今日は第3章変数です。
TypeScriptとJavaScriptの一番の違いは型。
型が登場する場面を認識して、適切に違いを見れるようにしておく
・変数
・関数の引数
・関数の返り値
他の言語でもだいたい一緒ですね。
参考資料ではまず変数に触れ、型になれていきます。
3.1 三種類の宣言構文
変数宣言は
・let
・const
・var
があって、まずはconstを使うことを検討していく。
letとconstは能力が似ているのだけど、constは変更する必要のないもの
letは代入する可能性があるものと線引きをして使い分けていくように記載されています。
参考資料ではとりあえずconst使っておけば固定だし使いやすいよと書かれていますが、
なんだかちょっと納得できないし気持ち悪いなと思っています。
一応公式のドキュメントを確認しましたが、似た記述になっていましたのでそういう文化圏と解釈しました。
現状では可読性、理解しやすさを優先した結果なのかもしれません。
C#のvarと似た感じなのかも。
そしてそのvarですが、JavaScriptでは古い書き方として紹介されており、
スコープ対象も広く使いにくいため最近はあまり使われないようです。
3.2 変数の型定義
Goなどと同じように変数名の後ろに後置で型を書く。
// こんな風に定義してあるものを let name: string; // こうするとエラー name = 123;
代入の場合には右辺のデータ型が自動で設定されるように作られている。
let title = "小説家"; // 代入せず型定義がない場合はany型に let address;
3.3 より柔軟な型定義
ここで違和感持ってる人もいるよねという救いが。
「柔軟な型システム」とみなして良いらしい。
静的なメモリ配置まで面倒を見るような言語ではないから厳密にしていなくても良いということらしい。
柔軟さの一例として
• A でも B でも良い、という柔軟な型が定義できる
→例えば数値と文字列の両方を受け取れる（が、他のデータは拒否する）
• 値も型システムで扱える
3.4 変数の巻き上げ
・var はスコープ内で宣言文の前では、変数はあるが初期化はされてない
・const,letはエラーになる
こういった振る舞いを見てもvarは避けておくべきと言える
3.5 変数のスコープ
let、const で宣言した変数のスコープは宣言されたブロック（if、for は条件式部分も含む）の中に限定されます。
スコープが狭くなると、同時に把握すべき状態が減るため、コードが理解しやすくなります。
varではどこからでもアクセスできてしまうため、対象を絞り込むのが大変。
// varを使ったコード
for (<b>var</b> i = 0; i < 10; i++) {
// do something
}
// これはOKになる
console.log(i); // -> 10
==============================
// letを使ったコード
for (<b>let</b> i = 0; i < 10; i++) {
// do something
}
// これはエラーになる
console.log(i);
今日はここまで。
明日は第 4 章をやっていきます。
仕事ですぐに使える TypeScriptを読んでいくその2
これは
TypeScriptの学習にとても役立ちそうなドキュメントを教えてもらったので
コツコツと読んでいく記事です。
参考記事
著作権者：フューチャー株式会社（Future Corporation）様
第 2 章Node.js エコシステムを体験しよう
今日は第2章です。
TypeScriptをやっていくのになぜNode.jsなのか？
playgroundがあるんだしTYpeScriptやるだけなら別に良いのでは？と思うかもしれないですが
言語の知識だけではどうにもなりません。
どこにソースコードを書き、どのようにビルドツールを動かし、どのように処理系を起動し、 どのようにテストを行うかなど、言語周辺のエコシステムを学ばないと、どこから手をつけて良いかわかりません。
とのことです。
前提として周辺の知識を知らなければいけないというのはもっともだと僕も思います。
参考資料では周辺のエコシステムを以下のように位置付けるとのことです。
• Node.js: 処理系 • npm コマンド: パッケージマネージャ
• package.json: プロジェクトファイル
– 依存パッケージの管理
– scripts で開発用のタスクのランチャーとして利用
• npx コマンド: Node.js 用の npm パッケージで提供されているツールの実行
• TypeScript 関連のパッケージ
– tsc: TypeScript のコンパイラ
（プロジェクト用の TypeScript の設定ファイルの作成）
– ts-node: TypeScript 変換しながら実行する、Node.js のラッパーコマンド
npmは大変便利というのは知っていたのできちんと触れる機会があって嬉しい。
Node.js のインストール
公式からでもHomebrew、macportsからでも。
Windowsだと公式からインストーラダウンロードしてきて使うのが手っ取り早そう。
インストールの確認はバージョン確認用コマンドをターミナルとかPowerShellで叩けば良さそう。 npmも知りたかったので念のため確認している。
$ node --version v10.16.0 $ npm --version 6.9.0
2.2 package.json の作成と ts-node のインストール
作業フォルダを作って、npm init -yを実行しPackage.jsonを作成する。
package.jsonはNode.jsを使ったプロジェクトのコアとなる部分であり、
プロジェクトがもつ様々な情報や、依存関係、テストなどのタスク実行の情報を持っている。
なので解析にはまずPackage.jsonを見れば効率が良い。
tsnodeとtypescriptをインストールする。
npm install --save-dev ts-node typescript
うまくインストールされるとpackage.jsonに以下の記述が追加される。
依存関係や必要なツールは何を使っているかわかりやすいですね。
"devDependencies": {
"ts-node": "^8.3.0",
"typescript": "^3.5.2"
}
2.3 プロジェクトフォルダ共有後の環境構築
gitなどで共有をする際にpackage.jsonや package-lock.jsonが役に立つ。
共有されたコードを手元で実行したい場合はnpmコマンドを使って簡単にインストールできる。
npm install npm install --prod npm ci npm ci --prod
2.4 インストールしたコマンドの実行
サクッとインタプリタで実行したい場合はこんな感じ
npx ts-node
> console.log('hello world')
hello world
細かな部分はおいおい又戻ってきて確認するようになると思う...
2.5 TypeScript の環境設定
TypeScriptを実行するにはフェーズがあって
それぞれ実行する形になる
・コンパイル
・バンドル
特に何もしないでもTypeScriptのコンパイルは実行できるが、
tsconfig.jsonを作って上げることで細かな調整が可能。
2.6 エディタ環境
こけにくいVisual Studio Codeを使おう。
2.7 ts-node を使った TypeScript のコードの実行
VSCodeを使うつもりでしたがそこまでなので、今回はviでコード写経して、
サクッと実行しました。
first.ts
const personName: string = ' 小心者';
console.log(`Hello ${personName}!`);
$npx ts-node first.ts
Hello 小心者!
今日はここまで。 明日は3章をやっていきます。
