1. JavaScriptの基本
JavaScriptの基本概念と実行環境を学びます
学習目標
- JavaScriptとは何かを理解する
- JavaScriptがWebページでどんなことをしているかを知る
- 実際にJavaScriptのコードを動かしてみる
- Web開発における3つの技術の役割を説明できる
目次
JavaScriptってなに？
JavaScript（ジャバスクリプト）は、Webブラウザ上で動作するプログラミング言語です。
どんなことに使われるの？
- ボタンを押したら画面が切り替わる
- 入力フォームに文字を入れるとエラーを表示する
- スライドショーが自動で動く
JavaScriptとJavaは別の言語です。省略する場合は、JS（ジェイエス）と呼びましょう。Java（ジャバ）と言うと別の言語のことだと思われるので注意しましょう。
JavaScriptの主な特徴
| 特徴 | 内容 |
|---|---|
| ブラウザで動く | ChromeやEdgeなどのブラウザで、特別な準備なしに動かせます。 |
| 動きをつけられる | HTMLやCSSだけではできない「動き」や「変化」をつけられます。 |
| 世界中で使われている | ほぼすべてのWebサイトで使われています。人気も需要も高い！ |
| 簡単に試せる | 特別なソフトを入れなくても、ブラウザで手軽に学べます。 |
Web開発の3つの技術
JavaScriptは「Web開発の3つの技術」の1つです。それぞれの役割を理解しましょう。
HTML
ページの構造
（見出し、段落、画像など）
CSS
ページの見た目
（色、フォント、大きさ）
JavaScript
ページの動き
（ボタンクリック時の処理など）
コードを書いてみよう！
JavaScriptエディタで、JavaScriptを実行できます。実際にやってみましょう！
JavaScriptエディタに以下のコードを入力して、「実行」ボタンを押してみましょう。
console.log("こんにちは、JavaScript！");こんにちは、JavaScript！
console.log() って何？
console.log() は、JavaScriptの命令の一つで、メッセージを開発者ツールに表示する機能です。
- console：開発者ツールのコンソール画面
- log：記録する・表示するという意味
- ( )：この中に表示したいメッセージを書く
もう少し試してみよう
以下のコードもJavaScriptエディタで実行してみましょう。
// 数字の計算
console.log(10 + 5);
// 現在の日時を表示
console.log(new Date());
// 文字を組み合わせる
console.log("私の名前は" + "山田太郎" + "です");コメントについて
コードの中に // で始まる行がありますね。これはコメントと呼ばれるものです。コードに説明を書くための機能で、プログラムの実行には影響しません。
//で始まる行は、その行全体がコメントになります- コメントは人間がコードを理解しやすくするために書きます
- JavaScriptはコメントを無視して実行するので、プログラムの動作には影響しません
- コードの説明や、何をしているかのメモとして使います
上のコードでは、各行の前にコメントで「何をしているか」を説明しています。これにより、コードの目的が分かりやすくなります。
演習問題
ここでは学んだ内容を実際に使って、簡単な演習問題に挑戦してみましょう。右側のエディタを使って実際にコードを書いてみてください。
演習1：あなただけのメッセージを表示してみよう
下のサンプルコードを参考に、自分の好きなメッセージを表示してみましょう。
console.log("ここに好きなメッセージを入れてみてください！");やってみよう！
- 右側のJavaScriptエディタにサンプルコードを入力して実行
- メッセージを自分の好きな内容に変更してみる
- 例：「JavaScriptを学び始めました！」
- 例：「プログラミングは楽しい！」
- 例：「今日はいい天気ですね」
- 「実行」ボタンを押してコンソール出力で結果を確認する
演習2：複数のメッセージを表示してみよう
console.log() を複数回使って、複数のメッセージを表示してみましょう。
console.log("最初のメッセージ");
console.log("2番目のメッセージ");
console.log("3番目のメッセージ");やってみよう！
- 右側のJavaScriptエディタにサンプルコードを入力して実行
- 「実行」ボタンを押して、3つのメッセージが順番に表示されることを確認する
演習3：計算をさせてみよう
JavaScriptで簡単な計算をして、結果を表示してみましょう。
console.log(5 + 3);
console.log(10 - 4);
console.log(6 * 7);
console.log(20 / 4);やってみよう！
- 右側のJavaScriptエディタにサンプルコードを入力して実行
- 実行結果を確認する
理解度チェック
より詳細なクイズに挑戦したい場合はこちらからクイズ問題に挑戦できます。
JavaScriptクイズまとめ
- JavaScriptはWebページに動きをつけるための言語です
- ブラウザだけで簡単に学習を始めることができます
console.log()を使って、最初のコードを動かせました！- HTML・CSS・JavaScriptの3つがWebページを作る基本技術です