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)といい,PythonやRubyなどのスクリプト言語でも活用されています.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">」と書いていました.
*4:マウスなどの操作でメニューからも選べますが,ブラウザごとに異なります.Chromeの場合,右上の縦の点3つを押してから,「その他のツール」「デベロッパー ツール」の順です.
*5:その右に,どのファイルの何行目がエラーというのも,表示されます.リンクになっていて,押すと,開発者ツールの中で,該当箇所を教えてくれます.
*6:そこまでいかなくても,REPLで複雑な式や文を書いて実行し,(構文的・論理的な)エラーがなくなったところで,コードをコピーして,テキストエディタ上のプログラムファイルに貼り付ける,というのは私自身よくやっています.