入社して学んだこと：小さなミスを確実になくす方法

こんにちは、ぺいじず入社８か月のふるかわです。
前回の記事「入社して学んだこと：基本はまずファイル管理から」のように、まだつかまり立ちすらも危うい状態ですが、すこしずつコーディングをする機会も増えつつあります。
今回もぺいじずという制作会社に入社して学んだ、基本だけど、初心者にとってもベテランにとっても、とても大事なことについてお話ししたいと思います。

ほんとうにあった怖い話

とある案件のコーディングしている途中、クライアントに一部の仕様の動作確認をしてもらうことに。
テストサイトにアップロードした内容を確認してもらう間HTMLのチェックをしたところ、おびただしい数のエラーメッセージが。
もはやどこから手を付けてよいのかわからなくなるほどの赤い文字。
気づいたときには私のコードはエラーだらけになっていたのです。

よくあるミスを知ることから

ブラウザ上では問題なく動作しているようでもHTMLやCSSのチェックをするとエラーだらけ。
エラーが出ている個所をひとつづつ直していく作業をした経験、ありませんか？
たとえ小さなミスでも一事が万事になりえることも。
というわけで、エラーが見つかっても慌てず対処できるよう、まずはよくやりがちなミスを把握しておきましょう。

開始・終了タグ忘れ

閉じたつもりでいたのにエラーのリストに上がる「終了タグ忘れ」。
単純に入れ忘れてしまったり、スラッシュがないというミスも。
HTMLエディタを使用していると、閉じタグが自動で挿入される設定にしたことを忘れ、閉じタグを手動で追加してしまい開始タグがないというエラーがでてしまったこともあります。
他の行にもエラーが出たり、表示もおかしくなるなど、煩わしいエラーです。

スペルミス

手打ちでタグを打ったりクラス名を付けたりすると起こりがちなスペルミス。
エディタなどでコードを打つと自動でタグを記述してくれるので、スペルミスが気になる場合はエディタの機能を活用しましょう。
またあいまいな英単語もコピペが吉。
クラス名のスペルミスに気付かず、エラーも出なかったので問題ないと思っても、後にチェックをしたときミスに気付く場合もあります。

文法エラー

タグを正しい構造でマークアップしないとエラーが起きてしまいます。
表示画面では問題なくてもコンテンツに適していなかったり品質にもかかわるので、しっかり構文を理解して正しい文法でコーディングすることが大切です。

全角が混じっている

HTMLタグは半角英数字でないといけないのですが、全角が混じっていたことに気づかないまま進めてしまい、ブラウザで正しく表示されない・・・・といったことはありませんか？
タグとして打ったつもりがそのまま表示されている‥‥などといった場合は全角で書かれていないか確認しましょう。

全角スペースが混じっている

スペースについても半角でないといけません。
間違って全角スペースを入れてしまうとページが正しく表示されないなどのエラーがでてしまいます。
タグだけでなくスペースも半角にすることを忘れないようにしましょう。

チェックツールを使いこなす

以上のように様々なエラーが発生しますが、さらに良くないことに「チェックをしたつもりでもできていない」ということがあります。
自力ではチェックしきれないので、ネット上にあるあらゆるチェックツールを駆使してミスをなくしていきましょう。
私が普段使っているチェックツールをご紹介します。


・W3C Markup Validation Service
W3Cが提供しているHTML・CSSのチェックを行うサービス。
文法のエラーチェックやエラーの原因なども表示してくれるので、問題の箇所を確認して修正が出来、勉強にもなる便利なツールです。

・Another HTML-lint gateway
こちらも同様に文法を採点してくれるサービス。
HTMLの文法をはっきりと点数で採点してくれるので高得点を取るためにも正しい文法を学ぶきっかけになるツールです。

・全角チェッカー。
その名の通り、全角文字がある箇所を教えてくれるツール。
日本語の部分はどうしようもありませんが、コード内の全角を可視化してくれます。

・difff
ウェブ上で簡単にテキストの差分を比較できる便利なツール。
HTMLの更新時に、更新前や更新後の比較をして確認をしたり、原稿の更新箇所を確認してみたり、コピペした内容にヌケ漏れがないかを確認したり、汎用性の高いツールです。

他にもエディタでの設定でスペルチェックや全角スペースを可視化してくれるプラグインを入れたりすることでより美しいHTMLに近づけていきましょう。

コピペも慎重に

コピペでコードを組んでいく場面もあると思います。
その時もコピぺしたものが構造的に問題がないかなども慎重にチェックをすることが大切です。

ただチェックをすればいいというわけではない

コーディングにおいてチェックの大切さはおわかりいただけましたか？
ただチェックをするだけではなく、チェックの仕方やタイミングなども重要です。
コードを打ったあと、確認を依頼する前なども検討する必要があります。
「チェックしたつもりなのにできていない」ということがないように、様々なチェックツールを駆使して小さなミスを確実につぶしていきながら、質の高いコーディングを心がけていきたいですね。