React + Redux の基本的な使い方
久しぶりにReduxを使ったら使い方をすっかり忘れていました。
改めて勉強しなおしたのでメモしておきたいと思います。
- Reduxとは
- Reduxのメリット
- 3つの原則
- 1. 真実の出所は1つ(Single source of truth)
- 2. stateは読み込み専用(State is read-only)
- 3. 変化は純粋(副作用のない)関数で作られる(Changes are made with pure functions)
- Reduxの要素
- Action
- Action creator
- Reducer
- combineReducers
- Store
- Storeの作成方法
- Reactと使う
- まとめ
- 参考
【JavaScript】オブジェクト指向を意識したカルーセルスライダーの実装
これまでオブジェクト指向という言葉は知っていましたが、ほとんどその詳細について考えたり、勉強したりしたことがありませんでした。
しかしそれではいかんと思いいくつか入門記事を読んでみて、なんとなくオブジェクト指向がどういったものなのか、少し掴めてきたように感じました。
そのイメージを形にしてみようと、久しぶりに vanila.js でベーシックなカルーセルスライダーを実装してみました。
オブジェクト指向のプロの方たちから見たら全然かと思いますが、一応備忘録と、自分の頭の中の整理として。
- 完成物
- カルーセルの仕様
- 実装の考え方
- プロパティとメソッドをちゃんと意識して考えると簡単かもしれない
- アプリケーションをオブジェクトの集合として考える
- 実装ハマりポイント
gistを使ってJSONを返す超簡易的なAPIサーバを作る
APIモックサーバというと、json-server や swagger などが有名ですが、ただ fetch
をしたいということであれば、gist を使うのが一番お手軽かもしれないのでメモしておきます。
作り方
とても簡単です。
Githubアカウントがなければ作成して、https://gist.github.com にアクセス
̚右上にある「New gist」をクリック
ファイル名と、discription(任意)、内容を入力して「Create public gist」をクリック
ファイルが出来上がるので、右端の「Raw」をクリック
そのRawファイルが表示されているURLをfetch用のURLとして使う (下記は
fetch
でそのURLをした結果)
「クロスドメインで使えない」ということがなく、とても簡単に使えるので開発時の手助けとなるかもしれません。
以上です。