KDE BLOG

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

トップ > JavaScript

【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()
  • まとめ
  • 参考
続きを読む

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

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

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

JavaScript

＜目次＞

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

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

JavaScript

＜目次＞

  • グローバルオブジェクトとは
    • グローバルオブジェクトの役割
  • 定数と関数
  • グローバル変数とグローバルプロパティ
  • グローバルオブジェクトへのアクセス
  • windowを明示しない方がわずかに処理が速い
  • 参考
続きを読む