フロントエンド技術をまずは学ぼうと言うことで、サバイバルTypeScriptの記事を参考に、勉強してみました。
TDDみたいなことができるようになるといいなと思ったので、まずはテストから触ってみようと言うことでJestのテストのやり方から試してみました。
とりあえず触ってみる
チュートリアルではyarnをパッケージマネージャとして使用していますが、せっかくなので、ちょっと前から話題になっているBunを使ってみようと思います。
Bunについては、公式サイトを参照してください。
今回触ってみて語れるようになったら、また記事にしてみようと思います。
まずは以下のコマンドでtypescriptをインストールします。
$ bun install typescript
...
1 package installed [1.98s]
1秒でインストールが終わって、とにかく早くてびっくりしますね！
続いては、TypeScriptの設定のためにtsconfig.jsonを生成します。
$ bun tsc --init
その後、jestをインストールします。
$ bun install jest ts-jest @types/jest
インストールができたら設定ファイルを生成し…
$ bun ts-jest config:init
サンプルの通り、Console.logを出力するだけのテストコードをjestで実行できることを確認します。
$ bun jest
PASS ./check.test.ts
✓ check (16 ms)
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 1.055 s
Ran all test suites.
これで利用準備は完了したので、次に、自作の関数をテストしてみます。
自作の関数をテストしてみる
2乗した値を返す簡単な関数を書きました。
引数と戻り値に型を指定できるのはわかりやすくて良いですね。
export function square(value: number): number {
return value ** 2;
}
以下のようなテスト用コードを書いてみました。
import { square } from "./square";
test("2を渡したら4となる", () => {
const result = square(2);
expect(result).toBe(4);
});test("0を渡したら0となる", () => {
const result = square(0);
expect(result).toBe(0);
});test("1を渡したら1となる", () => {
const result = square(1);
expect(result).toBe(1);
});test("文字列を渡したらエラーとなる", () => {
const result = square("文字列");
});
まず、数値型ではない文字型を渡したらエディタでエラーになるのはめちゃくちゃわかりやすくていいなと思いました！（このためにやってるようなものだと思うのでそりゃあそうとは思いますが
テストの書き方も、チェックする変数に対してどのような期待値を取るかの形式でわかりやすいなと思いました。
他のメソッドはExpect · Jestに記載があるようなので、後ほどしっかり見てみようと思います。
ちらっとみた感じでは、Promiseやthrowなどもちゃんと検査できるようなので、便利だなと思いました。
感想
javascriptをある程度知っていれば、めちゃくちゃ簡単に使い始められるのでTypeScriptはめちゃいいなと思いました。
使いこなせれば、静的解析でわかるようなしょうもないミスを大幅に削減できると思うので、積極的に使っていこうと思います。
それと同じくらい、Bunの速さにびっくりしたので、こちらもどんどんと使っていきたいし、もう乗り換えてしまおうと思います。
やっぱり、新しいものを触ってみるのって大事ですね。
