初心者の疑問　～JavaScriptの役割って動きを付ける事なの？～

こんにちは朱夏です。

今回は、JavaScriptの役割について、私の考えをまとめてみました。
というのも、JavaScriptの学習を進めているとこんな疑問が浮かんだからです。

↓Twitterでのつぶやき

https://twitter.com/syunatsu1/status/1207426073287245825?s=20

よくHTMLは「素材」、CSSは「見た目」を整えて、JavaScriptは「動き」を付けるといった表現を目にしますが、私と同じようにあれ？ってなった人いませんか？

というわけで今回の記事は、特に疑問もなくJavaScriptを学習していける人には不要な情報かも知れません。

自分が納得して学習できるかという問題ですので。

Googleで上位に表示されるサイトでも、JavaScriptは背景の色を変化させたり文字を回転させたり大きくしたりといった動きを付けるものだと説明しているところが結構ありました。

昔の私もそういったサイトの説明を結構見ていたので、CSSである程度の動きを付けられることを知っていたこともあり、正直ハードルの高そうなJavaScriptを学習する必要性をあまり感じていませんでした。

最近JavaScriptの学習を始めて、やはりどうしても動きといわれるのが納得いかなくて色々調べてみて、自分なりに納得ができる結論に達しました。

それは、JavaScriptは「動き」でななく、動くための「思考」の部分ではないかということです。

その理由を3つ上げます。

1. 単純なアニメーションならCSSで実現できる
2. JavaScriptが動かしているのは「裏の動き」
3. JavaScriptは実態を持たない

順番に説明したいと思います。

1.単純なアニメーションならCSSで実現できる

私は、マウスを合わせたらオブジェクトが大きくなる、クリックしたら回転する、こういった動きを付けるのに必要なのがJavaScriptだと思っていました。

でも実際には、これらはCSSで実現できてしまったんです。
HTMLとCSSだけで動くコードはこちら。

<!DOCTYPE html>
<html lang="ja">
   <head>
      <meta charset="UTF-8"> 
      <title>CSSアニメーション</title>
      <style>
         .box {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            border-radius: 10%;
            text-align: center;
            line-height: 200px;
            font-size: 30px;
            transition: 0.2s linear;
            cursor: pointer;
            user-select: none;
         }

         .box:hover {
            transform: scale(1.2);
         }

         .box:active {
            transform: scale(1.2) rotate(360deg);
         }
      </style>
   </head>
   <body>
      <!----- ヘッダー ----->
      <header>CSSアニメーション</header>
      <!----- ヘッダー END ----->
      <!----- メインコンテンツ ----->
      <div class="box">テスト</div>
      <!----- メインコンテンツ END ----->
      <!----- フッター ----->
      <footer>
         <p class="">(c)test.com</p>
      </footer>
      <!----- フッター END ----->
   </body>
</html>

<!DOCTYPE html>

<head>

<title>CSSアニメーション</title>

<style>

.box {

width: 200px;

height: 200px;

background-color: skyblue;

border-radius: 10%;

text-align: center;

line-height: 200px;

font-size: 30px;

transition: 0.2s linear;

cursor: pointer;

user-select: none;

}

.box:hover {

transform: scale(1.2);

}

.box:active {

transform: scale(1.2) rotate(360deg);

}

</style>

</head>

<body>

<header>CSSアニメーション</header>

</footer>

</body>

</html>

それによって「じゃあJavaScript必要ないのでは？」という考えになり、学習が遅れた原因の一つになっていました。

実際学習していくと、Webサイト作成するのに確実にあった方がいい知識であることが解りました。

2.JavaScriptが動かしているのは「裏の動き」

JavaScriptが動きという表現でしっくりくるのは、この「裏の動き」というものです。

CSSで指定する動きは、クリックなどをトリガーに決まった動作を行うことしかできません。

JavaScriptでは、前回のガチャの様に同じ動きでも結果を「変化」させたり、条件の中から動きを自動的に「選んで」実行したりしています。

そこには、計算や条件分岐などの簡単な「思考」があるのではないかと思います。

そう考える方が、納得感が高いです。

3.JavaScriptは実態を持たない

そもそもの話になってしまいますが、JavaScriptが動きを指示しているのは、HTML要素に対してだったりします。

JavaScriptからの指示で、HTMLのdiv要素を生成、配置する、そこへclassを付与する、それによりCSSがclassに合ったスタイルを追加する、といった流れになります。

そうなると、JavaScriptの役目は実際に動き始める前に終わっていると思いませんか？

あとがき

自分の中に落とし込んで、納得して学習した方が理解も深まると思ったので、今日一日時間を取って記事を書いてみました。

一番引っかかっていた「CSSで出来ることをJavaScriptでやる必要ないんじゃないの？」という疑問は解決できたかと思います。

自分の結論、JavaScriptの役割は「動き」より「思考」の方が納得出来ました。
動きを決定するための計算、判断を行う役割ですね。

というわけで今回はここまでです。
次回もよろしくお願いします。