CSS HTML TECHBLOG

初心者向け：HTML/CSS/JavaScriptでコーディングする上でやるべきこと・知っておくべきこと・気をつけるべきことを書いてみた

思いつく限り書いてみました。できるだけ小さなかたまりに分けて書いているので、内容的にかぶるものもあると思います。新しい内容があればその都度更新していきます。

HTML/CSS/JavaScript で共通してやるべきこと・知っておくべきこと・気をつけるべきこと

エラーがあったりうまくいかないときはタイポ（スペルミス）を疑う

初心者は特にこれです。

タイポをできるだけ少なくする一つの方法は、専用のエディタをインストールしてエディタの入力補助・補完機能（途中まで入力すると候補を表示してくれるやつです）を使うことです。コーディングのスピードも上がるので一石二鳥です。専用のエディタですが、Mac なら Coda／Sublime Text／Atomあたりです。Vimmer なら vim 一択です。唯一無二のキーバインディングで、赤い彗星のごとくコーディングができます。Windows なら Brackets／Sublime Text／Atom あたりでしょうか。

Brackets はもともと Adobe Creative Cloud の Edge Code CCでしたが、単体の無料エディタとして Adobe からリリースされました。Dreamweaver とは天と地ほどの差があります。なので Dreamweaver を開くのはもう止めましょう。というかもしパソコンにインストールされてるならアンインストールして Brackets をインストールしてください。たまに他人の Windows パソコンを使うときに、ファイルを開いたら Dreamweaver が立ち上がるとイラッとします。

タイポ（スペルミス）を見つけてもらう

タイポを疑う、とはいっても自分で書いていると案外見落としたりします。タイポに気付かず延々と時間を使うなんてこともあったりしてそれで何時間も使うと時間が勿体ないので、ある程度時間を決めてその時間内に解決しなかったら自分以外の人にコードを見てもらいましょう。さっくり解決したりします。

逆に『うまくいかないです〜(T-T)』『どうすれば….(p_q､)』と聞かれる立場の人は、まずタイポがないかをチェックしてあげましょう。

エラー内容を知る

うまくいかないときにまず知らないといけないのは『どのような内容のエラーなのか』ということです。どのような内容のエラーが出ているのかが分からないと、どのような対処をすればいいのか分かりません。逆に言えば、エラーの内容が分かれば、そこで言われていることを直すか、もしくはエラー文ごとググればその対処法がネットに書いてあります。「うまくいかないよー(T-T)」「なんかエラーが出るーorz」で右往左往するのではなくて、まずは『どんな内容のエラーなのか』を落ち着いて把握しましょう。

エラー内容は、例えば JavaScript だとブラウザのコンソールに表示されます。SCSS だとコンパイルの段階でコンソール画面（「コンパイルが終わりました、的な内容が英語で出力される部分です）に表示されます。CSS よりも SCSS を使った方が良い理由の一つがこれです。SCSS はコンパイルする必要があるため、コード自体にタイポ等の誤りがあればコンパイラーがそれを教えてくれますが、CSS はそんな親切なことはしてくれません。なので例え初心者でも（というか初心者ほど） SCSS／SASS／LESS／STYLUS 等の CSS プリプロセッサを使用しましょう。

エラーの対処法がわからなかったら、コンソール画面のエラーメッセージごとググる

ほとんどの場合はこれで解決します。

地球上に70億以上の人間がいるので、そのうちの誰かは同じエラーを経験しています。そしてそのうちの誰かがネットの掲示板とかで質問していて、他の誰かがその解決策を示してくれています。それに従いましょう。21世紀は『ググれる能力』がとても大切です。良い加減義務教育でもググり方を教えた方が良いと思います。

ググるときは検索結果に表示される年月日をチェックする

ウェブ業界の移り変わりは激しいです。去年まで正しかったことが今年には間違ってたりします。去年までサポートしてなかったけど最新版ではサポートしてるようなこともあります。なのでググったときに出てきた記事が何年に書かれた記事かをしっかり見てそれを頭に入れた上でその記事を読みましょう。今年や去年くらいの記事であればいいですが、2,3年前の記事となるとそれが今でも有効なのかをチェックする必要があります。

インデントと空白行を使ってソースコードを綺麗にしましょう

とてもとても大切なことです。

汚くて醜いソースコードは見づらいですし、他人の汚いコードなんて見る気が失せます。そしてコードの汚さとエラーの多さには強い相関があります（…きっとあるはず…

もしすでに長いコードを書いていて、全部にインデントを入れるのにすごく時間がかかる…というのであればOnline JavaScript beautifierのようなサービスを利用しましょう。『JavaScript』となっていますが、HTMLでもSCSSでもJavaScriptでも綺麗にインデントをつけてくれます。右上の『indent with 4 spaces』の部分をクリックするとインデントのときの字数（一つのインデントにいくつの半角スペースを使うか）を変えることができます。これは好みの問題ですが、インデントが深いコードの場合に『indent with 4 spaces』にすると逆に見づらくなることもあるので、その場合は『indent with 2 spaces』にしておきましょう。

ファイル名は英語にしましょう

予約ページ用のhtmlファイルをつくるとき、yoyaku.htmlとするのはNGです。
その場合ならreserve.html (or reservation.html) です。
日本語をそのままローマ字にしたファイル名はやめにしましょう。

英語がわからなければアルクとかで調べてみましょう。
名付けるときに、例えばreserve.htmlとreservation.htmlのように動詞／名詞で迷ったら、『reserve.html』と『reservation.html』でググってみましょう。
ヒットした件数が多い方がベターです（前の仕事で英語の論文を書くときに、とりあえずアルクで調べてみて、出てきた言い回しが実際に使われているかどうかを調べるためにググってヒット件数を見るというのをよくやっていました）。

あと、サイトを参考にする際に（特に海外のサイトで）ファイル名も気にした方がいいと思います。
普段から気をつけてみていると、こういうページのときはどんなファイル名にするのが良いんだろうというのが分かるようになってくるはずです。

ファイルの文字コードはUTF-8にしましょう

Windowsの人向けです。Macなら問題ありません。

htmlファイルでも最初にmetaタグでcharset="UTF-8"としているはずです。
UTF-8が標準なんです。
自分たちが使っているOSが採用しているデフォルトのエンコーディングは標準ではないということを理解してください。

ファイルを作成するとき。
ファイルを開くとき。
ファイルをコピーするとき。
ファイルを転送するとき。

すべてのアクションで常にエンコーディングがUTF-8かどうかを確認してください。
それが嫌ならMacかLinuxにしましょう。
それも嫌なら、クリエイティビティのかけらもない職を探しましょう。
きっとそこはWindowsしかない素敵な職場です。

Windowsパソコンを使うのをやめましょう

そのOSで採用されているフォントが綺麗だと思いますか？
そのOSで採用されているUIが素敵だと思いますか？

もしそう思うなら、Web制作の仕事には向いてないと思います（真顔

目の前にあるOSが自分自身の創造性を阻害していることを理解しましょう。
WindowsパソコンはIEでの動作確認のためにさえあれば十分です。

Macを使いましょう

いろいろなOSを見たり触ったりしてきましたが、消去法でMacしか残りません。
Macが素晴らしいのではなく、他がどうしようもないのです。
なのでMac以上のものが現れるまではMacを使いましょう。

HTMLでやるべきこと・知っておくべきこと・気をつけるべきこと

不要なコメント文は書かない

なぜかというと、HTMLではコメント文のネスト（入れ子。コメント文の中にコメント文を入れること）が許されていない からです。仕様なので仕方がありません。

コーディング段階ではあっちをコメントアウトしたりこっちをコメントアウトしたりというのがよくあります。そのときに <!-- ここからheader部分 --> 的なコメント文があると、そのコメント文を含めてコメントアウトすることができません（『ここからheader –>』でコメントアウトが終わって、それ以降がコメントアウトされません）。なので、こういう不要なコメント文を書く癖はなくしましょう。というかこういうコメント文が『不要なコメント文』なんだという意識をもちましょう。 <header id="header"> と書いておけば、それがheaderの開始位置だと分かりますし、それでも分かりにくいというのであれば、開始タグの前と終了タグの後ろに空白行を入れておきましょう。例えば

...
<body>

  <header id="header">
    ...
    ...
  </header>

  <nav id="gnav">
    ...
  </nav>

</body>

のようにしておけば、コードを眺めたときに自然と空白と空白の間を一つのブロック（この場合だとheaderブロック）だと人間の脳は感じ取ってくれます。空白行（空の改行）をうまく使えるようにしましょう。

CSSでやるべきこと・知っておくべきこと・気をつけるべきこと

プリプロセッサを使う

CSS を直接書くのではなくて、SCSS／SASS／LESS／STYLUS等のCSSプリプロセッサを使用しましょう。その理由の一つは、タイポなどの初歩的な誤りをコンパイル段階で検知してくれるからです。CSS で書き間違えをしても CSS は何も教えてくれません。ただその書き間違えた部分はスタイルとして反映されないだけです。なので初心者ほどSCSSなどのプリプロセッサを使用してタイポや文法の誤りなどの初歩的な間違いを減らすようにしましょう。

ブラウザのウェブインスペクタを使用する

コーディングするときにインスペクタを使用しないなんて考えられません。スタイルを当てたい要素に自分が思ったとおりの適切なスタイルが当たっているかをチェックできます。MacならSafari／Chrome／Firefoxすべて"⌘+option+I"でインスペクタが立ち上がります。

デバッグ用のスタイルを当てる

思った通りにスタイルを当てれないときは、まずスタイルを当てたい要素の領域をしっかり把握しましょう。そのために自分なりのデバッグ用のスタイルを用意しておきましょう。例えば SCSS で

@mixin debug_border() {
  border: 1px solid red;
}
@mixin debug_background() {
  background-color: red;
}

のようなミックスインを用意しておいて、スタイルを当てようとしている（けど思った通りにいかない）要素に対して @include debug_border(); や @include debug_background(); を入れてみましょう。もしボーダーや背景が赤に変わらない場合は、例えばクラス名にタイポがあったり要素名が誤っていたりということが疑えます。もしボーダーや背景が思ったとおりの幅・高さになってくれないときやへんな隙間ができていれば、width や height の指定がされてなかったり、padding や margin が間違ってたり、というのが疑えます。

ウェブインスペクタでもいいですが、こういうデバッグ用のスタイルを用意していると、一括で要素の領域をチェックできたりするのでとても便利です。

JavaScript でやるべきこと・知っておくべきこと・気をつけるべきこと

console.log で変数を書き出す

デバッグの基本です。

例えば hoge という変数の中身を確認したい場合は console.log(hoge); というのをソースコードに書き加えます。これでブラウザのコンソール画面に hoge の中身が表示されます。うまく動かないときはこれで変数に意図しない undefined や null が入っていないかをチェックしましょう。

また、本番用のファイルにするときにはデバッグ用の console.log は消しておきましょう。そのためにはデバッグが終わったらすぐに console.log を消すか、ファイルを minify する前にブラウザのコンソール画面を確認して、console.log による不要な書き出しが行われていないかをチェックしましょう。

コメント文をちゃんと書く

一ヶ月前に書いた自分のコードの内容を正確に把握しているプログラマーはなかなかいなんじゃないかと思います。というか一週間前に書いたコードでも正確に覚えているか怪しいです。なので『この部分ではなにをどうしてどの要素をどうさせている』のかをブロックコメントとして書き残しておきましょう。そのときにハマったことやその解決策（もしくは解決策が載っている URL）なんかも書いておくと、あとあと自分のためになります。

コメント文では、個々の命令が何をしているかよりも、このコードブロックでは『どのデータをどう処理してどの要素をどうしている』といったロジックを書いておく方が、あとあと自分が読むときや他人が読んだときにはるかに理解の助けになります。個別の命令はググれば出てきます。ですが、 どういうロジックで何をどう動かしているのかということはソースコードを書いた人間の頭の中にしかありません。なのでそれを書き残すようにしましょう。

本番用ファイル（ウェブサイトやウェブページ公開後の HTML で読み込ませるファイル）は minify しましょう

ファイルサイズを減らすためです。

.min がつかないファイルにはコメント文をしっかり書いておいて、gulpで処理させるか、もしくはOnline Javascript Compression Toolにコピペして minify したファイルを作成しましょう。

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です