UX / UI のデザインに強いWebシステムの開発と、BtoB Webマーケを支援するWeb制作を提供する
N's Creates (エヌズクリエイツ) 株式会社 フロントエンドエンジニアの齋藤 (@31mskz10) です。

コーディング（特にHTML・CSS）の難しい部分は、エラーという概念が無い部分だなと感じます。

何かエラーが表示される言語であれば、そのエラーメッセージから原因を特定できます。しかし、ウェブサイトのコーディングの場合はエラーでは無く表示崩れだったり、そもそも書いたはずのCSSが効いていなかったり…

表示崩れの場合は、崩れ方を見ながら怪しい部分を探っていくことになります。
結局、ちょっとしたミスで崩れていたなんてことも少なくありません。

今回は、余計なミスを防ぐために、新人コーダーが気をつけることを紹介します。

インデントを付ける

コーディングに限った話ではありませんが、整理整頓は大切です。
散らかった状態だと、余計なミスが発生しやすくなってしまいます。

コーディングの場合は、インデントを付けることで、コードの整理が可能です。

特にHTMLの場合は、開始タグと終了タグを入れ子にして、階層がどんどん深くなってしまいがちです。
インデントを正しく付けていないと、終了タグの位置がズレてしまったり、必要な終了タグを入れ忘れる可能性があります。

全角スペースを可視化する

新人コーダーに多いのが「コードは合っているはずなのに動かない」と思っていたら、「実は全角スペースが入っていて動かなかった」ということです。

Visual Studio Codeには、全角スペースを可視化する機能があります。
これで、全角スペースを可視化しておくと、ミスの防止ができます。

また、Google日本語入力やATOKなどの入力ソースには、デフォルトで全角スペースが入らないようにする設定があります。
通常、日本語入力モードでスペースを押すと全角スペースが入力されますが、それが必ず半角スペースになります。

全角スペースを入力したい場合は、shiftを押しながらスペースを押します。
こうすれば、意図せずに全角スペースを入力してしまう可能性が減ります。

補完機能を積極的に使う

英単語のスペルミスで動かなくなっていたなんてこともよくあります。
スペルミスは案外1人では気がつかず「コードは合ってるはずなのに動かない…」と泥沼にはまってしまいがちです。

最近のテキストエディタには優秀な補完機能があるので、すべて自分で入力しようとするのではなく、補完機能を積極的に活用する方がオススメです。

また、スペルミスの防止だけでなく、単純な時短にもなります。
便利な機能は活用して、効率よくコーディングを進めましょう。

UX / UI のデザインに強いWebシステムの開発と、BtoB Webマーケを支援するWeb制作を提供する
N's Creates 株式会社は、神戸三宮オフィスまで週１出社（それ以外はリモートワーク）できる「デザイナー」「エンジニア」を募集しています。

興味のある方は、カジュアル面談しますので気軽にお問い合わせください！