質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

Q&A

解決済

1回答

407閲覧

CoincheckAPIを叩いてWebページにレートを表示させたい

tsu2626

総合スコア12

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

0グッド

1クリップ

投稿2018/10/21 16:36

編集2018/10/24 09:36

現状

レート部分がundifinedと表示されてしまう。
![レート部分がundifinedと表示されてしまう。]

該当のソースコード

以下のソースコードでコンソールにはレートが正しく表示されます。

イメージ説明

top.js

js

1var express = require('express'); 2var router = express.Router(); 3 4let https = require('https'); 5 6const XRP = "https://coincheck.com/api/rate/xrp_jpy"; 7 8https.get(XRP, (res) => { 9 var body = ''; 10 res.setEncoding('utf8'); 11 res.on('data', (chunk) => { 12 body += chunk; 13 }); 14 res.on('end', (chunk) => { 15 // body の値を json としてパースしている 16 res = JSON.parse(body); 17 console.log(`現在のレートは${res.rate}円/XRP`); 18 }) 19 }).on('error', (e) => { 20 console.log(e.message); 21}); 22 23router.get('/', (req, res, next) => { 24 res.render('top', { 25 title: 'TOP', 26 rate: `現在のレートは${res.rate}円/XRP` 27 }); 28}); 29 30module.exports = router;

top.pug

pug

1extends layout 2 3block content 4 head 5 meta(charset="UTF-8") 6 title #{ title } 7 body 8 .container 9 .starter-template 10 p #{rate}

試したこと

rateの中身を${res}に変更すると、[object Object]と表示されます。

js

1router.get('/', (req, res, next) => { 2 res.render('top', { 3 title: 'TOP', 4 rate: `現在のレートは${res}円/XRP` 5 }); 6});

よろしくおねがいします。

ご回答を頂いた部分を修正しました

js

1var express = require('express'); 2var router = express.Router(); 3 4let https = require('https'); 5 6const XRP = "https://coincheck.com/api/rate/xrp_jpy"; 7var state = {}; 8 9https.get(XRP, (res) => { 10 var body = ''; 11 res.setEncoding('utf8'); 12 res.on('data', (chunk) => { 13 body += chunk; 14 }); 15 res.on('end', (chunk) => { 16 // state.rate = JSON.stringify(body); 17 state.rate = JSON.parse(body); 18 console.log(`${state.rate}`); 19 }) 20 }).on('error', (e) => { 21 console.log(e.message); 22}); 23 24router.get('/', (req, res, next) => { 25 res.render('top', { 26 title: 'TOP', 27 rate: `現在のレートは${state.rate}円/XRP` 28 }); 29}); 30 31module.exports = router;

上記の通り、編集しました。
しかし結果は
コンソール→現在のレートは[object Object]円/XRP
ブラウザ→現在のレートは[object Object]円/XRP
でした。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

単にJavaScriptの関数スコープの理解が追いついていないのが原因です。

res.on('data', function (chunk) { // body の値を json としてパースしている res = JSON.parse(body); console.log(`現在のレートは${res.rate}円/XRP`); router.get('/', (req, res, next) => { res.render('top', { title: 'TOP', rate: `現在のレートは${res.rate}円/XRP` }); }); });

このbodyって何者ですか?
どこにも定義されていませんね。

https.get(XRP, function (res) { var body = ''; res.setEncoding('utf8'); res.on('data', function (chunk) { body += chunk; }); });

と思ったらこんなところに居ました。

JavaScriptは関数でスコープを区切るという性質があり、
未定義の変数を利用した場合、外のスコープへ変数や引数が宣言されて居ないか探しにいきますが、
子や兄弟の関数のスコープへ探しに行くことはありません。
(もしそんな事をやればどこで宣言したのか分からなくなってしまうので、必ず子→親→祖父母…グローバルまで行ってなければ諦めてエラー)

これでNode.jsがエラーで死んでない事が理解出来ませんが、
エラーが出たことで外にbody変数を定義してて質問欄に書き忘れているとかじゃないでしょうか?
何にせよ、https.getの中身で渡したコールバック関数の中でvar body = ''と宣言し直しているので、その中でいくらbody変数を書き換えても同名の変数はそこに既にあるわけで一生外には出ていきません。

少し難しい概念なので、私の説明で理解出来なければ
書籍や他のサイトを見ながらじっくり学習していくと良いかと思います。


『修正後コード』

res = JSON.parse(body);

これはなんですか?
JSのスコープとコールバックは癖が強く、他言語使いだと面食らうかと思いますが、
Node.jsはこのスコープとコールバックが一生つきまとう言語なので正しい理解が出来ないと何も作れません。
サイ本等を読む等して頑張って学習していきましょう。

まずは、動いているお手本をさらっとおさらいしましょう。

JavaScript

1 res.on('end', (chunk) => { 2 // body の値を json としてパースしている 3 res = JSON.parse(body); 4 console.log(`現在のレートは${res.rate}円/XRP`); 5 })

貴方がやりたい事を言語化すると、JSON.parse(body)を関数の外に持ち出したい。
そしてExpressのRouterに突っ込んだ関数で再現したい。

上の説明では、変数はスコープを上に辿って探すことしか出来ないと言いましたね。
なので変数スコープの上段の方で先に宣言してしまい、
中の関数には「この変数スコープには無いから上に探しに行こう、見つけた!」とさせる事が重要です。

流石にグローバル変数に宣言するのはやめたほうが良いので、
require先のスコープの最上段くらいが無難ですかね。
状態を表すstateみたいな名前で宣言しておきましょう。

JavaScript

1const XRP = "https://coincheck.com/api/rate/xrp_jpy"; 2const state = {}; 3 4// 中略 5 6 res.on('end', (chunk) => { 7 state.rate = JSON.parse(body); 8 }) 9 10// 中略 11 12router.get('/', (req, res, next) => { 13 res.render('top', { 14 title: 'TOP', 15 rate: `現在のレートは${state.rate}円/XRP` 16 }); 17});

おまけのおまけ

…で、貴方の次の質問は「rate`の数字が一生変化しないよ!」になることでしょう。
5分、10分おきにhttpリクエストを飛ばしてstate.rateを更新する作りにした方が良いでしょう。
Node.jsでもsetTimeoutsetIntervalが利用出来るので、https.getをまるごと関数で包んでこれらの関数で定期実行する仕組みにすれば実現出来ると思います。

まぁ、コインチェックAPIはWebSocketで常に最新の情報が取得出来るんで、
もし私が実装するならそちらを利用して常に最新のレートが取得出来るように見張ります。
これはこれで実装までが長い道のりだと思うので、着実に勉強していってください。

投稿2018/10/23 04:53

編集2018/10/23 14:53
miyabi-sun

総合スコア21158

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tsu2626

2018/10/23 13:24

先程はおかしなコードを載せてしまい申し訳ありませんでした。 技術ブログ等を参考にしていますが、どうしてもコンソールに表示はできてもブラウザに値を持っていくとundefinedとなってしまいます。 文字型を変える等、必要なことはあるのかと思いますが、表題についてご教示ねがいます。
tsu2626

2018/10/24 09:55

最終的に、 res.on('end', (chunk) => { // state.rate = JSON.stringify(body); state.rate = JSON.parse(body); console.log(`${state.rate}`); }) の部分の state.rate = JSON.parse(body);を state = JSON.parse(body); のみに変更したらコンソール、ブラウザともにうまく表示されました! JSのスコープについては引き続き勉強いたします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問