JavaScriptとは？ 変数,if,switch　4日目　2024/10/10（お金持ちまでの道のり）

本日はJavaScriptの変数,if,switchなどについてです。なんとか三日坊主にならずに済みました。今日も頑張ります。

JavaScriptとは？

ウェブページを動かすためのプログラム言語です。例えば、ボタンをクリックすると動く、計算を自動で行うなどの機能を作ることができます。

JavaScriptでは、「変数」と「条件分岐」を使って、動きをコントロールします。最初は、この2つを簡単に説明します。

---

変数って何？

変数は、データを保存するための「箱」のようなものです。たとえば、名前や年齢を覚えるために使います。

例：（ここでは、変数＝myName、変数「myName」の中に保存されている値が「たろう」）

ここで、myName という名前の箱を作り、その中に「たろう」という名前を入れています。
※let は、JavaScriptで変数を宣言するためのキーワードです。変数とは、データを一時的に保存しておく「箱」のようなものだと思ってください。let を使うと、その「箱」にデータを入れて、後でそのデータを使ったり、変更したりすることができます。
※let 変数名：この変数は名称を自由に決められます。（予約語は使えない、組み込み関数は避ける、数字では始めない、$や_以外の特殊文字は使えない）

---

条件分岐って何？

条件分岐は、「もし～なら」とか「もし～じゃなかったら」という場合分けをする仕組みです。例えば、名前が「たろう」なら「こんにちは、たろう！」と表示し、それ以外なら「こんにちは、ゲスト！」と表示します。

例：

このコードでは、もし myName が「たろう」なら「こんにちは、たろう！」と表示され、そうでなければ「こんにちは、ゲスト！」が表示されます。
※見やすいようにNは大文字になっているが小文字でも構わない。最初のｍは小文字の方が良い。変数名は小文字から、クラス名は大文字で始めることが多い。
※クラスはオブジェクトを作成するための設計図のようなもの、のちのち出てくるのでここでは割愛

自分の名前の部分に「たろう」と入力すれば「こんにちは、たろう！」、それ以外の名前を入力すれば「こんにちは、ゲスト！」のコンソール画面に表示される。
※F12で表示されるコンソール画面は開発者専用、ユーザー（閲覧者）は見ることができない

HTML内にJavaScriptを記述するとき

JavaScriptコードを必ず <script></script> タグの中に書きます。

「=」について

=（1つ）: これは「代入」を意味します。右側の値を左側の変数に代入するために使います。

• 例：let myName = "たろう"; → myName に「たろう」という値を代入します。

===（3つ）: これは「厳密な比較」です。データ型も含めて、左側と右側が「完全に同じか」を確認します。

• 例：if (myName === "たろう") → myName が文字列「たろう」と厳密に一致しているかをチェックします。

==（2つ）: これは「緩やかな比較」です。データ型が異なる場合でも、JavaScriptが自動的に型変換して比較を行います。ただし、=== が推奨されることが多いです。

• 例：5 == "5" → この場合、数字の 5 と文字列の "5" は同じと見なされます（型変換されます）。

※「=」の前後にあるスペースは必須ではない。見やすくするためにスペースがあるだけ。

文字列を表す方法

''（シングルクォーテーション） と ""（ダブルクォーテーション） のどちらでもOK。CSSでも同様。

「//」と「/* */」の違い（JavaScriptとCSSでの違い）

JavaScriptでは、// で1行コメント、/* */は複数行のコメントに使います。１行コメントで/* */は不可。
※CSSでは１行コメントでも複数行コメントでも/* */を使います。

{} の意味（JavaScriptとCSSでの違い）

JavaScriptでは、処理のブロックや複数のコードをグループ化するために {} を使います。if や for などの条件やループ文、または関数で使います。

CSSでは、スタイルルールの塊を囲むために {} を使います。例えば、どの要素にどんなスタイルを適用するかを定義するために使います。☆

console.logの意味

console.log は、JavaScriptでデバッグや確認のために使うとても便利な機能です。簡単に言うと、プログラムの中での情報や結果を「表示」するためのコマンドです。

console.log() を使うと、ブラウザの「コンソール」という場所にテキストや値を表示できます。プログラムが正しく動いているか確認したり、変数の値をチェックしたりするために使います。

閲覧者はこのコンソールに表示される「こんにちは、たろう！」を見ることはできません。F12で確認できるコンソール情報を見ることで、開発者がコードが機能しているかどうかを確認します。開発者が途中の計算結果が合っているか確認したい場合、画面に表示するのは閲覧者にとっては不要な情報です。

※〇〇にたろうと入力すれば「こんにちは、たろう！」、それ以外だと「こんにちは、ゲスト！」となる。開発者だけがコンソール画面でこの結果を確認できる。

JavaScriptの条件分岐を深める

既に if 文を使った条件分岐を少し触れているので、条件分岐をさらに深く理解しましょう。if 文に加えて、else if を使った複数の条件処理や、switch 文も学んでおくと良いです。

else if：複数の条件を設定する

①～⑤を埋めていく感じです。例がこちら↓

「let score = 〇」の数字を90以上にすると「優秀！」、70以上で「良い成績！」、70未満で「もっと頑張りましょう！」とコンソール画面に表示されます。

条件が増えたらこんな感じ↓（else if 文を追加するだけ）

switch：複数の条件分岐をシンプルに書く

次に学ぶのは**switch 文**です。switch 文は、複数の条件分岐をシンプルに書くための構文です。1つの変数が特定の値に等しいかをチェックする場合、switch 文はコードがシンプルで見やすくなります。特に、選択肢が多い場合は、switch が適しています。

●switch 文の基本構文

例：switch 文の使い方

・let
ここでは、変数がfruit、その変数の中に保存されている値がバナナです。

・let fruit = "バナナ";
バナナの部分を変更するとコンソール画面に表示される文章が変わります。

・switch (〇〇) {△△}
〇〇の部分にはチェックしたい変数（fruit）が入っています。

・case 〇〇： ～ break;
〇〇の部分に入れた値が、変数の値と一致するかどうかを処理します。ここでは変数の値がバナナなので、"バナナは黄色いです。" がコンソールに表示されます。

※変数〇〇の値が、りんご、バナナ、みかん の場合、同じ処理（「この果物は甘いです」）が実行されます。↑↑

・breakのおまけ

・default:

default は、どの case にも当てはまらない場合に実行される処理を指定します（else のような役割）。

JavaScriptの主な組み込み関数や予約語

主な組み込み関数

alert()

• 画面にポップアップメッセージを表示します。
• 例：alert("こんにちは！");

console.log()

• コンソールにメッセージを出力します。
• 例：console.log("デバッグ用のメッセージ");

parseInt()

• 文字列を整数に変換します。
• 例：let number = parseInt("123"); console.log(number); // 123

parseFloat()

• 文字列を浮動小数点数に変換します。
• 例：let number = parseFloat("123.45"); console.log(number); // 123.45

isNaN()

• 引数が数値でない場合にtrueを返します。
• 例：console.log(isNaN("123abc")); // true

setTimeout()

• 指定した時間（ミリ秒後）に関数を1回だけ実行します。
• 例：setTimeout(function() { console.log("3秒後に実行されます"); }, 3000);

setInterval()

• 指定した時間（ミリ秒ごと）に関数を繰り返し実行します。
• 例：setInterval(function() { console.log("毎秒実行されます"); }, 1000);

Math.random()

• 0以上1未満のランダムな数値を返します。
• 例：let randomNum = Math.random(); console.log(randomNum); // 例: 0.72634

Math.floor()

• 数値の小数点以下を切り捨てます。
• 例：let rounded = Math.floor(4.9); console.log(rounded); // 4

Date()

• 現在の日時を取得します。
• 例：let now = new Date(); console.log(now);

主な予約語（キーワード）

1. var
   • 変数を宣言します。
   • 例：var name = "太郎";
2. let
   • ブロック内でスコープが限定される変数を宣言します。
   • 例：let age = 25;
3. const
   • 定数を宣言します。再代入はできません。
   • 例：const pi = 3.14159;
4. if
   • 条件分岐を行います。
   • 例：if (age > 18) { console.log("成人です"); }
5. else
   • if文の条件が成り立たない場合の処理を定義します。
   • 例：if (age > 18) { console.log("成人です"); } else { console.log("未成年です"); }
6. for
   • ループ処理を行います。
   • 例：for (let i = 0; i < 5; i++) { console.log(i); }
7. while
   • 条件が真の間、ループ処理を行います。
   • 例：let i = 0; while (i < 5) { console.log(i); i++; }
8. return
   • 関数の処理結果を返します。
   • 例：function add(a, b) { return a + b; }
9. function
   • 関数を定義します。
   • 例：function greet() { console.log("こんにちは！"); }
10. class
    • クラスを定義します。
    • 例：class Person { constructor(name, age) { this.name = name; this.age = age; } }
11. try
    • 例外が発生しうるコードを記述します。
    • 例：try { throw new Error("エラー発生！"); } catch (e) { console.log(e.message); }
12. catch
    • tryブロック内で発生したエラーをキャッチします。
    • 例：try { throw new Error("エラー発生！"); } catch (e) { console.log(e.message); }
13. break
    • ループ処理を途中で終了します。
    • 例：for (let i = 0; i < 10; i++) { if (i === 5) { break; } console.log(i); }
14. continue
    • ループの次の反復にスキップします。
    • 例：for (let i = 0; i < 5; i++) { if (i === 2) { continue; } console.log(i); }

本日の感想

Javascriptになってから難易度が上がった気がします。本当に大丈夫か不安。。。でもできなかったことができるようになることはうれしいし、なんか面白い未来が待っていそうな気がしなくもないような気がします。学習内容の目次を作らないと復習に手間取るので近いうちに作ります。ということで私と一緒に１からプログラミングを学びませんか？