久しぶりにTypeScriptを触って
未経験で入社して2ヶ月と少し経ちました。
最近では、バックエンドを動かしながら課題を進めていますが、入社する前までは、JavaScriptを中心にHTMLやCSSを学んでいましたが、入社して初めて、本格的にバックエンド(今回ではAWS)の使い開発を進めるにあたり、かなり苦戦しています。特にAPIを使って欲しい情報を取得するという流れも、アプリを作る上では当たり前のことですが、その当たり前すら初めての経験で、毎日新しい発見と数多くのエラーに遭遇しています。
TypeScriptも少しだけ基礎的なことを学び、簡単なTODOリストなどに型を付けるという作業はしましたが、AWS Amplifyなどを使って開発に挑戦してみる際に、どうしても型定義でのエラーが目立ってしまい、なかなか本題のバックエンド開発の方に行き着かないということもありました。そのため、その時はTypeScriptを使わずReactでフロント側を作り課題を進めました。
そんな中、今回久しぶりにTypeScriptを触り、かなり型指定でハマってしまいました。
どうしてハマったのか
TypeScriotを最初学習している際には一から作りながら、それに合わせて型を決めるという感じで進めていたのですが、今回は、社内でよく使うサービスを学びつつTypeScriptも書こうということで、ある程度サンプルが出来上がっているものをReactで少し書き換えてそれにTypeScriptで型を付けるという流れで行いました。
久しぶりに触り、少し忘れているところもありましたが、とりあえずどういった値が入るのかを一つ一つ調べて型を定義していきました。(少し余談ですが、頭が大文字から始まるのと小文字から始まる(Stringとstringなど)ので意味が大分違ってくることを知り、基本小文字で書くということを今回初めて知りました。)
まず、ハマった原因一つ目は、しっかり理解できている型以外は、エラーを消すのが目的になっていたことです。
エラーのメッセージで出てくる中には、入る値は分かっていても、使っているライブラリなどによっては初めてみるものも多く、調べてある程度機能を把握するものの、それが他にどのように影響するかを深くまで理解できていないことがあります。そうなった際に、とりあえずエラーを消すことだけを考えてしまい、調べて出てきたものを試し、それによってエラーがなくなれば良しとしているところがあり、これにより後々直した際に、それが原因でまたハマってしまうという流れができてしまいました。これにより、そもそも型を付ける本来の目的を見失っており、ここでやっていることは型にanyを付けていることと何も変わらないと感じました。
二つ目のハマった原因は、TypeScriptを型の付け方の理解度がまだ低いことにあると思います。
そもそも今まで使ってこなかったので仕方ないのですが、それでも学習した基本の型などはできると思っていました。
しかし、実際は「この型であっているのか?」「関数コンポーネントの場合、FCで[children]を含まない場合はVFCを使うが、こんな書き方だったか?」などと自信がなくなり、結果今回、「利用しているライブラリの型を変えるのでは?」と普通に考えたら、あり得ない考えに至ってしまいました。
三つ目にハマった原因は、タイトルにもある通りTypeScriptのありがたみを感じておらず、少し毛嫌いしていることにあると思います。
まだ、ほとんど使ったことがないのに何気毛嫌いしているんだと思いますが、使ったことがない上にその便利さに気付けていないんだと自分でも思います。学び始めたタイミングも、Reactを段々と理解してきた矢先にTypeScriptを学び始め、自分の中で整理できていない状況で学習を進めていたために、混乱してしまい理解が中途半端な状態であったような気がします。
さいごに
TypeScriptは会社の先輩やネット記事などでも、開発においてはとても重要だということは知っているのですが、自分が使った方がいいと認識のもと自信を持ってTypeScriptを使う段階にまだいけてないので、とりあえず今は、とにかくTypeScriptと向き合う回数を増やし、少しでも好きになれるように努力していきたいです。