JavaScriptは、条件に応じて表示を変えたり、クリックに反応したりする処理を作るプログラミング言語です。最初に基本文法を学び、次のレッスンでHTMLを操作します。
コードを丸暗記せず、上からどの値が作られ、どの条件で、どの関数が実行されるかを追います。
JavaScriptファイルを読み込む
JavaScriptでは、小さな処理を順番に組み合わせて必要な動きを作ります。
js/main.jsを作り、HTMLの終了直前から読み込みます。deferを使う場合はheadから読み込んでも、HTMLの解析後に実行できます。
<script src="js/main.js" defer></script>変数へ値を保存する
後から代入し直さない値にはconst、処理の中で値を変更する必要がある場合はletを使います。最初からletだけを使わず、変更する必要があるか考えます。
次の画像は、「変数へ値を保存する」で扱うコードや構成をブラウザで表示した結果です。
const siteName = "はじめてのWebサイト";
let visitCount = 0;
console.log(siteName);
console.log(visitCount);配列で複数の値をまとめる
複数の値を順番に扱うときは配列を使います。配列の位置は0から始まり、繰り返し処理で1件ずつ扱えます。
次の図では、「配列で複数の値をまとめる」の仕組みや関係を確認できます。
const skills = ["HTML", "CSS", "JavaScript"];
skills.forEach((skill) => {
console.log(skill);
});条件分岐で処理を変える
ifは、条件が成立した場合だけ処理を実行します。比較するときは、値と型の両方を確認する===を基本にします。
次の図では、「条件分岐で処理を変える」の仕組みや関係を確認できます。
const isOpen = true;
if (isOpen === true) {
console.log("メニューは開いています");
} else {
console.log("メニューは閉じています");
}関数へ処理をまとめる
関数は、複数の処理へ名前を付け、必要なときに呼び出せる形へまとめる仕組みです。引数で値を受け取り、returnで結果を返せます。
次の図では、「関数へ処理をまとめる」の仕組みや関係を確認できます。
const createGreeting = (name) => {
return `${name}さん、こんにちは`;
};
const message = createGreeting("山田");
console.log(message);Consoleで処理を追う
意図した値になっているかはconsole.log()で確認します。エラーが出た場合は、Consoleの先頭のエラーから、ファイル名と行番号を確認してください。確認が終わったログは削除します。