わさっきhb

大学(教育研究)とか ,親馬鹿とか,和歌山とか,とか,とか.

JavaScriptについて,知っておくとよいこと1

 JavaScriptでプログラムを書いて実行する,もっとも手軽な方法は,HTMLファイルの中にプログラムコードを埋め込み,そのファイルをブラウザで開くことです.
 テキストエディタWindowsアプリの「メモ帳」でもかまいません)で,以下の内容のファイルを作成し,sample.htmlという名前で保存します.

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>JavaScriptの例</title>
</head>
<body>
<script>
alert("Hello, World!");
</script>
</body>
</html>

 ブラウザを開いて,ドラッグ&ドロップでsample.htmlをブラウザに投入すると,「Hello, World!」と表示されます.「OK」ボタンを押す*1と,実行が終わります.
 HTMLファイルの中で,JavaScriptのプログラムコードは「<script>」*2と「</script>」に挟まれた間で記述します.上の内容だと,「alert("Hello, World!");」のみです.
 alertは,VBAのMsgBoxに相当する機能を持つ,JavaScriptの関数なのですが,実用上いくつか問題があります.まず(これはMsgBoxも同じですが)「OK」のボタンを我々が押さないと,プログラムの実行が進んでくれません.次に,Node.jsに代表されるサーバサイドでのJavaScript実行環境では,alertは使えません.
 そこで,より広く利用が可能な出力方法に変更します.そのためには先ほどのsample.htmlを編集します.alertから始まる行を,次のコードに置き換えて,保存します.

console.log("Hello, World!");

 ブラウザを再読込すると,先ほどのOKボタンを含むウィンドウ(ダイアログと言います)は出てこなくなります.そして「Hello, World!」も表示されません.
 出力を見るには,「開発者ツール」*3を使います.きちんとバージョンアップがなされているブラウザ(Chrome, Edge, Firefox, Vivaldi)ではいずれも,F12というキーを押せば*4,ブラウザの画面が分割されて,細かな情報が出てきます.
 その中に,「Hello, World!」が見つかるはずです.もし見当たらない場合は「コンソール」または「Console」と書かれたところを見つけて,押してみてください.
 この開発者ツールは,プログラムに何らかの誤り(Cだとコンパイルエラーになるような箇所)があれば教えてくれます.開発者ツールを表示させたまま,sample.htmlのうち「console.log」を「consolelog」に書き換えてから保存し,ブラウザで再読込すると,「consolelog is not defined」といったエラーメッセージが,コンソールに表示されます*5
 開発者ツールで,JavaScriptのプログラムコードを書いて,実行することもできます.コンソールの中を1回押して,「a」「=」「3」の順に打ち込むと,「>」または「>>」と表示されているところの右に「a=3」と表示されます.Enterキーを押すと,変数aに3を代入するという処理になります.続いて「console.log(a*2)」,そしてEnterで,aの値を2倍にした「6」が出力されているはずです.
 このように1回ずつ打ち込んで実行できるものをREPL (Read-Eval-Print Loop)といい,PythonRubyなどのスクリプト言語でも活用されています.REPLは非常に便利で,これだけで1つのプログラムが書けてしまったり*6,逆に1行でどのような不具合が発生するかを知る(他の人に伝える)こともできたりします.しかしながら,開発者ツールだとブラウザの終了やページの再読込によって,REPLで使用していた変数などが消滅しまいますので,一時的な利用と考えるのがいいでしょう.
 開発者ツールは,もう一度F12のキーを押すと表示から消えます.


 途中に「Node.js」を挙げました.ブラウザひとつで,Node.jsでJavaScriptのプログラムを動かす方法を紹介しておきます.https://paiza.io/jaにアクセスし,「コード作成を試してみる(無料)」のボタンを押して,左上の▼で言語を「JavaScript」に変更します.「console.log("Hello, World!");」を書き加えてから実行してみてください.

*1:本記事では,「(マウスなどで)クリックする」と「(タッチパッドまたはタッチパネルで)タップする」を合わせて「押す」と表記します.

*2:かつては「<script type="text/javascript">」と書いていました.

*3:「開発ツール」「デベロッパーツール」とも呼ばれます.

*4:マウスなどの操作でメニューからも選べますが,ブラウザごとに異なります.Chromeの場合,右上の縦の点3つを押してから,「その他のツール」「デベロッパー ツール」の順です.

*5:その右に,どのファイルの何行目がエラーというのも,表示されます.リンクになっていて,押すと,開発者ツールの中で,該当箇所を教えてくれます.

*6:そこまでいかなくても,REPLで複雑な式や文を書いて実行し,(構文的・論理的な)エラーがなくなったところで,コードをコピーして,テキストエディタ上のプログラムファイルに貼り付ける,というのは私自身よくやっています.