サーバーサイドはPythonで体験したので、今度はクライアントサイドに興味が出てきました。
クライアントサイドといえばJavaScript。
はじめるにあたって、いくつか調べたのをまとめておきます。
ブラウザを使ったはじめ方
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つ。
上記の2つは、どちらも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以前のもの。一般的には使わない。
おすすめの学習サイト
まずはここですかね。
JavaScriptに限らず、HTMLやCSS・DOMなどのリファレンスとして何度もお世話になっています。
現代の JavaScript チュートリアル|javascript.info
モダンな書き方に対応しています。
私もまだ途中ですが、無料で詳しく学べます。
また今は使っていませんが、過去に利用したことがあるサイトでは、
ブラウザで解説のスライドを見て、それから自分でコードを書く学習サイト。
ブラウザで解説の動画を見て、自分でコードを書く学習サイト。
スキルチェックで腕試しもできます。
どちらもブラウザ上でコードを書いて答え合わせができるので、手を動かしながら学べます。
ただ会員登録が必要で、講座によっては有料です。
サイトではなく、書籍で学びたいならこれですね。
ブロック崩しを作成してみました。