リファクタリングに入る

記録の理由

約7週間の短ければ短くて長ければ長いプロジェクトを経験してReactとある程度仲良くなる時間はあったと思います。でも、思ったと違って私はこの友達を綺麗に育てたいのですが、いつの間にか乱雑になるのが勝手に生えたひげを見てるような感じです...。

それでこのコードを修正してみよう！と思うようになり、簡単に今までのプロジェクトの記録を残しながらこの機会にTypeScriptも使ってみる機会を持とうと思います。

なぜReactを使うのか？

以前参加したプロジェクトではVueJSも使ってみる機会があってVueをベースにコードを作った経験があったのですが、何か長所と短所を持って比較できる熟練者ではなかったし、Reactを使ったこともなかったので、とりあえず今一番ホットなフレームワークだから使ってみよう！という考えを持って使うことになりました。どうやらVueと比較した時、Vueの短所を体感するよりReactの長所を体感するきっかけになったようです。

エコシステムが広い

これは数値的にもそうですし、よく知られているメリットだと思いますが、Vueで使ってたほとんどのライブラリはReactでも使えるし、こちらがメインでVueはおまけみたいな感じで提供されてる感じがしました。

直感的です。

まだ様々なHookを使ってないからか、Propsを処理する方法やコード作成方法など、もっと楽だと感じました。

ueの場合はまるで頭、胸、腹のようにtemplate、script、styleを作成する形でコード間の区別感を生かした感じでしたが、Reactは基本的にFuction ComponentをJavaScriptコードと区別感を与えない形で作成する方なので、変数アクセスなどにおいてもっと便利だと感じました。

もちろん、Vueのように分離するとコードを読む時もっと楽かも分かりませんが、作成する基準としては明確な違いがあり、今となってもどっちを使うかと聞かれたらReactを使うでしょう。

Event処理が便利でした。

上の内容とある程度共有する部分がある内容ですが、EventHandlerを作成する時、Vueを使ってた時よりずっと直観的に書くことができたと思います。Vueの場合はFunctionとVariableを別々に分けて書く部分が多かったようですが、Reactは一般的なプログラミング言語を使うようにその場で変数宣言して処理する形が可能なので、毎日食べてた白飯のような安心感がありました。

TypeScriptを使う理由

実際の業界で選ぶ長所と短所とは違うかもしれませんが、個人的にはReactの上記のような長所を挙げることができ、Refactoringの過程でもReactを選んだ理由になりました。

同じようにRefactoringをする時、なぜJSの代わりにTSを使うのかの理由も書いておいた方がいいと思うのでここに書いておきます。

エラーキャッチャー

TSの長所でJSの短所を解決する部分がすごく大きいと思います。基本的にJSは非常に緩い言語だと思うし、実際そうです。 そのため、エラーが変なところで発生し、解決も難解な時がたまにあるのですが、このような部分をTSがうまく解決してくれると期待しています。

慣れてる

JSはどうしようもない開発履歴によって個人的にプログラミング言語らしくない部分がすごく多いと思います。しかし、TSは明らかにJSベースであるにもかかわらず、とてもしっくりくる構造を提供することで、JSで残念だった部分を解決してくれました！もちろん、手はもっとたくさん必要ですが、むしろ安定した構造の慣れから来る快適さがTSを使うように誘導しています。

おわりに

今後、今まで使っていたコードと比較しながら、あるいは学んだ内容を、この投稿の下にどんどん残していく予定です。どれくらい時間がかかるかは分かりませんが、とてもやりがいのある作業になることを期待しています！