TypeScriptにキャッチアップするためにやったこと
はじめに
この記事は私がTypeScriptにキャッチアップするためにやったことと、それに関するコメント・感想を記載しました。これからTypeScriptを学習する方のヒントや手助けになれば幸いです。
やったこと
1. JavaScriptの経験値稼ぎ
業務でJavaScriptを活用する
いろいろな方々が発信していることではありますが、TypeScriptを理解する上でJavaScriptの基礎の理解が不可欠です。JSでも業務で活用して事前にスキルを伸ばしておくことは無駄にはならなかったです。
私はバックエンドの担当がメインですが、JavaScriptのコーディングが必要な場合もできそうだったら自分から名乗りを上げてこなすことで経験値稼ぎのようなことをしていました（当初TypeScriptをやることは考えていなかったですが）。
LAMP環境のプロジェクトで開発に関わったことが多いですが、この環境だと
- JavaScriptでフロント周りの動きをつけたい
- アップデートでもともと組み込んでいたJavaScriptが動かなくなってしまった
といったちょっとしたフロントのJavaScriptコーディングが必要なタスクが発生する場面がよくありましたが、こういったところをチャンスだと捉えられるかどうかだと思います。
このステップでは「JavaScript コードレシピ集」という本でやりたいことから逆引きして、実務のJSのコーディングに展開することを繰り返していました。しばらく続けていると理解できてきて、本を開かなくても手を動かせるケースが増えていきました。
JavaScript コードレシピ集
開発現場に「PHP(Laravel)はいいんだけどJSはムリ、わけわからん」みたいな反応の人が多かったので、これをやっていたら自分のスキルアップのためにやっているだけでなぜか周りからありがたがってもらえるといった、ある意味全員がハッピーになってしまう構図が出来上がっていたことがありました。
ES6の書き方を覚える
上の"経験値稼ぎ"の途中からES6のJavaScriptの書き方を勉強しました。
- Array.prototype.forEach()、filter()、map()、reduce()
- 分割代入
- 残余引数
- スプレッド演算子
あたり（まだあったかも）を使いこなせるようになると進歩を感じられます。
現場でちょっとずつ取り入れるようにしていたら自分の書いたコードが日に日に
モダンJavaScript感が出てくるという体験をしました。
これは↓のUdemy動画を使って学習しました。
【世界で4万人が受講】JavaScriptエンジニアのためのES6完全ガイド
2. 学習リソースの選定
Udemyで見つけた動画コース
UdemyでTypeScriptの文法解説動画コースを見つけ、これをインプット学習に活用しました。TypeScriptのコースは文法の解説を順を追ってなぜそう書くのかという点を省略しすぎず話してくれるスタイルが私に合っていました。業務に必要ない部分はスキップし、1.5〜1.75倍速で2週して視聴しました。この後に記載するTypeScript Playgroundを使うと手を動かしてコード書いて動かしてみるといったことがしやすかったです。
【世界で7万人が受講】Understanding TypeScript 日本語版
Webドキュメントと書籍
TypeScriptの学習にはWebドキュメントも役立ちました。特に「TypeScript Deep Dive」と「サバイバルTypeScript」を読みました。
この言語はアップデートのペースが速いので書籍ではなくWebのドキュメントを中心に読む方が最新の情報を確認しやすいかもしれません。
オライリー本を買いましたが、単純に時間がなかなか取れず結局あまり見れませんでした。
3. 実践の場面でのスキルアップ
- 2.でやっていたこととJSの実務経験があることをアピールしたら、運よくTypeScriptの実務経験がなくてもプロジェクトに参画できましたw
実務で技術イケメンのやりかたを吸収する
実際に開発プロジェクトに参加し、TypeScriptを駆使する技術イケメンエンジニアのコードを研究（パクる）しました。イケてる実装を自分のものとして吸収していくことができ、やっぱりといいますか、これが最も成長スピードが速く感じられる場面でした。アウトプットがやはり大事。
4. ツールとテストの活用
TypeScript Playground
TypeScript Playgroundを使うとWebで拾ったりして手に入れたちょっとしたスニペットの挙動をプロジェクトのソースと切り離した状態で確認しやすいです。
Vitest
テストフレームワーク Vitestを用いた単体テストを実装する場面もありました。使ったことはないですがJestより動作が速いとか。公式のドキュメントを頑張って読み込んでいると挙動の理解の解像度が上がっていきました。
Prisma
TypeScriptでデータベースアクセスを扱うためのライブラリとしてPrismaが有力候補となるという知見を得ました。Laravelのクエリビルダを扱ったことがあったので、プロジェクトで初見で扱いましたが抵抗感は少なく、意外とスムーズに扱うことができました。
公式のPrisma Client API referenceの付近を読みながら実装していました。
5. 応用範囲の拡大
JavaScriptフレームワークをTypeScriptで扱う
Vue、React、Angular...etcをやってみたいです。まとまった時間できたらどっかでやろうかな。
Officeスクリプトを扱う
また、TypeScriptのプロジェクトを経験したことでOfficeスクリプトへ挑戦することのハードルが下がったはず。
おわりに
この記事を通して、TypeScriptにキャッチアップするために取り組んだ体験を共有させてもらいました。基礎から始め、実践的なスキルアップ、学習リソースの選定、ツールとテストの活用、そして応用範囲の拡大まで、一歩一歩確実にスキルを積み重ねていくことが大切だと思えました。
この記事がこれから学ぼうとする方々の一助となれば幸いです。
実際の実務の現場ではまだ一通り網羅しきった感覚はなかったですが、個人的に静的型付け言語としてTypeScriptがしっかりできると生産性のポテンシャルは高そうだなぁと感じながら過ごしていました。例えば、PHPではコードが動いてから型が違ってエラーが分かるけど、TypeScriptはコードを書いているときにエラーが分かるというところに差を感じました。大体の場合で後者の方が被害が少ないのでこの差が積み重なって生産性に違いが出るはず。
技術イケメンのエンジニアの少し後に追従しつつ実務でやっていたのはまだ結構記憶に残ってますw
Discussion