【Web制作（フロントエンド）】なぜ私はJavaScriptを書かずに済むなら書かないのか

えー3回にわたって「SEO」の記事を書いてきまして、たぶん記事を読まれた方は

「おもしろSEO対策おっちゃん」

という印象を持たれたんではないかと思います(^^;)

・・・すみません、私の本業は

「フロントエンドエンジニア（Web制作）＆Webデザイナー」

だったりします(笑)

「HTML＆CSS」は当然として、必要とあらば「JavaScript」や「PHP」も書きますし、

Photoshopを使いこなして画像も作成したりします。

現在は、WordPressの構築・運用・メンテナンス・保守が主になってきておりますが、

基本的には、フルスクラッチのサイト制作からWordPress運用まで対応できる、「Webの何でも屋さん」だと思っていただければと思います。

ただ、フロントエンドエンジニアでSEOも長年経験してきた人って、実はあまりいないんじゃないかなあと思います。

SEO分析自体は、必ずしもサイト制作の経験がなくてもできる分野ですからね(^^;)

フロントエンドとSEO、両方のスキルを持っていることが、私の強みなんではないかと思っております。

で、Web制作に長く携わっていると、以前はとても苦労していたことがすごく簡単にできるようになったりします。

ここらへん、ちょっと深堀りしたいと思います。

■なぜ私はJavaScriptを書かずに済むなら書かないのか

答えは単純。

「軽いから」
「エラーが出にくいから」
「簡単だから」

です。

なんかファストフードの「うまい」「はやい」「安い」みたいですよね(^^;)

まあ、「簡単だから」は逆にCSSだけで書くとJavaScriptよりもめんどくさい場合もありますが(笑)

（ここらへん、Chat GPTさんに「変態的」というお褒めの言葉をいただいたことがあります(^^;)）

■昔はなんでもJavaScriptでした

そうなんですよね。何をやるにしてもJavaScriptが必要でした。

例えば、リンクをマウスオーバーして色を「滑らかに」変えることは昔のCSSでは無理でした。

JavaScriptでマウスオーバーのイベントが発生したら関数を呼び出し、その対象の要素に setTimeout で1/10秒刻みくらいで色を変える命令を作ったり・・・

めちゃくちゃ大変でした(^^;)

でも、現在はCSSの transition と :hover を組み合わせれば、簡単に実現可能です。

ページ内アンカーで移動するときに滑らかに移動させるのも、JavaScriptでsetTimeoutを使って座標を細かく計算しながら・・・

いやもう、しんどかったです(^^;)

現在では、CSSで html要素に scroll-behavior: smooth; を指定すれば一発ですし、本当に滑らかな動きが可能です。

■jQuery の登場

JavaScript も jQuery が出てきてから、断然簡単にはなりました。

JavaScriptって、昔はブラウザによって方言とか特定の命令とかあって、すべてのブラウザに対応させるのが本当に厳しかったんですが、

jQueryというライブラリの登場で、この方言地獄から解放されます(笑)

私、最初は「そんな用意されたライブラリは好かん。自力でJavaScriptを書く！」とやっていたんですが・・・

いざ便利さを目の当たりにすると、jQuery から抜け出せなくなってました(笑)

slideToggle なんて、めちゃくちゃ使い勝手いいですし(^^;)

■CSSのとんでもない進化

先にも出ました、「transition」でふんわりとした動きをつけられるようになり、

scroll-behavior: smooth; で滑らかスクロールが実現し、

animation と keyframes でアニメーションを作れる。

以前は JavaScript でしか成しえなかったものが、どんどんCSSで再現可能になっていきました。

そしてメディアクエリ。ウィンドウ幅によってCSSを変えることが可能になり、レスポンシブもCSSのみで可能になりました。

さらに、疑似クラス :has() の登場！

これが一気にCSSの可能性を広げてくれました！

これは子要素・子孫要素の状態でCSSを変化させることができる疑似クラスで、

これに <input type="checkbox"> とかと組み合わせることにより、条件判断が可能となり、

JavaScript なしでもいろんな動きが可能になりました！

疑似クラス :has() の仕様を初めて見た時、

「えっ！？　これJavaScriptなしでいけるやん・・・」

と思いました(笑)

これを使えば、以前はJavaScriptが必要だったタブやアコーディオンなども、多くの場合CSSだけで実現できるようになりました！

■時代とともに、CSSは進化していく

というわけで、昔は JavaScript で書いていた動きも、CSSで簡単に再現できる時代になってきました。

こちらの方が

「軽い」
「エラーが出にくい」
「簡単」

なので、順次置き換えるようにしております。

まあ、Wordpressだったらテーマで制御されるので、テーマの更新を待つしかないんですけれどね(^^;)

オリジナル部分はできるだけ対応していっております。

■まとめ

「うまい」
「はやい」
「安い」

でなかった・・・

「軽いから」
「エラーが出にくいから」
「簡単だから」

CSSで置き換えられるところは置き換えた方が良いですねｗ

次は、いったいどんな機能がCSSだけで実現できるようになるのか。

25年以上この業界を見てきましたが、CSSの進化には今でもワクワクさせられます。

フロントエンドエンジニアとして、これからもCSSの進化を楽しみに追いかけていきたいと思います☆

・・・「うまい」「はやい」「安い」もあながち間違いではないような気もしますがｗ