プログラミングTypeScriptを読んだ（２章・３章）
最近フロントエンド開発に携わることが多いので、Reactを触ってたのですが、 JavaScriptで書いていたところ、やはり実行時エラーに悩まされることが多く、TypeScriptに移行してみようと思っておりました。
ちょうどいいタイミングで、オライリーさんからプログラミングTypeScript ―スケールするJavaScriptアプリケーション開発が出版されたので、 コロナで自宅にいる時間が増えたのもあり、読んで自分なりに学んだことをこまとめておこうと思います。
2章（TypeScript：全体像）
- Typescriptのコンパイラはts→jsに変換する際に型チェッカーを動作させて、型安全性の検証を行う
- jsになったあとには型チェックなどは行わない（ここはもうjsの範囲でランタイムが行うことにはtsは影響しない）
- あくまでtsが行うのは、jsでは全て実行時エラーになっていたもののいくつかをコンパイルエラーにすること
- tsconfigファイルによって、tsファイルのコンパイル の設定やコンパイル 範囲を指定することができる
- tslintファイルによってコーディングスタイルを矯正する
3章（型について）
any型
unknown型
- any型と同様に任意の型をとることができる
- 変数は、コード内でどの型であるかチェックされるまで利用（演算処理など、比較は可能）することができず、エラーが出力される
- TypeScriptがある変数をunknown型と推論することはない
boolean型
number型
bigint型
- number型の扱える253よりも大きな整数を扱うことができる
- JavaScriptエンジンごとにサポート状況が異なるため、利用は注意が必要
symbol型
- 必ず一意になるように定義され、その性質を利用してマップやオブジェクトの文字列キーの代わりに利用される
- リテラル型と推論させるには、unique symbolとアノテートする必要がある
object型
- object型であることにあまり意味がなく、その中の構造において値の型を推論もしくは定義されていることを好む（＝structural typing、というらしい）
- constでobjectを定義したとしても、中の変数はリテラルで推論されない（JavaScriptのobjectが変更可能であるため）
- objectのプロパティは厳格にチェックされる（プロパティの余剰も省略も許可しない）
- ただし、省略可能（?修飾子）や余分なプロパティがあること（[key: T]: U）を明示的に宣言することもできる
- 他の修飾子はreadonly修飾子があり、読み取り専用と定義できる
- 空のobject型({}で表現されるもの)の挙動は全ての型が割り当て可能なため、できるだけ避けること
- Object型（≠object型）もObjectプロトタイプの型に割り当て可能なため避けるべき
配列
- 配列型は型を統一すべきだが、複数の型からなる配列も宣言可能
let a: (string|number)[] = [] // string 型とnumber型を代入できる配列として配列aを宣言 let a: Array<string|number> = [] // これも同じ意味
- 配列の宣言方法は上記２パターンがあるが、どちらもパフォーマンスや挙動に影響がないので、好みで使い分ければ良い
タプル
- 配列のサブタイプで、固定長の配列を宣言するためのもの
- 要素は?修飾子を利用して、省略可能な要素として宣言可能
- 要素はスプレッド構文（...)を利用して、可変長変数としても宣言可能
列挙型
- 宣言時は先頭大文字の単数形が慣習（languageではなく、Language）、列挙型の変数名も、要素名も同様
- 文字列列挙（文字列がキーで、値が文字列）と、数字列挙（文字列がキーで、値が数値）がある
- 数値の値は推測もされるが、明示的に値を入力することも可能
- 一つの列挙型変数の要素の中で、文字列と数値を値に混ぜることもできる
- キーからだけでなく、値からの参照も可能だが、とても危険であり、存在しない値からの参照もコンパイル自体は通る！（ただし、実行時にはもちろんundefinedになる）
- 値からの参照（＝逆引き参照）を制限するには、constを用いて宣言すること。これによって危険なアクセスを抑止できる
- enumは明示的に要素の方を宣言しないかぎり、自由度を持ってしまうため、できるだけ利用するのを避ける、一時的なローカルでの利用のみを心がける方が良い
null, undefined, void, never
- nullは値自体が欠如していることを示す
- undefinedは値がまだ定義されていないことを示す
- voidは戻り値の型であり、明示的に何も返さないことを示す
- neverは決して戻ることのない関数の型
その他・Tips的なもの
- 型アノテーションを行うことで、型制約が強制されるので、基本的には型アノテーションを利用する
- index signature:以下の形式で表現される、オブジェクトが多くのキーを含む可能性をTypeScriptへ伝える方法
- Object型や{}でobject型を宣言するのはNG。なぜなら以下のようにコンパイラに解釈されるから
let a: {} = 3 // コンパイラは許容する。JavaScript 的には var a = 3 として解釈される
let b: Object = 3 // 上記と同じ
// object型として宣言しようした場合に、リテラルを許容してしまう可能性があるため、適切ではない
// しかし型の名前の付け方もう少しどうにかならなかったのかなぁ。。とも思う
- 型エイリアスを使うことで、定義する変数が理解しやすくなる
type Age = number // number型をAge型としてエイリアス let age: Age = 30 // 変数ageをAge型（＝number型）として定義し、55で初期化している
- ただし、この辺りの命名規則は適切に運用しないと混乱を招きそう
- 型自体を演算できる、「合併（|）」と「交差（&）」が存在する
- 合併の場合は、いずれかのプロパティを持つことができ、交差の場合は、すべてのプロパティを持つ必要がある
- 型推論は、基本的に「疑わしきは罰せず」がルール。怪しいものはその上位概念と推定する
長くなったので、４章以降は別な記事にまとめます。
AWS Cognito CLIで詰まったところ。。
AWS Cognito を利用しているときに、テストユーザを作ろうとすると、初期パスワードをCLIから変更する必要がありました。
参考にしていた上記ページのように、AWS CLIを利用してユーザのパスワードを変更する方法が書いてあるのだが、途中でハマったので備忘録も兼ねてTipsを書きたいです。
ページを参考に、値を入れてコマンドを実行すると、
Unknown options:
event not found:
といったエラーが出ることがあるが、これはBashなどのコマンド実行時に記号がコマンドとして解釈されることで、想定外の挙動をしてしまうことに起因する（と思われます。私が入れたパスワードは「!」や「-」が入っていてこれが変に解釈されたと思われます。おそらく↓のページのことだと思われる）
多分Linuxに詳しい人はすぐに気づくんだろうけど、自分はすぐになんのことか気づけなくてハマってしまいました。
回避するには、パラメータ部分をすべて変数にしてあげて、コマンド実行時に値として読み込むようにすると回避できました。
アプリの通知機能について
アプリの通知機能は、モバイルアプリやWebサービス作っていると、必ずと行っていいほど使いたいと要件が上がってくるものの一つだと思っています。
今日はアプリのグランドデザインをしているときに、通知機能ってそういえばどういう形式だったら実現できたかな？と頭をよぎったので、備忘のために整理してみました。
*PWA(Progressive Web Apps)：簡単に言うとウェブアプリをネイティブっぽく動かせるようにしたアプリケーションのこと
AWSを使ってネイティブPushを行うときはSNS+APNs/FCM（iOS/Android）という構成になるし、GCPだと（Android）FCM only もしくは（iOS）FCM+APNs。Azureは使ったことがないから調べてないです。
基本的にネイティブPush使うなら、FCMかAPNsを介す必要があるとおぼえておけば良さそう。
同時に、iOS比率が異様に高い日本では、なかなか実装はめんどくさそうだということがわかった。。PoCの開発をすると、気軽に通知試したいって話が出てくるが、APNsは証明書の発行が手間だったりするので、なかなか一筋縄では行かないのが現状。iOSは、はやくServiceWorkerで通知受け取れるようにしてくれないかな。。
今回参考にしたのは以下の記事。特にGoogleのブログは図がわかりやすかったです。
ちょっと古いけど、プッシュ通知の種別の違いは、こちらの記事で整理されていました。
ただ、通知機能自体は賛否両論あって、なかなか狙い通りの効果が得られるかは難しい機能でもあります。そのため、ほんとに通知で知らせるべきことなのか、もしくは別な手法が試せるのか（例えば、アプリを開きっぱなしにするナビアプリのようなものであれば、チャットアプリみたいに更新情報を出し続けるエリアを設けても良いかもしれない）。
やはり機能ベースで物事を考えるんじゃなくて、ユーザがそのときどういうふうに情報を受け取りたいか考えて、インタフェースを考えることが大事だと改めて認識しました。
Webpackやっと触った
今まで先輩が書いたWebpackの設定をそのまま使うことが多くて、これまで触ってこなかったWebpack。
そろそろちゃんと知っておかないとなということで、機会があったので触ってみた。
上の記事を最初に読み、最小限の設定を学び、次に最新バージョンの記法を学んで、なんとか動かすことができた。
他の色々な記事をさまよう間にいろんなバージョンの記法が混じったことで混乱してしまい、動かすのにちょっと時間がかかってしまった。
きれいにまとめられている良記事をみつけたので、こっちも読んでみた。
この記事はWhyの部分も書かれていたり、設定中にコメントが細かく書かれていたりと、今日触っていて学んだことが整理されていてとても良かった。
ただ、最近だとHTTP/2の恩恵が受けられるようになってきているのもあり、
モジュールはモノリシックなものよりも分散型の個々が軽量なもののほうが、
環境的に嬉しくないかな？と思ったけれど、モジュールを一個ずつscriptタグで呼ぶのは、すべてがグローバル扱いになるということを下の記事で理解した。
グローバルにしたら変数やオブジェクトの扱いをちゃんと考えて設計しないといけないので、言語仕様に詳しくないとすぐバグが混入されてしまう、みたいなことになりそう。
仮想DOMの話じゃないけれど、必要なモジュールを必要なときに安全に読み込むための仕様や実装が出てきたら、もっと速度が早くなったり、快適なWEBが待っていたりするんだろうか。
（もしかしたらもうこの辺出ているのかもしれないけど、自分はよく知らないので知っている人いたら教えてほしい）
ついに宇宙へ
宇宙兄弟25巻（小山宙哉）
20巻くらいまで学生時代に読んだけれど、最近全巻セットを手に入れてついにここまできた。
ムッタがついに宇宙へ行った。
離陸が近づくにつれて、お世話になった人や過去の回想が流れてきて感動もひとしお。
そしてすごいのはこの兄弟の両親。いつもは平然としているんだけど、きちんと息子たちのこと考えてて、
こういったときにはお母さん泣いちゃうし、お父さんはダジャレじゃなくて決めてくる。
個人的に好きなのは、「どうだ六太、ロープのそっち側は？」というセリフ。
いつもはてきとーなこと言ってても、ちゃんと考えてんだなって伝わってくる。
読み返したところも面白かったし、やっぱ宇宙兄弟はすごい。
ちなみに、全巻ドットコムで買うと、今なら小山宙哉先生描き下ろしのBOXがついてくる。
NASA ver.
JAXA ver.
前は一つずつついてくるバージョンあったんだけどどこいったんだろ。。
読んだマンガ
恋と国会1巻（西炯子）
新人議員の山田一斗を読者の代弁者、同じく新人だけど世襲議員の海藤福太郎を先生役として、読者の浮かんでくる疑問に対してうまく説明してくれている本作。山田一斗の思うことは至極まともで、イケないことを許してしまっている有権者（自分も含め）は、ちゃんと選挙で人選ばなきゃいけないなと感じました。
常にくだらないことばかりうだうだやっている議会に対して、一斗みたいに忖度なんて気にせずに、空気読まずに言いたいこと言ってくれる人はきっと出てこないんだろうけど、一度くらいそういう国会見てみたい笑
並行して連載している初恋の世界とはまた違った感じだけど、こっちも好き。
ラブコメとしては、一斗とくっつくのか、はたまた元カノ？と元鞘なのか。どっちに比重を置くのか、今後の話の展開に期待。
ましろのおと24巻（羅川真里茂）
表紙の小さい雪がめっちゃかわいい笑
そして相変わらずの梅子。雪はずっと手のひらの上で、梅子のパワーバランスはこんなくらいが丁度いい。
若菜ちゃんと並んで弾いて、スッキリしたのもつかの間、流絃との演奏で色々もやるんだろうな。雪の音楽に対する苦悩はこんな感じで尽きないんだろうなぁ。
ブルーピリオド6巻（山口つばさ）
ついに、合否が！そして受験編クライマックス。（ここまでは帯にあるからネタバレじゃない）
スケブのとこの構図好きだなーのめり込む感じ。
あと受験の時に「楽しんできてね！」そう言える親になりたいし、自分の子供にもどんな状況も楽しめる子になってほしいなと思った。
お話自体はこのあとも続くようで嬉しい限り。個人的に美術部の面々が結構好きなので、今後もちょくちょく出してほしい。それかサイドストーリーでもっと読みたい。
おおきく振りかぶって32巻（ひぐちアサ）
崎玉戦が決着。最近ちょっと試合ごとの巻数が増えてきてダレてきたかも。。
試合ももちろん好きなんだけど、個人的にはどういう戦略で、それに見合った練習とか野球の考え方とか、そういうところが好きなので、今回の巻みたいに野球談義していると読んでて楽しい。もっと比率増やしてくれないかな。
あと花井はいつも青春してていいぞ。もっとやれ。
百姓貴族6巻（荒川弘）
すごい久しぶりの続刊。荒川先生ご実家が大変だったようで、そんな中出てたアル○ラーン○記がブラックということか。
動物たちのほんわかストーリーやお父さんのタフネスエピソードに笑わせていただきました。これからもネタが有る限りのんびり続けていってほしい、そんな作品。
