JavaScript
前回の記事で触れた bindActionCreators ですが、今まで使ったことがないので簡単なカウンターアプリを作って、実際に使ってみて一体何がいいのかを確認してみました。 カウンターアプリ ver.1 コード（ファイル名押下でコード展開） redux container compon…
前回の mapStateToProp に続いて mapDispatchToProps の公式ドキュメントについても google 翻訳の力を借りて目を通したので、残しておきます。 react-redux.js.org
React-reduxの公式ドキュメントを久しぶりに見てみると、いろいろと更新されていたので、ちゃんと読みこむことをしています。 今回、connect を使って store とコンポーネントを接続する際に使用する mapStateToProps についての下記ドキュメントを google …
ここしばらくフロントの勉強が疎かになっており、会社での立場に危機感（？）を感じたので、現実から逃げずにちゃんと勉強していくことにしました。 今回は 下記公式ドキュメントを元に Context API について理解したいと思います。 ja.reactjs.org Context …
前回の記事では同期的なTODOアプリを例としてReact + Reduxの基本的な使い方を学びなおしました。 今回は非同期処理の扱い方を勉強してサンプルのアプリケーションを作ったので、要点などをメモしておきます。 Reduxでの非同期処理について 実際のアプリケー…
久しぶりにReduxを使ったら使い方をすっかり忘れていました。 改めて勉強しなおしたのでメモしておきたいと思います。 Reduxとは Reduxのメリット 3つの原則 1. 真実の出所は1つ（Single source of truth） 2. stateは読み込み専用（State is read-only） 3.…
ブラウザにデータを保存するという役割でいうと、localStorage と cookie が代表的かと思いますが、localStorage はクライアント側のみで使える機能で、サーバからは扱えません。 そのためクライアントとサーバ間のデータのやり取りではcookieを使うことで手…
2019年はプレイベートでサービスを作りたいので、Node.jsの勉強を始めました。 サーバーサイドプログラミングの経験はほとんどないので、まずは入門書から始めているのですが、そのサンプルアプリケーション（掲示板）の中で問題が発生しました。 その内容は…
これまでオブジェクト指向という言葉は知っていましたが、ほとんどその詳細について考えたり、勉強したりしたことがありませんでした。 しかしそれではいかんと思いいくつか入門記事を読んでみて、なんとなくオブジェクト指向がどういったものなのか、少し掴…
表題の件でハマってしまい、解決に苦労したのでハマログとして残しておきます。 事象 原因 最初のコード html css js 怪しいところを探る 親要素に設定したmouseover / mouseoutのイベントリスナーが子要素で発生しないようにする マウスイベントを扱う場合…
前回に続き、Async Function（async/await）の使い方について学びます。 今回はおもにAsync Functionを使う上での注意点にフォーカスを当てていきたいと思います。 Async Functionとコールバック関数の問題 Promiseだけ使ったケース Async Functionとコール…
Promiseの理解はできたので async/await について基礎から学んでいきたいと思います。 async/await とは 簡単なサンプル Promiseを使った例 Async Functionを使った例 Async Functionの定義方法 Async Function の役割 Async Functionは常にPromiseインスタ…
ちょっとした小ネタを思いついたので書いておきたいと思います。 JSX上などで、クラス名の出し分けとかによくある下記のような記述をすると、場合によっては無駄な空白（スペース）が開発者ツール上で見えたりして気になったりしないでしょうか？ <a href="#" className={`foo ${isActive ? "is-active" : ""} ${isHidden ? "is-hidden" : ""}`}>test</a> ▼ Chr…
以前下記の記事でPromiseについて調べたことをまとめましたが、どうもすっきりと腹落ちしていませんでした。 kde.hateblo.jp ようやく最近になってふと腹落ちして理解できたと思うので、改めて自分の頭の整理のためにまとめておきたいと思います。 Promiseと…
これまでFetch APIをなんとなくで使っていてちゃんと理解できていなかったので、改めて調べ直して使い方を理解していこうと思います。 Fetch API概要 対応ブラウザ 構文 第一引数（input） 第二引数（init） 戻り値 基本的なリクエスト＆レスポンスの取得 fe…
ES2015から使えるスプレッド演算子（Spread Operator）について理解がまとまっていないので、きちんとまとめておきたいと思います。 構文 関数呼び出しでの例 配列リテラルでの例 配列のコピー Objectリテラルでの例 レスト構文 分割代入でプロパティをまと…
配列のメソッドの中でも個人的にとっつきにくくて苦手意識のあった Array.prototype.reduce() 。 しかしAPIから取得したデータを扱いやすいように整形できたりと、使いこなせればとても強力なツールになることは間違いなく、この苦手意識を克服するために理…
今更ながらES2015のテンプレートリテラルに、タグ という機能があることを知ったので、それについて調べてみようと思います。 テンプレートリテラルとは タグとは タグを使ってテンプレートリテラル内の変数を大文字にする例 生の文字列にアクセスする Strin…
今更ながらReduxをちゃんと学び始めて、ReactとReduxを連携した使い方がやっと分かってきました。 今回は少し特殊な例ですが、複数の Provider を使ってのコンポーネントの連携のやり方を紹介しつつ、サンプルを作りながらReact + Reduxの実装を振り返りたい…
Promiseについてきちんと理解できていなかったので初歩から学ぶ。 Promiseとは 使用できる環境 基本の構文 Promise.prototype.then() Promiseの状態変化 Promise.prototype.catch() catchメソッドのメリット 1. コードの見通しがよくなる 2. onResolved時に…
分割代入 (Destructuring assignment)とは 配列での使い方 オブジェクトでの使い方 便利な使い方 値の入れ替え 複数の返り値の取得 関数の引数を分かりやすく表現 ループ処理 JSONや、ネストされたオブジェクトや配列から値を取得 まとめ 参考
＜目次＞ 高階関数とは何か 高階関数のメリット サンプル 参考
＜目次＞ thisとは何か thisの値の決められ方 グローバルコンテクスト内でのthis 関数内でのthis メソッド内でのthis 入れ子の関数でのthis コンストラクタ内でのthis call()メソッド、apply()メソッドでのthis アロー関数内でのthis thisの退避 まとめ 参考
＜目次＞ グローバルオブジェクトとは グローバルオブジェクトの役割 定数と関数 グローバル変数とグローバルプロパティ var演算子を伴う場合 var演算子を伴わない場合 両者の違い グローバルオブジェクトへのアクセス windowを明示しない方がわずかに処理が…
＜目次＞ プロパティを参照して見つからない場合どのような処理が行われるのか プロトタイプチェーンを使うメリット prototypeプロパティ protoプロパティ protoプロパティは実際のコーディングで使用するのは要注意 プロトタイプチェーンは最初に見つけたプ…
＜目次＞ JavaScriptではいつでもオブジェクトにプロパティやメソッドを追加できる オブジェクトのプロパティにはどんな値も格納できる オブジェクトのプロパティを削除するにはdelete演算子を使う 参考
＜目次＞ データ型の特定 typeof演算子 constructorプロパティ オブジェクトのClassを用いた判定 コンストラクタ関数の特定 instanceof演算子 参考
＜目次＞ プリミティブ値とは プリミティブ値の生成方法 リテラルを使う（推奨） コンストラクタ関数を使う new演算子とコンストラクタ関数を使う（非推奨） コードが冗長になる 返り値がプリミティブ値ではなくオブジェクトになる プリミティブ値もオブジェ…
＜目次＞ ブラウザでのJavaScriptの処理の流れ イベント登録のタイミング async属性とdefer属性 async属性：非同期で読み込み開始し、読み込み完了後に実行 defer属性：非同期で読み込みDOM構築完了後に実行 注意 参考
＜目次＞ 関数定義の方法 ①function命令で定義関数 ②関数リテラルで定義 ③Functionコンストラクタ経由で定義 ①function命令での定義と、②関数リテラルでの定義の関数の使用上の注意 関数登録のタイミングの違い 即時関数について 即時関数とは 書き方 即時関…
