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

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

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

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

Node.js

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

Express

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

Q&A

3回答

411閲覧

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

masami0708

総合スコア15

C#

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

Node.js

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

Express

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

0グッド

1クリップ

投稿2019/04/11 13:17

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

1 2~~~~~~~ここからindex.pug~~~~~~~ 3 4 5extends layout 6 7block content 8 h1= title 9 p Welcome to #{title} 10 script. 11 var f1 = function() { document.getElementById('myImage').src='#{data.item1}' } 12 script. 13 var f2 = function() { document.getElementById('myImage').src='#{data.item2}' } 14 script. 15 var f3 = function() { document.getElementById('myImage').src='#{data.item3}' } 16 17 button(onclick='f1()') One! 18 button(onclick='f2()') Two! 19 button(onclick='f3()') Three! 20 p 21 a: img(id='myImage' height='200' width='200' src='') 22 23 24~~~~~~~ここからindex.js~~~~~~~ 25 26'use strict'; 27var express = require('express'); 28var router = express.Router(); 29 30var getData = function () { 31 var data = { 32 'item1': 'http://public-domain-photos.com/free-stock-photos-1/flowers/cactus-76.jpg', 33 'item2': 'http://public-domain-photos.com/free-stock-photos-1/flowers/cactus-77.jpg', 34 'item3': 'http://public-domain-photos.com/free-stock-photos-1/flowers/cactus-78.jpg' 35 } 36 return data; 37} 38 39/* GET home page. */ 40router.get('/', function (req, res) { 41 res.render('index', { title: 'Express', "data":getData}); 42}); 43 44module.exports = router; 45 46 47''''

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

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

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

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

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

guest

回答3

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を学ぼうとしている方」へのエールとしてお伝えしておきます。応援しています。

投稿2019/04/20 05:56

debiru

総合スコア16

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

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

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)しか関わっていません。

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

投稿2019/04/20 05:43

編集2019/04/20 13:18
debiru

総合スコア16

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

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

0

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

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

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


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

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

投稿2019/04/16 16:22

debiru

総合スコア16

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

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

masami0708

2019/04/18 10: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>
debiru

2019/04/18 12:38

原因がわかりました。 index.js の render メソッドの引数の値が間違っています。 ``` /* GET home page. */ router.get('/', function (req, res) { res.render('index', { title: 'Express', "data":getData}); }); ``` `getData` の部分はメソッドを実行した結果が欲しいので `getData()` と丸括弧が必要です。 ここだけ直せば期待通り動作すると思います。
masami0708

2019/04/19 13:50

コメントありがとうございます。 `getData()`にしてみたところ、期待通り動きました! ありがとうございます!! 重ねて質問して大変申し訳ないのですが、 もしよろしければどうしてそこが原因だと分かったのかもう少し詳しく教えていただいてもよいでしょうか・・・? debiruさんがHTMLのソースを見ただけ「render メソッドの引数の値が間違っている」と断定できた思考の流れが全く分からなくて・・・(私から見るとまるでマジックのようです。) また、debiruさんのお持ちの知識(HTMLの知識がある、Webシステムの開発をしているなど)を教えていただけると嬉しいです。 私も勉強します。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問