こんにちは最近アニメ見る時間がなくてどうしようと頭を抱えているドラです。

まえがき

結構前につくったポートフォリオサイトが正直あまり好きではなく普通に見づらかったのでとりあえず見やすいサイトを別途作ることにしました。最近よく書いてるNext.jsでも良いかなと思ったのですがポートフォリオなので静的で何も問題ない&なんか使ってみたかったのでGatsby.jsを使うことにしました。
みやすさ重視なのでデザイン的なことは何もしてない単一ページです。

やったこと(つまったこと)

typescript対応

そんなに型を振り回すサイトじゃないので完全に自己満ですがやりました。具体的にはこのサイトを参考にやっていきました。gatsby-plugin-typegenを使うとgraphqlから型定義を自動生成してくれるらしく感動してました。ところが問題発生その型定義、どうやって使うんだ。写真の様にそんなもんはないと言われ途方に暮れていました。

f:id:doradorasuki:20210425175755p:plain — 型エラー

そのため、依存関係に問題があるのかな?と思い当初は

/// <reference path="../__generated__/gatsby-types.ts" />

をコードの最初に書くことで解決していました。詳しくは公式を読んでいただきたいのですがこれを使うとその対象ファイルをコンパイル時に追加してくれるそうです。多分間違った使い方です。その後1週間くらい経って良いやり方ないかなあとtsconfigのドキュメントを読みつつゴニョゴニョしていたらtsconfigに

"include": ["./sec/**/*"],

とTypoしていたことが判明し、原因が判明しましためでたしめでたし。
ところでいざこのTypoを直すと次はこんな感じのエラーが出ました。

f:id:doradorasuki:20210425181415p:plain — 型エラーその2

自動生成される型定義は基本的に

type Maybe<T> = T | undefined;

が使われているので当然と言えば当然でオプショナルチェイニングを用いて解決してやれば良いのですが逆にいままで何で出なかったのかわかっていません(vscodeの型推論自体はreference pathの時も効いていました)。分かり次第追記します。

tailwindcssのpurgeについて

どこかから拾ってきたらしい?tailwind.config.jsに記入するpurgeのパスがぶっ壊れていてtsxに用いるtailwindがnetlifyにデプロイするとひとつも反映されない問題が生じていました。configは理解して自分でかこうねの気持ちになりました(それはそう)。ところで発見が遅れた理由として開発時に

gatsby develop

を使うと思うのですが、これを用いることでcssファイル自体は生成され、その後buildをするとそのcssは上書きされずしかも同じものが使われる?ようでローカル環境だとindex.htmlをひらくと正常にレンダリングされるんですね(もちろんgatsby cleanなどを行った上でbuildすると正常にレンダリングされません)。ローカルでの環境再現の時には注意したいポイントですね。buildまわりのことが無知なのがよく分かったので精進したいと思います。

Renovateを使い始めた

ライブラリのアップデート周りを自動でpull request出してくれる便利サービスです。知らない方は是非。

このあとやりたいこと

レスポンシブデザイン
現状pcフルサイズ以外だとレイアウトが崩れるので一番やりたいですね
ブログの取得
前のポートフォリオだとやっていたのですがheroku上のバックエンドの取得がかなり遅い(スリープ的なものに入る影響)のもあってとりあえず今回は見送ったのでそこら辺の改修も含めてやりたいですね
デザインとか凝る?
みやすい中で動きがあると、うれしい！