簡単なプログラムを通じて、プログラムの基本的な書き方と実行方法を学びましょう。
目次
プログラムの書き方
例）階乗を計算して表示する
以下のコードを『factorial.js』として保存。ファイルを作成してください。
プログラムの実行方法を学ぶのに利用します。
function fact(n) {
if( n<=1 ) return n;
return n*fact(n-1);
}
for(var i=1; i<10; i++) {
console.log(i + "! = " + fact(i));
}
・直接入力で入力する
プログラムは基本的に直接入力（英数入力）で入力します。日本語入力を使用するのは、『日本語を含む文字列』『コメント文』を入力する場合のみです。
・空白は必ず半角スペースを使用
WEBページを作る他言語では（HTML/CSS）、区切り文字としての全角スペースを使用することができません。JavaScriptでの全角スペース使用は問題ありませんが、WEBページを作るうえで、JavaScriptしか使わない。といった状況はありえないので、統一して半角スペースを使用するようにしましょう。
・字下げはタブを使用
字下げを行うことで階層構造を明示でき、ソースが見やすくなります。半角スペースを複数個入力し、字下げを行なっても問題ございませんが、タブを用いれば容易に同じ位置に字下げを行えます。
・セミコロンをつける
処理の終わりには必ず;（セミコロン）をつけてください。処理の影響範囲が想定と変わってくる場合があります。
プログラムの実行方法
JavaScriptの実行環境で、プログラムを実行する方法を学びます。先ほど作成したプログラムを次の方法で実行してみましょう。
Chromeのコンソールで実行
デベロッパーツールの起動
以下いずれかの方法で起動。
・Google Chrome右上の設定メニュー → 「その他ツール」 → 「デベロッパーツール」を選択
・ブラウザ表示領域で右クリック → 「検証」を選択
・ショートカットキーを用いて起動。
Mac...「Command」+「Option」+「I」
Windows...「Ctrl」+「Shift」+「I」
コンソールでプログラム実行
コンソールを利用するにはConsoleタグを選択します。枠内上部にプロンプト（＞）があります。その後に続けてキーボードからコマンドを入力し実行します。
先ほどのプログラム文を実行してみましょう。
コンソール内に記述後、Enterキーで実行してください。以下のような結果が表示されませんか。
function fact(n) {
if( n<=1 ) return n;
return n*fact(n-1);
}
for(var i=1; i<10; i++) {
console.log(i + "! = " + fact(i));
}
1! = 1
2! = 2
3! = 6
4! = 24
5! = 120
6! = 720
7! = 5040
8! = 40320
9! = 362880
undefined
コードの内容に誤りがあると、誤りの内容が表示されます。
エラーメッセージの先頭の▶︎をクリックして展開すれば、誤りのある行番号が表示されますので、訂正し、再度実行してみてください。
再実行するには、矢印キーで移動して誤りのある部分を訂正し、Enterキーを押します。
JavaScriptのコードをHTML文書に埋め込んでWebブラウザで実行
HTML文書内にJavaScriptを埋め込むには、HTML文書にscript要素を配置して、その中にJavaScriptプログラムを記述します。
以下の内容のHTMLファイルを作成してください。ファイル名『factorial.html』
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>階乗の計算</title>
</head>
<body>
<script>
function fact(n) {
if( n<=1 ) return n;
return n*fact(n-1);
}
for(var i=1; i<10; i++) {
console.log(i + "! = " + fact(i));
}
</script>
</body>
</html>
Chromeでfactorial.htmlを開いてコンソールを表示すれば、コンソールへの出力結果を確認できますね。
外部ファイルに記述する
コードをscript要素内に記述した場合、プログラムが長くなってくるとHTML文書が読みづらくなります。この場合、JavaScriptのプログラムを外部ファイルに保存して、それを読み込むとプログラムが読みやすくなります。
外部ファイルを読み込むには、script要素のsrc属性に外部ファイルのパスを指定します。
<script src="外部ファイルのパス"></script>
以下の例は『factorial.html』に、先に作成した『factorial.js』を読み込むように変更したものです。『factorial2.html』として新たに保存してください。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>階乗の計算</title> </head> <body> <script src="./factorial.js"></script> </body> </html>
こちらもChromeでfactorial2.htmlを開いてコンソールを表示すれば、コンソールへの出力結果を確認できます。factorial.htmlと同じ結果になりますね。
Node.jsで実行
Node.jsを実行するには、Mac＝ターミナル、Windows＝コマンドプロンプトを利用します。
ターミナルを起動
Node.jsを対話モードで（REPL=Read-eval-print loop）で起動するには、ターミナルで、「node」と入力します。
コマンド入力を促すプロンプト（＞）が表示され、その後にコマンドを入力できます。
$ node >
使い方はChromeのコンソールに良く似ています。
以下を記述し、Enterキーで実行。計算結果が表示されれば成功です。
function fact(n) {
if( n<=1 ) return n;
return n*fact(n-1);
}
for(var i=1; i<10; i++) {
console.log(i + "! = " + fact(i));
}
Node.jsでファイルを読み込んで実行
Node.jsでファイルを読み込んで実行する方法をご紹介。Node.jsでファイルを読み込んで実行すると大きなプログラムでもエディタで作成/編集し、実行できるので、とても便利です。
『factorial.js』をデスクトップに置いてそこから実行してみましょう。
ターミナルを起動し、拡張子が.jsのファイルを探します。
$ ls *.js >
factorial.jsが見つかると思います。これをNode.jsにて実行してみましょう。
$ node factorial.js >
めちゃくちゃ簡単ですね！
JavaScriptのプログラムの実行方法について説明させていただきました。
これからプログラムの書き方など本格的な勉強に入っていきます。
