はじめに

VSCodeを触り始めて約1年経ちました。

エンジニアの中では「当たり前、常識」とされていることでも、プログラミング初心者は知らないこともあります。
先輩とペアプロ中に何気なく交わした会話で、それまで知らなかったことに気づくことができ、コードが一気に読みやすくなりました。
おそらく常識すぎて販売されている書籍などには明記されていないと思うので、共有します。
もし、プログラミング初心者の方の中に私のように知らずにコードを書いている方がいらっしゃったら、この記事を読んで世界変えましょう。

自己紹介

私は2023年9月1日にフロントエンドエンジニアとして自社開発のSaaS企業に入社しました。
未経験独学で、薬剤師からの転職です。
詳しくはこちらをご覧ください。

前提

VSCodeのカラーテーマがダークモダン(Default Dark Modern)の場合の配色です。
カラーテーマを変更していると色は異なるので自分の配色に置き換えて読んでください。

背景

先輩とモニターにVSCodeの画面を映しながらペアプロしている時の会話です。

私「これpropsで渡ってきているの関数なんですかね？親コンポーネント見にいくか…」
先輩「それ黄色だから関数じゃない？」
私「え？黄色だと関数なんですか？？？」
先輩「そうそう。変数は水色、型は緑だよ」
私「…え、本当だ🫢意識したことなかった…」

こんな感じの会話でした。

具体例で説明

以下のコードを例に色分けを意識して読むと…

3行目のProfilePropsは緑なので型だとわかります。
その下の4〜6行目は型定義の書き方を覚えていなくても、：の右側が緑なのでこれも型なんだと見ただけで判別できます。

12行目の<Avatar>は緑、その上の<div>は青ですね。色が違うので別の意味を持つことが予想できます。JSXの中で型定義ではなさそうなので、コンポーネントなんだろうなと判別できます。

色を意識して情報を取り込むことで、コードが一気に読みやすくなりました。

世界が変わった

当たり前すぎて、「いやそれぐらいわかるでしょう。なんでわからないの？」と言われてしまうかもしれませんが、先輩に言われるまで、本当に気づいていませんでした。
VSCodeを見ても、もちろん色が付いているのはわかるのですが、「カラフルだなー😇」ぐらいにしか思ったことがありませんでした。

色を意識してコードを見てみると、確かに色が意味を持っていました。
色からも情報が得られるので、そこに何が書いてあるかを文字として読む前に、役割を知ることができます。
これが私には衝撃的でした。世界が変わりました。

プログラミング初心者なので、まだ文法が不安な箇所が多々あります。初めて見るソースコードでは、どれがReactのコンポーネントなのか、JSXなのか区別ができなかったり、どこに型を書けばいいのか忘れるなんてことがよくあります。
今までは、大文字・小文字で判断したり、都度文法を調べたりしていました。しかし、色でも判別ができることを知ると、色だけ見ればそれがなんの役割を持っているのか判別できるので、コードを読んで理解するスピードが格段に上がりました。

終わりに

この大発見をしたときの衝撃は今でも忘れられません。「今までなんで気づかなかったんだろう」とショックも受けました。
エンジニアにとって当たり前でも、プログラミング初心者にとっては当たり前ではないことはたくさんあるはずです。しかし残念ながらそれがまとまっている書籍や記事は少ない…😭
同じようなエピソードありましたらぜひ教えてください！