はじめに
JavaScript編です！！ホームグラウンド！！帰ってきた！！
メモは基本少なくなるはず。ただclassは触れたことないのでそこかな？
メモず
変数 let と定数 const の違い
変更できるかどうか？
Progateの説明だと、「letは変更できて、constは変更できない」です。
さて、普通にコーディングするにあたっては、この理解である程度間違いないです。
特にRUNTEQではRuby中心になると思うので。
const はけっこう変更できる。
ただ、constは結構変更できます。
ざっくり言うと、「constの配列・オブジェクトの中身は変更可能」です。
信じてたのに裏切られた気分（JSのconstは変更可能←）
今月頭に書いた記事です。constでも変更可能な例が載っています。
なぜ？どんなとき？：プリミティブ型と参照型、let と const
なぜ？どんなとき？に変更可能なのか。それは、「プリミティブ型」と「参照型」、letとconstに分けるとわかりやすいです。
プリミティブ型
「言語によって設定されている、最初からあるデータ型」
「定義にほかのデータ型を用いない独立したデータ型」のことです。
例：整数型（int）、浮動小数点型（float）、文字型（char）、真偽型（boolean）など
参照型
「データがどこにあるか、どのくらいの長さ（length）あるか」を記録しています。
それ自身にはデータを保存せず、「リンク」を保存しているイメージです。
なお、「どこにあるか」というと、通常は「ここから」「ここまで」をイメージしますが、JSオブジェクトの場合は「ここから」のみを記録しています。
例：配列・オブジェクト
表で見てみる
繰り返しになりますが、ざっくり「constの配列・オブジェクトの中身は変更可能なんだな」と知っていただければ9割OKです。
| プリミティブ型 | 参照型 | ||
|---|---|---|---|
| let | 例 | 可能：let num = 1; num = 2
|
可能：let num_obj = {key: 1}; num_obj = {newKey = 2}
|
| 説明 | 自身の中身を変更できるため、変更できる。 | 自身の中身を変更できるため、どこにあるかを変更できる | |
| const | 例 | 不可能：const num = 1; num = 2
|
不可能：const num_obj = {key: 1}; num_obj = {newKey: 2} 可能： const num_obj2 = {key: 1}; num_obj2.key = 2可能： const num_obj3 = {key: 1}; num_obj3.newkey = 2
|
| 説明 | 自身の中身を変更できないため、変更できない。 | 自身の中身は変更できないため、どこにあるか（完全な入れ替え）は変更できない。 ただし、参照先での変更は防げない。また、プロパティの追加・削除も |
イミュータブル教の方へ
もし、関数型プログラミングなどに熱心で、「完全なイミュータブルにしたい！」というイミュータブラーな方がいれば、以下をお読みください。
JSで完全なイミュータブルは難しいが、知っておくとよいこと
`と'と"
それぞれ
`：バッククオーテーション
'：シングルクオーテーション
"：ダブルクオーテーション
忘れがちなので。
class Class_name {}：クラスの宣言
const instance_name = new Class()：インスタンス生成
constructor() {}：コンストラクタ
class Class {
constructor(name) {
this.name = name;
this.class = "class";
}
greet() {
console.log("Hello");
}
}
thisで自身のプロパティを設定していく。
class new_Class extends parent_Class {}：継承
super()：オーバーライド
インポート / エクスポート
export default name;
エクスポートは関数・オブジェクト（クラスを含む）・プリミティブ値など、基本的になんでも可能。
default以外：名前付きエクスポート
宣言時にエクスポートも書く
// module.js
// 関数のエクスポート
export function myFunction() {
// 関数の内容
}
// 変数のエクスポート
export const myVariable = 123;
// クラスのエクスポート
export class MyClass {
constructor() {
// クラスの構造
}
}
あるいは、下部でまとめてエクスポート
// 関数の宣言
function myFunction1() {
// 関数の内容
}
function myFunction2() {
// 関数の内容
}
// 下部で関数をまとめてエクスポート
export { myFunction1, myFunction2 };
インポート
// 別のファイル
import { myFunction, myVariable, MyClass } from './module.js';
myFunction(); // 関数の使用
console.log(myVariable); // 変数の使用
const myClassInstance = new MyClass(); // クラスのインスタンス化
export defaultと名前付きエクスポートの比較
インポート時
defaultは一意のため、インポート時にどんな名前をつけても構わない
//export.js
const add = (x, y) => {return x + y}
export default add
//import.js
import calc from "./export"
calc(2, 3) // return 5
一方、名前付きエクスポートはas文で任意の名前を付けることができる
//export.js
const add = (x, y) => {return x + y}
export {add}
//import.js
import {add as calc} from "./export"
calc(2, 3) // return 5
そのほか
１ファイル１エクスポートなら、defaultを使用するのが適している。
また、どの機能が主要かを表すのにもdefaultが適している。
一方で、「名前を一致させないとインポートできない」名前付きエクスポートは、その点でむしろ明示的にインポートできるといえる。また、複数の要素をエクスポートする場合は、当然名前付きエクスポートを使用しなければならない。
再エクスポート
他のモジュールからエクスポートされた要素を、異なるモジュールから再度エクスポートすることも可能。
import name from "./filepath";
./filepathの.jsは省略可能
終わりに
さすがにホームグラウンドなんで、一番早く終わりましたね。
ちょっと疲れましたw 知ってることの確認をしながら、ひたすら手を動かした感じ。 ちゃんと`;`を打ち続けたのは何年振りか・・・・・・w 次はSQL！とりあえずProgateはいったん終わるのかな？ どうせなので、他のProgateカリキュラムも触ってみたい所存。Progate JSやってて思うこと（愚痴消化）
— たま / RUNTEQ53A (@SamuraiStats) January 16, 2024
・let numberなんて書かない（let num）
・ ; をつけ忘れても基本補完してくれる。必要なところは自分で書くし。
・手打ちならもっと短い変数名にしてくれ！！！それか補完機能つけてくれ！！！タイピングゲームになってる！！！