はじめに
前回の構想編では、このシリーズの目的や、HTMLとJavaScriptを使って学ぶ理由について紹介しました。
今回は実際に手を動かしながら、プログラミングの基本を学んでいきます。
この記事で学ぶ内容は、プログラミング言語が変わっても共通して使われる基本です。
- Hello World
- 変数
- 四則演算
- if文
- for文
- 関数
- HTMLとJavaScriptの連携
- Consoleを使ったデバッグ
それでは始めていきましょう！
VS Code for Webを開こう
まずは、ブラウザで VS Code for Web を開きます。
通常のVS Codeをインストールしている方は、そちらを利用しても問題ありません。
今回は環境構築を不要にするため、VS Code for Webを前提に進めます。
作業用フォルダを作成しよう
まずは、PCの好きな場所（デスクトップなど）に、次の名前でフォルダを作成してください。
training
このフォルダの中に、今回作成するプログラムを保存していきます。
作成したフォルダを開こう
VS Code for Webでは、ローカルのフォルダを開いて編集できます。
メニューから
File
└── Open Folder...
を選択し、先ほど作成した training フォルダを選択してください。
初回のみブラウザから
このフォルダへのアクセスを許可しますか？
と表示されることがあります。
その場合は 許可 を選択してください。
これでVS Code for Webからローカルのファイルを編集できるようになります。
補足
ブラウザやOSによって、メニューの表示やアクセス許可の画面は多少異なる場合があります。もし操作方法が分からない場合は、「vscode.dev Open Folder」で検索すると、最新の操作方法を確認できます。
ファイルを作成しよう
左側のエクスプローラーから、次の2つのファイルを作成してください。
training/
├── index.html
└── script.js
これで準備完了です。
HTMLを書いてみよう
まずは index.html を開き、次のコードを入力します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScript入門</title>
</head>
<body>
<h1>JavaScript入門</h1>
<script src="script.js"></script>
</body>
</html>
保存したら index.html をブラウザで開いてみましょう。
画面に
JavaScript入門
と表示されれば成功です。
Hello World
次は script.js を開きます。
まずは定番の Hello World です。
console.log("Hello World");
保存したら、ブラウザを更新します。
まだ画面には何も変化がありません。
実は console.log() は画面ではなく、Console に文字を表示します。
Developer Toolsを開こう
キーボードの F12 を押して、Developer Toolsを開きます。
その中にある Console タブを選択してください。
すると、
Hello World
と表示されているはずです。
Developer Toolsは、これからプログラミングを学ぶうえで何度も利用します。
分からないことがあったら、まずConsoleを見る習慣を付けましょう。
変数
変数とは、データを保存するための箱です。
let name = "山田";
console.log(name);
保存してブラウザを更新すると、
山田
と表示されます。
数値も保存できます。
let age = 20;
console.log(age);
やってみよう！
自分の名前と年齢を変数に入れて表示してみましょう。
四則演算
JavaScriptは計算も得意です。
let a = 10;
let b = 5;
console.log(a + b);
console.log(a - b);
console.log(a * b);
console.log(a / b);
やってみよう！
好きな数字に変更して、結果がどう変わるか試してみましょう。
if文
条件によって処理を変えることができます。
let score = 80;
if (score >= 60) {
console.log("合格");
}
条件に当てはまらなかった場合は、else を使います。
if (score >= 60) {
console.log("合格");
} else {
console.log("不合格");
}
やってみよう！
score を50に変更すると、どう表示されるでしょうか。
for文
同じ処理を繰り返すことができます。
for (let i = 1; i <= 5; i++) {
console.log(i);
}
やってみよう！
1から10まで表示するように変更してみましょう。
関数
処理をひとまとめにできます。
function add(a, b) {
return a + b;
}
console.log(add(3, 5));
結果は
8
と表示されます。
やってみよう！
引数を変更して、好きな計算を試してみましょう。
HTMLとJavaScriptを連携してみよう
ここまでConsoleへの出力だけでしたが、今度は画面を操作してみます。
index.html を次のように変更してください。
<button onclick="hello()">
ボタンを押す
</button>
script.js
function hello() {
alert("こんにちは！");
}
ボタンを押すと、ダイアログが表示されます。
JavaScriptがHTMLと連携して動いていることが分かります。
入力した値を取得してみよう
index.html
<input id="name">
<button onclick="showName()">
表示
</button>
script.js
function showName() {
const name = document.getElementById("name").value;
alert(name);
}
入力した文字がそのまま表示されます。
ここまでできれば、「画面から入力を受け取り、処理を実行する」というWebアプリケーションの基本を体験できています。
Consoleを使ってデバッグしよう
プログラムは、一度で正しく動くとは限りません。
そんなときに役立つのが Console です。
例えば、
let score = 80;
console.log(score);
と書くと、変数の中身を確認できます。
では、次のコードを実行してみてください。
console.log(message);
Consoleには赤いエラーメッセージが表示されます。
例えば、
ReferenceError: message is not defined
というエラーです。
これは、
「messageという変数は存在しません」
という意味です。
エラーが表示されたら、次の3つを確認する習慣を付けましょう。
- エラーメッセージを読む
- エラーが発生した行番号を確認する
-
console.log()を使って変数の値を確認する
プログラムを書くことと同じくらい、「原因を調べる力」も大切です。
まとめ
今回は、JavaScriptの基本として、
- Hello World
- 変数
- 四則演算
- if文
- for文
- 関数
- HTMLとの連携
- Consoleを使ったデバッグ
を学びました。
これだけでも、プログラミングの基本的な考え方を一通り体験できています。
次回予告
次回の応用編では、今回学んだ知識を組み合わせて、簡単なWebアプリケーションを作成します。
一つひとつの知識を組み合わせることで、「プログラムを作る楽しさ」を体験していきましょう。