新しい技術を触るときのキャッチアップ方法
はじめに
今年の4月ごろ、PHP/Laravelをメインで扱うチームから、Next.js/NestJSのSPA開発(両面TypeScript)が求められるチームに配属が変わりました
その際に「どうやって新しい技術のキャッチアップを行ったか」を記事にまとめておきたいと思います
この記事がこれから新しい技術を身につけたいと考える人や、これからプログラミングを覚えていきたい人などの参考になると嬉しいです
この記事のゴール
前提条件
まずざっくりですが社内の開発チーム体制は以下のようになっています
.
├── DevOpsチーム(PHP/Laravel)
├── リアーキテクチャチーム(TypeScript/React/Next.js/NestJS)
├── その他チーム(PHP/Laravel)
元々未経験からエンジニアに転職して以来、PHP/Laravelをメインに扱うDevOpsチームの一員として働いていました
上記体制からも分かる通り、社内のメインスタックはPHP/Laravelであり、TypeScriptでアプリケーション開発を行うことは技術的な挑戦となっている状況です
配属転換の話が来るきっかけ
今回僕に配属転換の話が来た理由として主に以下がありました
- 社内でTypeScript開発ができる人材を増やしたい
- 新規採用した技術を社内に展開していきたい
上記は社内的な理由ですが、実はこの話が来る前から「現在Web開発の主流となっているTypeScriptを中心とした開発経験を積みたい」と考えており、個人的にキャッチアップを進めていました
また、もくもくとキャッチアップを進めるだけでなく、それを所属チームのマネージャーやリアーキテクチャを行っているチームのPMにも1on1などで話をしていました
そこで次にTypeScriptを書ける人材を育てる候補として、個人的に学習している意欲を買われてのアサインに繋がりました
そこから得られる教訓は以下です
日頃から自分が学んでいることや興味があることを周囲へアウトプットしておくと良いことがあるので手を動かすだけでなく、ぜひ発信してみることをオススメします
技術を身につける一番良い方法
これを言うと元も子もないかもしれませんが、新しい技術の習得方法として一番良いのは実務経験を積むことと考えています
自分がキャッチアップしたいと思う技術があれば、まず実務経験を積めるように考えてみると良いでしょう
仮に今実務で扱っていなくても「この技術のメリット/デメリットはそれぞれ〇〇で既存プロジェクトに導入するとこんな効果が期待できる」等、提案する活動などできることからはじめてみるのも良いと思います
※あくまで事業に対してメリットがないと、ただのわがままになってしまうのでそこは注意
キャッチアップする必要のある技術一覧
少し話が逸れましたが、僕がリアーキテクチャチームにジョインするにあたり、当時キャッチアップする必要のあった技術は以下です
TypeScriptは事前に自己学習を進めていましたが、その他はほとんど触っていない状態でした
そこでまずはSPAアプリケーションの両面で使われているTypeScriptキャッチアップからはじめました
TypeScriptのキャッチアップ方法
TypeScriptのキャッチアップには以下書籍を利用しました
愚直に書籍に記載のあるサンプルコードを全部手を動かして進める
まずはTypeScriptの構文に慣れるためにもサンプルコードを眺めるだけでなく手を動かして書きながら進めました
また学習用のGitリポジトリを作って各章ごとにプルリクエストを作り、コードもコミットしながら進めるとGitHubに草も生やせるのでオススメです
この学習方法はt-wadaさんの以下スライドでも紹介されているものを取り入れています
書籍の各章の終わりにある問題を複数パターンで解く & チームメンバー同士でコードレビューする
書籍には各章ごとに練習問題があるのですが、それを1つの解法だけでなく、複数パターンの解答を考え実装することで色々な方法を知ることができるためオススメです
また、TypeScriptの学習をはじめた少しあとにSPAアプリケーションを触れる人材を増やすことを目的に、TypeScript + Reactの社内勉強会が行われていました
勉強会の中でお互いにコードレビューをすることで、自分以外の人がどういった観点・意図でコードを書いたかを知ることができたり、自分の知らない書き方を見ることで知識の幅を広げることができました
自分一人で学習を進めるのも大変素晴らしいことですが、誰かと学んだ知識を共有するとさらにキャッチアップが捗るため一緒に働くメンバーを巻き込んだり、もくもく会に飛び込んでみたりするのもオススメです
JavaScriptの実装をTypeScriptに置き換える
書籍とは別に、JavaScriptで簡単なTODOアプリを実装してそれをTypeScriptに置き換えることをやりました
TODOアプリは以下youtube動画のものを過去に実装していたのでそれを利用しました
この方法ではリファクタリングの要領で少しずつTypeScriptを書いていけるため、実際にアプリケーションを動かしながら小さい粒度で進めることでハードル低く実装を進めていけました
技術のキャッチアップはハンズオンをやるだけでなく、
この手順を踏むことで、知識→使えるスキルに昇華していくことが重要だと思います
Reactのキャッチアップ方法
TypeScriptを書籍で体系的に学んだあとは、以下内容でReactのキャッチアップを行いました
- チュートリアル
- ドキュメント
- 簡単なアプリを作る
五目並べゲームを作るチュートリアル
最初はとりあえずReactを触ってみることを目的に、Reactのドキュメントに載っているチュートリアルを行いました
五目並べゲームを作りながらReactを学べる内容で、基本的に次にどう実装すれば良いか書いてあるので躓くことなくアプリを動かしながら進められたのが良かったです
ドキュメントを読みつつ、問題を解く
次にやったことは、ドキュメントに載っている「LEARN REACT」を愚直に進めていきました
ただ読むだけではなく手を動かしつつ、自分の頭を使って考える問題が用意されていてインプットとアウトプットを短いサイクルで繰り返しながら動作検証ができるのが良かったです
難易度的にも、ちゃんと自分の頭で考える必要のある問題が用意されているのでキャッチアップにちょうど良いレベル感で作られていると思います
Reactを使って簡単なアプリを作る
Reactの基礎を一通り学んだあとは、TypeScript + Reactで何個かアプリ開発を行いました
(ソースコードも合わせて載せます)
- カウンターアプリ
ただのカウンターアプリを作るだけだと、すぐ終わってしまうのでAtomic Designの考え方で実装してみました
※ちなみにAtomicDesignで実装してみた感想は「これ実務に導入するの相当厳しいのでは？」でした(基準が各自の主観に左右されるし、かと言ってルール決めも相当難しそう)
- 天気予報アプリ
Open-Meteoの無料APIを使って天気予報アプリを作成しました
APIキーの発行も必要なく、エンドポイントと必要なパラメータさえ知っていればサクッと使えるところが良かったです
技術のキャッチアップのたびに思うのですが、学んだ技術を使って一から自分で何かしらのアプリを作るのが一番です
Next.js/NestJSのキャッチアップ方法
続いてNext.js/NestJSのキャッチアップは以下を行いました
- NestJSの特徴をまとめている動画を見る
- ハンズオン動画で手を動かしながら学ぶ
NestJSの概要を100秒で掴める動画
NestJSがどんなフレームワークなのかを知るために動画を漁っていたところ以下を見つけたのでご紹介します
100秒という短い中でも、NestJSの特徴をまとめて説明してくれているので概要をサクッと知るにはうってつけかと思います
このチャンネルはNestJSの他にもいろんな技術を扱っているので興味のある方は登録しておいても良いかもしれません
Next.js/NestJSのブログアプリケーション開発
youtubeでNext.js/NestJSのSPAアプリケーション開発の以下ハンズオン動画を行いました
実装したリポジトリは以下
こちらのyoutubeも丁寧に説明されており、問題なく実装を進めていけると思います
またこの動画ではDBは使わずにSPAアプリケーション開発を体験できる点がシンプルでわかりやすかった印象でした
Prismaのキャッチアップ方法
Node.js/Prismaを使ったAPI開発
Node.js(Express)でAPIサーバーを構築して、Prismaを使ったCRUD処理を実装するハンズオン動画です
Prismaの使い方をシンプルに学べるので入門動画として良いかと思います
(RoRのActiveRecordやLaravelのEloquentなど使っている方はそこまで違和感なく入門できると思います)
GraphQLのキャッチアップ方法
TypeScript & GraphQL & Prismaを使ったTODOアプリケーション開発動画
GraphQLの学習としては以下動画でTODOアプリケーション開発を行いました
全部で12本の動画があるので内容もなかなかのボリュームになりますが、動画を通してアプリケーションを完成させるとかなり具体的にGraphQLを使うイメージが掴めると思います
(解説者の方が関西弁でユーモアを交えた解説を行ってくれるため、個人的に最後まで楽しくハンズオンを進められました)
その他の参考資料など
サバイバルTypeScript
「実務でTypeScriptを使うなら、ここだけはおさえておこう」「ここだけはおさえておけば、実務で死なない(=サバイバルできる)」という観点で執筆しています。
上記の引用にもあるように、最速でTypeScriptの必要な知識をキャッチアップする観点で作られたドキュメントです
個人的に最初から全ページを読み進めているのですが、「今ならこう実装するのがイケてるよ」「興味があるならこのあたりも見てみると良いよ」みたいなポイントも含めて本当によくまとまったドキュメントとなっています
実務でキャッチアップが急務なら、このドキュメントを横に置いておくのも良いと思います
type-challenges
TypeScriptの型をいまいち操れてない感覚があるなら以下もオススメです
問題形式でTypeScriptの型を作っていきます、自分も絶賛トレーニング中です
Next.jsの考え方
少し前にバズっていたzenn本です
Next.jsのベストプラクティスが書かれているため一度は目を通しておくととても勉強になります
おわりに
理想を言えばすべての技術を使って一からアプリケーション開発をする経験をした上で実務にジョインするのが良いかもしれませんが、現実問題それが難しいこともあると思います
僕の経験だとTypeScriptとReactを重点的に押さえておくと、実務に放り込まれてもどうにかキャッチアップしながらタスクを進めることができました
ただ、エンジニアとして仕事をしていると自分知らない技術がいくつも重なって何がどうなっているのかわからない状態になるという経験があると思います(特にエンジニアとして働きはじめたときはよくなっていました。。)
そんなときは一旦立ち止まって、以下のように現状の把握と次にどんなアクションをすれば良さそうかを整理してから行動することをオススメします
今回ご紹介したキャッチアップ方法が、学習のヒントになったり何かしらの役に立てると嬉しく思います
Discussion