カケハシのプラットフォームチームでソフトウェアエンジニアをしているすてにゃん (
id:stefafafan) です。今回は、私が TypeScript をメイン言語として採用しているチームに参加した際、言語や周辺技術のキャッチアップを行った方法について紹介します。
この記事は秋の技術特集 2024の 3 記事目です。
この記事の想定読者
この記事は、新しい言語やスキルセットを身につけるための考え方や進め方について参考にしたい方を対象としています。新しい技術のキャッチアップが得意な方や、既に TypeScript を使いこなしている方には、あまり参考にならないかもしれません。
私が元々持っていたスキルセット
前職では Web アプリケーションエンジニアとして、様々な言語でサーバーサイドやクライアントサイドの実装を経験していました。私は Perl、Scala、Go を用いたサーバーサイド開発を得意としていましたが、クライアントサイドの開発で TypeScript を書く時は周囲の実装に合わせたり、詳しい方にレビューしてもらったりしていました。そのため、カケハシに入社し、サーバーサイドでも TypeScript を使用するチームに配属された際には、これまで曖昧に扱っていた言語やエコシステムについて、改めて理解を深める必要がありました。サーバーサイドで TypeScript を使用するのは、これが初めての経験でした。
認知負荷の増加
新しい環境に飛び込むと、様々な種類の認知負荷により、以前のようなスピードでの開発が難しくなります。
心理学者ジョン・スウェラー氏によると、認知負荷には 3 つの種類があります。「課題内在性負荷」、「課題外在性負荷」、「学習関連負荷」です。
課題内在性負荷とはタスクに直接関連する負荷であり、プログラミング言語そのものの知識などを含むそうです。 課題外在性負荷とはそのタスクというよりは周りの環境に関連する負荷であり、覚えにくいコマンドの羅列だったりするそうです。 学習関連負荷とは学習するには特別な注意が必要な負荷であり、ドメイン知識なども含むそうです。
認知負荷とキャッチアップ - stefafafan の fa は3つです
今回直面している「慣れない TypeScript の言語やエコシステムへのキャッチアップ」は、「課題内在性負荷」に該当します。この負荷を軽減することで、他の負荷、例えばドメイン知識を身につけることなどにフォーカスしやすくなります。
TypeScript 学習のためにやったこと
TypeScript の学習にあたって、様々な方法を段階的に実施しました。「学習の進め方」と「学習に使ったコンテンツ」という形で分けて紹介します。
学習の進め方
「XX について学習しよう」と漠然と思っていても、進め方次第で学習効率は大きく変わると思います。また、人によって向き不向きもあるでしょう。今回は、以下の手段を利用して TypeScript および業務で利用している技術の学習を進めました。
- テックリードとの 1on1 の中で壁打ちや相談
- ペアプログラミング
- 輪読会
- もくもく会
テックリードとの 1on1 の中で壁打ちや相談
キャッチアップの道筋を決める際、結局のところ、詳しい人と最初に認識をすり合わせるのが一番だと思います。チームのテックリードとの 1on1 で、自分が技術のキャッチアップを課題と捉え、どのような順番で学習していくべきかを相談しました。
私のチームでは TypeScript を使っている以外にも、 fp-ts や neverthrow、スキーマには Zod を利用しており、これらのライブラリを業務で扱ったことがなかったため、どこから手をつけるべきか悩んでいました。
テックリードとの 1on1 を通じて、どの順番で学習を進めるかの方針を決めることができました。「一般的な技術」と「どのプロダクトから詳しくなるか」という 2 つの軸で最終的に方針を確定させました。
実際、私とテックリードとの 1on1 ドキュメントには、今も以下のようなメモが書いてあります。
すてにゃん学習の流れ
一般的な技術の学習: TypeScript 👉 React 👉 OpenTelemetry 👉...
仕事: プロダクト X 👉 プロダクト Y
ペアプログラミング
業務で扱うコードの学習においては、ペアプログラミングやモブプログラミングが大いに役立ちました。早期にコードレビューに参加し、わからない点はテキスト上で質問したりしましたが、ペアプログラミングによる同期的な会話の方が学習効率が高かったです（その分、ペアプログラミングの相手の時間を多く使わせてもらうことになりますが）。
経験上、プロダクションコードのコーディングスタイルや設計が全ての機能において統一されていることはあまりなく、いくつかのやり方が混在していることが多いです。チームの現在の状況などを聞きつつ、メンバーが最善と考える設計方針を理解した上で新しいコードを書けるようになったのは良かったです。
このプロジェクトでは認証・認可などの堅牢性が重要なシステムを開発していたため、 TypeScript の型システムを活用した制約をかけることが非常に重視されていました。その背景も含めて学習することで、なぜそのような制約が設定されていたのかをコードから学ぶことができました。それと同時に、TypeScript の型システムや型演算に関する基本的な知識や慣れが必要であることも認識しました。
輪読会
仕事を通じて学んでいくのも良いのですが、体系的な知識を得たいと感じ、輪読会を開催することにしました。最初は特定のチームメンバーと一緒に時間をとって定期的に読み進めようと考えていましたが、一般的な内容の学習であればチームに閉じる必要はないと考えました。さらには、社内に閉じることもないと思い、connpassを利用してオープンに輪読会を開催することにしました。
一人で黙々と教材を読み進めていると、「これはどうしてこうなっているのだろう」と疑問に思っても、自力で調べる必要があり、答えに辿り着くまでに時間がかかります。輪読会では、一緒に読んでいる人たちと同期的にディスカッションができるため、非常に効率よく学べておすすめです。また、定期開催することで途中で飽きてやめてしまうことも少ないと思います。
もくもく会
輪読会とは別に、プライベートでオンラインのもくもく会にも何度か参加しました。「もくもく会」には様々な形式がありますが、私が参加した会では、オンラインホワイトボードツールmiroを使ってボードを作り、各自がその日やろうと思っていることを付箋に書いて管理していました。タイムボックスを設け、その目標に向けて決められた時間ごとに進捗を発表し合いながら、作業を黙々と進める形式でした。
このもくもく会の中で、私は個人的に読んでいた TypeScript に関する本を少しずつ読み進め、タイムボックス終了後にはどこまで読み進められたか、その感想を共有しました。
輪読会と同様に、みんなで作業をすることで、一人では怠りがちなことも進めやすくなります。
学習コンテンツ
前述の学習方法を利用して、以下のコンテンツを学習しました。
- O'Reilly Japan - Learning Platform
- TypeScript Deep Dive (原文)
- プロを目指す人のためのTypeScript入門 安全なコードの書き方から高度な型の使い方まで：書籍案内｜技術評論社
- GitHub - type-challenges/type-challenges: Collection of TypeScript type challenges with online judge
- 公式ドキュメント
- 仕事で実装しているプロダクトのコード
O'Reilly Online Learning を使った学習
O'Reilly Online Learning は O'Reilly のサブスクリプションサービスで、様々な O'Reilly 本をブラウザやアプリで読める点が非常に便利でした。弊社には「スキルアップ支援制度」という福利厚生があり、この制度を利用して O'Reilly Online Learning に契約できました。
O'Reilly Japan - 初めてのTypeScript は、最初に読むのに最適で、章ごとに実践的な課題が出される点も非常に良かったです。
また、Effective TypeScript, 2nd Edition[Book]は途中までしか読んでいませんが、リファレンスとして非常に有益な書籍でした。第二版は 2024 年 4 月に発行されたばかりで、情報も新しく安心して使えます。
TypeScript Deep Dive
前述の輪読会で読み進めているオンラインのリソースです。無料でこれだけ網羅的かつ分かりやすくまとめられた教材は非常にありがたいものです。
ただ、読み進めると、ページによっては最終更新が 4 年前の箇所や、記述ミスが見受けられることもあるので、その点を踏まえて読むことをおすすめします。とはいえ、オープンソースなので、以下のように間違いを発見したら Pull Request で指摘できる点が良いですね。
プロを目指す人のための TypeScript 入門 安全なコードの書き方から高度な型の使い方まで
通称「ブルーベリー本」。『初めての TypeScript』よりもさらに解説が丁寧で分かりやすい本です。元々日本語で書かれた書籍であり、初心者の方にも非常におすすめです。初心者でなくとも、目次をパラパラと見て、自分の認識が曖昧な箇所を読んでいくのも良いと思います。
type-challenges
TypeScript の型に関する課題が多数まとめられたリポジトリです。型の表現力や文法を理解するには、実際に手を動かして数をこなすことが重要です。こうした課題をいくつか解くことで、TypeScript の型システムやジェネリクスに慣れてきます。
mosya というサービスでも type-challenges に対応しており、日本語で分かりやすくまとめられているので、このサービスを利用すると敷居が若干低くなり、便利かもしれません。
公式ドキュメント
TypeScript の公式ドキュメントは情報が非常に充実しており、内容もアップデートされているため、安心して参照できます。特に、TSConfig のオプションを調べるときや、TypeScript の新しいバージョンが出た際の差分をチェックするのによく利用していました。
また、TypeScript の Playground は非常に便利で、コードを試しに書いて結果を検証する際に頻繁に利用しました。輪読会の中でも何度もこのページを活用しました。
効果や今後について
TypeScript の学習を進めた結果、チームのコードベースを読む際やコードを書く際に型の記述を理解できるようになり、ドメインロジックに集中しやすくなりました。実際にコードレビューにかかる時間も短縮され、仕事へのコミットもしやすくなりました。今後は TypeScript 以外の領域やプロジェクト特有のドメイン知識をさらに深め、チームメンバーとしてより大きな成果を上げられるよう努めていきたいと考えています。
この記事が皆さんの参考になれば幸いです。特に、詳しくない分野に関しては、まず詳しい人と作戦を立てて勉強を進めることをおすすめします。また、学習コンテンツについても、なるべく公式のものや、メンテナンスされている最新の文献を選ぶようにすると良いでしょう。
