フロントエンド開発で詰まった時のディグり術５選

こんにちは．フロントエンドエンジニアのavaiceです．

フロントエンド技術は進化が早く，新しいツールやライブラリに触れる機会が多いです．
エラーやよくわからない挙動に当たってしまう事もよくあります．そんな時に私が行っている情報のキャッチアップ術を自分の思考整理も兼ねて記事にしようと思います．

１．公式ドキュメント

一般的な使用用途であれば，基本的に公式情報を見ればある程度揃います．Q&AやTrouble Shootingのページを用意してくれている事も多いので，私は最初にそこを見るようにしています．

ほとんどのライブラリではアップデートに対応した情報更新も行われているので，バージョン違いで動作しない情報に当たってしまうことも少ないです．

２．GitHubのIssue/Discussion（重要）

昔は見ていなかったけれど，見るようになってから解決力が上がった気がします．エラー系の問題であれば，相当変なエラーを引かない限りは同じユーザーがいて解決できます．また，Discussionでは「こういう事やりたいんだけど〜」みたいな議論もよく行われているので，公式ドキュメントにないような実装をしてみたい時に見てみると有益な情報を得られることもあります！

検索するときはIssue/PullRequest/Discussionまで網羅的に調べたい＆Closeした情報も見たいので，最初から入っているis:pr is:openなどのクエリは消します．

• 例
  • エラーが出たらGitHub Issueで検索
  • 他の使い方を知りたい場合はDiscussionを確認

３．ChatGPTに聞く

私は１，２を見ても解決できなければ，一旦ChatGPTに聞いてみています．というのもChatGPTは多言語に渡ってソースを学習しているので，日本語と英語の情報しか読解できない自分には辿り着けない情報を持っている可能性があるからです．

ただし，情報源は基本的に古いことが多いので，そのままでは使えないケースもあります．あくまで解決の糸口を掴む程度にするのが良いと思います．

基本的に，雑に聞いても答えてくれますが，以下のテンプレートに沿って質問しています．

{エラー全文 or やりたいこと}

上記のようなエラーが出ました．
{技術スタック(r.g. Next.js + Pages Router)}で実装しています．

４．ネットで検索

上３つで解決できなかったら，ググります．QiitaやZenn，そしてSlackOverflow等に先人の知恵が書き込まれていたらラッキーです．

検索クエリは，普段以下のような感じにしています．

• エラーや不可解な挙動を解決したい
  • エラーメッセージ・コードを全文コピペして検索
    • 意外と出てくる．出てこなかったらちょっとずつ内容を削っていく
• 状況を検索する
  • 「React 再レンダリング 2回呼ばれる」
    • もっと良い検索方法がありそう．知っている方がいたら，コメントで教えてください＞＜

５．ソースコードを読む

どうしても解決しない場合は，ソースコードを確認します．
もしここまで到達して解決できたら，記事にまとめておくと誰かが幸せになれると思います．

ソースコードを読むのは難しそうに思えますが，もしフロントエンド系のライブラリであれば普段使っているであろうTypeScriptで書かれている事が多いので，意外と読めます．
（ツールチェーン系はRustやZigなどを使っているケースが多く読むのは難しいですが，意外と どういう挙動なのかはなんとなく理解できることも多いので，一回読んでみると良いと思います．）

不可解な挙動を解決したい

不可解な挙動を引き起こしているであろう関数を見つけて，GitHubのリポジトリ内でその関数を検索する．

そもそも，やりたい事ができる仕様になっているのか知りたい

TypeScriptの型定義（.d.ts）でAPI仕様を確認すると入出力が定義されているので，そこを見ておけば「こういうインプットに対して，こういうアウトプットが欲しい」というのが実現可能かどうかがすぐ分かります．

終わりに

個人的にはこの方法で大抵の問題は解決できている印象です．
これでダメだったら別のライブラリを使うか，自分でコントリビュートするしかない事がほとんどなのではないでしょうか．この記事が誰かのお役に立てれば幸いです！