KDE BLOG

Webデザインやコーディングについて書いています

トップ > JavaScript

【JavaScript】ちゃんと理解しておきたいPromiseの勘所など

JavaScript 非同期

以前下記の記事でPromiseについて調べたことをまとめましたが、どうもすっきりと腹落ちしていませんでした。

kde.hateblo.jp

ようやく最近になってふと腹落ちして理解できたと思うので、改めて自分の頭の整理のためにまとめておきたいと思います。

  • Promiseとは
  • Promiseの勘所
    • 絶対に必要な基礎知識
    • Promise.resolve() は渡す引数によって返されるPromiseオブジェクトが変わる
    • then() は 非同期で行われるPromise.resolve() とほぼ同じ役割
    • Promiseオブジェクトを渡した例
  • Promiseでの逐次（直列）処理
    • Array.prototype.reduce() と組み合わせて見やすく書く
  • Promise.race() を使ったタイムアウト処理
  • まとめ
  • 参考
続きを読む

【JavaScript基礎】Fetch APIの基礎

JavaScript

これまでFetch APIをなんとなくで使っていてちゃんと理解できていなかったので、改めて調べ直して使い方を理解していこうと思います。

  • Fetch API概要
  • 対応ブラウザ
  • 構文
    • 第一引数（input）
    • 第二引数（init）
    • 戻り値
  • 基本的なリクエスト＆レスポンスの取得
    • fetch() から返されるPromiseは404でもrejectされない
  • Response オブジェクト
    • プロパティ
    • メソッド
    • Response オブジェクトが得られるタイミング
  • まとめ
  • 参考
続きを読む

【ES2015】スプレッド演算子の基礎まとめ

JavaScript

ES2015から使えるスプレッド演算子（Spread Operator）について理解がまとまっていないので、きちんとまとめておきたいと思います。

  • 構文
  • 関数呼び出しでの例
  • 配列リテラルでの例
    • 配列のコピー
  • Objectリテラルでの例
  • レスト構文
    • 分割代入でプロパティをまとめる
    • 分割代入で配列を分割する
    • 可変長引数の関数を作る
  • その他の使い方
    • 文字列を配列に分割
    • NodeListやHtmlCollectionを配列化
  • まとめ
  • 参考
続きを読む

【JavaScript基礎】Array.prototype.reduce() をしっかり理解する＆サンプル集

JavaScript

配列のメソッドの中でも個人的にとっつきにくくて苦手意識のあった Array.prototype.reduce() 。
しかしAPIから取得したデータを扱いやすいように整形できたりと、使いこなせればとても強力なツールになることは間違いなく、この苦手意識を克服するために理解を深めつつ、いくつかのサンプルを作ってみたいと思います。

  • Array.prototype.reduce() の概要
    • 構文
    • 原則、初期値はつけた方が良い
  • サンプル集
    • 配列をオブジェクトにする
    • 配列をインデックス付きのオブジェクトにする
    • 配列内の要素から不要な値を削除する
    • 二次元配列を一次元配列にする
    • 多次元配列を一次元配列にする（再帰）
    • 条件にマッチする要素から値を出す
    • 配列内の重複している値を除外する
    • filter() + map() の代わりに使う
    • テンプレートリテラルのタグ関数で文字列の組み立てに使う
  • まとめ
  • 参考
続きを読む

【ES2015】テンプレートリテラルのタグについての基礎

JavaScript

今更ながらES2015のテンプレートリテラルに、タグ という機能があることを知ったので、それについて調べてみようと思います。

  • テンプレートリテラルとは
  • タグとは
    • タグを使ってテンプレートリテラル内の変数を大文字にする例
  • 生の文字列にアクセスする
    • String.raw()メソッド
      • 構文
      • 使いどころ
  • まとめ
  • 参考
続きを読む

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

JavaScript React.js Redux

今更ながらReduxをちゃんと学び始めて、ReactとReduxを連携した使い方がやっと分かってきました。

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

※「Actionとは」「Reducerとは」といったことには触れません。あくまでReduxとReactの連携について書いていきます。

続きを読む

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

JavaScript 非同期

Promiseについてきちんと理解できていなかったので初歩から学ぶ。

  • Promiseとは
  • 使用できる環境
  • 基本の構文
  • Promise.prototype.then()
  • Promiseの状態変化
  • Promise.prototype.catch()
    • catchメソッドのメリット
      • 1. コードの見通しがよくなる
      • 2. onResolved時にエラーが起きた場合でも拾うことができる
    • インデント
  • Promise.resolve()
    • Promiseオブジェクトが渡された場合
    • Thenableなオブジェクトが渡された場合
    • それ以外の値が渡された場合
  • Promise.reject()
  • Promiseをつなげて使う
    • thenは常に非同期であることに注意
    • エラーハンドリング
  • Promise.all()
    • エラー発生時
  • Promise.race()
  • まとめ
  • 参考
続きを読む