JavaScript ローカル＆グローバル変数,無名＆アロー関数　9日目　2024/10/15（お金持ちまでの道のり）

今日からスピードアップです！よろしくお願いします！

JavaScript ローカル＆グローバル変数など

5. ローカル変数＆グローバル変数とスコープ

ローカル変数とは

ローカル変数は、関数の内部で宣言された変数のことです。この変数は、関数が実行されている間だけ存在し、関数の外からはアクセスできません。
※{ }の中にある変数がローカル変数

スコープとは

スコープは、変数や関数が「どこで使えるか」を決める範囲のことです。ローカル変数のスコープは、宣言された関数の内部だけに限定されます。→{ }内だけ
※スコープには、グローバルスコープ、ローカルスコープ、ブロックスコープがある

※greet(); は正常に機能し、"Hello!" が表示されます。
※console.log(message); はエラーが発生します。message という変数は関数内でのみ使えるため、関数の外で console.log(message); を使おうとするとエラーが発生します。（messageという変数はgreet関数の中で宣言されています。したがって、messageは関数の外側では使えないのです。）

グローバル変数とは

グローバル変数は、関数の外側で宣言された変数のことで、プログラム全体でアクセスできるという特徴があります。どこからでも使用できるため便利ですが、スコープが広い分、誤って他のコードで上書きされるリスクがあります。

※showGlobal(); は正常に機能し、"I am global!" が表示されます。
※console.log(globalVar); も正常に機能します。（関数の中でもconsole. logを使って確認が行われているため、この最後の行のconsole.log(globalVar);はいらない。確認をするならどちらか一方で十分）

6. 無名関数

無名関数（匿名関数）とは、名前がない関数のことです。無名関数は、主に関数を一時的に使いたい場合や、他の関数の引数として渡す際に利用されます。

※ふつうはfunction 〇〇()のように〇〇という関数の名前を付けるが、〇〇の部分がないものを無名関数と呼ぶ

無名関数の代わりにローカル変数のみを使ってコードを書き換える

無名関数の代わりにグローバル変数のみを使ってコードを書き換える

コールバック関数（現時点で学ぶべき点だけをサラッと）

コールバック関数とは、他の関数に引数として渡され、後で実行される関数のことです。コールバック関数は、特定のタイミングや条件が満たされたときに実行されるように設定されます。

このコードの流れ：

1. setTimeout：一定時間が経過した後に指定した関数を実行するための関数です。
2. コールバック関数：無名関数（function() { ... }）がコールバック関数として setTimeout に渡され、3秒後に実行されます。（※1000ミリ秒 = 1秒 なので、3000 は 3秒 に相当）
3. 処理：3秒後に console.log("3秒後に表示される無名関数のメッセージ"); が実行され、メッセージが表示されます。

7. アロー関数

アロー関数は、短く簡潔に関数を定義できる方法です。ES6（ECMAScript 2015）で導入され、特に無名関数を定義する際に使われることが多いです。

基本的な書き方：

let greet = (name) => {
  console.log(`こんにちは、${name}さん！`);  
};
greet("太郎");  // "こんにちは、太郎さん！" と表示される

具体例：

通常の無名関数→アロー関数

例１：

↓

※functionがあると => は使えません。function()の()内の引数が１つだけの時は()を省略できます。引数が０、もしくは２つ以上の時は省略できません。今回は引数が０なので省略できません。

例２：

↓

※let add = (a, b) => a + b; は、アロー関数の短縮形です。このコードでは、引数を受け取り、1行の処理で結果を返すときに省略して書けます。
※アロー関数における {} と return の省略が可能になるのは、 アロー関数の処理が1行で、その1行が返り値（return）を必要とする場合のみです。

例３：

let greet = function(name) {
  console.log(`こんにちは、${name}さん！`);  
};
greet("太郎");  // "こんにちは、太郎さん！" と表示される

↓

let greet = name => {
  console.log(`こんにちは、${name}さん！`);  
};
greet("太郎");  // "こんにちは、太郎さん！" と表示される

こんにちは、${name}さん！ はテンプレートリテラルという形式の文字列です。テンプレートリテラルは、${} の中に変数を埋め込むことができる特殊な文字列です。

アロー関数の特徴：

8. 関数の応用（複数の引数、デフォルト引数）

複数の引数（Multiple Arguments）

function multiply(a, b) {
  return a * b;  // a と b の掛け算の結果を返す
}

console.log(multiply(3, 4));  // 12 と表示される

デフォルト引数（Default Arguments）

function greet(name = "ゲスト") {
  console.log(`こんにちは、${name}さん！`);
}

greet();  // "こんにちは、ゲストさん！" と表示される（引数がないのでデフォルト値が使われる）
greet("太郎");  // "こんにちは、太郎さん！" と表示される（引数があるのでそれが使われる）

もし if 文で書くとしたら？

function greet(name) {
  if (name === undefined) {
    name = "ゲスト";  // 引数が渡されなかった場合に "ゲスト" を代入
  }
  console.log(`こんにちは、${name}さん！`);
}

greet();  // "こんにちは、ゲストさん！"
greet("太郎");  // "こんにちは、太郎さん！"

複数の引数とデフォルト引数の組み合わせ

複数の引数を使う場合、一部の引数にデフォルト値を設定することも可能です。

function calculatePrice(price, taxRate = 0.1) {
  return price + (price * taxRate);
}

console.log(calculatePrice(100));  // 110 と表示される（デフォルトの税率 0.1 が使われる）
console.log(calculatePrice(100, 0.2));  // 120 と表示される（税率 0.2 が使われる）

前回よりも多いJavaScriptの組み込み関数や予約語

組み込み関数（前回より多い）

1. データ型に関する組み込み関数

JavaScriptには、データ型を操作するための組み込み関数があります。これらは特定のデータ型に対して便利な操作を行うものです。

• String関連の関数：
  • charAt(), concat(), includes(), indexOf(), slice(), split(), toLowerCase(), toUpperCase()
• Number関連の関数：
  • toFixed(), toPrecision(), parseInt(), parseFloat(), isNaN()
• Array関連の関数：
  • push(), pop(), shift(), unshift(), slice(), splice(), concat(), map(), filter(), reduce(), forEach()

2. 数学関連の組み込み関数 (Mathオブジェクト)

Mathオブジェクトには、数学的な計算を行う組み込み関数が多くあります。これらは、特定の数値操作を効率的に行うために提供されています。

• Mathオブジェクトの関数：
  • Math.random(): 0以上1未満のランダムな数値を返す
  • Math.floor(): 小数点以下を切り捨てる
  • Math.ceil(): 小数点以下を切り上げる
  • Math.round(): 四捨五入する
  • Math.max(): 引数の中で最大の数値を返す
  • Math.min(): 引数の中で最小の数値を返す
  • Math.sqrt(): 平方根を計算する

3. 日付関連の組み込み関数 (Dateオブジェクト)

Dateオブジェクトには、日時を扱うための組み込み関数が多くあります。これにより、日時の取得や操作が可能になります。

• Dateオブジェクトの関数：
  • new Date(): 現在の日付と時刻を取得
  • getFullYear(): 年を取得
  • getMonth(): 月を取得
  • getDate(): 日付を取得
  • getHours(): 時刻を取得
  • getMinutes(): 分を取得

4. グローバル関数

グローバル関数は、どこでも呼び出すことができる汎用的な関数です。これらの関数は、特定のオブジェクトに属しておらず、常に利用可能です。

• グローバル関数の例：
  • alert(): メッセージをポップアップで表示する
  • console.log(): コンソールにメッセージを表示する
  • parseInt(): 文字列を整数に変換する
  • parseFloat(): 文字列を浮動小数点数に変換する
  • isNaN(): 引数が数値ではない場合にtrueを返す
  • setTimeout(): 指定時間後に関数を実行
  • setInterval(): 一定間隔で関数を繰り返し実行する

5. オブジェクト操作の組み込み関数

JavaScriptには、オブジェクトを操作するための便利な組み込み関数もあります。

• オブジェクト関連の関数：
  • Object.keys(): オブジェクトのキーの一覧を取得する
  • Object.values(): オブジェクトの値の一覧を取得する
  • Object.entries(): キーと値のペアを配列として取得する
  • Object.assign(): オブジェクトを他のオブジェクトにコピーする
  • Object.freeze(): オブジェクトを凍結し変更不可にする

6. JSONに関する組み込み関数

JavaScriptには、JSON（JavaScript Object Notation）を操作するための組み込み関数も用意されています。

• JSON関連の関数：
  • JSON.stringify(): オブジェクトをJSON形式の文字列に変換する
  • JSON.parse(): JSON形式の文字列をJavaScriptのオブジェクトに変換する

7. エラーハンドリングに関する関数

JavaScriptでは、エラーハンドリングに関連する組み込み関数や構文も提供されています。

• try-catch文：エラーハンドリングのための構文。
  • throw：ユーザー定義のエラーを発生させる
  • try, catch, finally：エラーハンドリングを行う

---

組み込み関数の総数

JavaScriptの組み込み関数の総数は正確には特定の状況や環境によって異なることがありますが、数十種類以上あります。特に、ブラウザやNode.jsなどの実行環境によって、追加される機能や関数もあるため、その環境に依存することもあります。

予約語（前回より多い）

制御構文や条件分岐に関連する予約語

• if：条件が真であればブロックを実行
• else：ifの条件が偽であればブロックを実行
• switch：複数の値を比較して分岐
• case：switch内で値を指定
• default：switch内で他のcaseに一致しない場合の処理
• for：ループを実行
• while：条件が真の間ループを実行
• do：whileと一緒に使い、条件にかかわらず少なくとも1度は実行
• break：ループやswitchから抜ける
• continue：ループの次の反復にスキップ
• return：関数から値を返す
• try：例外が発生する可能性のあるコードを実行
• catch：tryで発生したエラーをキャッチ
• finally：エラーの有無にかかわらず実行されるコードブロック

変数・定数の宣言に関する予約語

• var：変数を宣言（古い方法）
• let：ブロックスコープの変数を宣言
• const：定数を宣言

関数・クラスに関する予約語

• function：関数を定義
• class：クラスを定義
• extends：クラスを継承
• constructor：クラスのコンストラクタメソッド
• super：親クラスのコンストラクタやメソッドを呼び出す
• new：オブジェクトを生成

オブジェクトやプロパティに関する予約語

• this：現在のオブジェクトを参照
• delete：オブジェクトのプロパティを削除
• in：オブジェクト内にプロパティが存在するか確認
• instanceof：オブジェクトが特定のクラスのインスタンスか確認
• typeof：変数や式のデータ型を返す
• void：式の値を無視

その他の予約語

• null：値が存在しないことを示す
• undefined：定義されていない変数の状態
• true：ブール値の真
• false：ブール値の偽
• import：モジュールをインポートする
• export：モジュールをエクスポートする
• await：非同期処理が完了するのを待つ
• async：非同期関数を定義
• yield：ジェネレータ関数内で値を一時停止・再開
• with：オブジェクトのスコープを拡張（非推奨）

将来の予約語

以下のキーワードは、将来のJavaScriptのバージョンで予約語として使用される可能性があります。

• enum
• implements
• interface
• package
• private
• protected
• public
• static

本日の感想

まだまだ序盤のはずなのに情報量が多くてパンクしそうです。そのことをChatGPTに相談したら、「あなたの目標である収入を得ながら自由に生活するためには、プログラミングを実用的に使うスキルが重要です。つまり、全てを暗記するよりも、効率的に学び、ツールを使っていく力をつけることが優先されます。そのため、学んだことの応用力を高め、問題が起きた時にどう対処するかに注力すると良いでしょう。また、コードを完全に暗記しなくても、基礎を理解し、検索能力やツールを使うスキルがあれば、問題なく目標に向かって進めると考えます。」とアドバイスをしてくれました。勉強も教えてくれるしアドバイスもしてくれるしで至れり尽くせりです。これからもよろしくGPT先生。