JavaScript/はじめに

まず、簡単なJavaScript (ジャバスクリプト)のプログラムの例と、どこにプログラムを書けばいいのかを解説します。
Hello World ハローワールド とは、画面に「Hello World!」と表示するプログラミングの本の最初に書いてあるプログラムです。
JavaScriptのHello Worldプログラムは次のようになります。
上記のコードをテキストエディタで書いて hello.html の名前で保存します。 少し長めですが、これ以上省略すると有効なHTML5文書でなくなり小さな変更で予想に反した挙動をする原因になります(例えば、文字列を日本語にしたら文字化けするなど)。
hello.html のアイコンをクリックするかウェブブラウザにドロップすると、結果は右図のようにHello World! が表示された警告ダイアログがポップアップします。
上記のコードをします。 JavaScriptのプログラムはHTML文書のSCRIPT要素の開始タグ<script>からSCRIPT要素の終了タグ</script>タグの間にきます。
alertメソッドは、ウェブページ上に警告ダイアログを表示します。
では、alertメソッドを例に、JavaScriptでのプログラムの記述方法を勉強しましょう。
文字列は、"または'で囲みます。"で始まったら"で終わる必要があります。'で始まったら'で終わる必要があります。
;(セミコロン)は「文の終わり」を表します。
文の終わりにセミコロンがなくても曖昧さがない場合はセミコロンを省略出来ます(自動セミコロン挿入)。
HTMLドキュメントにJavaScriptのコードを埋め込むのではなく外部ファイルに分離できます。
hello.htmlを次のように変えます。
hello.html
そして新規テキストファイルを作成し、以下のJavaScriptのコードをコピーし、hello.jsという名前でhello.htmlと同じディレクトリに保存してください。
hello.js
hello.htmlを開くと、警告ポップアップが出て Hello World! が表示されます。
ブラウザにはHTMLファイルを作成しなくても、JavaScriptのコードをその場で書いて実行できるデベロッパー ツールと呼ばれるツールが搭載されています。
Microsoft Edge、Google Chrome、Mozilla Firefox、Safariなど多くのブラウザでは、
または
を押すとコンソールが起動します。
また、Chrombook など ChromeOS の場合は、ファンクションキーそのものがないので、
を押すとコンソールが起動します(最後の文字はI(アイ)です)。
あるいはウェブページの適当なところを右クリックして「要素を調査」を選択したり、ブラウザ上部のツール(開発)メニューをクリックしたりしてコンソールを起動できます。
ひとまずコンソールが起動できたとしましょう。
コンソールではalertメソッドを使わなくても、単にJavaScriptのコードをタイプするだけで実行結果を確認できます。
コンソールの出力例(⌨が実際に入力したコード、🖥が出力結果)
コンソール上で↑キーを押すと、以前に入力したコードをもう一度編集して実行できます。
Shift+Enterを押すと改行でき、複数行のプログラムを入力できます。
console.logメソッドを使用すると、デベロッパー ツールのコンソール上に文字列を出力できます。たとえばプログラムの途中で結果を出力したり、hello.jsからコンソールに文字列を出力したりするのに使えます。
コンソールはプログラムのどの行でエラーが発生しているのかを確認するなど、JavaScriptプログラマにとって欠かせないツールです。hello.jsにプログラムを書く場合であっても、必ずコンソールを起動しエラーが出ていないかどうか確かめるようにしましょう。
プログラムは一発で完璧に書こうとするものではなく、少しずつ書いては実行しわざとエラーを出させてはそれを直すを繰り返して、「とりあえずここまではできた」「ここまでは間違っていない」という範囲を徐々に広げていって完成させるものなのでエラーを恐れないでください。
以降はコンソールにプログラムを書いても、hello.jsに書いてもかまいません。自分に合った方法でプログラミングを継続してください。
JavaScriptでは、//から行末までの部分、および/*〜*/で囲まれた部分はコメントとして扱われます。コメントは1文字の空白とみなされるので、コードの説明など好きな文章を書くことができます。
たとえば、
ならアラートは表示されず、単に「こんにちは 世界」がブラウザのウィンドウの左上に表示されます。
他の例
複数行コメントは次のようにアスタリスクを同じカラムカラムに書くとコメントの範囲がひと目で分かります。
これはJSDocと呼ばれる形式で、JavaScriptにおけるドキュメント方式の事実上の標準になっています。一般公開するプログラムでは、すべてのメソッド定義にJSDoc形式でドキュメントを書くことが推奨されます。JSDocの書き方を習得したい方は、GoogleのClosure Libraryの例をご覧ください。
JavaScriptに限りませんが、一般的に
のようなコードをただ日本語に翻訳しただけの無意味なコメントは冗長な上、コードの更新にコメントが追いついていない場合などは深刻な誤解を与えます(コメント通りに直しがち)。それが何のための変数なのかなどクリエイティブな構想をコメントには書くべきです。
REPL(read–eval–print loop)とは、キャラクター指向の対話的な実行方式であり、コマンドプロンプトがその代表である。しかし、オンラインサービスにはキャラクター指向は馴染みにくく、TEXTAREA要素に代表されるFORMに複数行のテキストを書き、「実行」に類するイベント発火で評価する形式が取られるようになった2021年6月現在、様々なオンラインサービスとして提供されている。
BabelのREPLやCode Beautifier - HTML Viewer使うと上記のHello Worldプログラムを簡単に動かすことができます。
特に、Code Beautifier - HTML Viewerでは、HTML文書に含まれたJavaScriptをウェブブラウザでの表示そのままに再現できローカルファイルにHTML文書を用意する必要がなく、スマホートフォンやタブレットなどでの利用に適している。
ブラウザを使うのではなく、JavaScriptの処理系をインストールしてシェル(ターミナル)でJavaScriptを実行できます。シェルを使える方にはこの方法をおすすめします。
後述のNode.jsのほか、SpiderMonkey、Rhino、KJSなどがあります。
さまざまな処理系が存在しますが、GoogleのV8エンジンをベースにした、Node.jsランタイムを利用する方法を紹介します。
インストール方法 Node.jsの公式サイトからインストーラーをダウンロードしインストールしてください。なお、Linuxでは各種パッケージマネージャを使ってもインストールできます。
Ubuntuでは次のコマンドを実行してNode.jsをインストールできます(管理者権限が必要です)。
です。
Fedora では
です(Fedora 32 で2020年4月20日に確認)。
また、macOSではHomebrewパッケージマネージャーをインストールし、brew を使ってインストールするとよいでしょう。
起動 Node.jsインタプリタを起動するには、シェルでnodeコマンドを実行します。
Hello World! の次の undefined は console.log() メソッドの戻り値です。
Node.js/V8以外の処理系にはSpiderMonkey、Rhino、KJSなどがあります。
JavaScriptではインデントのスペースの数、変数名の形式(例えばキャメルケース)、条件式の ) と 続くブロックの開始の { の間にスペースは必要か?そもそも次の行にすべきか?、if や while と (の間には?などのスタイルに幾つかの流儀があり、一概にどれが優れているとは言えない。ただ、1つソースプログラム、1つのプロジェクトでは一致している必要があるというのは最小限の合意事項と言える。
また、言語仕様が未だに成長途上にあるので、旧来のスタイル標準がひどく古臭くまた読みにくく感じることもある。