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

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

ただいまの
回答率

90.51%

  • C#

    9040questions

    C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

  • Node.js

    2360questions

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

  • Express

    301questions

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

Webアプリ(VisualStudioでNode.js と Expressを利用)で画像が表示されない

受付中

回答 3

投稿

  • 評価
  • クリップ 1
  • VIEW 264

masami0708

score 3

MSのホームページで以下のチュートリアルを実践しました。

チュートリアル: Visual Studio で Node.js と Express のアプリを作成する

https://cdn-ak.f.st-hatena.com/images/fotolife/g/gm_masami/20190411/20190411214958_120.jpg

チュートリアルの内容は、
Node.js と Express を使用して Visual Studio 開発を経験するというものです。
機能は、
ブラウザ上に組み込まれている3種類のボタンを押すとそれぞれで異なる画像が表示されます。

発生している問題

チュートリアルの通りに作業していけばブラウザ上に画像が表示されるはずなのですが・・・
コメントやボタンなどは表示されるのですが、肝心の画像が表示されず困っています。

現在のWebブラウザの表示

本当でしたら、以下のように表示されます。
正解のWebブラウザの表示

C#でWebアプリを作ったのが初めてなので、プログラムのどの部分がうまくいっていないのか分かりません。
以下にチュートリアルで編集したソースファイルを載せます。
teratailのようなプログラマーの質問場への投稿が初めてなので、何か不足情報などありましたらご連絡下さい。

よろしくお願いします。

該当のソースコード 

以下、「index.pug」と「index.js」です

```index.pug

~~~~~~~ここからindex.pug~~~~~~~

extends layout

block content
h1= title
p Welcome to #{title}
script.
var f1 = function() { document.getElementById('myImage').src='#{data.item1}' }
script.
var f2 = function() { document.getElementById('myImage').src='#{data.item2}' }
script.
var f3 = function() { document.getElementById('myImage').src='#{data.item3}' }

button(onclick='f1()') One!
button(onclick='f2()') Two!
button(onclick='f3()') Three!
p
a: img(id='myImage' height='200' width='200' src='')

~~~~~~~ここからindex.js~~~~~~~

'use strict';
var express = require('express');
var router = express.Router();

var getData = function () {
var data = {
'item1': 'http://public-domain-photos.com/free-stock-photos-1/flowers/cactus-76.jpg',
'item2': 'http://public-domain-photos.com/free-stock-photos-1/flowers/cactus-77.jpg',
'item3': 'http://public-domain-photos.com/free-stock-photos-1/flowers/cactus-78.jpg'
}
return data;
}

/* GET home page. */
router.get('/', function (req, res) {
res.render('index', { title: 'Express', "data":getData});
});

module.exports = router;

''''

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

0

チュートリアルの通りに作業していけばブラウザ上に画像が表示されるはずなのですが・・・
コメントやボタンなどは表示されるのですが、肝心の画像が表示されず困っています。

とのことですが、「One!」のボタンを押しても画像が表示されないという状況でしょうか?

このコードでは、ページ表示時点では画像は何も表示されず、ボタンを押すと初めて画像が表示されるようになっています。


もしボタンを押しても画像が表示されない場合ということであれば、原因を調査するためにHTMLソースコードを貼り付けてもらえるでしょうか。

HTMLソースコードは、ブラウザで表示したページ上で、右クリックして「ページのソースを表示」のようなメニューから表示できます。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/04/18 19:35

    つたない質問の仕方にも関わらず回答いただきありがとうございます。
    本当にうれしいです。

    いただいたコメントに関しての返答ですが、私が困っているのは
    「もしボタンを押しても画像が表示されない」という事象です。

    以下にHTMLソースコードを貼りますので、ご確認をお願いします。

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    <!DOCTYPE html><html><head><title>Express</title><link rel="stylesheet" href="/stylesheets/main.css"></head><body><h1>Express</h1><p>Welcome to Express</p><script>var f1 = function() { document.getElementById('myImage').src='' }</script><script>var f2 = function() { document.getElementById('myImage').src='' }</script><script>var f3 = function() { document.getElementById('myImage').src='' }
    </script><button onclick="f1()">One!</button><button onclick="f2()">Two!</button><button onclick="f3()">Three!</button><p></p><a><img id="myImage" height="200" width="200" src=""></a></body></html>

    キャンセル

  • 2019/04/18 21:38

    原因がわかりました。

    index.js の render メソッドの引数の値が間違っています。

    ```
    /* GET home page. */
    router.get('/', function (req, res) {
    res.render('index', { title: 'Express', "data":getData});
    });
    ```

    `getData` の部分はメソッドを実行した結果が欲しいので `getData()` と丸括弧が必要です。

    ここだけ直せば期待通り動作すると思います。

    キャンセル

  • 2019/04/19 22:50

    コメントありがとうございます。
    `getData()`にしてみたところ、期待通り動きました!
    ありがとうございます!!

    重ねて質問して大変申し訳ないのですが、
    もしよろしければどうしてそこが原因だと分かったのかもう少し詳しく教えていただいてもよいでしょうか・・・?
    debiruさんがHTMLのソースを見ただけ「render メソッドの引数の値が間違っている」と断定できた思考の流れが全く分からなくて・・・(私から見るとまるでマジックのようです。)

    また、debiruさんのお持ちの知識(HTMLの知識がある、Webシステムの開発をしているなど)を教えていただけると嬉しいです。
    私も勉強します。

    キャンセル

0

余談:teratail での回答の仕方について

質問とは関係ありませんが、teratail サービスが考える回答の仕方が私の想定と異なっていたようなので、コメントは極力使わないようにしておきます。

コメントでMarkdownが使えない理由 - 「回答に含めるべき内容は回答に追記しましょう」の本当の意味
https://teratail.com/questions/179463

前回の回答

前述の回答のコメントで示していますが、原因は getData メソッドを記述する箇所で、実行結果ではなくメソッドオブジェクトそのものを渡していたというミスでした。

/* GET home page. */
router.get('/', function (req, res) {
  // 末尾の部分は、getData ではなく getData() が正しい
  res.render('index', { title: 'Express', "data": getData });
});

さて、その回答コメントに付けられているご質問にお答えします。

質問1:デバッグ手法について

重ねて質問して大変申し訳ないのですが、
もしよろしければどうしてそこが原因だと分かったのかもう少し詳しく教えていただいてもよいでしょうか・・・?
debiruさんがHTMLのソースを見ただけ「render メソッドの引数の値が間違っている」と断定できた思考の流れが全く分からなくて・・・(私から見るとまるでマジックのようです。)

デバッグ手法についてのご質問と捉えます。

「画像が表示されない」という元の質問が投稿されましたが、私が手間を惜しまなければ、HTMLソースを見るまでもなく原因を特定することは十分可能でした。実際に私が同一の環境を用意して試せば良かったのです。

しかしながら、それを試すにはコスト(時間)がかかります。そのコストを惜しんだため、私はHTMLソースの開示(新しいヒント)を要求しました。

HTMLソースというヒントが示されたおかげで、HTMLとして実行可能なソースコードが(pugおよびjsから)出力されているか、という検証が可能になりました。

以下、その後の実際のデバッグ手順を示します。

1. HTMLをそのままブラウザで表示して、期待通り実行できるか

  • もし期待通り動作すれば、質問者の実行環境で Mixed Content 制約に引っかかっているなど、実装とは別のところが原因だと推測できる
  • しかし、期待通り動かなかった。これは HTML 出力(index.pug および index.js)が間違っていると判断できる
  • HTML のどこがおかしいのか。それは HTML に出力される script 要素内容の src 属性値である。空になっている。

2. なぜ src 属性値が空になっているのか

次の仮説が思い浮かびます。

  • (1) index.js が読み込まれていない
  • (2) index.js または index.pug で data の変数参照名が間違っている
  • (3) index.pug に Data が渡っていない

(3)は粒度が異なりますが、(1), (2) が否定された場合に考えます。

まず、(1) の可能性は消えます。HTML をよく見ると "Express" という文字列が渡ってきています。これは index.pug には記述がなく、index.js が読み込まれない限り表示できないと分かります。

次に、(2) の可能性を疑いました。しかし、変数名および参照キー名に typo(誤記)は無さそうでした。

そうして (3) の検証をします。

3. index.pug に Data が渡っていないのは何故か

ここまでくれば、index.pug に index.js で定義されている Data 情報が渡っているかどうかを確認することになります。

この処理は、以下の render メソッドで行われています。

/* GET home page. */
router.get('/', function (req, res) {
  res.render('index', { title: 'Express', "data": getData });
});

"data" キーの具体値に何が渡っているかを見ます。

「おっと、getData メソッドの実行結果を渡したいのに、getData メソッドオブジェクト自身を渡しているぞ!」と気付けます。

4. まとめ

以上が、私が HTML ソースコードを要求した理由と、それによって原因を突き止められた経緯になります。

余談ですが、今回の「画像が表示されない」という質問内容には C# は関係していません。今回の話題では(Express / Node.js / Pug / JavaScript / HTML)しか関わっていません。

(もう一つの質問は、性質がことなるので回答を区切ります)

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

質問2:私(debiru)が持っている知識について

また、debiruさんのお持ちの知識(HTMLの知識がある、Webシステムの開発をしているなど)を教えていただけると嬉しいです。
私も勉強します。

teratail に限らず Q&A サイトでは、本題と関係のない質問を続けるのは推奨されていません。が、今回は一つのネタとして答えておきます。

私は2000年頃から、「OKWave」と「教えて!goo」を中心に Q&A サイトをよく使っていました(主に回答者として)。当時から私は趣味で HTML/CSS を研究しています。

研究といっても遊びです。面白いと思った分野を学習して、Q&A サイトなどのコミュニティを通じて意見交換する。そのような活動がとても楽しく自然と続けていました。

HTMLに関わっていれば自然とWebサイト制作やWebアプリケーション開発の世界にも出合います。同様にWebサーバ構築やDNS、フロントエンドからサーバサイド、ネットワークやインフラの世界にも自然と出合うことが多くなりました。私はそのような自然な出合いをきっかけにして、Webアプリケーション開発、アクセシビリティ、セキュリティなどを広く知るようになりました。

それが私の持っている知識です。

Q&A サイトで専門的な回答をしてくれる人も、昔はあなたと同じように質問・学習する立場でした。そうした人は専門家として活躍する一方で、今でも質問・学習する立場を忘れずに新しい知識を増やしています。

勉強(学習)は好きなだけできます。ここまで勉強したら終わりというものではありません。それはつまり、誰でも好きなことを好きなだけ勉強できる自由がある、ということでもあります。好きなこと・楽しいことをずっと続けられる、というのは幸せなことです。それが結果として知識になるのです。

そのためには、まず、物事に興味を持つことが大切です。

興味を持ったことについて実際にコードを書いたり触ったりしてみて、疑問が出てきたら Q&A サイトで質問する、という行為はとても健全なことです。「画像が表示されない」というこの質問も、質問者(masami0708)さんの「学習したい!」という思いが伝わってきたので回答を差し上げました。

質問をすることは素晴らしいことです。たまに質問をするのは恥ずかしいと思われる人がいますが、質問をするには「何が疑問であるのか」をきちんと理解している必要があります。質問力を付けることも学習を進めるのに重要な要素であると私は思います。

最後に、知識とは別に、学習や質問が上手くできるようになるための重要な要素についてお伝えしておきます。それは論理的思考力です。数学が好きな人は論理的思考力が高いことが多いように思います。

これは私の持論ですが、ITの分野に興味を持っている方には、技術的なキーワードを学習することも必要ですが、その基礎力として、数学・論理学を好きになることをオススメしています。そうすれば「自然と出合う」ことができるようになります。

長くなりましたが、以上を「これからITを学ぼうとしている方」へのエールとしてお伝えしておきます。応援しています。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

同じタグがついた質問を見る

  • C#

    9040questions

    C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

  • Node.js

    2360questions

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

  • Express

    301questions

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