ut.code(); 学習カリキュラム #5

環境構築

今回のカリキュラムは、前回の続きで Vultr の VPS 上で

curl -fsSL https://raw.githubusercontent.com/chelproc/utcode-lectures-setup/master/lamp-on-docker/init.sh | sh

が実行されていることを前提としています。すでに実施済みの方は再度実行する必要はありません。

JavaScript から始める異世界プログラミング

HTML と CSS を使用することで、Web サイトの構造やデザインができることが分かりました。ここからは Web サイトに動きをつけるための方法について学習していきます。まずは、index.html の内容を以下の通りにしてください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>Hello World</title>
</head>
<body>
    <script>
        document.write("Hello World!");
    </script>
</body>
</html>

画面に Hello World!と表示されたでしょうか。おめでとうございます！これであなたはブラウザ上でプログラムを動作させることに成功しました！

script タグは、記述された場所でJavaScriptと呼ばれるプログラミング言語で書かれたスクリプトを動作させるためのタグです。JavaScript は、言語仕様の簡単さと柔軟性、そして開発環境の充実さから、非常に人気のある言語です。トレンドの変化が非常に早く、インターネット上には古い情報も未だに存在しているので、調べ物をするときは記事の投稿日を必ず確認しましょう。

上記の例では、JavaScript を直接 HTML ファイル内に記述しましたが、CSS と同じく、実際には可読性の観点から HTML ファイルと JavaScript ファイルは分離しておくことが一般的です。

script.js ファイルを index.html と同じディレクトリに作成し、以下のように書き換えましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>Hello World</title>
</head>
<body>
    <script src="script.js"></script>
</body>
</html>

document.write("Hello World!");

先ほどと同じ実行結果が得られました。

JavaScript の基本構文

注: 以下、JavaScript 以外でのプログラミングの学習経験があることが前提となっています。

変数宣言

const variable1 = 12345; // 後から変更しない値
let variable2 = "Hello"; // 後から変更する値

変数宣言には可能な限り const を使用しましょう。実際の場面で let が必要になる場合はほとんどないはずです。

配列（リスト）

const fruits = ["apple", "banana", "lemon"];
document.write(fruits.length); // リストの長さの取得
fruits.push("melon"); // リストの末尾に要素を追加
fruits.slice(2, 4); // リストの2番目～(4 - 1)番目の要素を切り出し

JavaScript の配列はリストです。自由に内容を増やしたり減らしたりできます。

テンプレートリテラル

const name = "田中";
const age = 18;
document.write(`私の名前は${name}です。${age}歳です。`);

テンプレートリテラル（文字列をバッククォート「‘」で囲むと、内部の ${式} の部分が式の結果に置き換えられます。

if 文

if (20 <= age) {
  document.write("ようこそ！オトナの世界へ！");
} else if (18 <= age && age < 20) {
  document.write("もう少し...");
} else {
  document.write("子供は寝る時間ですよ。");
}

ごく一般的に見かける文法です。Python に慣れている人は条件式にカッコが必要であることに注意しましょう。

while 文

while (remaining > 0) {
  document.write("まだですよ");
  remaining--;
}

こちらも一般的な文法通りです。「--」はデクリメント演算子と呼ばれ、付けた変数の値を１減らす効果を持ちます。正反対の「１加える」という機能を持つインクリメント演算子「++」も存在します。

for 文

for (let i = 0; i < students.length; i++) {
  document.write(students[i]);
}

JavaScript の for 文は Java や C 系統の言語と同じ形式です。かっこの中にはセミコロン（;）で区切られた３つの文が並んでいます。この文は

let i = 0;
while (i < students.length) {
  document.write(students[i]);
  i++;
}

と（大体）等価です。

配列の列挙

配列の様に、列挙可能な値を列挙するためには、for ... of 構文を使用します。これは、他の多くの言語における foreach 文と同等です。

const numbers = [1, 3, 6, 8];
let sum = 0;
for (const number of numbers) {
    sum += number;
}
document.write(sum);

関数の定義

function add(a, b) {
  return a + b;
}
document.write(add(1, 2));

課題

2 ～ 100 までの数値のうち、素数のみを選んで表示するプログラムを作成してください。

ヒント

Python で複雑な文法を使わずに実装するとすれば以下のような感じでしょうか。

for i in range(2, 100 + 1):
    isPrime = True
    for j in range(2, i):
        if i % j == 0:
            isPrime = False
            break
    if isPrime:
        print(i)

for 文の書き方が異なるので注意が必要ですね。