JavaScript / 基本構文編
ここでは、JavaScript の基本的な構文について学びます。 次回で、DOM を学び、いままで学んできた HTML, CSS を JavaScript を使って操作できるようにします。
今回の目標は、「JavaScript で前期修了要件を判定する関数をかける」ようになることです。 そのために、
- JS のデータ型を使って、必要なデータを表現できる
- JS のデータ型と制御構文を使って、データを操作できる
という二点を説明します。
1. 実行方法
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript Sample</title>
<script src="script.js" defer></script>
<meta charset="UTF-8">
</head>
<body>
<h1>JavaScript Sample</h1>
<p>This is a sample page for JavaScript.</p>
</body>
</html>
// script.js
console.log("Hello, JavaScript!");
この HTML ファイルをブラウザで開くと、script.js という JavaScript ファイルが読み込まれ、実行されます。
2. 変数宣言
// 変数の宣言
let x = 10; // 変数xを宣言し、値10を代入
x = 10; // 変数xに値10を再代入
const y = 20; // 定数yを宣言し、値20を代入
3. 基本的なデータ型
const str = "Hello, World!"; // 文字列
const num = 42; // 数値
const bool = true; // 真偽値
const arr = [1, 2, 3]; // 配列
const obj = { key: "value" }; // オブジェクト
const nullValue = null; // null
const undefinedValue = undefined; // undefined
配列やオブジェクトへのアクセスは、以下のように行います。
// 配列へのアクセス
const arr = [1, 2, 3];
console.log(arr[0]); // 1
// オブジェクトへのアクセス
const obj = { key: "value" };
console.log(obj.key); // "value"
// ネストされたオブジェクトへのアクセス
const nestedObj = {
outer: {
inner: "value",
innerArray: [1, 2, 3]
}
};
console.log(nestedObj.outer.inner); // "value"
console.log(nestedObj.outer.innerArray[0]); // 1
// ネストされた配列へのアクセス
const nestedArr = [
{
inner: "value",
innerArray: [1, 2, 3]
},
{
inner: "another value",
innerArray: [4, 5, 6]
}
];
console.log(nestedArr[0].inner); // "value"
console.log(nestedArr[0].innerArray[0]); // 1
// データに関する操作
// 文字列
const str1 = "Hello";
const str2 = "World";
console.log(str.length); // 文字列の長さ
console.log(str1 + " " + str2); // 文字列の結合
console.log(`${str1} ${str2}`); // テンプレートリテラル, バッククオーテーションと ${} を使う
console.log(str1.includes("Hello")); // 文字列に特定の文字列が含まれているかチェック、真偽値を返す
// 配列
const arr = [1, 2, 3];
console.log(arr.length); // 配列の長さ
console.log(arr.push(4)); // 配列に要素を追加
arr[0] = 10; // 配列の要素を変更
// オブジェクト
const obj = { key: "value" };
obj.key = "new value"; // オブジェクトのプロパティを変更
4. 課題1
以下は YouTube のデータを表す JavaScript オブジェクトです。このデータを使って、 以下のデータを console に出力するプログラムを作成してください。
- 動画のタイトル
- 動画の視聴回数
- 動画のチャンネル ID
- 動画のサムネイル画像の URL どれか一つ
const data = {
"id": "GQCCfYahliA",
"title": "【 #にじマイクラ占領戦 】聖地占領戦 初日 主催視点【Minecraft】",
"actualEndTime": "2025-05-20T16:07:49.000Z",
"actualStartTime": "2025-05-20T08:32:39.000Z",
"viewCount": "588405",
"likeCount": "12609",
"durationSecond": 27318,
"channelId": "UC-6rZgmxZSIbq786j3RD5ow",
"eventId": "cmbaqov9f0001lucyhzpbo3ks",
"createdAt": "2025-05-30T12:06:46.375Z",
"updatedAt": "2025-05-30T12:06:46.375Z",
"channel": {
"id": "UC-6rZgmxZSIbq786j3RD5ow",
"name": "レオス・ヴィンセント / Leos.Vincent【にじさんじ】",
"createdAt": "2025-05-29T16:04:24.834Z",
"updatedAt": "2025-05-29T16:04:24.834Z"
},
"thumbnails": [
{
"url": "https://i.ytimg.com/vi/GQCCfYahliA/default.jpg",
"type": "DEFAULT",
"width": 120,
"height": 90,
"videoId": "GQCCfYahliA"
},
{
"url": "https://i.ytimg.com/vi/GQCCfYahliA/mqdefault.jpg",
"type": "MEDIUM",
"width": 320,
"height": 180,
"videoId": "GQCCfYahliA"
},
{
"url": "https://i.ytimg.com/vi/GQCCfYahliA/hqdefault.jpg",
"type": "HIGH",
"width": 480,
"height": 360,
"videoId": "GQCCfYahliA"
},
{
"url": "https://i.ytimg.com/vi/GQCCfYahliA/sddefault.jpg",
"type": "STANDARD",
"width": 640,
"height": 480,
"videoId": "GQCCfYahliA"
},
{
"url": "https://i.ytimg.com/vi/GQCCfYahliA/maxresdefault.jpg",
"type": "MAXRES",
"width": 1280,
"height": 720,
"videoId": "GQCCfYahliA"
}
],
"videoKeywords": [
{
"id": "cmbarcewe001p7jdpe0iujjlv",
"videoId": "GQCCfYahliA",
"keyword": "レオス・ヴィンセント"
},
{
"id": "cmbarcewe001q7jdpl120umb4",
"videoId": "GQCCfYahliA",
"keyword": "れおす"
},
{
"id": "cmbarcewe001r7jdp5h2yzrk1",
"videoId": "GQCCfYahliA",
"keyword": "leos"
},
{
"id": "cmbarcewe001s7jdp4flnfwxk",
"videoId": "GQCCfYahliA",
"keyword": "まめねこ"
},
{
"id": "cmbarcewe001t7jdpx3pp551u",
"videoId": "GQCCfYahliA",
"keyword": "mameneko"
},
{
"id": "cmbarcewe001u7jdpihdvgio6",
"videoId": "GQCCfYahliA",
"keyword": "nijisanji"
},
{
"id": "cmbarcewe001v7jdpk9hu7wjf",
"videoId": "GQCCfYahliA",
"keyword": "にじさんじ"
},
{
"id": "cmbarcewe001w7jdpuphjvadm",
"videoId": "GQCCfYahliA",
"keyword": "vtuber"
},
{
"id": "cmbarcewe001x7jdppes1pl71",
"videoId": "GQCCfYahliA",
"keyword": "アニメ"
},
{
"id": "cmbarcewe001y7jdpj7c3i5zl",
"videoId": "GQCCfYahliA",
"keyword": "にじマイクラ占領戦"
},
{
"id": "cmbarcewe001z7jdpiyn99mqm",
"videoId": "GQCCfYahliA",
"keyword": "マインクラフト"
},
{
"id": "cmbarcewe00207jdpuhu33ktm",
"videoId": "GQCCfYahliA",
"keyword": "Minecraft"
}
]
}
5. 課題2
シラバスデータを表す JavaScript オブジェクトの構造を考えてみてください。 データは適当な値で埋めてしまって構いません。
ただし、前期修了要件の判定に必要な情報を必ず含めてください。
6. 制御構文
// 条件分岐, if 文
const x = 10;
if (x > 5) {
console.log("x is greater than 5");
} else if (x > 0) {
console.log("x is greater than 0 but less than or equal to 5");
} else {
console.log("x is less than or equal to 0");
}
// 繰り返し, for 文, while 文
const arr = [1, 2, 3, 4, 5];
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
7. 課題3
課題1のデータを使って、以下の条件を満たすプログラムを作成してください。
- 動画タイトルに「マイクラ」が含まれていたら True と表示、含まれていないなら False と表示
- サムネイルの URL をすべて表示
- 最も width の大きいサムネイルの URL を表示
8. 関数
function add(a, b) {
return a + b; // 引数aとbを足して返す
}
const sum = (a, b) => {
return a + b; // こういう形でも書けるけど、今は覚えなくていい
}
const multiply = (a, b) => a * b; // アロー関数の省略形
function addAndMultiply(a, b) {
return add(a, b) + multiply(a, b); // add関数とmultiply関数を使って計算
}
const result = add(5, 3); // 関数を呼び出して、結果をresultに代入
console.log(result); // 8と表示される
console.log(multiply(5, 3)); // 15と表示される
9. 課題4
課題3 で作った処理のどれか一つを関数にしてみましょう
10. 課題5
課題2 で作ったシラバスデータを使って、前期修了要件を判定する関数を作成してください。
- 全ての科類に対応するのが望ましいですが、難しければ一つだけでもいいです
- テストデータを作るのが面倒くさい場合は、LLM に生成してもらうのもありです