JSくんとHTMLちゃんは別れた方がきっと幸せになる!

JSくんとHTMLちゃんは別れた方がきっと幸せになる!
■ 店頭より得で、予約しやすいオンラインショップ。
 → ドコモオンラインショップ
 → auオンラインショップ
 → ソフトバンクオンラインショップ

最新のiPhoneを得して乗り換えるなら、最大6万円のキャッシュバックがある
→ SMARTPHONE STORE

HTMLとJavascript(非ライブラリ系 以下JS)がべたべたし過ぎたら余計なことになってしまう。
そう、あの2人が一緒になると結構汚いことする。

ピュアな心をしているデザイナーがそれを見たらすごいショックを受ける。
本当にやめて欲しいね!

汚い!汚い!!汚い!!!

例えば、こんなに酷いシーンを時々見てしまう:

image09
http://codepen.io/anon/pen/NqVZpZ

HTMLとJSがべたべたし過ぎてマジでキモイ。

だって、結構複雑なプロジェクトの時、どれがどれ、あれがどこのファイルと関係するのか、・・・等のよく分からない疑問がすぐ出てしまう。

結果的に言うと、工数がかかってプロジェクトの進行が遅れるし、エラーやバグも簡単に発生しそう。それだけではなく、テンプレートとしての効果的な機能実装が困難になる。

JSがCSSと浮気するケースもある:

image08
http://codepen.io/anon/pen/WvBqVr

そうなると、HTMLだけを見たら、クラスがJSのファンクションをどのような形で呼ぶのか全然分からない。
まさか、CSSでデザインを上書きしてくるなんて・・・

最悪!

そして、中途半端でマナー無視の付き合いなのでパラメタを使うのは難しくなる。

と言うことで、このダメなカップルを別れさせましょう!これ以上おつきあいすると、お互いがダメになる。

jQueryに仲裁を頼みましょう

Javascriptではあっても、ライブラリ系で品行方正なjQueryさんの仲裁は無料でお上手。
(*もちろんjQueryも正しく使わないと同じ結果になるけど。)

しかも、jQueryさんは、とても便利な仲間と付き合ってる: HTML5のデータ属性!
そのおかげでスピーディで修羅場の少ない別離が出来る。

image07
http://codepen.io/anon/pen/eNawyB

メリットを見ると・・・

1. HTMLの中にはHTMLの整理されたタグしかない。
2. JavascriptのロジックはJSファイルのみになる。
3. HTMLを見るだけで「action」が出る箇所がすぐ分かる。
4. 「data-…..」の「…..」に何でも勝手に付けれるから柔軟性がとても高い。
5. HTML、JS、CSSが別々になったテンプレートシステムが簡単に作れる。

デメリットもあるかな?

良く調べたら、IDやネイティブのJSを使うと、パフォーマンスが一番高いらしい:
https://jsperf.com/id-vs-class-vs-tag-selectors/399

ただ、そのデメリットが出るのはエレメントの数が非常に多い時だけ(上記のテストみたいに、何千個とか)。
でもこのシナリオは、ほとんどのプロジェクトで遭遇しないから、このデメリットを無視してもいいと言う意見がよく出ている。
例え:
http://toddmotto.com/data-js-selectors-enhancing-html5-development-by-separating-css-from-javascript/
http://madebyhoundstooth.com/blog/javascript-selector-performance/
デメリットよりメリットが多いということ。

やっぱり、JSくんとHTMLちゃんは別れた方が幸せ!
敏感でピュアな心がショックを受けないネット社会になれる!

では、また~

■最新のiPhoneの購入・機種変更なら店頭より得で、予約しやすいオンラインショップ。
機種の頭金や使わないオプションパックをつけて年間何万円も損していませんか?
オンラインショップなら故障のサポートもしっかりしていて最低限の費用。待たされることもありません。
 → ドコモオンラインショップ
 → auオンラインショップ
 → ソフトバンクオンラインショップ

最新のiPhoneを得して乗り換えるなら、最大6万円のキャッシュバックがある
→ SMARTPHONE STORE
がお得です。