【初心者向け】HTML、CSS、JavaScriptは役割ごとに分離しよう【具体例付き！】 #JavaScript

こんな方向け

HTML,CSSをどこに書けばいいのかよくわからない人
HTMLでfontタグ、style=""、align="center" table border="1"などスタイルに関することを書いている人
a href="" onclick="clickHere();" のようにHTML内にJavaScriptのコードを書いている人
jQueryで動的に変化するわけでもないのにcss('color','red')みたいにしている人

※ 最新の技術の話をするわけではないです。

HTML,CSS,JavaSCriptのそれぞれの役割

HTMLは構造、テキスト
CSSはレイアウト、スタイリング
JavaScriptは振舞い

と、分担するように書きましょう。
こうすることで、構造に関してはHTMLファイル、スタイルに関してはCSSファイルを、振舞いに関してはJavaScriptファイルを修正していけば良いので役割がはっきりします。(HTMLファイルでレイアウト修正するといったことがなくなる)

それでは実際に具体例を見ていきます。
1. NGなコードを書く
2. NGなコードに対する解説と解決策
3. OKなコードを書く
という順番で書いています。
なお、HTML→CSSだったらHTMLに書いちゃダメなコードをCSSに分離しますよ、という意味で使っています。

例1 fontタグ HTML→CSS

<font size="4">これはテキストだよ。</font>

極端かつ超基本的な例ではありますが、fontタグ。(もはやこの例ではじめて使った)
fontタグでは大きさ、種類、色を指定できます。ですが、これは構造のことではなく、 スタイリングに関することですよね。
なので、以下のようにします。

<p class="hogehoge">これはテキストだよ。</p>

.hogehoge {
  font-size: 10px;
}

こうすることで、HTMLからスタイリングに関するものを分離することができました。

例2 inline style(style="") HTML→CSS

<p style="color: red; font-size: 14px;>赤いテキストだよ。</p>

inline styleで書くやり方もHTMLの中にstyleが入ってしまっているのでNG。上の例と同様にHTMLとCSSを分離します。

<p class="hogehoge">赤いテキストだよ。</p>

.hogehoge {
  color: red;
  font-size: 14px;
}

無事分離できました。

例3 HTMLファイル内にscriptタグ HTML→ JavaScript

...
<body>
<script>
function hogehogeDo() {

}

</script>
</body>
...

HTMLファイル内にJavaScriptを書くのではなくJavaScriptファイルに分離しましょう。

<body>

<script src="hogehoge.js"></script>
</body>

hogehoge.js

function hogehogeDo() {

}

例4 onclick HTML→JavaScript

<a href="" onclick="hogehoge();">クリックしてね！</a>

function hogehoge() {

}

HTML内にJavaScriptのhogehoge();が書かれてしまいよくないですね。(aタグだからpreventDefault()が〜みたいなのは無視していただけると助かります…)
こういうときは、以下のようにHTMLにidをつけて対応すると良いです。

<a href="" id="hogehogeBtn">クリックしてね！</a>

$("#hogehogeBtn").on("click", hogehoge);

function hogehoge() {

}

またdata属性を使うやり方もあります。

これはRailsガイド「控えめなJavaScript」を参考にしてみてください。(Railsが分からなくてもOKです)

例5 $().css() JavaScript(jQuery)→CSS


$("#hogehoge").css({
  color: red;
  text-decoration: underline;
});

色が赤色で、テキストに下線をつけたいぜ、というときがあったとします。実際の場面だとクリックイベントが発火された時にスタイリングを変化したいってことがあると思います。

ですが、これはJavaScriptの中にCSSを書いているのであまりよろしくないです。
なので、CSSにclassを書いてそのclassをaddするようにしましょう。

.fugafuga {
  color: red;
  text-decoration: underline;
}

$('#hogehoge').addClass('fugafuga');

役割がはっきりしました。

例6 $().html()や$().append()にhtml埋め込み JavaScript→HTML

$("hogehoge").html('<div><p>error</p></div>');

このようなJavaScriptにHTMLタグが直接書かれてしまうのはよろしくないです。もしマークアップやレイアウトに変更があったときはJavaScriptファイルで構造を修正しなくてはいけなくなります。

こういう場合はJavaScriptのテンプレートエンジンを使います。
HandlebarsやMustacheなど様々な方法があるので、それを使うといいでしょう。
以下のQiitaが参考になります。

今回はHandlebarsを使うと仮定しましょう。

html(sample-template.hbs)

<div>
  <p>{{sample.error.title}}</p>
</div>

var html = Handlebars.templates['sample-template.hbs']({
  sample: {
    error: {
      title: "error"
    }
  }
});
$("#hogehoge").html(html)

JavaScriptのテンプレートエンジンを利用することで、無事分離することが出来ました！

まとめ

いかがでしたでしょうか。
上はあくまでも基本なので、状況に応じてインラインスタイルを使ったり、width指定をHTML内に書いたりすることもあるかと思います。ですが、上で書いたことを頭に入れておくことでフロントエンドのアンチパターンを1つ学ぶことが出来たのであれば幸いです。
何か不明点やここは書いたほうがいいといったことがあればコメントで教えていただけますと喜びます。 :)