Rei

Webエンジニアに転職するための勉強中。1995年生まれ、HappinessChain在籍。気軽に話しかけてください！

[Rei @diff_penguin]

学習メモ📝
「オプショナルチェイニング（JavaScript）」

?. を使うと、途中が null / undefined でもエラーにならず undefined を返す

例）
user?.name
→ userが存在すればname、なければundefined

user?.profile?.age
→ ネストも安全
(従来：user && user.profile && user.profile.age)

[Rei @diff_penguin]

プログラミング学習メモ📝
「React Context」

Contextを作る
const MyContext = createContext()

値を配��
<MyContext.Provider value={{ user: "Taro" }}> <App /> </MyContext.Provider>

値を利用
const { user } = useContext(MyContext)

[Rei @diff_penguin]

プログラミング学習メモ📝
「React：URLパラメータとクエリパラメータ」

👉 URLパラメータ
基本は、対象そのものを識別するのに使う
→ 記事番号、ユーザーID、商品IDなど

👉 クエリパラメータ
基本は、対象の見せ方・表示条件を指定するのに使う
→ 並び順、ページ番号、フィルター、件数など

[Rei @diff_penguin]

プログラミング学習メモ📝
「早期リターン (early return)」

処理を続ける必要がない条件を満たしたら、すぐ return
👉 ネストが浅くなり、読みやすく、バグも防げる。

例）
function onClick(a) {
if (a === null) return; ← すぐ抜ける
// ここから先は「nullでないとき」だけ実行
}

#学習メモ

[Rei @diff_penguin]

📝学習メモ
「stateのリフトアップ(React)」

複数の子からデータを集めたい
or 子同士で通信・共有したいと思ったとき...
→ 親に state をまとめて持たせて、子には props 経由で値や更新関数を渡すのがよい
👉 親子や子同士の状態が同期され、バグを防ぎやすくなる

[Rei @diff_penguin]

プログラミング学習メモ📝
「Reactで子コンポーネントの無駄な再描画を防ぐ」

memo() → 子をラップで props が変わらない限り再描画されない
useCallback() → 親が再描画されても、同じ関数をそのまま渡せる（毎回作り直さない）

👉 セットで使うと「親の更新で子が���回描画される」問題を防げる

[Rei @diff_penguin]

プログラミング学習メモ📝
「JavaScriptのexport」

【defaultエクスポート】
1ファイル1つだけ / import 時 {} 不要 / 自由に別名OK
👉export default foo
👉import X from "./mod"

【名前付きエクスポート】
複数OK / import 時 {} 必須 / 名前一致が基本（リネーム可）
👉export foo / export {foo, hoge}
👉import { foo as bar } from "./mod"

#JavaScript #学習メモ

[Rei @diff_penguin]

プログラミング学習メモ📝
「Reactの再レンダリング条件」

1️⃣ State更新 → そのコンポーネントが再render
2️⃣ Props更新 → 受け取った子が再render
3️⃣ Context更新 → 使っている全コンポーネントが再render
4️⃣ 親の再レンダリング → 子も再render
5️⃣ 強制レンダリング

#React #学習メモ

[Rei @diff_penguin]

プログラミング学習メモ📝
「短絡評価（JavaScript）」
|| 左が truthy なら左、falsy なら右を返す
&& 左が falsy なら左、truthy なら右を返す
👉左だけで結果が決まるなら右は評価しない

例）
“A” || “B” → “A”
“” || “B” → “B”
0 && “B” → 0
“A” && “B” → “B”
#JavaScript #学習メモ

[Rei @diff_penguin]

プログラミング学習メモ📝
「truthy と falsy（JavaScript）」
👉 JSでは値を真偽値に暗黙変換できる

falsyな値:
false, 0, -0, 0n, "", null, undefined, NaN
truthyな値:
それ以外はすべて

例）
if ("") { … } // 実行されない（falsy）

#JavaScript #学習メモ

[Rei @diff_penguin]

プログラミング学習メモ📝
「filterのindex（JavaScript）」

👉 filterのコールバックは (value, index) を受け取れる
（例）
const arr = [“a”,“b”,“c”]
arr.filter((v, i) => i % 2 === 0)
// [“a”,“c”]（偶数番目だけ残す）

#JavaScript #学習メモ

[Rei @diff_penguin]

プログラミング学習メモ📝
「mapのindex（JavaScript）」

👉 mapのコールバックは (value, index) を受け取れる
(例)
const arr = [“a”,“b”,“c”]
https://t.co/wf97oKbK7N((v, i) => ${i}:${v})
// [“0:a”,“1:b”,“2:c”]

#JavaScript #学習メモ

[Rei @diff_penguin]

プログラミング学習メモ📝
「スプレッド構文とレスト構文（JavaScript）」

👉 スプレッド（…）= 配列やオブジェクトを展開する
const arr1 = [1,2]
const arr2 = […arr1, 3] // [1,2,3]

👉 レスト（…）= 残りをまとめる
const [a, …rest] = [1,2,3]
// a=1, rest=[2,3]

const {x, …others} = {x:1,y:2,z:3}
// x=1, others={y:2,z:3}

#JavaScript #学習メモ

[Rei @diff_penguin]

プログラミング学習メモ📝
「オブジェクトの省略記法（JavaScript）」

👉 変数名とプロパティ名が同じなら、キーを省略できる

例）
const name = "Taro", age = 20;
const user = { name, age };

// 実際は { name: “Taro”, age: 20 } と同じ

#JavaScript #学習メモ

[Rei @diff_penguin]

プログラミング学習メモ📝
「分割代入と初期値（JavaScript）」

👉 初期値なしの変数は undefined
👉 初期値を指定しておけば、その値が使われる

例）
const [a, b = 2, c] = [10];
→ a=10, b=2, c=undefined

const {x, y = 5, z} = {x: 1};
→ x=1, y=5, z=undefined

#JavaScript #学習メモ