コードの種
プログラミング

JavaScript超入門① 最初のプログラムを書いて動かそう

ブラウザでJavaScriptを実行し、console.log、scriptタグ、コメントの基本を学びます。

執筆・編集：しおおにぎり

Webページのボタンを押すと数字が増える。メニューを開くと表示が切り替わる。そんな「操作すると反応する部分」を作るために、JavaScriptがよく使われます。

この全8回のシリーズでは、表示、変数、条件、繰り返しを順に学び、最後に数字を増減できるカウンターアプリを作ります。最初の目標は、自分のコードを動かし、結果を見る場所が分かることです。

難しい準備を全部終えてから、と身構えなくても大丈夫。まずはブラウザと、短いHTMLファイルで始めましょう。

1. HTML・CSS・JavaScriptの役割を分ける

Webページでは、主に次の3つが協力します。

技術 主な役割 カウンターなら
HTML 内容と構造 数字やボタンを置く
CSS 見た目 色、余白、大きさを決める
JavaScript 処理や操作への反応 クリックで数字を増やす

JavaScriptとJavaは、名前が似ていますが別の言語です。また、JavaScriptはブラウザ以外に、Node.jsなどの実行環境でも動かせます。

ただし、ブラウザの画面操作はどの環境でも同じように使えるわけではありません。このシリーズの後半は、HTMLを扱うためブラウザを使います。MDNのJavaScript入門でも、言語とブラウザの機能の関係を確認できます。

2. 最初の1行をコンソールで動かす

まずは次の1行を使いましょう。

console.log("Hello, JavaScript!");

コンソールは、プログラムの出力やエラーを確認する画面です。一般的なデスクトップ版ChromeやEdgeなら、F12などで開発者ツールを開き、「Console／コンソール」を選びます。環境によってキーやメニュー名は異なります。

練習には自分で用意したHTMLや空のページを使ってください。ログイン中のサービスの画面に、内容の分からないコードを貼り付けないようにしましょう。貼り付けの警告が出た場合も、警告を解除するための指示を安易に実行しないでください。

console.log("Hello, JavaScript!");を入力してEnterを押すと、Hello, JavaScript!が出ます。

日本語を表示するならconsole.log("こんにちは、JavaScript！");でも構いません。文章の中の全角の感嘆符は使えますが、コードを区切るセミコロンや引用符は半角にそろえます。

3. console.logはページ本文へ表示する命令ではない

console.logは、確認したい値をコンソールへ出すための機能です。Webページの見出しの横へ文章が追加されるわけではありません。

「実行したのにページが変わらない」と思ったら、まず出力先を確認してください。ページの文字を変更する方法は、後半のDOMの回で扱います。

コンソールに出した結果の後でundefinedが見えることもあります。これは入力した式の戻り値の表示で、エラーとは限りません。console.logは確認用の表示を行い、特別な計算結果の値は返さないためです。

4. HTMLファイルへ書いて、保存して使う

コンソールは小さな確認に便利ですが、少し長いコードはファイルにした方が書き直しやすくなります。

次をpractice.htmlという名前で保存してください。文字コードはUTF-8にします。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>JavaScriptの練習</title>
  </head>
  <body>
    <h1>JavaScriptの練習</h1>
    <p>実行結果はコンソールで確認します。</p>

    <script>
      console.log("HTMLから実行しました");
    </script>
  </body>
</html>

ブラウザでこのファイルを開くと、ページには見出しと説明が出ます。コンソールにはHTMLから実行しましたと表示されます。

何がどこで動く？

  1. ブラウザがHTMLを読み始める
  2. 見出しと段落をページの内容として用意する
  3. scriptタグへ来たら、その中のJavaScriptを実行する
  4. console.logの結果がコンソールへ出る

<script>と</script>の間だけがJavaScriptです。HTMLの外へそのままconsole.log(...)を書いても、期待した処理にはなりません。

5. 上から順番に実行されることを確かめる

先ほどのscriptの中を次へ置き換えます。

console.log("1番目");
console.log("2番目");
console.log("3番目");
1番目
2番目
3番目

今回のような普通の処理は上から順番に実行されます。後で学ぶクリックイベントなどは「操作が起きたとき」に実行するため、ファイルの上から全部を一度に処理する場合とは区別が必要です。

編集したら、保存してから再読み込み

HTMLの文章を変え、保存し、ブラウザを再読み込みすると、新しいコードが実行されます。

保存前にブラウザだけ更新しても、前のファイルを読みます。編集しているファイルと、ブラウザで開いているファイルが同じかも確認しましょう。

この練習は手元のHTMLを開いています。公開済みサイトのコードをローカルで変更しただけでは、公開サイトまで自動更新されるわけではありません。

6. 引用符・セミコロン・コメントを整理する

文章は引用符で囲む

"Hello"や'Hello'のように、文字列は半角の引用符で囲みます。始めと終わりをそろえてください。

console.log(Hello);と引用符を外すと、Helloという変数の名前を探します。まだ作っていなければReferenceErrorになります。

セミコロンは文の区切り

JavaScriptには、状況に応じてセミコロンを補う仕組みがあります。ただし、どこでも省略してよいという単純な話ではありません。

このシリーズでは、代入や関数呼び出しの文の末尾へ;を書きます。ifや関数定義の波かっこには、別のルールがあるので、その回で見ていきましょう。

コメントは人が読むメモ

// 開始したことを確認する
console.log("Start");

/*
ここは複数行のコメントです。
この文章は実行されません。
*/

コメントをたくさん書くこと自体が目的ではありません。「なぜここでこの処理をするか」を短く残すと、あとで助かります。

7. エラーは、種類と場所を見る

表示や症状 よくある確認先
SyntaxError 引用符・かっこ・記号など文法
ReferenceError 変数名やconsoleなどのつづり
表示が出ない コンソールを見ているか、保存したか
古い文章が出る 別ファイルを開いていないか、再読み込みしたか

console.Logとconsole.logは同じではありません。大文字・小文字を区別します。

また、コンソールでconstやletを使う練習を繰り返すと、同じ名前を再宣言したエラーが出る場合があります。画面の出力を消すだけでは変数が消えないことがあるので、必要なら練習ページを再読み込みしてから試します。

エラー表示の読み方では、最初のエラーから順に読む方法を紹介しています。

8. 練習：3行で自己紹介しよう

名前、好きなもの、作りたいWebページを、console.logを3回使って表示してください。実名や連絡先を書く必要はありません。

模範解答

console.log("名前はAoiです");
console.log("好きなものは音楽です");
console.log("作品を紹介するページを作りたいです");

解説

3つの呼び出しが上から順に動くので、コンソールへ3行の文章が出ます。文章を変えても、引用符と丸かっこを閉じる位置は変わりません。

HTMLで試すなら、先ほどのscriptの中へこの3行を入れます。scriptタグそのものをコンソールへ貼る必要はありません。

次の一歩

今回の到達点は「結果がどこへ出るか分かり、1行変更して確認できる」ことです。最初からWebページを自由に動かせなくても問題ありません。

次の記事：変数・型・計算 / JavaScriptシリーズ一覧

← 記事一覧へ戻る