JavaScript/はじめに

出典: フリー教科書『ウィキブックス(Wikibooks)』
ナビゲーションに移動 検索に移動

まず、簡単なJavaScript (ジャバスクリプト)のプログラムの例と、どこにプログラムを書けばいいのかを解説します。

Hello World[編集]

Hello World!

Hello World ハローワールド とは、画面に「Hello World!」と表示する、プログラミングの本の最初に書いてあるプログラムです。

IEの場合

Windows標準のInternet Explorer (IE)の場合、

初期設定では、セキュリティ上の理由のために、JavaScriptのプログラムを表示しない状態で設定されている場合があります。

その場合、このwikibooksで紹介したプログラム例も初期設定のままでは実行できないので、設定変更をして、設定を JavaScript実行可能に変更してください。

JavaScriptのHello Worldプログラムは次のようになります。

<script>
  alert('Hello World!');
</script>


alert はアラートと読みます。英語で「警告する」ことをalertと言います。

ですが JavaScript の alert は、単にウィンドウを表示するだけなので、安心して使用してください。


上記のコードを、テキストエディタで書いて保存し、拡張子 .html で保存します。


すると、webブラウザで起動すると、結果は右図のように、alert命令により、警告ポップアップが出て、カッコ内(' ')の文字が表示されます。


けっして拡張子 .js ではないです。もし、htmlファイルに直接javascriptを組み込みやい場合には拡張子は .html で保存します(拡張子 .js で保存する場合とは、たとえばhtmlファイルから別ファイルとして存在するJavaScriptファイルをロードしたい場合に、その別ファイル側を .js 拡張子で保存することになります)。


またはコードは、

<script>
  alert("Hello World!");
</script>

です。

また、表示の結果は同じですが

<script>
  window.alert"Hello World!");
</script>

のほうが、文法的にはお行儀の良いコードかもしれません。


日本語を表示させたい場合、Windowsのバージョンによっては、

<meta charset="Shift_JIS">
<script>
  alert("こんにちは 世界");
</script>

のように <meta charset="〇〇"> による文字コード指定が必要になる場合があります。この文字コード指定がないと日本語では文字化けする場合があります。このmeta charsetのタグは、HTMLのタグです。JavaScriptはHTMLのコードを流用する仕組みです。

なお、Linuxで試したところ、たとえば Fedora32 では <meta charset="〇〇"> は不要です。


なお、charset はインターネットの専門用語です。英語の日常語には、無い用語です。読みは日本では「キャラセット」とでも読んでおけばいいと思います。

とにかく、

<meta charset="Shift_JIS">
<script type="text/javascript">
   alert("こんにちは 世界");
</script>

のように、scriptタグに言語の種類がJavascriptであることを書いてブラウザに知らせるほうが、たぶん、お行儀の良いプログラムでしょう。


なお HTML5 の規格では、実は type="text/javascript" の部分は不要です。HTML5対応ブラウザなら <script> だけでもJavaScriptだと認識します[1]。 2020年代の現在のwebブラウザでは type="text/javascript" の部分があっても動きます。

※ 本wikibooksでは、分かりやすさなどのため必要に応じて type="text/javascript" の部分も記述します。
また、まだHTML4対応のウェブサイトは多く世界に残っています(日本だけでなく外国でも、です)。HTML4対応の派生フレームワークなどとの互換性のため、HTML4のままに仕様をとどめているウェブサイトも多くあるのが現状です。


なお、警告アラートではなく、単に画面に文字を表示させるだけなら、

<meta charset="Shift_JIS">
<script>
  document.write("こんにちは 世界");
</script>

です。

document は「ドキュメント」と読みます。書類のことを英語でドキュメントといいます。

※ 映画における記録映画の「ドキュメンタリー」とは無関係です。(なお、documentには「証拠」(しょうこ)という意味もあり、そこから、記録映画やテレビやラジオなどの記録番組などのことをdocumentary 「ドキュメンタリー」という意味が生じている。)


さて document.write() はHTML5でW3C非推奨になりましたが、今のところ、FireFox でも Google Chrome でもdocument.write() は動いています。

市販の書籍のJavaScript入門書が、あまり初心者むけとは思えない console.log を用いて、文字表示してるのは、こういう理由だろう。


ブラウザでの確認[編集]

まず、プログラムを制作する必要があります。そのため、メモ帳などのテキストエディタを開き、下記のHTMLマークアップをコピーし、hello.htmlなどの適当なファイル名でデスクトップに保存してください。hello.html.txtのようにファイル名の後ろに余計な.txtがつかないようご注意ください。

  • hello.html
<script>
  alert('Hello World!');
</script>

作成したhello.htmlをダブルクリックして開くと(ブラウザ上にhello.htmlをドラッグしても開くことができます)、画面に「Hello World!」と表示されます。

JavaScriptでは文字列は必ず''または" "で囲むということを忘れないでください。

「'」はキーボードで「7」の数字キーの上についているものの半角です。このキーを押しながらShiftキーを押すことで入力できます。


決して

alert(Hello World!); // SyntaxError

としてはいけません。

分析[編集]

では、上記のコードを分析しましょう。 まず、JavaScriptの命令をブラウザで実行するには、コードをHTML<script></script>タグの中に書く必要があります。

alertメソッドは、Webページ上に警告ダイアログを表示します。

alert("Hello World!");

では、alertメソッドを例に、javascriptでの命令の記述方法を勉強しましょう。

まず、文字列の表示命令などのように、文字列を処理する際には""または''で囲んで表すことで、その(囲まれた)部分が文字列であることを明言したことになります。

また、alertメソッドに限らず一般に、命令の文の終わりには;をつけます。

;は「行の終わり」を表します。

1行のプログラムなら;はなくても良いです。

ですが、2行以上にする時に、;がないとエラーが出てしまいます。

REPL[編集]

REPL(read–eval–print loop)とは、コマンドプロンプトのようにコードを入力して実行結果を手軽に確認できるツールのことですが、ここではオンラインサービスのことを指します。

BabelのREPLを使うと上記のHello Worldプログラムを簡単に動かすことができます。


完全なHTMLドキュメント[編集]

この本ではHTMLの知識を仮定しないため、簡単にscript要素のみを用いますが、参考までに完全なHTMLドキュメントの例を示しておきます[2]

  • hello.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My First Program</title>
    <script>
      alert('Hello World!');
    </script>
  </head>
  <body>
    <h1>Say Hello to the World</h1>
    <p>Seeing is believing.</p>
  </body>
</html>

<!DOCTYPE html>DOCTYPE宣言と呼ばれるもので、古いブラウザ[3]標準モードでレンダリングさせるためにHTML5の仕様上必要とされていますが[4]、現代ではほとんど意味はありません。

すべての要素はhtml要素で囲まれます。

head要素にはヘッダ(メタデータ)が入ります。

<meta charset="utf-8">は文字エンコーディングがUTF-8であることを示す記述です(この例では日本語を含まないので必須ではありません)。

title要素はWebページのタイトルを表します。

script要素の中にJavaScriptのコードを記述します。

body要素にはWebページの内容が入ります。h1要素は大見出し、p要素は段落を表します。

外部スクリプト[編集]

HTMLドキュメントにJavaScriptコードを埋め込むのではなく、外部ファイルに分離することもできます。こうすると興味の集中ができますし、JavaScriptを書くのにHTMLファイルを編集する必要がなくなります。

hello.htmlを次のように変えます。

  • hello.html
<script src="hello.js"></script>

そして新規テキストファイルを作成し、以下のJavaScriptコードをコピーし、hello.jsという名前でデスクトップ(hello.htmlと同じディレクトリ)に保存してください。

  • hello.js
alert('Hello World!');

hello.htmlを開くと、さっきと同じように「Hello World!」と表示されます。

今後はhello.htmlは変えずに、hello.jsの方にプログラムを書いていくことになります。

JavaScriptコンソール[編集]

Firefoxの例。右下の一番下の»と表示されている部分がJavaScriptコンソール

たいていのブラウザには、わざわざHTMLファイルを作成しなくても、JavaScriptコードをその場で書いて実行できるJavaScriptコンソール(インスペクタ)と呼ばれるツールが搭載されています。

IE、Chrome、Firefox、Safariなど多くのブラウザでは、F12(またはfn+F12)を押すとコンソールが起動します。

あるいはWebページの適当なところを右クリックして「要素を調査」を選択したり、ブラウザ上部のツール(開発)メニューをクリックしたりしてコンソールを起動することもできます。

ひとまずコンソールが起動できたとしましょう。

コンソールではalertメソッドを使わなくても、単にJavaScriptコードを入力するだけで実行結果を確認することができます。

  • コンソールの出力例(◀が実際に入力したコード、▷が出力結果)
19:26:22.453 ◀ 'Hello World!'
19:26:22.458 ▷ "Hello World!"
19:26:25.882 ◀ 1 + 1
19:26:25.886 ▷ 2
19:26:32.775 ◀ Math.pow(2, 1023)
19:26:32.780 ▷ 8.98846567431158e+307
19:26:49.043 ◀ var x = 2
19:26:49.048 ▷ undefined
19:27:03.064 ◀ x
19:27:03.069 ▷ 2
19:27:15.321 ◀ x + x === x * x
19:27:15.326 ▷ true
19:27:17.489 ◀ unko
19:27:17.494 ✖ ReferenceError: unko is not defined
19:31:52.231 ◀ new Date()
19:31:52.237 ▷ Date 2016-02-16T10:31:52.238Z

コンソール上でキーを押すと、以前に入力したコードをもう一度編集して実行することができます。

Shift+Enterを押すと改行でき、複数行のプログラムを入力することができます。

console.logメソッドを使用すると、明示的にコンソール上に文字列を出力することができます。たとえばプログラムの途中で結果を出力したり、hello.jsからコンソールに文字列を出力したりするのに使えます。

console.log('Hello World!');
Firefox上で動作するFirebugアドオン

Firefoxでは、Firebugという拡張機能をインストールするとさらに高機能なデバッガを利用することができます(Firefox最新版においても組み込みのインスペクタでは物足りないとされており、Firefoxを使うすべてのプログラマはFirebugをインストールすることが推奨されます)。

コンソールは、プログラムのどの行でエラーが発生しているのかを確認するなど、JavaScriptプログラマにとって欠かせないツールです。hello.jsにプログラムを書く場合であっても、必ずコンソールを起動し、エラーが出ていないかどうか確かめるようにしましょう。

プログラムは一発で完璧に書こうとするものではなく、少しずつ書いては実行し、わざとエラーを出させてはそれを直すを繰り返して、「とりあえずここまではできた」「ここまでは間違っていない」という範囲を徐々に広げていって完成させるものなので、エラーを恐れないでください。

コンソールは即座にプログラムを実行できるので練習には便利なのですが、使用には多少の慣れが必要かもしれません。

以降はコンソールにプログラムを書いても、hello.jsに書いてもかまいません。自分に合った方法でプログラミングを継続してください。


コメント[編集]

JavaScriptでは、//から行末までの部分、および/**/で囲まれた部分はコメントとして扱われます。コメントは無視されるので、コードの説明など好きな文章を書くことができます。

たとえば、

<meta charset="Shift_JIS">
<script>
//  alert('Hello World!');
document.write("こんにちわ 世界");
</script>

なら、アラートは表示されず、したがって「Hello World」は表示されずに、表示されるのは単に「こんにちは 世界」という文章だけがブラウザのウィンドウの左上あたりに表示されます。


他の例
/*
  1 から n までの整数の合計を求める(初期値は n = 10)

  複数行のコメントを書くことが可能
*/

var n = 10;

console.log(n * (n + 1) / 2); // 一行コメント: ガウスのアルゴリズムを使用

複数行コメントは次のように星をつなげて書くと綺麗です。

/**
 * @file JavaScript による円周率出力プログラム
 * @version 3.14
 * @author ウィキブックス
 * @license パブリックドメイン
 */

console.log(Math.PI);

これはJSDocと呼ばれる形式で、JavaScriptにおけるドキュメント方式の事実上の標準になっています。一般公開するプログラムでは、すべてのメソッド定義にJSDoc形式でドキュメントを書くことが推奨されます。JSDocの書き方を手っ取り早く習得したい方は、GoogleのClosure Libraryの例をご覧ください。

ただし、練習用のプログラムでは面倒なのでコメントは書かなくてもよいでしょう。

JavaScriptに限りませんが、一般的に

var x = 1; // x に 1 を代入

のような、自明なコードをただ日本語に翻訳しただけの無意味なコメントは愚かなものとされます。それが何のための変数なのかなど、クリエイティブな構想をコメントには書くべきです。JavaScriptの構文はJavaScriptのまま理解すべきで、いちいち日本語に翻訳して理解すべきではありません。


webブラウザ以外でGUIを使いたい場合[編集]

一般に、JavaScript でグラフィカルなGUIアプリを作りたい場合、本ページで述べたように、 HTML および webブラウザと連動するのが普通です。


実はWindowsの場合だけ、JavaScriptを、webブラウザを経由せずにコマンドプロンプトから起動できます。

こういう機能を「WSH」 (Windows Script Host) と言います。

また、マイクロソフト社の作った、WSH用のこういった特殊なJavaScriptのことを JScript(ジェイ・スクリプト) と言います。

(なおDOSプロンプトからの実行方法は .js形式のファイルを作成してホームフォルダを置き、コマンドwscript ファイル名.jsをDOSプロンプトで実行する。)

なお、cscript ファイル名.jsだと、GUIウィンドウを作成できないです。


ただし、これらDOSプロンプト起動だと、document.write()などの一般のJavaScriptの命令の多くが使えないです。


そのため、Hello World の際にも

WScript.Echo('Hello Wrold');

のように、専用の命令が必要になってしまいます。

DOSプロンプト用のJavaScriptコードには、他OS(MacやLinuxなど)との互換性も無いので、あまりDOSプロンプトからの方法は使わないようにしましょう。


いまでこそWindowsのプログラム開発環境である Visual studio の価格が有料で、数万円していた時代があったのです。その頃は、これら、コマンドプロンプトなどから起動できる JavaScript や VbScript(Visual Basic風のスクリプト) という機能で、無料でも簡易的・初歩的なプログラムが出来たのです。しかし、すでに Visual Studio が無料化された現在では、コマンドプロンプトからの JavaScript などの起動は価値が薄れてしまいました。

また現在では、他OSとの互換性などのため、コマンドプロンプトなどで起動するアプリのスクリプト作成の際には、Windowsでしか利用できないようにアレンジされたWSH系の言語は避けるべきなので、できれば(WSH系javascriptではなくて) python など別のスクリプト言語のほうが望ましいでしょう。

詳しくは『JavaScript/JScript』で説明する。

発展的な知識[編集]

Node.js[編集]

ブラウザを使わずに、JavaScriptの処理系をインストールしてシェル(ターミナル)でJavaScriptを実行することもできます。シェルを使える方にはこの方法をおすすめします。

さまざまな処理系が存在しますが、GoogleのV8エンジンをベースにした、Node.jsと呼ばれるランタイムを利用するのが最も現代的で手軽な選択肢になります。

インストール方法

Node.jsの公式サイトからインストーラーをダウンロードし、インストールしてください。なお、Linuxではターミナル(コマンド画面)を実行してもインストールできます。

Ubuntuでは次のコマンドを実行してNode.jsをインストールできます(管理者権限が必要です)。

 $ sudo apt-get install node

です。

Fedora では

 $ sudo dnf install nodejs

です(Fedora 32 で2020年4月20日に確認)。

また、MacではHomebrewと呼ばれるパッケージマネージャーをインストールし、インストールするとよいでしょう。

 $ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
 $ brew install node


起動

Node.jsインタプリタを起動するには、シェルでnodeコマンドを実行します。

 $ node
 > console.log('Hello World!')
 Hello World!
 undefined
 >

Node.js/V8以外の処理系にはSpiderMonkeyRhinoKJSなどがあります。

 $ sudo apt-get install libmozjs-24-bin rhino kdelibs-bin

GNU LibreJS[編集]

この節は書きかけです。この節を編集してくれる方を心からお待ちしています。

スタイル[編集]

JavaScriptではインデントはスペース2つ、変数名はキャメルケースを用いる慣習になっています。その他のJavaScriptの慣習を知りたい方はGoogle JavaScript Style Guide和訳)をご覧ください。

Closure Linterをインストールすると、gjslintコマンドを使ってプログラムがGoogle JavaScript Style Guideに合ったスタイルになっているかどうかチェックできます。

$ sudo apt-get install closure-linter # Ubuntu
$ brew install closure-linter # Mac
$ gjslint hello.js

脚注[編集]

  1. ^ 狩野裕東『確かな力が身につく JavaScript「超」入門』、SBクリエイティブ、2016年12月7日 初版第5刷、46ページ
  2. ^ Google HTML/CSS Style GuideではHTML5のタグの省略(和訳)を用いることも提案されていますが、初心者にとってはかえってHTMLの構造がわかりづらいと考えられるため、ここでは用いていません。
  3. ^ Activating Browser Modes with Doctype § Appendix: Handling of Some Doctypes in text/html
  4. ^ HTML Standard § 12.1.1 The DOCTYPE和訳