1 - はじめに

JavaScriptはクライアント側（ユーザの Web ブラウザ）で実行されるオブジェクト指向型のプログラミング言語です。よく Java と混同されますが、全くの別物です。JavaScript を用いることで Web ページに動きを加えたり、フォームに入力された内容を検証・送信したりすることができます。

1.1 試してみよう

任意の Web ページを開き、右クリック → 検証から開発者ツールを開いてください。そしてコンソールタブに移り、Image1 が示すような場所に 1 + 1 と入力して Enter キーを押してみましょう。2 と表示されるはずです。

Image1：開発者ツールでの実行

このように JavaScript は本来 HTML に埋め込んで使用する言語ですが、小さいプログラムであれば開発者ツールから直接実行することができます。

従来、JavaScript は Web ブラウザ上で実行するプログラミング言語でしたが、近年では Node.js や Bun、Deno といったツールの登場によりネイティブで直接実行することができるようになりました。本研修で扱う Next.js も Node.js 上に構築されたソフトウェアであり、サーバーサイドで JavaScript が実行されています。

また JavaScript は動的型付け言語と呼ばれ、実行時にプログラム中のデータ型が決定されます。これに対し、Java などの言語は静的型付け言語と呼ばれ、コーディング時に厳格にデータ型を指定し、コンパイル時や実行時に型の検証を行います。動的型付け言語はスクリプト言語（JavaScript や Python など）によく見られます。このような言語は取り掛かりやすく、コード量が少なく、記述時に型を深く考えないで良いなどの利点がありますが、その反面でエラーが起こりやすいなどの問題があります。特に大規模な開発になるとバグを産みやすく、設計の根幹を揺るがす事態になることもしばしばです。

近年は端末の高性能化などにより、Web サイトや Web アプリケーションの規模はますます大きく、複雑になってきています。JavaScript においては特にこの傾向が顕著で、前述の問題が指摘されるようになりました。そこで登場したのが TypeScript です。TypeScript は Microsoft 社によって開発されている静的型付け言語です。この言語の最大の特徴として、JavaScript のスーパーセットであるという点が挙げられます。すなわち JavaScript の構文は TypeScript においても正しい構文であることです。JavaScript の構文を阻害しないように型の定義ができるようになったのが TypeScript であるため、JavaScript からの移行がしやすく、学習コストが低いことも併せて爆発的に普及しました。今日では Web 開発のスタンダードとなっています。

本研修でも TypeScript を扱いたかったのですが、2 日間という制約上、型の概念の説明などで時間がかかってしまうことが予想されたため JavaScript を使用することにしました。ですが、JavaScript が書けるようになったらぜひ TypeScript にも挑戦してほしいと思います。

1.2 HTML での使用

次のコード Listing1 は HTML と JavaScript を併用する場合の例です。

Listing1：HTML と JavaScript の併用

<!DOCTYPE html>
<html>
    <body>
        <script type="text/javascript">
            // //で始まる行はコメントとみなされます
            alert("こんにちは！");
        </script>
    </body>
</html>

演習1

practice-1.html を作成し、その中に Listing1 のコードを記述してブラウザで表示させてみましょう。こんにちは！と表示されるはずです。

HTML において JavaScript を使用する際には script タグを使用します。script タグの中に記述された JavaScript のコードは、基本的にはこれを含む HTML ファイルが Webブラウザによって読み込まれた瞬間に実行されます。今後、この資料ではこのタグの中に JavaScript のコードを記述していくこととします。

console.log() 関数を使用すると、引数に渡された任意の値を開発者ツールのコンソールに表示することができます。

演習2

practice-2.html を作成し、その中に Listing1 の alert の部分を console.log に置き換えたコードを記述してブラウザで表示させてみましょう。開発者ツールのコンソールタブにこんにちは！と表示されるはずです。

console.log() は今後極めて多く使用するので、必ず覚えておいてください。

余談：Listing1 のコードでは alert 関数を使用しています。この関数の挙動をよく観察してみると、表示されたポップアップの「OK」を押すまではいかなる操作も受け付けてくれません。この挙動を面白がったある女子中学生は、とある掲示板では JavaScript のコードを投稿するとそのまま実行されるバグがあることを見つけて、無限ループの中で alert 関数を呼び出すようなコードを書いて投稿しました。数日後、彼女は不正指令電磁的記録供用未遂の疑いで家宅捜索・補導されてしまいました。なんともしょうもないというか、悲しい事件ですね（参考：アラートループ事件）。