KDE BLOG

web制作で学んだことを記していきます

JavaScript

【React】複数のProviderで1つのstoreを参照 & React+Reduxの実装基礎まとめ

今更ながらReduxをちゃんと学び始めて、ReactとReduxを連携した使い方がやっと分かってきました。 今回は少し特殊な例ですが、複数の Provider を使ってのコンポーネントの連携のやり方を紹介しつつ、サンプルを作りながらReact + Reduxの実装を振り返りたい…

【JavaScript】Promiseを使った非同期処理

Promiseについてきちんと理解できていなかったので初歩から学ぶ。 Promiseとは 使用できる環境 基本の構文 Promise.prototype.then() Promiseの状態変化 Promise.prototype.catch() catchメソッドのメリット 1. コードの見通しがよくなる 2. onResolved時に…

【ES2015】分割代入の基本と便利な使い方

分割代入 (Destructuring assignment)とは 配列での使い方 オブジェクトでの使い方 便利な使い方 値の入れ替え 複数の返り値の取得 関数の引数を分かりやすく表現 ループ処理 JSONや、ネストされたオブジェクトや配列から値を取得 まとめ 参考

【JavaScript基礎】高階関数について

<目次> 高階関数とは何か 高階関数のメリット サンプル 参考

【JavaScript基礎】thisとは何か・シーン別参照先のまとめ

<目次> thisとは何か thisの値の決められ方 グローバルコンテクスト内でのthis 関数内でのthis メソッド内でのthis 入れ子の関数でのthis コンストラクタ内でのthis call()メソッド、apply()メソッドでのthis アロー関数内でのthis thisの退避 まとめ 参考

【JavaScript基礎】グローバルオブジェクトについて

<目次> グローバルオブジェクトとは グローバルオブジェクトの役割 定数と関数 グローバル変数とグローバルプロパティ var演算子を伴う場合 var演算子を伴わない場合 両者の違い グローバルオブジェクトへのアクセス windowを明示しない方がわずかに処理が…

【JavaScript基礎】プロトタイプチェーンについて

<目次> プロパティを参照して見つからない場合どのような処理が行われるのか プロトタイプチェーンを使うメリット prototypeプロパティ protoプロパティ protoプロパティは実際のコーディングで使用するのは要注意 プロトタイプチェーンは最初に見つけたプ…

【JavaScript基礎】オブジェクトは常に動的である

<目次> JavaScriptではいつでもオブジェクトにプロパティやメソッドを追加できる オブジェクトのプロパティにはどんな値も格納できる オブジェクトのプロパティを削除するにはdelete演算子を使う 参考

【JavaScript基礎】typeof演算子、constructorプロパティ、instanceof演算子を使ってデータ型、コンストラクタ関数を特定する

<目次> データ型の特定 typeof演算子 constructorプロパティ オブジェクトのClassを用いた判定 コンストラクタ関数の特定 instanceof演算子 参考

【JavaScript基礎】プリミティブ値の生成方法とラッパーオブジェクトに関して

<目次> プリミティブ値とは プリミティブ値の生成方法 リテラルを使う(推奨) コンストラクタ関数を使う new演算子とコンストラクタ関数を使う(非推奨) コードが冗長になる 返り値がプリミティブ値ではなくオブジェクトになる プリミティブ値もオブジェ…

【JavaScript基礎】JavaScriptの実行順序について

<目次> ブラウザでのJavaScriptの処理の流れ イベント登録のタイミング async属性とdefer属性 async属性:非同期で読み込み開始し、読み込み完了後に実行 defer属性:非同期で読み込みDOM構築完了後に実行 注意 参考

【JavaScript基礎】関数定義の基礎、サーキット演算、三項演算子について

<目次> 関数定義の方法 ①function命令で定義関数 ②関数リテラルで定義 ③Functionコンストラクタ経由で定義 ①function命令での定義と、②関数リテラルでの定義の関数の使用上の注意 関数登録のタイミングの違い 即時関数について 即時関数とは 書き方 即時関…