」どうやら違うドメインのデータを利用するところで怒られているようですね...ハマること数時間...こうします。localhostの/api/bf/boardに対してGETリクエストを投げ、そちらで改めてhttps://api.bitflyer.jp/v1/boardに情報を取得するリクエストを投げ、返ってきた値を元のリクエストにレスポンスとして返してあげましょう。いうことで、使うライブラリをaxiosからsuperagentというものに変更してやってみます。情報が取れることを確認したいので、一旦次のようにbitflyer/Board.jsxを修正します。Board;superagentの使い方を詳しく知りたい方は検索してみてください。ここで、Boardがclassになっていることに気付いたでしょうか?Reactのコンポーネントには、関数型コンポーネントとクラスベースコンポーネントがあり、クラスベースコンポーネントは状態を持つことが出来ます。今回は板の情報を保持したいのでクラスベースに変更しました。その際、これもES2015の書き方なのですが、ReactのComponentというモジュールを継承する際に、Javaのように「extends」という識別子を使用します。上記のようにコンストラクタを記述し、親クラスであるComponentのコンストラクタを呼び出して初期化します。super(props)としていますね。ここでpropsとは呼び出し元から設定できるproperties(プロパティ)を表しています。{}で、自身の状態変数を定義します。板情報で得られるものは、現在値(mid_price)と買値の配列(bids)、売値の配列(asks)なのでそれぞれの型で予め定義しておきます。resはとりあえずの表示のために用意したstring型の変数です。初期化の際に呼び出されるコンストラクタ以外でstateに値をセットする場合には、代入記号は使えず、必ずthis.state.setState()を使うことに気を付けてください。ここでserver.jsを編集しましょう。OK!!');res.send(response.body);next();}});});app.get()のところでまず、localhostの/api/bf/boardに対してGETが送られてきた際の処理を記述していますね。その中で、superagentのget()ファンクションでbitFlyerのサーバーにリクエストを投げ、返ってきたレスポンスのbodyを元のBoard.jsxのget()がファンクションに返してあげています。プロセスを再起動して画面をリロードしてみましょう。ここまで来たら、データをそれなりに詰めて表示するところまでやりましょう。5.0」のように表示するとするとこれも1つのコンポーネントに出来そうですね。いうことで、BidAsk.jsxを作成します。BidAsk;「&yen;」は通常のHTMLでの円マークの書き方ですね。引数のまとまりとしてpropsをもらっています。}として予め取り出しています。することで、props.を付けなくても使うことが出来ます。これを元のBoard.jsxでインポートして使ってみましょう。Board;今回は適当にTableを使って表示してみましたが、もっとちゃんと表示したい方は是非美しくしてください。ここで、ES2015のmap()を使って、配列それぞれの値を取り出してその各アイテムの値をBidAskコンポーネントに設定しています。keyは実際には使いませんが、コンポーネントで一意になるように価格を設定しています。プロセスを再起動してみましょう。出ましたね!見た目は良くないけれど...ということで、coincheckについても同じようにして、ご自身でやってみてください!もう一つ出来ることとして、一定時間ごとに値を更新することが考えられますね。やってみてください!!そして、似たようなコンポーネントが出来るな、と思ったらそれを共通化してみることも考えてみましょう!(それを継承して使うように)次回は、Monacaというプラットフォームでモバイルアプリを作ってみようかと思ったり思わなかったりしています。今回利用したデータを利用して、↓のようなマーケットデプスのグラフなんかも作れたりします。今回はこんな感じです。お疲れ様でした!!ということで、今回はbitFlyerのパブリックAPIを用いて板情報の取得を試してみました。色んな応用が考えられますね!ちょっとReactとES2015の書き方が難しかったでしょうか?でも大丈夫です。覚えやすいと思います!以下の書籍や、Udemyの講座も参考になるかも知れません。こちらはPythonを用いたシステムトレードの書籍です。こちらではZaifも取り扱っているようですね。ビットコイン自動売買システムもう一つ、こちらは動画で学べるコースです。プログラミング言語としてはRubyを用いています。3時間程度で、Rubyの基礎から実際の売買までを行なうところまで学べます。しているので、倍速でもご覧いただけるかと思います。学生さんで、プログラミングの講師もなさってるんですね。実は私も会計学を学び始めたばかりの学生でもあります。お役に立てればとても嬉しいです!何かご要望等がありましたらコメント欄に頂けたらと思います!今後も色々な技術を採用しつつ少しずつ発展させて行けたらいいなと考えています。※ConoHaのVPSを試してみようかと思っています。コメントデータの処理方法の詳細はこちらをご覧ください。キャンセル投稿を送信できませんでした。メールアドレスを確認してください。メール送信チェックに失敗しました。このブログではメールでの投稿共有はできません。%d人のブロガーが「いいね」をつけました。