こんにちは、フロントエンドエンジニアのてりーです。
僕の詳しいプロフィールはこちら
個人的には2024年現在は未経験・独学からプログラミングで稼ぐにはフロントエンド開発が1番手っ取り早いと考えています！
興味があればご覧ください。
はじめに
20xx年3月30日。
僕はプルリクを出した際に、本来の修正箇所と全く関係ない
「インデント直してー」
「ここのスペースいらないよー」
「console.log消しといてー」
などのミスを連発してしまいレビュアーの方に大変負担をかけてしまいました。
そこで原因を探って行った所、本来みんなが踏んでいるプルリクを出すまでのチェック項目を踏んでいなかった為、ミスを連発していることが発覚しました。
本記事は今後、僕がケアレスなミスをなくす為にプルリクを出す前に確認するチェックリストです。
「自分はこうやってるよー」などのより良いやり方があったら教えていただけると幸いです。
前提
「チーム単位でフォーマッターなどを導入して仕組みで解決する」事が優先されるべきです。
可能であればチームに対して進言し、より良い仕組みの導入を検討してください。
フォーマッターについて知る上で、個人的にはこちらの記事が参考になりました。
https://wemo.tech/3307
その上で、フォーマッターを導入していないチームの中で、個人の裁量での対処法が本記事になります。
1 作業が終わったらdiff(変更差分)を開く！
これは大前提でやりましょう。
これやってないと、「絶対やろうね😅」的な反応になります。
自分はvscodeを使っているので、その方法を。
①左端のバーからソース管理を選択
②差分があるファイルが表示されるので、1つずつクリックしてdiffを開く
③diffが表示されるので確認する
左の赤いラインが変更前の箇所
右の緑の箇所が変更後の箇所 になってます。
2 diffファイルと睨めっこしてケアレスミスをなくす
diffファイルを開けたら左右で睨めっこしてミスがないか、確認していきます。
この段階で意識してチェックする事柄をまとめておきます。
①まずインデントはズレていないか
インデントがズレていると、それだけでプルリクのレビューが終了してしまう恐れがあります。
フォーマッターを入れていると、自動補完で気づかない間にズラしてしまう、なんてこともあり得るので個人的にはフォーマッターは切っておくことをお薦めします。
また、コピペしたときにもインデントがよくズレます！
先輩等にslackで相談して、ソースをそのまま持ってきている時などは、気をつけましょう。
②変なところにスペースが入っていないか
スペースはdiffファイルで半透明で表示されるので、検知は難しくないです。
これまた自動補完なのか、コードをいじった挙句の弊害なのか、よく残ってしまう事があります。
多くの場合、スペースは必要ないので、いらないと思ったら消しましょう。
③そのconsole.log必要？？
console.logやvar_dumpなどは手元で開発しているときによく使うと思います。
テスト用に書いたものの消し忘れに注意しましょう。
④その改行必要？？
改行も個人でやっている時に色々いじってしまっている事があります。
必要な改行なのか、コードをごっそり消した際に残った物なのかを判断して要らなければ消しましょう。
ここまでやって問題なければ、プルリクを出しましょう
3 プルリクを出したら、レビュアーを指定せず最終チェックしよう
プルリクを出した後にすぐにレビュアーを指定してレビューしてもらうのではなく、
自分がレビュアー1人目になった感覚で最終チェックしましょう。
githubで見ると、さっき気が付けなかったミスが見つかるかも知れません！！
これで問題ない！って思ったらレビュアーを指定してレビューを受けましょう。
まとめ
今回の記事は「ケアレスミスに対して全く対処していない→最低限これだけはやろう！」までをまとめた内容になっているので、ほとんどの人にとっては当たり前すぎる内容かと思います。
「もっとここを意識すると良いよー」的な内容があれば教えていただけると幸いです。
独学でエンジニアを目指している人へ
フロントエンドの仕事を得るまでにどんな勉強をしたら良いのかをまとめました！！
興味ある方は是非ご覧ください。