JavaScriptのはじめ方

サーバーサイドはPythonで体験したので、今度はクライアントサイドに興味が出てきました。

クライアントサイドといえばJavaScript。
はじめるにあたって、いくつか調べたのをまとめておきます。

ブラウザを使ったはじめ方
1. HTML内
2. スクリプトファイル
ブラウザ以外の実行環境
これから学ぶ際の注意事項
おすすめの学習サイト

ブラウザを使ったはじめ方

JavaScriptのコードを書く場所は、主に2つあります。

HTML内
スクリプトファイル（拡張子「.js」）

書いたコードを手っ取り早く実行させるには、ブラウザを使うのが一番簡単なので、順にやってみたいと思います。

※ブラウザはChromeを使いました。他のものでも構いません。

HTML内

テキストエディタに以下をコピペし、拡張子を「.html」にして名前を付けて保存してください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Hello World</title>
</head>
<body>
  <script>
    alert( "Hello, world!" );
  </script>
</body>
</html>

JavaScriptのコードは<script>タグの内容に記述します。

alert( "Hello, world!" );

この部分がそうで、このコードはブラウザにダイアログを出させ、「Hello, world!」と表示させるものです。

それ以外は何の変哲もないHTMLです。

それではHTMLファイルをクリックしてみましょう。
ブラウザが起動しない場合、ファイルをつかんでブラウザのアドレス欄にドラッグ・アンド・ドロップします。

JavaScriptによってブラウザにダイアログが表示されました。

スクリプトファイル

今度はコードをファイルに記述し、それをブラウザから読み込ませます。

ひとまず同じディレクトリ内に、スクリプトファイルとHTMLの2つを作成します。

まずはスクリプトファイル。
このなかにJavaScriptのコードを書きます。

alert( "Hello, world!" );

テキストエディタでコピペし、ファイルの拡張子は「.js」にしてください。
ファイル名はHTMLの中で使います。

つぎはHTMLファイル。
HTMLの<script>、src属性の値にスクリプトファイルのパスを指定します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Hello World</title>
</head>
<body>
  <script src="script.js">
    alert( "この行は実行されない" );
  </script>
</body>
</html>

さきほどと同じようにHTMLをクリック。

ダイアログが表示されました。

srcを設定した場合、<script>タグの内容に記述したコードは実行されません。

alert( "この行は実行されない" );

ブラウザ以外の実行環境

HTMLやブラウザを使わずに動かしたいなら、実行環境が必要になります。

実行環境はコマンドプロンプトやPowerShellなどのターミナルから使用します。

現時点での主要な実行環境は2つ。

Node.js
Deno

上記の２つは、どちらもRyan Dahl氏が作成されたものです。すごいですね。

違いについては以下のページ。

Node.jsとはなにか？なぜみんな使っているのか？ - Qiita

DenoとNode.jsの大きな違い - keroxpのScrapbox

また最近では「Bun」というのも登場しています。

Node.jsを使いたい場合、Topページに行けば、自身の環境に合うインストーラーが表示されると思います。

LTS（Long Term Support）版と最新版が並んでいると思うので、LTS版を推奨。

インストールすると、ターミナルで対話的なJavaScriptの実行や、スクリプトファイルの実行ができるようになります。

# 対話的な実行
$ node
Welcome to Node.js v18.13.0.
Type ".help" for more information.
> 4 * 5
20
> for (let i=0; i < 5; i++) {
... console.log(i);
... }
0
1
2
3
4
undefined
# スクリプトファイルの実行
$ node script.js 
Hello, world!

Denoの場合は、インストールページに従い、各環境のコマンドを打ってインストールします。

インストールが完了すると、Node.jsと同じように動作します。

$ deno
Deno 1.27.0
exit using ctrl+d, ctrl+c, or close()
> 1 + 4;
5
> console.log("Hi!");
Hi!
undefined
>
press ctrl+c again to exit
>
$ deno run script.js 
Hello, world! [Enter]

私は最初Denoを導入しましたが、特にこだわりがないならNode.jsの方を勧めます。

これから学ぶ際の注意事項

JavaScriptの言語仕様は「ECMAScript」です。

最新の仕様
ECMAScript Language Specification

このESMAScript2015（ES2015）※で仕様の大幅な変更・機能の追加が行われました。
（例・変数宣言に「let」や「const」、クラス機能追加等。）

※これより前は西暦ではなく、版（edition）で表記。ES2015を版で言うとES6。

ですので過去の書籍やサイトを参考にする場合、古い仕様での書き方である可能性があります。

古いバージョンだとしても互換性は保たれているため、動作はしますが、これから学習をはじめるならモダンな書き方を覚えた方が良いでしょう。

目安として変数宣言で「var※」が使われているなら古い仕様かもしれません。

※「var」はES5以前のもの。一般的には使わない。

ブラウザを使ったはじめ方

HTML内

スクリプトファイル

ブラウザ以外の実行環境

これから学ぶ際の注意事項

おすすめの学習サイト