見出し画像
Photo by golchiki

JavaScriptってどうやって実行されるの？

tonoccho

こんにちは、とのっちょです。

ニュージーランドでプログラマをやっていますが、JavaScriptについてはとんとわからぬ、という微妙な立場でやっています。

や、文法とかはわかるんですよ？あんまり詳しくないと思いますし、最近の変化にも追随できていないんですが、そもそもJavaScriptってどうやって実行されるの？というのがあんまりピンときていないので実験することにしました。


JavaScriptって要は何？

ウェブページに動的な効果をもたらすものだ、というくらいの理解です。他にもAPI読んで見たりとかウェブページをインターフェースとしたプログラミング部分です。

昔はFlashがあったりとか、Java Appletがあったりとかしていましたが、もうJavaScript一択ですね。ActiveX？なにそれ？

たまにお遊びでJavaScriptを書いたりしているんですが、そもそもどういう感じに実行されるのかがよくわかっていません。

Javaだったらpublic static void mainが開始地点だし、Cならたしかint main(int argc, char *args)なんかです。フレームワークでもこのメソッドオーバーライドしてねっていうのが決まっているのでまあまあわかりやすいんですが、JavaScriptはどうもピンときていません。

そう、ピンときていません。

JavaScriptっていつ実行されるの？

そろそろECMAScriptって言えとか言われそうだなと思いつつ書いていますが、HTMLの中にscriptタグを書くことでそこはJavaScriptですよ、という指定なんですが、これがいつ実行されるのか？というのがよくわかっていません。なので、こんなの書いてみました。

<!DOCTYPE html>
<script>
  console.log("location out of html start");
  console.log(document.getElementById("message"));
  console.log("location out of html end");
</script>
<html lang="ja">
  <script>
    console.log("location just after html start");
    console.log(document.getElementById("message"));
    console.log("location just after html end");
  </script>
  <head>
    <meta charset="UTF-8" />
    <title>JavaScript サンプル</title>
    <script>
      console.log("location head start");
      console.log(document.getElementById("message"));
      console.log("location head end");
    </script>
  </head>
  <script>
    console.log("location between head and body start");
    console.log(document.getElementById("message"));
    console.log("location between head and body end");
  </script>
  <body>
    <script>
      console.log("location 1 start");
      console.log(document.getElementById("message"));
      console.log("location 1 end");
    </script>
    <div id="message"></div>
    <script>
      console.log("location 2 start");
      console.log(document.getElementById("message"));
      console.log("location 2 end");
    </script>    
  </body>
</html>

consoleはこんな感じでした。

実行結果

見たところHTMLの処理の中でscriptタグが出てきたらどこに書いていようが実行される、ということのようです。エラー出るかと期待してたんですが、そんなことありませんでした。

scriptタグは<head>の中か</body>の直前に書けというのを聞いたことがあるんですがおそらくこういう意味なんでしょう。

  • JavaScriptで文書に依存しない初期処理や各種定義はheadの中に書く

  • JavaScriptで文書に依存する処理（上記例だとID=messageの要素がひつよう）は</body>の直前に書く、または後述するonLoadに書く

いずれにせよ、答えはscriptタグが実行されたタイミングで実行されて、文書の状態は気にされていないということでしょう。正直コレが知りたかった。

onLoadイベントハンドラ

そういえば、bodyタグにonLoadイベントを書いてそこにJavaScript書くっていうのありましたね。大体関数がここでは指定されると思います。こんな感じですね。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>JavaScript サンプル</title>
    <script>
      init = function() {
        console.log('location onLoad start');
        console.log(document.getElementById('message'));
        console.log('location onLoad end');
      }
    </script>
  </head>
  </script>
  <body onLoad="init()">
    <div id="message"></div>
  </body>
</html>

onLoadを使うとbodyタグの中身が全部ロードされてから実行されるので、文書が全部ある体でコードを書くことができます。

実行結果

なんでいきなりinit関数の中身が実行されないのかというとこういう順番で実行されているからでしょう。

  1. HTMLのロード開始

  2. scriptタグ実行、ここではinit関数の定義だけしている

  3. HTMLのロードが終了したのでbodyタグのonLoadイベントが発火する

  4. onLoadイベントで指定された関数initが実行される

果たして今はどうなのか、onLoadって使っているんでしょうかね？

ニュージーランドの就職事情を少し

NZでプログラマをそろそろ6年位やっているんですが、どのプロジェクトでもHTML、CSS、JavaScriptはできてるよねと言うのが書かれています。私の仕事はこれがメインじゃないのでそこまで重視されないんですが、それでもさっぱりわかりませんだと就職が困難になります。

一方で最近の技術をガンガンに使った案件というよりは、レガシーなものをメンテするという機会もありますので、こういったちょっと泥臭いところはある程度把握したほうがいいと思います。

私もこの辺しっかり把握しとかないとキャリアの先がちょっとやばいのかななどと思ったので調べ始めています。

NZのリスキリング

NZでは職種をガラリと変えるということが度々あるようです。その際にどうやるかというと、1年間位学校に通って勉強して認定資格を手に入れてから就職活動をする、という流れがどうも一般的なようです。

NZでは例えば「40過ぎてからプログラマになるの？」という感じの会話はおそらく差別になるので面接官はできないはずなんですが、かと言って「学校も出ないでなんでプログラマになろうとするの？」は普通の質問としてされます。

JavaScriptが少しわかった

そういうわけでJavaScriptとHTMLの関係が少しわかったので良かったです。

この記事が気に入ったらサポートをしてみませんか？