ブログをTypeScriptで書き直してみた

M2のmarutakuです。今年もあっという間にアドベントカレンダーの時期になってしまいました。去年は優秀な同期・後輩たちの協力でなんとかアドベントカレンダーを完走することができたので、今年も頑張りたいと思います。

何をやったか

自分でクソザコエンジニア奮闘記というブログを作っていました。

技術的な話は過去の自分の記事をみていただければある程度はわかってもらえると思います。静的サイトジェネレータにGatsby.jsを使用していたのですが、自分でコードを書く箇所は通常のJavaScriptでReactを書いている状態でした。　
これまで何も問題はなかったのですが、　漠然とTypeScriptで書き直したいなーとは思ってしました。そんな時に、TAをやっている授業内でTypeScriptを使用することがあったので、勉強を兼ねてこの機会にブログをTypeScriptで書き直すことにしました。

TypeScriptのお勉強

自分はTypeScriptをほとんど触って来なかったので、まずはTypeScriptの勉強から始めることにしました。とりあえずはTypeScriptの公式サイトにある、The TypeScript Handbookを一周しました。
Gatsby.jsはテンプレートなどをReactで書く必要があるので、ReactのチュートリアルをTypeScriptで書き直して勉強しました。

実際に書き出す

お勉強が終わったところで実際にコードを書き出して行きます。
Gatsby.jsにはスターターライブラリと呼ばれるテンプレートが存在しています。今まではgatsby-starter-lumenというスターターを使っっていたのですが、TypeScriptに対応していなかったので今回はgatsby-starter-typescript-contentfulを使用しました。
Gatsby.jsの中ではデータをGraphQLを用いてデータを扱うのですが、 gatsby-plugin-graphql-codegenを用いることでTypeScriptのなかで使う型定義を自動生成することができます。自分は起動時に自動生成が実行されてほしいので、npm startで開発サーバを立ち上げる前にコマンドを実行するようにしました。

// package.jsonのscripts一部
"start": " graphql-codegen --config codegen.yml && npm run develop"

終わりに

思ったより書くことがなかったので、これで終わりです。作ったブログにはいくつか問題はありますが、比較的簡単にTypeScriptに移行することができました。　まだまだ勉強中なので、間違っている箇所があれば教えていただきたいです。