TypeScriptに挑戦してみた

こんにちは、GMOアドマーケティング GMOSSP開発担当の@KazuakiMです。
前回の「GitHub Actionsへの移行」はいかがだったでしょうか、CircleCIも非常に優れたサービスですが、GitHubとGitHub Actionsのシナジーはやはり素晴らしいものがあるなと常々思っています。
すっかり秋になり、お鍋が恋しい季節になりました。どうもお久しぶりです、GMOアドマーケティング GMOSSP開発担当の@KazuakiMです。 GMOSSPでは最近、CircleCIからGitHub Actionsに移行した事から、その情報をお伝えできたらと思います。 GMOSSPでは配信をPHP、集計などをGo言語で実装している事から、 今回はPHPのGitHub Actionsの実装例となります。そもそもGitHub Actionsとは?継続的インテグレーション/継続的デリバリー(CI/CD)をGitHubが提供する環境内で実行できるサービスとなります。GitHub Actionsを使用すると、ワールドクラ...

2022年から本格的にTypeScriptに触りはじめましたので、
今回はTypeScriptの入門記事を書きたいと思います。
TypeScirptとはAltJS(Alternative JavaScript)の一つで、
Microsoftによって開発されたOSSとなります。
TypeScriptはNode.jsをサポートしている事から
今回はNode.jsのインストール手順からご紹介します。

nvm

Node.jsのインストール手順のご紹介とご紹介しましたが、
最初にインストールするのはNode.jsのバージョン管理ツールのインストールとなります。
nvmは65,300 Star超えのNode.jsのバージョン管理ツールとして有名です。

nvm インストール

nvm 設定

常に利用できるように.zshrcに設定を追加します。

nvm バージョン確認

nvmの設定ができましたら、バージョン確認を行います。 最新がインストールされている事を確認しました。

Node.js

nvmがインストールできましたので、次にNode.jsをインストールします。

Node.js インストール

.nvmrcでバージョンを指定します。今回はLTSの18を採用しました。 詳細

インストールバージョンに問題ない事を確認した上でインストールを実行します。

Node.js バージョン確認

Node.jsのバージョン確認を行います。

TypeScript

本記事メインであるTypeScriptの設定を行います。

TypeScript インストール

まずはTypeScript インストールです。 詳細

TypeScriptがインストールできたら各種セットアップをしていきます。
私がTypeScriptを学んでいた際にはコードを書きつつ、よりよい設定を見つけたタイミングで都度、追加をしていったため、多少手順が違う部分があるかもしれません。

TypeScript 設定ファイル作成

tsconfig.jsonでTypeScriptの設定を行います。今回はTypeScriptに設定できるルールにおいて、
公式が提供する厳格な設定を採用します。厳格な設定にする事でTypeScriptの期待したコードでない場合にはエラーとなるため、TypeScriptのコードの書き方について、学びが深まります。 tsconfig.jsonの設定となります。 詳細

TypeScript ビルド実行

GMOSSPではWebpackを利用したビルド環境を構築していますが、
今回はtscを利用したコンパイルを実施します。 この状態でコンパイルを適用してみます。 TypeScriptがコンパイルされ、JavaScriptに変換されている事が確認できます。

TypetScript alias 設定

コマンドのオプションなどを覚えておくのは大変なため、
必要に応じてaliasを設定します。

ESLint

TypeScriptの設定を終えましたら、Lintツールによるコードのチェックの設定を行っていきます。

ESLint インストール

詳細

ESLint 設定

ESLintの設定は公式おすすめの設定とします。
個人的にはpackage.jsonに設定するのが好きなため、packege.jsonに設定しています。 ESLint詳細 TypeScript詳細

ESLint 実行

サンプルコードにESLintを適用してみます。
ESLintを適用したくないコードにはdisableコメントアウトを追加しています。 この状態でESLintを適用してみます。 エラーになる事が確認できました。
続いて、今回は –fix で解決する問題だとアラート文にありますので、再度実行してみます。 test1、test4の変数がESLintにより修正されましたが、Disableにしていたtest2、test3はESLintにより修正されませんでした。

ESLint alias 設定

コマンドのオプションなどを覚えておくのは大変なため、
必要に応じてaliasを設定します。 実際に実行してみます。 今回はすでにESLint適用後のため、指摘事項はありませんでした。
続いてESLintの設定が終わりましたので、Prettierの設定を進めていきます。

Prettier

コードの整形に特化したライブラリとなります。

Prettier インストール

詳細

Prettier 設定

.prettierignore の適用対象外指定ファイル生成 .prettierrc.json の設定はESLint同様デフォルトのままとします。

Prettier 実行

サンプルコードにPrettierを適用してみます。
今回もPrettierを適用したくないコードにコメントアウトを追加しています。 この状態でPrettierを適用してみます。

Prettier alias 設定

コマンドのオプションなどを覚えておくのは大変なため、
必要に応じてaliasを設定します。 実際に実行してみます。 今回もすでにPrettier適用後のため、修正ファイルはありませんでした。

Jest

ここまでは一度設定する事で、ツールの再チューニングなどはほぼ発生しなくなるため、
そこまでメンテナンスコストは発生しませんが、Jestによるテストコード構築はアプリを開発すると同時に常にメンテナンスし続けるものとなります。
まだまだ学んでいるさなかのため、お作法がイケてないかもしれません。

Jest インストール

詳細

Jest 設定

Jestの設定を行っていきます。
個人的にはpackage.jsonに設定するのが好きなため、packege.jsonに設定しています。
GitHub Actionsの実行結果をアノテーションで通知してくれます。 公式

Jest alias 設定

コマンドのオプションなどを覚えておくのは大変なため、
必要に応じてaliasを設定します。

Jest 実行

Jestのテストコードについては絶賛学習中のため、
今回は私が困っているコードについて1つ例をあげさせてもらいます。
ABTest()関数を実行した結果、”A Pattern”か”B Pattern”どちらかを出力する関数において、
いい感じのテストコードがかけず止むをえず、toContainを利用しています。
このコードのexpectとreceiveが感覚的には逆な印象です。分かる人は著者までご連絡をお待ちしています。

GitHub Actions 環境構築

ここまでで入門したての私の環境構築は以上となります。
続いて、GitHub Actionsの設定のご紹介となります。
GitHub Actionsは前回も記事にしましたが、非常に優れたCIツールとなります。 今まで設定した各種aliasをGitHub Actionsに設定しました。

まとめ

TypeScriptは型付き言語で非常に扱いやすく、
情報も充実している事から初学ではありましたが、滞りなく入門できました。

宣伝

『No.1サービスを目指して開発するフロントエンド』というテーマでGMO Developers Dayに登壇しました。
チャンネル登録、いいねボタンお願いします。