そろそろHTMLとCSSとJSの役割分担について考えてみても良いんじゃないかなぁ

2012年07月05日

何となく読んでたフィードで「CSSで実装できるアニメーションのチュートリアル記事まとめ」的なものがあって、それを見てて思ったことがあったので何となく書いてみようかと思いました、お久しぶりでむゆう(@anticyborg)です。

CSSでもアニメーションが実装可能

さて、ちょっと僕がjQueryとかLESSとかSASSとかにうつつを抜かしている間に、巷ではCSSでのアニメーションもちらほら盛り上がってきているのかなぁ、という空気が流れておりますね。盛り上がっているというか、普通にできる感じなのかな?

CSSにアニメーション機能が追加されて「おぉ!これでCSSだけで表現できることが増える!やったぜ!」と思った方も多いんじゃないかと思いますが、えっと、何が嬉しいんでしょうかね。

果たして本当に素敵な事なのか

CSSでアニメーションができるってのはそれだけ聞けば嬉しい気もしますけど、そもそもアニメーションってスクリプトの役割なんじゃないかと思うわけですよ。 @keyframes ?もうそれCSSじゃなくね?

というかね、もっと言えばもうマウスホバー時の処理もCSSじゃなくてスクリプトで良いんじゃね?大体マウスホバー時の画像置換をCSSでやってたそもそもの理由って「JSは危険なものだからオフにしている人が多い。だから使わない」って言ってた時代に流行った対応なんじゃなかったっけ。

餅は餅屋

Webページってさ、htmlで文章の意味を定義して、CSSでスタイルを定義して、JSで動き(だけじゃないけどね)を定義する、という役割分担が既にあるじゃないですか。この分担をあいまいにしなくていいんじゃないでしょうか。ただでさえ「PhotoshopでやるかCSS3でやるか」みたいな迷いが生じてる現状なわけで、これ以上CSSでできることを増やさない方が良いんじゃない?と思うわけです。

選択肢が多いのは良い事だという意見もありますが、正直選択しありすぎでしょうと。メリットデメリットを把握した上で案件によっての最適解を決めないといけないことがどんだけあんだよwと思うわけです。しかもメリットデメリットなんてブラウザの実装状況でいくらでも変わるんだし。

プログラムにしても「データ(Model)」と「ロジック(Controller)」と「表示(View)」を分離して書こうぜ!みたいなMVCという設計思想があるくらいだし、役割はできるだけきっちり分けた方が良いと思いません?僕は思いました。

参考

MVCとは【Model-View-Controller】 – 意味/解説/説明/定義 : IT用語辞典

だってさ、さっきも書いたけど「ピュアCSSで実装したなんちゃら」ってのが出たら、それを凄いなぁと思うのは制作者だけで、「それJSで数行だよ?」って事もあったりするじゃないですか。いや知らんけどありそうじゃん。クライアントから言わせればどっちにしても変わらんわけですよ。

もし、JSを一切使わずにCSSだけで実装できるなあらパフォーマンスも期待できますけど、いまどきJS使用不可って案件はそうそうないんじゃない?と体感では思うわけです。ケータイかよ!と。

さいごに

とまぁ僕はこんなもやもやを抱えながら生きているわけです。Webの制作者はおんなじことを思ってたりするんですかね。

でも、この界隈の人たちは新しい技術が出ることについては基本的に歓迎なんだろうと僕は勝手に思ってるし、僕は僕なりに楽しんで新しい事に首突っ込んでる訳なので、「何でもかんでもおいしくいただく」ではなく、「見極めを怠らずにつまみ食い」くらいのスタンスでいれたら良いんじゃないかなぁと思いましたとさ。

ま、みなさん頑張って楽しんでまいりましょう♪

参考URL

【ほぼ網羅】CSS3だけでアニメーションを実装する方法のまとめ : アシアルブログ

他にこんな事も書いてます

FBでコメント

5個のコメント

  1. 書いた:そろそろHTMLとCSSとJSの役割分担について考えてみても良いんじゃないかなぁ – http://t.co/kpvVDBqF

  2. 書かれた RT @anticyborg: 書いた:そろそろHTMLとCSSとJSの役割分担について考えてみても良いんじゃないかなぁ – http://t.co/A3RJLJpP

  3. 見てる。 / SS | そろそろHTMLとCSSとJSの役割分担について考えてみても良いんじゃないかなぁ http://t.co/d7xnqPz2

  4. http://t.co/fNmUPHUJ これもわかるんだけど、単にMVCが〜という話で、MVCが万能な解決方法ではないわけだし、JavaScriptのアニメーションと、CSS3のアニメーションでスペック比較や機能比較から、論じているような記事が読みたいな。

  5. そろそろHTMLとCSSとJSの役割分担について考えてみても良いんじゃないかなぁ http://t.co/wBQgGv5q STACKSTOCK_twさんから

トラックバック/ピンバックはありません。