はじめに
本記事は未経験から実務を始めてちょうど1ヶ月の私が先輩方から教わったことをまとめるための記事になります。
VScodeの便利な機能
皆さん！コードを書いていて、この変数の定義何だったかな？この関数どこで実行していたかな？と分からなくなったことはありませんか？
一から自分で開発する個人開発ではあまりそんなことにはならないかもしれませんが、途中から案件に参加したり、チーム開発に携わると人が書いたコードを見て理解しないといけません。(最初はどこを見たらいいのかも分かりませんでした。。。)
コード量が多いとなおさらです・・・
そんなときに便利なVScodeの使い方を紹介します!
関数や変数の定義を見たいとき
例えば、こちらのsaveProductがどんな関数だったか忘れたら、saveProductにカーソルを合わせて右クリックします。
すると、こちらの「定義へ移動」というのが出てくるので、これをクリックすると
このように別モジュールに定義されている部分まででも自動的にジャンプしてくれます！
また、逆も然りで、saveProductの定義部分からどこで実行されているかを確認することができます。saveProductの定義の部分にカーソルを合わせて右クリックすると
「参照へ移動」というのが表示されるので、これをクリックすると
このように実行している部分を一覧で表示してくれます。
ディレクトリ数やファイル数が多くなると使える手法ですね！
検索機能を使おう
すでにご存知の方も多いと思いますが、それでも探しているものが見つからない場合は左側の検索機能を使いましょう！
デバッグをしよう
エラーが起こったら常にデバッグをしながら確かめる癖をつける様になりました。
JavaScript限定にはなりますが、コンソールをたくさん出し過ぎるとどこにどのコンソールが表示されているのか分かりにくくなるので
console.log(fetchData);
と書くのではなく
console.log('fetchData', fetchData);
第一引数を文字列にして、第二引数に表示したいものを入力するだけで、検証が楽になります。
ドキュメントを読もう
フレームワークやライブラリを扱う場合は、説明書(公式ドキュメントや質の高い解説記事、チュートリアル)を読む癖をつけましょう！
引数の渡し方が違っていたりして、そもそも動かない場合はエラーでググっても解決しないからです。
私は英語が苦手なので、今まで避けてきたのですが、これからはドキュメントを読む癖をつけます！
翻訳ツールを使いながら分からない単語は逐一調べて読むようにしています。
おすすめの翻訳ツールはDeepLです！
DeepLは他の翻訳ツールよりも翻訳精度が高くcommand+C(2連打)で自動的に翻訳してくれるので、コピペしなくてよくなりとても楽チンです！
GitHubのissuesを読もう
上記と少し被りますが、ライブラリを扱っていて調べても解決しないことがよくあります。
たまにライブラリ自体がエラーを起こしていたり、アップデートで仕様が変わっていることがあります。
issuesの中で検索をかけることで同じ問題を抱えている人が解決する方法を探している(解決済み)の場合があるので、エラーに困ったら見てみると解決できるかもしれません！
まとめ
まだまだ分からないことが多いですが、周りの方々に助けられてなんとか1ヶ月を迎えることができました。ありがとうございます！
焦りはありますが、落ち着いてエラーと向き合うこと、人に頼りすぎず、もっと自分で考えて調べて実装する力をつけることが今後の課題かなと感じています。