JavaScriptとは何か知りたい初心者向けに、できること・学び方・実際の動かし方までわかりやすく解説します。
この記事では、JavaScriptの基本的な役割やWebサイトの仕組みを学び、実際にブラウザでコードを実行するところまで体験できます。
JavaScript入門で今回学ぶこと
- JavaScriptがどんな言語なのか理解する
- Webサイトを作る3つの技術を知る
- 自分でJavaScriptコードを実行できるようになる
Webサイトを作る3つの技術
まずは、Webサイトの仕組みから見ていきましょう。
Webサイトは主に次の3つの技術で作られています。
- HTML：文章や見出しなどの構造を作る
- CSS：色・レイアウト・デザインを整える
- JavaScript：動きや機能を追加する
家に例えると、HTMLは骨組み、CSSは内装デザイン、JavaScriptは電気や自動ドアのような動きの部分です。
つまり、JavaScriptはWebサイトに動きをつけるプログラミング言語です。
JavaScriptでできること
JavaScriptを使うと、次のようなことができます。
- ボタンを押したときの処理
- フォーム入力内容のチェック
- 画像の切り替えやアニメーション
- サーバーとの通信
- ショッピングカート機能
たとえば、SNSの「いいねボタン」を押すと数字が増える仕組みもJavaScriptで作られています。
JavaScriptはどこで動くの？
JavaScriptは主に次の2つの場所で動きます。
- ブラウザ（Chrome・Edge・Safariなど）
- サーバー（Node.jsなど）
今回は初心者向けに、ブラウザ上でJavaScriptを実行してみましょう。
ChromeでJavaScriptを動かす方法
Google Chromeを開いてください。
開いたら、キーボードの F12キー を押してください。
Macの場合は Command + Option + I です。
すると開発者ツールが表示されます。
Console タブをクリックしてください。
ここにコードを入力すると、その場でJavaScriptを実行できます。
JavaScriptの基本コードを書いてみよう
文字を表示する（console.log）
まずは次のコードを入力してください。
console.log("Hello World");実行すると、Consoleに「Hello World」と表示されます。
console.log() は、コンソール画面に文字や数字を表示する命令です。
自分の名前を表示するように変更してみましょう。
ポップアップを表示する（alert）
次は次のコードを入力してください。
alert("こんにちは");Enterキーを押すと、画面にポップアップが表示されます。
JavaScriptでエラーが出る原因とは？
次に、わざと間違ったコードを入力してみます。
console.log(Hello World);するとエラーが表示されます。
今回の原因は、文字列を " "（ダブルクォーテーション）で囲っていないためです。
正しくは次のように書きます。
console.log("Hello World");プログラミングではエラーは必ず発生します。
大切なのは、エラーを怖がることではなく、原因を確認して1つずつ直すことです。
演習問題
今回の学習内容として、次の3つを実際に試してみましょう。
- 自分の名前を表示する
- 好きな食べ物を表示する
- 好きな数字を表示する
まとめ
- JavaScriptはWebサイトに動きをつける言語
- ブラウザのConsoleで簡単に試せる
- console.log() や alert() で出力できる
- エラーは原因を確認して直せば大丈夫
コメント