今回は私がTSに入門するきっかけとなったエピソードをご紹介します。

TypeScriptで電卓を作りたくて来訪してくださった方には申し訳ないのですが今回は技術的な話は致しませんのでこちらのソースコードをサンプルとしてお持ち帰りください。

TypeScript + Webpack(HTML, CSS) + DevServer

https://github.com/moricom/Calc.git

完成品はこちら↓

https://animation-calc.netlify.app/

本題

私いつも通りCSSの勉強をしておりました。アニメーションを使えるようになればもっとUXを向上させることができるのではないかと考えたのです。

それに動くってなんだかロマン感じますよね！

そこで練習がてらに電卓のアプリを作ってみました。電卓アプリは受け取った値を数字にしたり文字にしたり、記号を扱ったりと意外と奥が深く自作関数を作る際に「あれ？いまこれって文字だっけ？数字だっけ？」みたいなことに陥るのです。

そんな時皆さんならどうしますか？

「typeofで型調べればいいじゃん」「そんなに大きなプログラムじゃないんだからもう一回フローを確認したらいい」

なんて思いますよね。でも、いちいちそんなことしないと自由にコードも書けないなんて不便です。ロジックを考えたいのであって型があーだこーだとやりたいわけでは無いのです。

そんな時「これはついにTSに入門するしかねぇ」と思い立ったワケです。

本来はただ「CSSのアニメーションを使ってみよう」という目的で初めた電卓制作がその後の私の人生を変える分岐点となったのです。

TSで開発をする

TSを書くのは普段からJSを使っていればそんなに難しくありません。Qiitaや色々なサイトに入門は説明されていて、型宣言をしてささっと書けばOKみたいな感じです。

しかし問題は開発環境です。今まではVSCodeの Live Server を使用してホットリロードを実現していましたがTSで利用することはできません。

こうなると必然的にwebpackを勉強して設定ファイルを書き試行錯誤しながら進めることになります。

たかが電卓を作るのに随分と遠回りしていまう予感ですね。

やり方は他のサイトが詳しく書いていますので流れだけ簡単に説明します。

• 各種ローダーを入れる
• 出力先を定義
• ローダーの読み込み設定
• dev serverの設定

詳しくはwebpack.config.jsファイルをご覧ください

単純にTSをトランスパイルするだけならtscコマンドで終わりです。便利に開発したいとなるとそれなりに設定を行う必要がありますね。

苦労した点といえばTSとHTMLとCSSのローダー、さらにdev serverなんて都合のいいサイトは無くて各サイトからひっぱてきて組み合わせるのが大変でした。

こうして開発環境を整えた私は電卓作成に取り組めるようになりました。今では他のプロジェクトやアプリでもTSをガンガンに推しています。

VSCodeの補完機能でどんどん開発ができる感覚は一度覚えたらもう戻れませんね (参考文献が少なくて死にそうなのは内緒)

アニメーションの話はまた後日！