JavaScript入門

JavaScriptは様々な場所で使われるプログラミング言語です。特にWeb上での利用が有名でしょう。

準備

JavaScriptのコードを試すとき、一番手っ取り早い方法はブラウザのコンソール(インタプリタ)に入力することです。ただこの方法では複数行にわたるコードを入力しにくいので、Node.jsと呼ばれる実行環境をインストールして、その上でJavaScriptを動かしていくことにしましょう。 Node.jsのインストールはこちら

また、JavaScriptを編集するエディタも必要ですので、私のおすすめのエディタ VSCode をインストールしましょう。 VSCodeのインストールはこちら

これらをインストールできたら次の章に進んでくださいね。

Hello World

まず手始めとして、画面に「Hello, world!」と表示する簡単なプログラムを書いてみましょう。お使いのコンピュータの適当な場所に、hello.jsという名前のファイルを作成してください。ファイルを作成したら、先ほどインストールしたVSCodeでそれを開いてください。開いたら次のコードを入力して保存してください。

console.log('Hello, world!');

このコードの意味は後程解説します。

実行しよう

あなたの書いたJavaScriptを実行して画面に Hello, world! を表示させるには、シェル(WindowsならコマンドプロンプトやPowerShellと呼ばれるもの)でNode.jsを呼び出す必要があります。

Windowsの場合

コマンドプロンプトまたはPowerShellを開き、cd <hello.jsのディレクトリパス>と入力します。例えばデスクトップにhello.jsを作成した場合、パスはC:\Users\syuilo\desktopのようになります。

node hello.jsと入力するとhello.jsが実行されます。

上手くHello, world!と表示されましたか？

解説

console.log('Hello, world!');

の意味を見ていくことにします。とはいっても、まだこの段階では意味を解説することは難しいので、とりあえず各部分の名称と簡単な説明を記すにとどめておくことにします。

箇所	意味
`console`	オブジェクトと呼ばれるものです。様々なプロパティと呼ばれるものを格納しています。
`.`	オブジェクトの中に入っているプロパティを引っ張り出すときにこの`.`を書きます。
`log( ~ )`	プロパティと呼ばれるものです。気づいたかもしれませんが、これは上記`console`の中に入っていたものです。また、これはカッコ(`()`)が付いていますので、プロパティであると同時に、関数と呼ばれるものでもあります。そしてさらに、プロパティであり関数でもあるモノのことをメソッドと言ったりします。ちょっとややこしいかもしれませんが、まとめると`log`は「プロパティであり関数でありメソッドでもある」ということです。
`'Hello, world!'`	文字列と呼ばれるものです。これは`Hello, world!`という文字列(文字の集まり)を表しています。
`;`	プログラムのひとつの処理の終了を表すものです。日本語で例えるなら、`。`のような役割です。ただ実は、これは書いても書かなくても自由です。とりあえずこの入門書では書くことにします。

定数

さっきのhello.jsを改造して、Hello, world!を3回表示するようにしたいと思います。

console.log('Hello, world!');
console.log('Hello, world!');
console.log('Hello, world!');

これで実行してみてください。3行にわたってHello, world!が表示されました。めでたし！

でもちょっと待ってください。このコードには明らかに無駄があります。もし表示したい文章を変えたいと思ったら、三ケ所もコードを編集する必要があります。このコードから無駄をなくすには様々な方法が考えられますが、とりあえず'Hello, world!'という3回もコード中に現れる文字列を一か所にまとめたいと思います。

さて、それはどうやるのでしょう？ここで定数と呼ばれるものの出番です。定数は、好きな名前を付けられる「箱」のようなもので、中に何らかの値を入れておくことができます。 (定数は複数作れるので、それぞれを区別するためにそれぞれに異なった名前を付けておくのです) そしてその箱は様々な場所から中を見ることができます。箱の中身を見ることを、「参照」と言います。

つまり、箱を作ってその中に'Hello, world!'という文字列を入れておき、ほかの場所からその箱を「参照」すれば、'Hello, world!'と書くのを一回で済ますことができます。

まあ、百聞は一見に如かずという言葉もあるくらいですから、さっそく次のコードを見てください:

const greet = 'Hello, world!';
console.log(greet);
console.log(greet);
console.log(greet);

おめでとう！ 'Hello, world!'という文字列が、一か所にまとまりました。これなら、もし表示する文章を変えたくなったときでも、一か所の編集で済みます。次のように:

const greet = 'I am robot and proud!';
console.log(greet);
console.log(greet);
console.log(greet);

上手く動きましたか？では解説します。

解説

const greet = 'I am robot and proud!';

というコード(文)が新たに追加されたわけですが、これは定数を「宣言」し、そこに値を「代入」する処理です。詳しく見てみましょう。

箇所	意味
`const`	「定数を今から作りますよ」という'宣言'を表しています。
`greet`	定数名を表しています。どんな名前にするかはあなたの自由です。ただ、その時に合った分かりやすい名前を付けることが望ましいです。
`=`	定数に値を入れるときに書きます。このことを代入と言います。
`'I am robot and proud!'`	おなじみ、文字列です。
`;`	また会いましたね。

定数を参照する、つまり「箱の中身を見る」ためには、定数名をそこに書きます。だから、

console.log('Hello, world!');

が

console.log(greet);

になったのです。

コラム: 入れるはあるのに出すはない？

定数に値を「入れる」ことはできても「出す」ことはできないのでしょうか？ーーーこの入門書では、「参照」することを「箱の中身を見る」と表現しました。このことを「箱の中身を取り出す」という表現の仕方でも、間違いではないかもしれません。しかし、「出す」ということは、出した後はカラッポになるというニュアンスを含みます。しかし定数の場合はいくら取り出しても中身がなくなることはありません。そして、定数はいちど中に値を入れたら、二度と中身を入れ替えたり中をカラッポにすることはできません。したがって、定数に「出す」という行為は存在しないのです。

計算

コンピュータは計算が得意なので、四則演算も簡単に行うことができます。

const x = 30;
const y = 12;

console.log(x + y);

このプログラムを動かすと何が表示されるでしょうか？上手くいけば、42と表示されたはずです。今まで定数には文字列しか入れたことがありませんでしたが、今度は数値を入れています。そして、logメソッドに、「xとyを足したもの」を渡しています。

この例では、別に定数を使わなくても問題ありません:

console.log(30 + 12);

逆に計算結果さえも定数に入れておくこともできます:

const x = 30;
const y = 12;
const z = x + y;

console.log(z);

もちろん、足し算以外にも引き算、割り算、掛け算なども行えます。

文字列も足せる

足し算が行えるのは、数値だけではありません。文字列同士も、「足す」ことができます。

const x = 'Hello, ';
const y = 'world!';

console.log(x + y);

ユーザーに入力してもらおう

今まで書いてきたプログラムは、予め決まった文字列を表示するだけでした。これではあまりにつまらないので、ユーザーに何か入力してもらうことにしましょう。 JavaScript(Node.js)ではユーザーの入力を受け取るプログラムを書くのは他の言語と比べて少し複雑ですが、そこは気にしないでおくことにします。

const readline = require('readline');

const i = readline.createInterface(process.stdin, process.stdout);

i.question('何か入力してください: ', answer => {
	console.log('あなたの入力: ' + answer);

	i.close();
});

syuilo/js.md