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

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

ソフトバンク・au・ドコモの方は、公式のオンラインショップを利用すれば頭金不要で通常のショップよりお得に購入できます。

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ちゃんは別れた方が幸せ!
敏感でピュアな心がショックを受けないネット社会になれる!

では、また~

ソフトバンク・au・ドコモの方は、公式のオンラインショップを利用すれば頭金不要で通常のショップよりお得に購入できます。

【週刊bitWave】(メルマガ)始めました!

登録はこちらからメールアドレスを入力してお申込みください。

ご登録いただいたメールアドレスは 【週刊bitWave】の更新情報の配信にのみ使用します。

個人情報の取扱いに関しては、「プライバシーポリシー」をご確認ください。解除はいつでもこちらから行うことが可能です。

あなたにおすすめ

FlickrのAPIとPHP/HTML/CSSを使って写真ギャラリーサイトを作りましょう。PHPのコ... Flickrシリーズの続きです! Part. 1 : プロジェクトの背景とゴール Part. 2 : FlickrのAPIの秘密とコール方法 Part. 3 : PHPのコーディング Part. 4 : HTMLのコーディング ...
FlickrのAPIとPHP/HTML/CSSで写真ギャラリーサイトを作る(Part.2 APIの秘... Flickrシリーズの続きです! Part. 1 : プロジェクトの背景とゴール Part. 2 : FlickrのAPIの秘密とコール方法 Part. 3 : PHPのコーディング Part. 4 : HTMLのコーディング ...
FlickrのAPIとPHP/HTML/CSSで写真ギャラリーサイトを作る(Part.1 ゴールと背... 最近サイドプロジェクトをネットに上げました: http://premflux.com/cc0/free-photo-japan-tsukuba-32576937024.html そのプロジェクトの開発をAからZまで細かく説明したいと...
ドキュメントは手書きでもよくない?... 開発をする上でドキュメントはとても大切です。 それはウォーターフォール型開発かアジャイル型開発かに関わらずとても大切です。 しかしドキュメントを作成に膨大な時間を費やすことで、ドキュメント作成自体が目的になってしまい、生産性を伴いません。...