〜bitFlyer(ビットフライヤー)のAPIで板情報をブラウザで表示してみよう〜TweetPocket前回は、取引所のプライベートAPIを用いて自分の取引残高や出金履歴を見てみました。今回は、パブリックAPIを用いて板情報を取得し、Webブラウザ上に表示してみましょう。WebPackとsuperagentを用いたCORS(クロスオリジン)の問題も解決しているのでそれなりに意味のあるものになっているかと思います。今回はReactというライブラリを採用していますが、エッセンスは共通しているはずです。必要なところだけ吸収して頂くだけでも大丈夫です!Reactの基礎についてはこちらの講座でサクッと学べます(Reactだけでも十分です)。今回は雛形(テンプレート)を用意しましたので、こちら(https://github.com/rascal-3/cryptocurrency-api-test.git)のリポジトリにあるソースコードをコピーアンドペーストするか、Cloneしてワークスペースを作ってみてください。ご自身のコンピューターにNode.jsが動作する環境があり、Atom等のエディタをお使いになる場合はそちらでも構いませんが、今回もCloud9のサービスを利用したいと思います。https://github.com/rascal-3/cryptocurrency-api-react-app)GitHub上のリポジトリのURL(https://github.com/rascal-3/cryptocurrency-api-test.git)を貼り付け、クローンしてワークスペースを作成します。今回はパッケージマネージャーとして、「yarn」というものを利用したいと思います。インストールするライブラリ群はpackage.jsonに記述済みですので、まずyarn自体をインストールし、それからyarnでJavaScriptのライブラリをインストールします。yarn」を実行します。install」を実行し、ライブラリをインストールします。今回は使わないものも含まれていて少し時間が掛かるかも知れませんがしばらくお待ちください。インストールが完了すると、自動的にyarn.lockというファイルが生成されますが、これは依存関係を固定させるものですので特に気にしなくても大丈夫です。Webアプリサーバーを起動してみる次に、package.jsonのscriptsのの箇所をご覧ください。start」を実行してください。アクセスすると、ファイルを編集する度に自動的に変更が反映されるので開発時には便利かと思います。後でハマることになるCORSのところの対応はしていません。)↑のような表示がされたら準備は完了です。沢山のファイルがあって驚いたかも知れませんが、見る必要があるものは限られています。今回は触らないものがほとんどですが、まずは簡単にそれぞれのファイルの紹介をしますね。ESLintという静的解析ツールで、JavaScriptの正しい書き方をしているかを検証する際のルールを記述する設定ファイルです。今回はAirbnbのスタイルを踏襲します(が、Cloud9ではこれが有効にならないのか、”,”のスタイルが適用されませんでした)。Gitというバージョンコントロールシステムで管理対象外にするファイル等をしていするための設定ファイルです。今回のNode.jsサーバーを起動するためのファイルです。今回はES2015(ES6)というJavaScriptの書き方を採用しています。クラスの定義やアローファンクションなど新しい機能を使ってすっきりした記述が可能です。その他、SCSSのコンパイル、公開フォルダの指定などを行なっています。今回利用している表示(View)を担当するライブラリであるReactのJSXファイルはそのままではブラウザで読み込めませんが、babelというツールを使って通常のJavaScriptに変換しています。このファイルはこれらの一連の動作の定義を行っている設定ファイルです。公開用ファイルを配置するフォルダです。ここがルートディレクトリとなり、ブラウザから最初に読み込まれるのがpublic/index.htmlとなります。この下にJavaScriptファイルやJSXファイルを作っていきます。フォルダを切って整理しながら作成しましょう。初めは気にしなくても構いませんが、ここにHTMLの表示スタイルを記述していきます。HTMLファイルやJSXファイルに直接スタイルを記述することも出来ますが、通常はスタイルシート(CSSやSCSSファイル)として切り出して作成します。Webページの作成に慣れてきたらこちらにスタイルを記述して見た目を美しくして行くと良いと思います。今回は、srcフォルダの下にファイルを作成して行きます。Reactで開発を行なう際は、画面の部品(コンポーネント)毎に1ファイルを作成して行くことが多いようです。ここでは、componentsフォルダの下にアプリのメインコンポーネントであるApp.jsx、bitFlyer用のメインコンポーネントであるBitFlyer.jsx、coincheck用のメインコンポーネントであるCoincheck.jsxが既に用意済みです。componentsの中にbitFlyer用コンポーネント、coinchek用コンポーネントを作成するためにまずはそれぞれフォルダを作成しましょう。Folder」を選択し、「bitFlyer」と「coincheck」を作成してください。次に、↓のようにbitFlyerフォルダの中にBoard.jsxファイルを作成します。その中に、以下のように記述します。Board;ES2015やReactが初めての方はこの書き方にちょっととまどうかも知れませんね。import文は、Node.jsのrequire文のように必要なモジュール等を読み込むためのものです。node_modulesの中にreactモジュールがインストールされていますので、単にモジュール名である’react’と指定して読み込みます。constは定数を定義する際に使用する宣言用のものです。{}」と同じ意味です。return文の中にHTMLタグが書かれていて驚いたかも知れませんが、ReactではこのようにJSXファイルをコンポーネントとして記述して行きます。Crypto-world」と表示するだけのdivタグを返します。他のファイルからそれを呼べるようにします。ここでは、板情報のコンポーネントとして、「Board」を返しています。次に、BitFlyer.jsxを見てみましょう。BitFlyer;今は↑のようになっているかと思いますので、先ほど作成したBoardを読み込んで表示出来るようにしましょう。次のように、import文を追加し、BitFlyerコンポーネントの中のh1タグの下に板情報が表示されるようにしてみましょう。BitFlyer;import文で、’react’とは違って、’./bitflyer/Board’となっていることにお気づきかと思います。インストールしたモジュールと違って、自身で作成したものについてはパスを指定してあげる必要があるため、このようにBitFlyer.jsxからの相対パスで指定します。/>のように、閉じタグなしで追記すればOKです。start」を実行してください(webpack-dev-serverをお使いの方は自動的に反映されます)。Crypto-world」と表示されればOKです。板情報の取得機能の実装では、ここからが本番です。実際に板情報を取得して表示出来るようにしましょう!板情報の取得は、プライベートAPIを使った前回よりも簡単です。https://lightning.bitflyer.jp/docs/playgroundを見てみると、次のように書かれていますので、これを1つの関数にしてBoardコンポーネントから呼ぶようにしましょう。requestモジュールの代わりに、今後利用するaxiosというモジュールを使うことにしましょう。