書いてみよう

I. 初めてのプログラム：Hello World! とポップアップ

プログラミングの第一歩いっぽは、自分の指示がブラウザに伝わったことを確認することです。画面がめんにメッセージを出す2つの方法を学びましょう。

alert()：ユーザーへの通知

ブラウザに小さなウィンドウを出して、ユーザーに大切なメッセージを伝えます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello</title>
</head>
<body>
    <p>Let's JavaScript --<br>
        <script type="text/javascript">
          alert("こんにちは！");
        </script>
    </p>
</body>
</html>

これをブラウザで見ると、このようになります。ここをクリックしてみましょう。

console.log()：開発かいはつ者のための確認（デバッグ）

「デバッグ（プログラムのミスを見つけて直すこと）」のために使います。ユーザーには見えない、開発かいはつ者のための「確認用メッセージ」をコンソールに出力しゅつりょくします。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello</title>
</head>
<body>
    <p>Let's JavaScript --<br>
        <script type="text/javascript">
          console.log("プログラムがここまで動（うご）きました");
        </script>
    </p>
</body>
</html>

「コンソール」の開き方

自分の書いた「意図いと（やりたいこと）」がブラウザに正しく伝わったかどうかは、ここで確認します。

OS	操作方法
Windows	F12 キー（ノートPCは Fn + F12）または Ctrl + Shift + I
Mac	Command + Option + I

コンソールを開いて、ここをクリックしてみましょう。

自分の書いた1行のコードでブラウザが反応はんのうしたとき、その「喜び」がこれからの学習の力になります！

文（ぶん）／ Statement

alert("こんにちは！"); のような 「コンピューターへの命令めいれい」 を 「文」 と呼びます。「〜をしてください」という、ひとつの完璧かんぺきな指示です。

JavaScriptでは、最後にセミコロン ; をつけます。

II. イベントとイベントハンドラ：動うごきを作るきっかけ

JavaScriptは、ユーザーの「クリック」などの操作に反応はんのうして動うごき出します。この「きっかけ」を理解すると、Webサイトに命を吹ふき込こむことができます。

スイッチと電球の関係

イベント（操作）：ユーザーがボタンを押す「スイッチ」です。
ハンドラ（処理）：スイッチが入ったときに実行される「電球がつく」という動うごきです。

よく使われるイベントハンドラ（きっかけ）を整理しました。

カテゴリ	イベント名	きっかけ（タイミング）	使用例れい
マウス	onclick	クリックされたとき	ボタンを押して計算を始める
マウス	onmouseover	マウスが上に乗ったとき	画像がぞうの色を変える
ページ	onload	ページを読よみ込こみ終わったとき	「ようこそ」と挨拶を出す
フォーム	oninput	文字を入力にゅうりょくしたとき	リアルタイムで文字数を数える
フォーム	onfocus	入力にゅうりょく欄を選択したとき	入力にゅうりょく欄の色を明るくする

記述きじゅつ例れい： HTMLのボタンに「クリックされたらアラートを出す」魔法まほうをかけるときは、こう書きます。

<button onclick="alert('ボタンが押されました！')">クリックしてね</button>

これをブラウザで読（よ）み込（こ）むと、以下のようになります。

III. JavaScriptの呼び出し方と外部がいぶファイル化

コードが増えてくると、書き場所が重要になります。整理整頓せいとんされたコードは、プロの世界の「マナー」です。

内部ないぶJavaScript： HTMLの中に <script> タグで直接書く方法です。
外部がいぶJavaScript： .js という別のファイルに分ける方法です。

外部がいぶファイル化のメリット（戦略せんりゃく的意義）

プロの開発かいはつでは、必ず「外部がいぶファイル」を使います。理由は、「再利用性（ひとつのファイルを多くのページで使い回せること）」 が高まり、修正も一箇所で済むためです。

読よみ込こみの手順てじゅん

.js ファイル（例れい：script.js）を作成し、JavaScriptだけを書きます。
HTMLの <body> タグの最後（閉じタグ </body> の直前）に読よみ込こみコードを書きます。

なぜ <body> の最後に書くの？ブラウザは上から順番に読よみ込こみます。プログラムを最後に読よみ込こませることで、ページの文字や画像がぞうを先に出し、ユーザーを待たせない「スムーズな表示ひょうじ」が可能になります。

留学生へのメッセージ

最初はエラーが出るのが当たり前です。エラーメッセージはブラウザからの「ヒント」だと思って、楽しみながら挑戦ちょうせんしてください。あなたが楽しくコードを書けるようになるまで、応援しています！

Keyboard shortcuts

留学生のためのJavaScript学習ガイド