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

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

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

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

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

インデントを付ける

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

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

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

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

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

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

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

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

補完機能を積極的に使う

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

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

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


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

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

同じテーマの記事

高橋 実玖高橋 実玖 / 2024年6月14日

アイスブレイクに最適!Good & New(グッド アンド ニュー)を実施してみた

山本 明子山本 明子 / 2024年5月17日

「LINE」について調べてみた

本田 顕本田 顕 / 2024年5月14日

Android Studio Jellyfishのバグについて

齋藤 公一齋藤 公一 / 2024年6月18日

学びを深めるため、ノート整理法に「Zettelkasten」を採用した話

お問い合わせ

BtoBサービスのデザイン・開発に関することならお気軽にご相談ください

一緒に働く仲間を募集しています

採用情報

デザイナー、エンジニア共に募集をしています。

パートナー募集

現在は主に開発領域に対して募集しています。