経緯
js→tsへの移行がやっと終わって、mainブランチに統合できたから、これまでの経緯を振り返って見ようと思い書いた。
移行話
とりあえず、移行を思い立ってから、移行が完結するまでを物語風でまとめておく。
内容
一章 決意
最初の段階で、tsにするかjsにするか検討することはあった。
当初は、typescriptで開発しようと思い、開発環境を調べた。
しかし、調べれば調べるほど、あれもしたい、これもしたいが積み重なり、本当にしたい開発が後手後手になっていることに、環境調査沼にハマってから気づいた。。。
特にハマっていたのは、webpack関連のビルドと、デザイン周りのモック開発ツールの選定＆モックの作成。
もう、初速が使いので、typescriptに見切りをつけて、javascriptで実装を強行。
jsで実装するにあたり、気を使ったのは、デザイン周りとelectronのセキュリティ関連の実装だった。
デザインは、前の段階である程度形になっていたので、それほど問題ではなかったが、bootstrapやjqueryで悩むことが多かった。webの情報をそのまま鵜呑みにすると、デザイン崩れたりして、嫌気が刺しやすいから、なるべくシンプルなものを作ることを心がけた。
npmやgitは、仕事で使った経験があったので苦労はしなかったが、経験がなかったら、もっと苦労してたかもしれない。。。
electronで一番苦労したのは、preloadの概念。
利用したことがなかったので、学習コストがかかったのが辛かった。
とりあえず、rss情報を収集する機能は、速攻で実装できた。
デザインを思ったとおりに作って、動きも合わせて実装できたときの快感は素晴らしい。
たぶん、ドーパミンがどぴゅどぴゅ出てたと思う。
modal機能を実装するときにbootstrapやjqueryのことを色々調べたのが辛かったくらいで、比較的順調に実装はできてた。
ただ、ipc通信部分を作り込んでいるときは、型情報が欲しいと思った。
それと同時に、型を導入したら、preloadのところで苦労するだろうなぁ～とは感じていた。
開発を勧めていくうち、この引数なんだっけ？から始まり、引数の内容を調査し始めると、途中の処理が気になり、最初にやっていた作業を忘れ、別の作業をやり始めてしまう自体に。。。
そして、元のことを忘れたままということに。。。
いろいろ考えたが、静的型付は必要という結論に至った。
理由としては、自分の特性によるものが大きかった。
忘れっぽく、完璧主義の思想があったため、前述したように引数の設定内容調べ始めたときに、気に食わない実装を見つけると、それに注力してしまっていた。そのため、優先順位を無視して気の向くまま作業してしまい、なかなか成果が上がらなかった。
型を導入することで、変な方向に気が向く機会を減らし、やるべき作業に集中できるようにしたほうがメリットデカいと感じたため、js→typescriptへの移行を決意した。
また、本職はJavaエンジニアということもあり、デザインパターンにもある程度精通していたため、静的型付の方が開発効率が上がる気がしたのも、移行を決めた要因の一つではある。
二章 挫折
移行を決意して、js→typescriptへの移行作業を実施。
typescript自体は、業務で触ったことがあるので、tsconfigの準備やら環境準備、webpackのビルド環境用意は、比較的順調にできた。
目的が移行だったので、環境調査に気が向くことはなかった。
jsファイルの拡張子を一括でtsに変えてビルドエラーを潰してイケば、移行できるだろうと思っていたが、それが挫折へと向かう要因であった。。。。
tsに変換して、初回ビルドした結果、１００件オーバーのエラーが。。。
tsconfigで条件を緩くしても、エラーの数はあんまり変わらなかった。。。
型定義ファイルを用意したり、ビルドエラーを一つずつ消して行く作業で精神が摩耗していき、なんとか全部解決する頃には、かなりイライラしている状態になった。
そして、いざ実行してみたら、今度は、electron周りでエラーが。。。
たぶん、mainとrendererを別個に出力してなかったのが問題だったと思うが、当時はその発想がなく、削りきられた精神状態にelectornの実行エラーがトドメとなり、もこう先生並の台パン決めて移行を諦めた。。。
electronのエラー表示が不親切ってのも、問題としてあると思う。。。
三章 再挑戦
諦めてjsで機能実装をしていくが、どうしても性格的な問題で気がそれるのが治らず、イライラすることが多かった。。
スラムダンクの三井並に、モニターに向かって「typescriptに移行したいです」という本音が出てきたので、楽して移行できないか調べてから再挑戦することに。
いろいろ調べた結果、ts-migrateを見つけることができた。
前回は、js→tsでかなり摩耗したから、それをすっ飛ばして他の問題に注力できるのでは無いかと思い、再挑戦。
前回はコード変換で苦戦したが、ts-migrateである程度、機械的に変換できたので、他の問題に注力できる余力が生まれた。
preload使っているので、型情報ファイルが必要になったが、別の問題がでてくるのが目に見えてたので、とりあえずビール的なノリで、とりあえずanyで誤魔化して済ませておいた。
前回は、考える前に辞めてしまったが、webpack絡みで問題があったことに気づき、いろいろ四苦八苦しながら対応して、なんとか移行を完了できた。
型定義ファイルの作成にも苦労したが、どちらかというと、webpackが一番難所だった。
webpack職人と言われる人たちが出てくる闇を垣間見た気がする。。。
理屈が分かれば、対応できるのだが、裏の構造が分かりづらいので、トライ・アンド・エラーになってしまい、職人ができてしまうんだろうなと思う。
とりあえず、移行が成功できて素直に嬉しい。
ts-migrateが特に役立った。
別の問題に注力できる心の余裕ができたのが、移行ができた要因だと思う。
チーム開発なら誰かに頼るとかできるけど、個人開発だとこういうのが辛い。。。
ツイッターで適当に呟いておいて、ヘルプ求めておけば良かったのかもしれないと、後になって思ったが、知らない人からリプライきたら、ビビって無視してしまいそうな気がしないでもない。
思ったこと・学んだこと
typescript移行作業
- jsからの移行は、ソースを変えるだけでは無理
- ビルド環境の構築、周辺環境の理解が深くないと、問題がいろいろ絡みあって挫折する
- webpack等のビルドツールが必須になるので、typescript以外にもwebpack等の知識が必須
- 移行で楽できる箇所は楽をする
- 別の問題に注力できる余力を残しておいたほうがいい
- 楽をすることは悪ではない。※無知は悪だと思うけど、知ってる上で楽するのは全然OK
- 移行するまでどんな問題が出てくるのか分からないので、心の準備はしておく
- なぜ移行したいのか、目的は明確にする
- ストレスでハゲるかもしれない覚悟はする
- 心の余裕、超大事
移行したメリット
開発勧めて行く上で分かってくると思うので、記述は辞めておく
その他雑記
書いていて思ったが、俺ってメンタル弱すぎでは？って思った。。。
そこそこやるエンジニアだと思っているが、心の余裕が無いと、実力あっても諦めるんだなって感じた。
最近、メンタル不調から復帰して来たからかもしれないが、心の余裕って、パフォーマンスに大きく影響するものだと思った。ここらへん、アスリートみたいだなと感じた。
