ゼロから学ぶ ウェブ開発-スタータードキュメント
JavaScript篇

・はじめに
ベーシックレベル講座へようこそ！
ここではJavaScriptについて基礎的な部分を学んでいく場所になります。前提条件としては、vsコードとブラウザの開発者ツールの使い方とHTML/CSSがスタンダードレベルまでわかっている状態から始まります。
JavaScript講座は、ベーシックレベル、スタンダードレベルは必修とし、応用はハイレベル講座から扱っていきます。

・JavaScriptとは？

JavaScript（ジャバスクリプト）は、ウェブページに動きやインタラクティブ性（双方向性）を与えるためのプログラミング言語です。単に文字や画像を表示するだけでなく、ボタンをクリックしたときのアニメーション、入力フォームのチェック、地図の表示、ゲームなど、様々な動的な表現をウェブページ上で実現できます。

JavaScriptはHTMLと違い、スクリプト言語という属性を持っており、RubyやPythonと並ぶ言語です。そのため、HTMLのような基礎構文などはなく、上から順に実行したいコードを書き込むだけで実行できます。他言語同様に計算処理や条件分岐ができる他、HTMLのサイトに変化を加えることができる言語です。
また、WEB上で動作する言語であるため、簡易的かつすぐに学習を始められる言語です。

・基本操作

ここではプログラムのコードの仕様について説明していきます。これは全てのプログラミング言語に共通する内容です。

順次進行：これはHTMLなどのプログラミング言語に問わず、文章を書く場面でも自然とやっていることです。
順次進行とは上から順にプログラムのコードが実行されることです。これは人間が文章を読むときと同じです。

条件分岐：条件分岐は、一定の条件を満たす場合にのみ実行し、満たさない場合は実行しないか、満たさない場合の処理を実行します。
例えば：蕎麦アレルギーのAさんが居ます。Aさんはこのとき空腹です。Aさんに蕎麦を出しました。このときAさんは食べることができません。理由としてはAさんは蕎麦アレルギーだからです。条件分岐とはこういうことで、条件を満たす満たさないで結果を分けることを指します。

反復処理：反復処理は言い換えればループです。一定の条件を満たす場合、もしくは満たしていない場合、あるいは無条件で一定の処理を繰り返すことを指します。
使用例：洗濯機では 洗い、すすぎ、脱水を繰り返します。

・JavaScriptを実行する準備

JavaScriptは JavaScriptとは？>> というところで解説した通り、主にWEB上（HTML）で動作します。つまり実行する上ではHTMLにJavaScriptを読み込ませる必要があるわけです。
読み込ませる際には HTML スタンダードレベル hrefとsrc>> にて出てきた<script>タグに書き込みます。ファイルはここの講座では外部に作成しますので、<script src="ディレクトリパス">を使います。
データベース構築やディレクトリパスの書き方は HTML スタンダードレベル ファイル内の移動を命令>> をご参照ください。
これでHTMLにJavaScriptを読み込ませることができます。

・処理情報を出力

まずはプログラミングにおける基礎中の基礎、情報の出力をやります。
有名なものでは「Hello World!」というテキストを出力します。テキストであれば何でも良いので適当に自分の好きな言葉を書き込んでください。

console.log(出力内容);

JavaScriptの特徴としては、実行する命令の文末には「;」セミコロンを付けます。
この情報の出力ではこの後出てくる変数や定数の情報の出力も行うことができます。
今回はテキストを出力するので、console.log(出力内容);の出力内容のところに"出力したいテキスト"としてあげます。
テキストを出力する際は、"ダブルクォーテーション か、'シングルクォーテーションでテキストを囲ってあげる必要があります。

console.log("水原一平");

それではプログラムを実行してみましょう

・プログラムの実行

しつこいようですが、このJavaScriptはHTMLに読み込ませています。つまり、ブラウザでHTMLファイルを開けばJavaScriptも実行されるというわけです。
（以下画像）HTMLファイルを開きました。しかし画面には何も表示されていません。

そう、先程紹介したconsole.log(出力内容);というのはプログラムの情報を出力するだけであり、HTMLには何の変化もありません。
HTMLに変化を与えるコードはスタンダードレベルから扱っていきます。
ではコードの情報はどこで見れるのか？

そこで使うのが スタータードキュメント ブラウザの開発者ツールの使い方>> で出てきた開発者ツールです。
このツールはHTMLのコードの検索やHTML/CSSの装飾の一時的な修正を行う他に、JavaScriptの実行状況の確認やエラーの検出、に役立ちます。
console.log(出力内容);はプログラムが正常に実行されてるのかどうか、確認する際などに使われるものです。最初のうちは処理の流れを自分で確認できるようにconsole.log(出力内容);をプログラムの中に書き込んで流れを確認していきましょう。

話を戻します。書いたJavaScriptはHTMLに読み込ませているのでブラウザの開発者ツールから実行します。まずは実行したいJavaScriptを読み込ませたHTMLファイルをブラウザで開きます。この状態では上記画像のように、何も起きません。そこでF12を押して開発者ツールを開きます。するとHTMLのソースコードなどが出てきます。

開発者ツールを開いたら、コンソール と書かれた項目をクリックします。

そうすると、console.log();に書き込んだテキストが出力されているはずです。

・変数の定義

ここではJavaScriptでの変数の定義を行っていきます。変数とは数学にも出てきた通り、式内にある文字を指し、そこに値を入れることで、式の計算結果を関数のグラフのように変化させることができるものでした。

プログラミングにおける変数も同じ意味です。
事前に変数を定義しておいて、プログラム内に定義した変数名を書き込みます。そうすれば、いちいち値を入力しなくとも、変数内の情報を書き換えるだけでコードを変化させることができます。
それでは実際に書いてみましょう。

let 変数名 = 値;

このように書きます。
変数には、値の他にテキストなどの文字を入れることも可能です。文字を変数内に入れる場合は 情報の出力>> でやったようにクォーテーションマークで囲ってあげる必要があります。
試しに以下のようなプログラムを書きます。

let ippei = 60;
// 変数を実行する際は console.log();に直接変数名を書き込む
console.log(ippei);

このプログラムを実行します。再起定義した変数「ippei」をコンソールログで読み込んでいいるので、結果は60が表示されるはずです。

変数は数学でもやったように値を変化させることができます。つまり上書きができるということです。
上書きをする際は定義した変数名 = 別の値;を書くだけです。

let ippei = 60;
ippei = 40; // 既存の変数を書き換えるので let は付けない。
console.log(ippei);

間違ってもletを付けないようにしましょう。
実行してみます。

ちゃんと40に置き換わっています。

これが変数の定義及び変数の上書きです。

・定数の定義

ここでは変数の定義に引き継いで定数を扱っていきいます。定数とは値が変化することなく、常時一定に保たれることを差します。
つまり変数で習った上書きをすることができません。どのような場面で使うのかと言うと、物理演算などで、斜面を描画する際必要になる角度など、固定する情報などに使われます。
書き方は変数で使ったletをconstに置き換えるだけです。

const ippei = 60;
console.log(ippei);

・配列の定義

ここでは配列について扱っていきます。
配列とは複数の変数を一列にまとめることができるものです。例えば

let name1 = "今井";
let name2 = "佐藤";
let name3 = "鈴木";

let 配列名 = ["インデックス0", "インデックス1", "インデックス2"];

let name = ["今井", "佐藤", "鈴木"];
console.log(name);

let name = ["今井", "佐藤", "鈴木"];
console.log(name[1]);

・関係演算子

ここでは関係演算子について扱っていきます。関係演算子とは数学に出てきた四則演算と大なり 小なり 以上 以下 等価 などの比較演算子をひっくるめて関係演算子といいます。

・条件分岐

ここでは条件分岐を扱っていきます。条件分岐では 関係演算子>> を頻繁に使います。
条件分岐とは、プログラムの実行中に、ある条件が満たされているかどうかを判断し、その結果に応じて異なる処理を実行する仕組みのことです。これは、プログラムの流れを制御し、状況に応じて適切な処理を行うために不可欠な要素です。

条件分岐の基本的な考え方
条件分岐は、「もし〜ならば、〜する。そうでなければ、〜する。」という形式で表現されることが多いです。これは、日常生活における判断とよく似ています。例えば、「もし雨が降っていれば、傘を持っていく。そうでなければ、傘は持っていかない。」という判断は、条件分岐の一例と言えます。

中学英語で「if」や「else」について習ったかと思います。

if ( 条件式 ) {
    // ここに条件を満たす場合の実行内容を書く
} else {
    // ここには満たさない場合の実行内容（必要ない場合はelseは書かない）
}

まず条件式、ここには実行を行う条件を書き込みます。条件式なので　例えば：「もし、変数xが18より大きければ実行」、「満たさない場合はこういう処理を行う」みたいな感じで書きます。
特に関係演算子で出てきた比較演算子を頻繁に使います。他にもtrueやfalseを使ったりもします。

今回は一例として、「もし、水原一平が60億以上持っていたら（逮捕！）それ未満である場合は（まだバレてない）」と表示するプログラムを書きます。

let ippei = 40;
if ( ippei >= 60 ) {
    console.log("逮捕！");
} else {
    console.log("まだバレてない");
}

今回は変数ippei に40を入れているのでelse 内に書き込んだまだバレてないが実行されるはずです。

let day = "月", "火", "水", "木", "金", "土", "日";
if ( day[7] == "日" ) {
    console.log("日曜日です！");
} else {
    console.log("平日です。");
}

let day = ["月", "火", "水", "木", "金", "土", "日"];
if ( day[6] <= 6 ) {
    console.log("日曜日です！");
} else {
    console.log("平日です。");
}

let day = ["月", "火", "水", "木", "金", "土", "日"];
if ( day[6] == "日" ) {
    console.log("日曜日です！");
} else {
    console.log("平日です。");
}

let day = ["月", "火", "水", "木", "金", "土", "日"];
if ( day[6] = "日" ) {
    console.log("日曜日です！");
} else {
    console.log("平日です。");
}

・反復処理

ここでは反復処理を扱っていきます。
反復処理とは一定の条件下において処理を繰り返し行うことを差します。
条件式の書き方は条件分岐のときと同じように比較演算子などを用いて書きます。
特にここで出てくるtrueやfalseは処理が成功した場合にtrue、そうでない場合にfalseとして実行するトリガーがあります。

while ( 条件式 ) {
    // 反復させる実行内容
}

反復処理を書く際に注意することは無限ループを防ぐことです。
何故かと言うと、無限ループした場合、PCの処理が追いつかなくなり、クラッシュしてしまう可能性があるからです。
なのでwhile ( 条件式 ) {}でループを行う場合は、条件式で事前に対策をするか、実行内容の部分にウェイトの処理（入力待ち やプログラムの一時停止）や処理を中断するbreak;を書き入れる必要があります。

今回は条件式で５回ループするコードを書きます。

let c = 0; // カウントに伴い条件式を構成する変数
while ( c < 5 ) { // 変数cが5より小さければループ実行
    console.log(c); // ループに合わせて変数cがどう変化するのか表示する
    c ++; // 実行するたびに１を足す
}

実行するたびに１を足すc ++;は 代入演算子>> に出てきたものです。こう書くことで、プログラムをよりシンプルにすることができます。
それではこのコードを実行してみましょう。
このコードでは変数cに１を足す前に情報出力の命令を書いているので、結果は「０，１，２，３，４」と表示されるはずです。

反復処理は配列と組み合わせることもできます。ただ、配列の個数と同じ数ループさせるのにいちいち、条件式を書き換えるのはめんどくさい、そこでここでは配列の個数を数える語を使います。

let inoki = ["いーち", "にーい", "さーん", "ダー！"]; // 配列 inoki
let c = 0; // カウントに伴い条件式を構成する変数
while ( c < inoki.length ) { // 変数cが配列inokiの個数より小さければループ実行
    console.log(inoki[c]); // ループに合わせて変数cがどう変化するのか表示する
    c ++; // 実行するたびに１を足す
}

プログラムの流れを説明すると、まずループ前に配列inokiとカウント用の変数cが定義されます。
そうしたらループに入ります。
条件式はまず変数cの情報を入手します。その次に条件の記号、そしてinoki.lengthでlengthの部分が書き入れられた配列名の配列の個数を数えます。（配列inokiの個数は４つ）
そして情報の出力です。
今回は配列のインデックス０の情報も出力したいので、c ++; の前にコードを書きます。このときの変数cの値は０です。そして情報の出力ではinoki[c]となっている。そう、つまり変数cの値は配列の指定するインデックス番号に代入されます。そのため、ループするごとに配列の情報が一つづつ取り出されます。

これが配列と反復処理の応用です。この書き方はHTMLの操作を行う際に多用するため、覚えておいてください。

・関数の定義

プログラムにおける関数とは数学同様に変数に値を代入することでデータを書き換えていくものです。
簡単な覚え方は 複数のプログラムの処理をまとめて、実行したい箇所で呼び出せるもの です。
関数の実行宣言をかけないことには、関数内のプログラムが実行されることはありません。
これをうまく使えば、何度も同じような処理を書く際に、いちいちコピペしなくても、関数名を書くだけで実行できるようになります。

書き方

const 関数名 = (引数) => {
    // 実行内容
} 

// 関数内のプログラムを実行
実行したい関数の関数名(引数);

ここで 引数 という言葉が何度も出てきました。引数というのは必要に応じて書くものなので、いらない場合は条件分岐の else と同じように書く必要はありません。
プログラミングにおける「引数」とは、関数やメソッドに渡す値のことです。関数は特定の処理を実行するためのブロックであり、その処理を行う際に必要なデータを引数として受け取ります。

例えば、複数回同じプログラムを実行する上で、ここの部分だけは別の結果にしたいと言う時、関数に引数名を指定して、関数内プログラムの書き換えたい部分に引数名を入れます。
そして実行の際、実行したい関数の関数名(引数);のところで変化させる内容を、関数呼び出しの（引数）に書き入れれば、関数内プログラムの書き換えたい部分全てにその変更内容が適応されます。

let ippei = 60;
const nihei = (Ohotanis_Bank) => {
    if (ippei > Ohotanis_Bank){
        console.log("逮捕！");
    } else {
        console.log("まだバレてない");
    }
}

nihei(6);

このプログラムは、まず変数 ippei に数値 60 を代入するところから始まります。この変数は、後で条件判定に使用されます。

次に、nihei という名前の関数が定義されています。この関数は1つの引数を受け取り、引数の値を ippei と比較します。関数内では、ippei の値が引数よりも大きい場合に「逮捕！」というメッセージをコンソールに出力し、そうでない場合には「まだバレてない」というメッセージを出力する仕組みです。

最後に、この nihei 関数を引数に数値 6 を指定して呼び出しています。このとき、引数には6が代入されるため、関数内で ippei (60) と引数 (6) が比較されます。条件式 ippei > Ohotanis_Bank を評価すると、60 > 6 となり、この条件は成立します。そのため、コンソールには「逮捕！」と表示されます。

プログラムの実行結果として、「逮捕！」というメッセージが出力され、処理が終了します。

引数は用途に応じて使うものです。不要な場合は括弧の中に何も書き入れないようにしましょう。

・配列に処理のブロックを作る

ここでは配列に処理のブロックを作成する方法を教えします。
配列内に作る処理のブロックとは関数と違い、特別な命令を与えずにデータのまとまりを作るというものです。
ただの配列とどう違うのか？

今回は両方とも配列をconstで定義します。

// 通常の配列
const 配列名 = ["インデックス0", "インデックス1", "インデックス2", "インデックス3"]

// 処理のブロックの例
const 配列名 = [
    {
            name:"水原一平",
            loan:"24億",
    },
    {
            name:"水原ニ平",
            loan:"60億",
    },
]

データのブロックを配列に作ることで、配列内にある、特定の情報だけを取り出すことができます。
例えば Mizuharaという配列を作成して、インデックス０の24億だけを取り出すには

// 処理のブロックの例
const Mizuhara = [
    {
            name:"水原一平",
            loan:"24億",
    },
    {
            name:"水原ニ平",
            loan:"60億",
    },
]

console.log(Mizuhara[0].loan)

console.log(Mizuhara[0].loan)で、まず、配列のインデックス番号を指定します。ここでのインデックスは波括弧で囲われているかたまりです。
配列のインデックス番号を取り出せたら、次に取り出したいデータのカテゴリを選択します。今回は 借金額 を取り出したいので、loanを付けます。

ここでデータのカテゴリについてですが、loanやnameなどはHTMLにつける id や classと同じで自由にわかりやすい名前をつけることができます。

それでは実行してみましょう。結果は24億と表示されるはずです。

・ドキュメントの操作について

スタンダードレベル講座へようこそ！
ここではHTMLを操作するJavaScriptのコードを扱っていきます。
JavaScriptでできるHTMLのドキュメント操作では、テキストの書き換え や ボタン操作の認識、ページのスクロールの認識、ダイアログウィンドウの表示………などやれることはほぼ無限大です。

ですが全てを紹介するのは難しいいので、ここではWEBアプリ開発からゲーム開発まで汎用的に使えるコードを紹介します。

・ドキュメント操作の基礎

HTMLドキュメントを操作する際は、まず操作したいHTML要素を取得する必要があります。
取得するとJavaScriptで処理を書いた時、HTMLに反映されるようになります。
JavaScriptでHTMLドキュメントを取得する場合、HTMLタグにはid="id名"のセレクタ―をつける必要があります。このセレクターがあることで、特定のHTML要素を取得し、操作することができるようになります。

HTML要素をJavaScriptにインポートするコード

document.getElementById("取得したいHTML要素のid名");

これでドキュメントを取得することができます。
命令を書く際には、document.getElementById("id名")の後に続いて.を付け、HTMLに加える変化を書きます。

// 今回はHTML内のテキストを書き換える場合
document.getElementById("id名").textContent = "テキスト";

しかし何度もHTMLに変化を与える際、毎回ドキュメントの取得を定義するのは面倒くさいです。なので一般的には 変数 に情報を書き込みます。こうすれば変数名に続いて.を書き、任意のHTML操作プロパティを与えるだけでHTMLに変化を与えることができます。

// 変数名は a0 と定義する。（自分がわかりゃ なんでもいい）
let a0 = document.getElementById("id名");
a0.textContent = "テキスト";

これがドキュメントの取得を定義するコードと、HTMLを操作するプロパティの書き方でした。
次の章から、実際にHTMLのコードをベースに書き換えていきます。

・HTMLの文章を書き換える

ここではHTMLの文章の書き換えを行います。 ドキュメント操作の基礎>> でも出てきた
.textContent = "テキスト";です。

書き方等は既に説明済みなので、実際にHTMLに書き込んでいこうと思います。
HTML/css/javascriptのコードを以下に書きます。

<-- HTMLのコード -->
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>JavaScript講座</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class="soushoku">
        <h1>目標：ボタンを押した際に、以下のテキストを書き換える</h1>
        <button>テキスト書き換えボタン</button>
        <p id="t0">ここのテキストを書き換える。</p>
    </div>
</body>
<script src="./script.js"></script>
</html>

/* cssのコード */
.soushoku {
    background-color: aqua;
    padding: 2%;
    color: blue;
    border-radius: 10px;
}
.soushoku h1 {
    font-weight: 100;
}

// ここからJavaScript
let a0 = document.getElementById("t0");
a0.textContent = "文字は頂いた　by 怪盗JS";

今回は<p>の中の文字を書き換えたいと思います。（HTML内のボタンタグなどは後ほど使います。）
なのでIDタグでt0というセレクタ―を付けました。

ひとまずコードはできたので、一旦HTMLとCSSだけを実行します。上記のコードをコピペした場合は以下の画像のような結果が得られるはずです。

それではJavaScriptを有効化してみましょう。実行結果は「文字は頂いた　by 怪盗JS」と表示されるはずです。

これがテキストの書き換えです。

・HTMLの要素を追加する

JavaScriptからはHTMLの要素を追加することもできます。
使うDOM操作プロパティは.innerHTML = "追加したいHTML要素"です。
実際に使っている場面を見てみましょう

// HTMLとCSSはそのまま
// 今回は大見出しに当たる<h1>で文字を囲む
let a0 = document.getElementById("t0");
a0.innerHTML = "<h1>文字は頂いた　by 怪盗JS</h1>";

それではコードを実行してみましょう。結果は前のテキスト書き換えで、書き換えた部分の文字が大見出しになります。

・イベントの作成

JavaScriptではユーザーのアクションでHTMLに変化を加えたり、JavaScript内のプログラムを操作したりできます。　ここで紹介するのはその中の、アクションで実行するイベント作成のプログラムの書き方です。

イベントとは、ユーザーが行う操作（クリック、マウスオーバー、キー入力など）や、Webページの読み込み完了など、Webページで起こる様々な出来事のことです。
そして、そのイベントが発生した時に特定の処理を実行するための仕組みが「イベントリスナー」です。そのイベントリスナーを設定するために使用するのが .addEventListener() です。

どうやって書くのか

HTML要素.addEventListener("アクションの種類", ()=> {
        // ここにHTML要素に起きたアクションに応じて実行する処理内容
});

以下 例

document.getElementById("id名").addEventListener("アクションの種類", ()=> {
        // ここにHTML要素に起きたアクションに応じて実行する処理内容
});

このアクションの実行には、関数が食い込まれており、const 関数名 = (引数) => {} と同じ(引数) => {}の部分が入っています。
括弧の中には関数同様に引数を指定することができ、必要に応じて設定できます。使わないときは空でOKです。

アクションの種類はえげつない量あります。

・アクションの種類

・アクションの例

今回は上記に書いた「怪盗JS」のコードを書き換えます。
クリックした際に、テキストを「クリックした！怪盗JSは罠に引っかかってしまった」と表示するコードを書きます。

<-- HTMLのコード -->
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>JavaScript講座</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class="soushoku">
        <h1>目標：ボタンを押した際に、以下のテキストを書き換える</h1>
        <button id="bt">テキスト書き換えボタン</button>
        <p id="t0">ここのテキストを書き換える。</p>
    </div>
</body>
<script src="./script.js"></script>
</html>

/* cssのコード */
.soushoku {
    background-color: aqua;
    padding: 2%;
    color: blue;
    border-radius: 10px;
}
.soushoku h1 {
    font-weight: 100;
}

// ここからJavaScript
document.getElementById("bt").addEventListener("click", ()=> {
    document.getElementById("t0").textContent = "クリックした！怪盗JSは罠に引っかかってしまった";
});

実行結果

・JavaScriptの文字を改行

例えばJavaScriptの.textContentでHTMLの文字を書き換えた場合、全てその文字は１行で表示されます。
しかし場合によっては改行が必要になるかもしれません。
ですが.textContentでは改行すると、コードが実行できなくなってしまいます。また、HTMLの<br>を使っても、改行タグは適応されずにそのまま表示されてしまいます。

ではどうするのか、そこで　CSS スタンダードレベル 8. JavaScriptの文字を改行>> に出てきたプロパティを使います。
まずはCSSのプロパティを書き加えます。

<-- HTMLのコード -->
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>JavaScript講座</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class="soushoku">
        <h1>目標：ボタンを押した際に、以下のテキストを書き換える</h1>
        <button id="bt">テキスト書き換えボタン</button>
        <p id="t0">ここのテキストを書き換える。</p>
    </div>
</body>
<script src="./script.js"></script>
</html>

JavaScriptで書き換えている箇所は<p id="t0">なので、そこをせレクターにwhite-space: pre;を書き入れ、スペースや改行を適応できるようにします。

/* cssのコード */
.soushoku {
    background-color: aqua;
    padding: 2%;
    color: blue;
    border-radius: 10px;
}
.soushoku h1 {
    font-weight: 100;
}
#t0 {
    white-space: pre;
}

したらここからJavaScriptです。今回は「クリックした！」の後を改行して表示します。JavaScriptで改行を宣言するには\nを書き入れます。そうすることで、CSSはこの\nを認識し、JavaScriptで書き換えるテキストを改行してくれます。

// ここからJavaScript
document.getElementById("bt").addEventListener("click", ()=> {
    document.getElementById("t0").textContent = "クリックした！怪盗JSは罠に引っかかってしまった";
});

これでJavaScriptでの改行宣言がCSSに認識され、HTML上には改行された書き換えテキストが表示されます。

・ハイレベルで習う内容

ハイレベル講座では、ここまで習ったプログラムを駆使して、数学ライブラリなどを使い 物理演算などを行っていきます。
数学ライブラリには、中学の数学に出てきたπ（コードでは𝑷𝑰）
高校数学Ⅰの三角比から登場する𝑠𝑖𝑛𝜃　𝑐𝑜𝑠𝜃　𝑡𝑎𝑛𝜃などがあります。

・HTML5 <canvas>に図形描画

ここではJavaScriptでHTML5より追加された<canvas>に図形を描画する方法を解説していきます。
<canvas>とはJavaScriptにおける関数グラフのようなもので、座標を指定して、図形を描画します。
<canvas>に出てくるグラフは数学に出てくるグラフと違い、x軸, y軸は同じであるものの、yは座標が大きくなればなるほど、<canvas>の表示領域の下の方に下がっていきます。

つまり、<canvas>に描画する際、座標を原点に指定すると、左上に描画されます。

・<canvas>に描画 準備

ここでは<canvas>に描画する準備を書いていきます。
まずはHTMLに<canvas>を作ります。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="ファビコンのファイル名" type="image/x-icon">
    <link rel="stylesheet" href="CSSのファイル名">
    <title>サイト名（ブラウザのタブに表示される）</title>
</head>
<body>
    <!-- ここにページの内容を書き込む -->
    <!-- 今回はidを「canva」とします。 -->
    <canvas id="canva"></canvas>
</body>
<script src="JavaScriptのファイル名"></script>
</html>

<canvas>を書き入れました。しかし、このままでは表示領域を定義していないので、JavaScriptで何か書き込んでも何も表示されません。
なのでcssのwidthとheightで幅と高さを定義します。
めんどくさかったらHTML内に

<canvas id="任意のid名" width="幅" height="高さ"></canvas>

と書き込んでもOKです。CSSを使わないにしても、<canvas>にid="任意のid名"は入れておいてください。

そうしたら JavaScriptを書き込んでいきます。まずはJavaScriptで<canvas>を取得します。
プログラムによっては複数回使うので、変数に入れておくことを推奨します。
私は だだくさな人間なので、変数は超テキトウに書きます。

let c0 = document.getElementById("canva");

次に、canvasに描画するため、宣言を入れます。今回は平面で描画するので2dと定義します

// canvasタグを取得
let c0 = document.getElementById("canva");
// canvasに2dで描画する宣言をする。
let c1 = c0.getContext("2d");

これでcanvasに描画することができます。

・<canvas>に四角形や円を描画

図形を描画する際は宣言をして描画します。

// canvasタグを取得
let c0 = document.getElementById("canvasタグに付けたid名");
// canvasに2dで描画する宣言をする。
let c1 = c0.getContext("2d");

// 描画宣言
c1.beginPath();

// ここに描画したい図形を定義する

// 描画終了宣言
c1.closePath();

四角形や円の描画を定義

// 四角形の描画
c1.rect(x座標, y座標, 幅, 高さ);

// 円の描画
c1.arc(x座標, y座標, 円の半径, 円の描画開始角度, Math.PI * 2, true);

Math.PI * 2は数学ライブラリの円周率で、半径を乗算して、円周の式𝐶 = 𝟤𝜋𝑟で外周を出します。
trueは描画角度から、どっち回りに描画するのか定義しています。

true：内回り
false：外回り

描画する図形だけでは何も始まらないので、以下の要素で描画した図形に色を塗ったり、枠線を描画します。

c1.fillStyle = "色"; // 塗りつぶしの色定義（色はカラーネームでも16進数でもOK）
c1.fill(); // 塗りつぶしの実行

c1.strokeStyle = "色"; // 枠線の色定義
c1.stroke(); // 枠線の描画実行

それでは<canvas>に描画 準備>> のHTMLを元に四角形を描画したいと思います。
中身は赤色で塗りつぶします

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="ファビコンのファイル名" type="image/x-icon">
    <link rel="stylesheet" href="CSSのファイル名">
    <title>サイト名（ブラウザのタブに表示される）</title>
</head>
<body>
    <!-- ここにページの内容を書き込む -->
    <!-- 今回はidを「canva」と、描画領域700✕400とします。 -->
    <canvas id="canva" width="700px" height="400px"></canvas>
</body>
<script src="JavaScriptのファイル名"></script>
</html>

次にJavaScriptです

// canvasタグを取得
let c0 = document.getElementById("canvasタグに付けたid名");
// canvasに2dで描画する宣言をする。
let c1 = c0.getContext("2d");

// 描画宣言
c1.beginPath();
c1.rect(200, 80, 100, 130); // 四角形描画
c1.fillStyle = "red"; // 塗りつぶしの色定義（色はカラーネームでも16進数でもOK）
c1.fill(); // 塗りつぶしの実行
c1.closePath(); // 描画終了宣言

実行すると以下のような表示になります（canvasの表示蝶域を明確にするために、cssのborderプロパティで要素を囲っています。）

この要領でいろんな図形を描画していきましょう。

・数学Ⅰ 三角比　24年冬休み課題

2024年の冬休み、大同高校の数学科担当の先生は、「三角比が実際に使われている場面を調査しレポートを作成せよ」という課題を出しました。
このページでは数学ライブラリ＋図形描画の知識を使って、斜辺を加速しながら下るボールの物理演算を作りたいと思います。　レポート作成の文献に是非♪（フルコピーはバレます。というかバラします。）

三角比というのはゲームなどでは多く使われています。物理演算もその例です。
物理演算以外では、キャラクターの移動などに使われます。

それではプログラムを書いていきます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="ファビコンのファイル名" type="image/x-icon">
    <link rel="stylesheet" href="CSSのファイル名">
    <title>サイト名（ブラウザのタブに表示される）</title>
</head>
<body>
    <!-- ここにページの内容を書き込む -->
    <!-- 今回はidを「canva」と、描画領域900✕550とします。 -->
    <canvas id="canva" width="900px" height="550px"></canvas>
</body>
<script src="JavaScriptのファイル名"></script>
</html>

HTMLは上記をそのまま書いてくれればOKです。
次にJavaScriptを書いていきます。
ここでは開始位置を変数に入れておきます。開始位置はx, y軸共にボールの半径と同じ大きさにします。理由は原点で描画する際、ボールの中心が当たり判定となるため、描画した円の右下以外が、キャンバスの表示領域外に描画されてしまうからです。
もう一つの理由は傾斜角度に合わせたボールの加速を計算する際に、変数で定義することで、簡単に計算式を立てることができるためです。

// canvasタグを取得
let c0 = document.getElementById("canva");
// canvasに2dで描画する宣言をする。
let c1 = c0.getContext("2d");

// canvasに2dで描画する宣言をする。
let x = 10;
let y = 10;

// 描画宣言
c1.beginPath();
c1.arc(x, y, 10, 0, Math.PI * 2, true);
c1.fillStyle = "red"; // 塗りつぶしの色定義（色はカラーネームでも16進数でもOK）
c1.fill(); // 塗りつぶしの実行
c1.closePath(); // 描画終了宣言

ひとまずこれでボールを描画します。
ここから斜辺を下るモーションを作っていきのですが、１フレームずつプログラムを書くのは非効率極まりないです。そこで使うのが 関数と 反復処理です。
ただここで使う反復処理は、通常と違い、setInterval(関数名, 値);を使います。
setInterval(関数名, 値);は、特定の関数を、指定した値の間隔で実行するもので、例えば値を20とすると、20ミリ秒ごとに指定した関数の処理が実行されます。
まずはボールの描画を関数でくくりましょう。今回、関数名はdとします。

// canvasタグを取得
let c0 = document.getElementById("canva");
// canvasに2dで描画する宣言をする。
let c1 = c0.getContext("2d");

// canvasに2dで描画する宣言をする。
let x = 10; // ボールの描画開始位置 x座標
let y = 10; // ボールの描画開始位置 y座標

const d = () => {
    // 描画宣言
    c1.beginPath();
    c1.arc(x, y, 10, 0, Math.PI * 2, true);
    c1.fillStyle = "red"; // 塗りつぶしの色定義（色はカラーネームでも16進数でもOK）
    c1.fill(); // 塗りつぶしの実行
    c1.closePath(); // 描画終了宣言
};
setInterval(d, 20); // 20ミリ秒ごとに関数内のコードを実行

これで一通りの準備が完了しました。
それでは斜辺を下るボールの速度を定義します。最初は速度0から始まります。
なので今回はspeedのイニシャルをとって、変数sと定義します。

// canvasタグを取得
let c0 = document.getElementById("canva");
// canvasに2dで描画する宣言をする。
let c1 = c0.getContext("2d");

// canvasに2dで描画する宣言をする。
let x = 10; // ボールの描画開始位置 x座標
let y = 10; // ボールの描画開始位置 y座標
let s = 0; // ボールの初期状態の速度

const d = () => {
    // 描画宣言
    c1.beginPath();
    c1.arc(x, y, 10, 0, Math.PI * 2, true);
    c1.fillStyle = "red"; // 塗りつぶしの色定義（色はカラーネームでも16進数でもOK）
    c1.fill(); // 塗りつぶしの実行
    c1.closePath(); // 描画終了宣言
};
setInterval(d, 20); // 20ミリ秒ごとに関数内のコードを実行

次に斜辺の角度を定義します。ここで使うのがMath.PIです。Math.PIは、円の描画の際に用いました今回は円の描画ではなく、角度の表現に使います。

何故数値を使わないのか、それは数学的な角度計算の際、三角比（sin, cos）のライブラリはすべてラジアンを入力として受け付けます。ラジアンは度（degree）とは異なり、角度を円周上の弧の長さとして表現する単位です。度数法を使う場合はラジアンに変換しなければなりません。そのため整数の度数を使わず、円の弧から求めています。

斜辺30°で描画する際は、円を6等分する。

それではラジアンを使って角度を定義します。

// canvasタグを取得
let c0 = document.getElementById("canva");
// canvasに2dで描画する宣言をする。
let c1 = c0.getContext("2d");

// canvasに2dで描画する宣言をする。
let x = 10; // ボールの描画開始位置 x座標
let y = 10; // ボールの描画開始位置 y座標
let s = 0; // ボールの初期状態の速度
const kakudo = Math.PI / 6; // 傾斜角度の定義（ラジアン）

const d = () => {
    // 描画宣言
    c1.beginPath();
    c1.arc(x, y, 10, 0, Math.PI * 2, true);
    c1.fillStyle = "red"; // 塗りつぶしの色定義（色はカラーネームでも16進数でもOK）
    c1.fill(); // 塗りつぶしの実行
    c1.closePath(); // 描画終了宣言
};
setInterval(d, 20); // 20ミリ秒ごとに関数内のコードを実行

そうしたら傾斜を下るプログラムを書きます。
傾斜を下る際、加速しながら下るようにし、定義する角度に合わせて、加速も変化するようにします。
HTML5 <canvas>に図形描画>> で<canvas>はx, y座標で図形を描画すると書きました。
傾斜を下るごとに、x, y座標を大きくします。ここで使うのが三角比の𝑠𝑖𝑛𝜃　𝑐𝑜𝑠𝜃　𝑡𝑎𝑛𝜃です。
今回使うのは𝑠𝑖𝑛𝜃　𝑐𝑜𝑠𝜃です。
𝑠𝑖𝑛𝜃は 垂辺/斜辺　𝑐𝑜𝑠𝜃は 底辺/斜辺 です。
斜辺はラジアンを元に定義しているので、定数kakudoを掛けると、分母の斜辺と約分で𝑠𝑖𝑛𝜃では垂辺、𝑐𝑜𝑠𝜃なら底辺が求まります。（数学ライブラリ𝑠𝑖𝑛𝜃　𝑐𝑜𝑠𝜃　𝑡𝑎𝑛𝜃は自動的に斜辺、垂辺を認識します。）
そして、斜辺を下る動きを作るには、x, y座標を少しずつ足す必要があります。
まず下る速度の定義として変数sを定義しました。ここの値を増やすほどに速度が上昇します。
斜辺に沿って、下に下がっていく、ということはcanvasタグのy座標が増えるということ。ここで使うのが垂辺です。
𝑠𝑖𝑛𝜃にラジアンの斜辺をかければ垂辺の移動が定義されます。これが関数内に書くことで、下に下るごとに変数sに値が加算されます。つまり下るにつれて加速していくということです。
そうしたらx, y座標を動かします。
x座標を動かすには𝑐𝑜𝑠𝜃にラジアンの斜辺を掛けて、底辺を出します。この要領でy座標が𝑠𝑖𝑛𝜃で斜辺を掛けて高さの値を出します。
これをsetIntervalで繰り返し足すことで、x, y座標を少しずつ斜辺に沿って下っていくモーションができます。

// canvasタグを取得
let c0 = document.getElementById("canva");
// canvasに2dで描画する宣言をする。
let c1 = c0.getContext("2d");

// canvasに2dで描画する宣言をする。
let x = 10; // ボールの描画開始位置 x座標
let y = 10; // ボールの描画開始位置 y座標
let s = 0; // ボールの初期状態の速度
const kakudo = Math.PI / 6; // 傾斜角度の定義（ラジアン）

const d = () => {
    // 描画宣言
    c1.beginPath();
    c1.arc(x, y, 10, 0, Math.PI * 2, true);
    c1.fillStyle = "red"; // 塗りつぶしの色定義（色はカラーネームでも16進数でもOK）
    c1.fill(); // 塗りつぶしの実行
    c1.closePath(); // 描画終了宣言

    s = s + Math.sin(kakudo); // 斜辺に沿って加速
    x = x + s * Math.cos(kakudo); // 底辺からx軸を出し、斜辺の速度と足す（加速される）
    y = y + s * Math.sin(kakudo); // 垂辺からy軸を出し、斜辺の速度と足す（加速される）
};
setInterval(d, 20); // 20ミリ秒ごとに関数内のコードを実行

こうすると徐々に加速していく様子が見えます。しかし、前に描画した円がそのままになっています。なので、描画するたびに、前に描画したオブジェクトを削除して、再び別座標に描画するようにします。

// canvasタグを取得
let c0 = document.getElementById("canva");
// canvasに2dで描画する宣言をする。
let c1 = c0.getContext("2d");

// canvasに2dで描画する宣言をする。
let x = 10; // ボールの描画開始位置 x座標
let y = 10; // ボールの描画開始位置 y座標
let s = 0; // ボールの初期状態の速度
const kakudo = Math.PI / 6; // 傾斜角度の定義（ラジアン）

const d = () => {
    c1.clearRect(0, 0, c0.width, c0.height); // 前に描画した図形を削除して再び描画

    // 描画宣言
    c1.beginPath();
    c1.arc(x, y, 10, 0, Math.PI * 2, true);
    c1.fillStyle = "red"; // 塗りつぶしの色定義（色はカラーネームでも16進数でもOK）
    c1.fill(); // 塗りつぶしの実行
    c1.closePath(); // 描画終了宣言

    s = s + Math.sin(kakudo); // 斜辺に沿って加速
    x = x + s * Math.cos(kakudo); // 底辺からx軸を出し、斜辺の速度と足す（加速される）
    y = y + s * Math.sin(kakudo); // 垂辺からy軸を出し、斜辺の速度と足す（加速される）
};
setInterval(d, 20); // 20ミリ秒ごとに関数内のコードを実行

このプログラムをデバッグすると以下のようなモーションができます。

補足：キャンバスの描画領域の限界に達した時、変数sの値を負の数にして、反動の衝撃吸収の分を足すと跳ね返りを表現できます。

// canvasタグを取得
let c0 = document.getElementById("canva");
// canvasに2dで描画する宣言をする。
let c1 = c0.getContext("2d");

// canvasに2dで描画する宣言をする。
let x = 10; // ボールの描画開始位置 x座標
let y = 10; // ボールの描画開始位置 y座標
let s = 0; // ボールの初期状態の速度
const kakudo = Math.PI / 6; // 傾斜角度の定義（ラジアン）

const d = () => {
    c1.clearRect(0, 0, c0.width, c0.height); // 前に描画した図形を削除して再び描画

    // 描画宣言
    c1.beginPath();
    c1.arc(x, y, 10, 0, Math.PI * 2, true);
    c1.fillStyle = "red"; // 塗りつぶしの色定義（色はカラーネームでも16進数でもOK）
    c1.fill(); // 塗りつぶしの実行
    c1.closePath(); // 描画終了宣言

    s = s + Math.sin(kakudo); // 斜辺に沿って加速
    x = x + s * Math.cos(kakudo); // 底辺からx軸を出し、斜辺の速度と足す（加速される）
    y = y + s * Math.sin(kakudo); // 垂辺からy軸を出し、斜辺の速度と足す（加速される）

    // キャンバスの描画領域の限界、もしくはx座標が0より小さくなった場合に実行
    if (x > c0.width || x < 0){
        s = -s + 6; // 左右の壁で反射
        // +6 はぶつかった際に吸収されるエネルギー値
    }
};
setInterval(d, 20); // 20ミリ秒ごとに関数内のコードを実行