中安拓也のブログ

プログラミングについて書くブログ

Redux

仮想通貨取引所のAPIを使ってみる #2 - 各種取引所のBTC価格を取得する

前回記事はこちら 国内仮想通貨取引所5種(bitFlyer、Coincheck、Zaif、bitbank、QUOINEX)のWeb APIにアクセスして、現在のビットコイン価格を表示するアプリケーションを作成しました。 バージョン情報 実装 アプリケーション概要 bitFlyer APIの呼び出し …

Angular + Reduxを学ぶ #4 - Reducerを分割する

前回記事はこちら 引続き、angular-redux/storeの使い方を学んでいきます。今回はReducerを分割する方法について。 バージョン情報 環境構築 サンプルアプリケーションについて アプリケーションの構造 Stateの構造 Stateのソースコード Reducerを分割する …

Angular + Reduxを学ぶ #3 - @Select デコレーターでネストされたStateを参照する

前回記事はこちら angular-redux/storeの@selectデコレーターの使い方について解説していきます。 バージョン情報 サンプルアプリケーションについて Stateの構造 Stateのソースコード 1層目 2層目 ネストされたStateの参照方法 動作確認 参考サイト バー…

AngularでFlappy Birdを作った

はじめに AngularでFlappy Birdを作りました デモ https://l08084.github.io/angular-redux-flappy-bird/ ソースコード github.com デモの遊び方 PC専用(IE以外なら動くはず) クリックするとバードが上に移動します 壁にぶつかるか、地面に落ちるとゲーム…

Angular + Reduxを学ぶ #2 - Redux DevTools chrome extension を使う

引き続きangular-redux/storeの使い方について、前回記事はこちら Redux DevTools chrome extensionを導入してブラウザデバックの効率を上げましょう。 バージョン情報 Angular: 5.2.3 angular-redux/store: 7.1.0 TypeScript: 2.5.3 angular/cli: 1.6.5 OS:…

Angular + Reduxでストップウォッチを作る

はじめに Angular + Reduxでストップウオッチを作りました デモ https://l08084.github.io/ng-stopwatch/ ソースコード github.com 実装 開発環境 Angular: 5.2.3 angular-redux/store: 7.1.0 OS: darwin x64 Node: 8.1.4 概要 angular-redux/storeを使ったR…

Angular + Reduxでテトリスを作る

はじめに 以前、Angular5で作成したテトリスをAngular + Reduxで作り直してみました。 https://l08084.github.io/ng-redux-tetris/ 実際にのURLから遊ぶことができて(PCのChromeでのみ動作確認済み)、 github.com GitHubにソースコードも置いています。 関連…

Angular + Reduxを学ぶ #1 - selectとdispatchデコレータを使う

はじめに Reactではなく、AngularからReduxに入門するのは茨の道かと思いますが、やっていきます。 今回はReduxを1サイクル回して、配列を更新してコンポーネントで値を取得するところまでやりました。 開発環境 Angular: 5.2.3 angular-redux/store: 7.1.0 …

Angular + Redux 環境の構築手順

はじめに ReduxをAngularで使用するときの環境構築手順を記述する 出典 github.com 環境構築手順 まず、Angular CLIを使用してAngularプロジェクトを作成する # Install Angular CLI npm install -g @angular/cli # Use it to spin up a new app. ng new ang…