サーバーサイドエンジニアが学ぶTypeScript
こんにちは、iCAREサーバーサイドエンジニアの寺井(@krpk1900_dev)です。
iCAREではサーバーサイド/フロントエンドと各エンジニアの専門領域が別れていますが、私が入社してからこれまでの間iCAREではあまり見られなかった動きがこの数ヶ月の間でありました。
それは、フロントエンドエンジニアがサーバーサイドのタスクに、サーバーサイドエンジニアがフロントエンドのタスクに挑戦し始めたことです。
Opsチームのでんでんさんと良太さん、AFチームの遠藤さんはRailsを用いた開発が専門ですがVue.jsを、ATチームのがみねさん、AFチームの宮﨑さん、健診チームのやすなりさん、丹羽さん、CTチームの武井さんはVue.jsを用いた開発が専門ですがRailsを、実践を通しながら高速でキャッチアップしタスクをこなされています。
それぞれがお互いの領域について理解を深めることは、機能全体の設計や不具合の原因調査などの際に役に立つだけでなく、チーム全体の柔軟な対応力の向上に大きく繋がっています。
私はiCAREではVue.jsのタスクをこなしてはいませんが、自社が抱えているフロントエンドの課題やフロントエンド全体としての意思決定を理解して自分の意見を持つ必要性は以前から感じており、みなさんを見習ってまずはTypeScriptについて体系的に学んでみました。
今回の内容にはJavaScriptの知識も含まれていますが、サーバーサイドエンジニアがおさえておくべき点がまとめられたサバイバルTypeScriptという教材から学んだものになります。
ジェネリクス
よく見る<T>の正体です。
ジェネリクスは型を変数として扱えるようにすることのようです。
string型をchooseRandomly関数に渡すことで、引数である”勝ち”と”負け”の型アノテーションがstring型となります。
また、string型ではなくnumber型、URL型などを渡すことで共通化された関数の型のみを変更することができます。
ユニオン型
型の和集合です。
ユニオン型によって、「いずれかの型」を表現することができます。
配列の要素としてユニオン型を用いる場合は少し注意が必要で、例えば要素がstring型でもnumber型でも良いような下のような配列の型を宣言するとき、
型を
とするのは誤りで、正しくは下のようになります。
auto-boxing（自動ボックス化）
多くの言語では、文字列や数値などのプリミティブはフィールドやメソッドを持っておらず、プリミティブをオブジェクトのように扱ってフィールドを参照したりメソッドを呼び出すためには、プリミティブをオブジェクトに変換する必要があります。
プリミティブからオブジェクトへの変換をボックス化（boxing）といいます。
JavaScriptでプリミティブ型の値がフィールドを参照できたりメソッドを呼び出すことができるのは、JavaScriptが内部的にプリミティブ型の値をオブジェクトに変換しているためです。
この暗黙的な変換がauto-boxing（自動ボックス化）です。
JavaScriptのauto-boxingで変換先となるオブジェクトはラッパーオブジェクトと呼ばれるそうです。
オプショナルチェーン
Rubyにおけるぼっち演算子に当たります。
?.に先行するプロパティがnullやundefinedであればその先のプロパティを評価せずにundefinedを返します。
また、ぼっち演算子とは異なってオプショナルチェーンは関数呼び出しやメソッド呼び出しにも使えるようです。
さらに、配列要素の参照にも使えるようです。
分割代入
上記はRubyと同様のプロパティの代入方法ですが、JavaScriptでは以下のような書き方でも同様の処理を行えます。
これが分割代入です。
複数のプロパティを取り出したいときには分割代入がより効果的になります。
また、：の後に変数名を指定することで、その変数に代入することが可能です。
巻き上げ（hoisting）
JavaScriptにおける巻き上げとは、変数や関数がスコープの先頭で生成されることを指しています。
現在使われることはないvarで宣言された変数は、スコープの先頭で生成されてundefinedで値が初期化されます。
そのため以下のコードは1行目でエラーにはなりません。
上記のコードは巻き上げによって以下と同様に振る舞います。
let と constでは変数の巻き上げは行われますが、変数の初期化はその変数が評価されるタイミングまで行われません。
そのため下記のコードはvarのときとは異なってエラーになります。
変数の巻き上げと同じように関数も巻き上げが行われます。
一方、関数式は関数とは
異なり巻き上げが行われないため、以下のコードはエラーになります。
アロー関数
関数式で定義した上記の関数をアロー関数で定義すると以下のようになります。
アロー関数は従来の関数の問題点を解決する形で導入され、コンストラクタやthisが指す参照先などいくつかの観点では異なる振る舞い方をするようです。
また、先述した巻き上げについても従来の関数では巻き上げが起こりますがアロー関数では巻き上げが起こりません。
終わりに
今回はTypeScript（JavaScriptも含む）について学んだ記録を記事にしてみました。
iCAREのサーバーサイドエンジニアとしてRubyやRailsの経験と知識を深めていくことはもちろん、TypeScriptやVue.jsなどのフロントエンドも、AWSなどのインフラも、セキュリティや開発手法などの基礎知識も学び、身のまわりで起きていることを自分の頭で理解でき自分の意見を持てる状態を引き続き目指したいと思います。
