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

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

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

EJSは、JavaScript用のテンプレートエンジン。HTMLなどのテンプレートテキストにJavaScriptのロジックを記述することができます。また、変数・関数の実行をテンプレートテキスト内に埋め込むことも可能です。

Node.js

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

Express

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

Q&A

解決済

1回答

3446閲覧

Express.js(ejs使用)で、配列データ一覧を表示させたい

putaro

総合スコア9

EJS

EJSは、JavaScript用のテンプレートエンジン。HTMLなどのテンプレートテキストにJavaScriptのロジックを記述することができます。また、変数・関数の実行をテンプレートテキスト内に埋め込むことも可能です。

Node.js

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

Express

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

0グッド

0クリップ

投稿2021/09/17 21:56

###前提・実現したいこと
Express.jsを使ってあるフォルダのファイルパス一覧を取得したのですが、その配列データをejsで表示させようとしたら、エラーが発生しました。
ファイルパスを格納するスクリプトは以下のサイトを参考に実装しました。
リンク内容

利用環境
0. macbook air バージョン11.5.2
0. node.js v16.8.0
0. express@4.17.1
0. express-generator@4.16.

実装したスクリプト

先のサイトをに参考し、ファイルパスを取得するスクリプト

  • getFilePath.js

javascript

1// 目的のフォルダがあるパス 2const root = "/Users/user_name/devid_data/"; 3const fs = require('fs'); 4 5const listFiles = dirPath => { 6 const files = []; 7 const paths = fs.readdirSync(dirPath); 8 9 for (let name of paths) { 10 try { 11 const path = `${dirPath}/${name}`; 12 const stat = fs.statSync(path); 13 switch (true) { 14 case stat.isFile(): 15 files.push(path); 16 break; 17 18 case stat.isDirectory(): 19 files.push(...listFiles(path)); 20 break; 21 22 default: 23 } 24 } catch (err) { 25 console.error('error:', err.message); 26 } 27 } 28 29 return files;; 30} 31 32exports.files = listFiles(root); 33exports.dir = fs.readdirSync(root); 34 35

ExPressで実装したスクリプト

  • filePath.js

js

1var express = require("express"); 2var router = express.Router(); 3// ファイルパス一覧を取得 4var paths = require('../public/javascripts/getFilePath.js'); 5 6var files = paths.files; 7var dir = paths.dir; 8 9// ディレクトリを表示 10router.get('/', function(req, res) { ; 11 res.render('index', {dir : dir}); 12}); 13 14module.exports = router; 15

取得したディレクトリのデータ

[ 'i-4rqsyt4jv9ens16cfi54', 'i-5e4ulh3jmca7ph7pu6wz', 'i-8i3x4xg8icngy3wcc54c', 'i-9pavidstc72v798pj1wc', 'i-9recr64sazlcbbvxx7vq', 'i-aounrrql0emnv8af6z1y', 'i-dbsr1qsuv5zkwmimeoff', 'i-i5s9c5bdiwntz5w22hna', 'i-iae78zqdbj175jaq4alg', 'i-q2ne8j41qxx18dqqst1e', 'i-szzy0ynmukb0q6xngfgc', 'i-vmk88y401h30aas4th5k', 'i-wd1p10p4gnof43shq3we', 'i-y069sfca7sdozkv9qndo' ]

app.js

js

1var createError = require('http-errors'); 2var express = require('express'); 3var path = require('path'); 4var cookieParser = require('cookie-parser'); 5var logger = require('morgan'); 6 7var indexRouter = require('./routes/index'); 8var usersRouter = require('./routes/users'); 9 10// 目的の配列データを取得するスクリプトファイル 11var pathsRouter = require('./routes/filePath'); 12 13var app = express(); 14 15// view engine setup 16app.set('views', path.join(__dirname, 'views')); 17app.set('view engine', 'ejs'); 18 19app.use(logger('dev')); 20app.use(express.json()); 21app.use(express.urlencoded({ extended: false })); 22app.use(cookieParser()); 23app.use(express.static(path.join(__dirname, 'public'))); 24 25app.use('/', indexRouter); 26app.use('/users', usersRouter); 27 28// ディレクトリを表示させる 29app.use('/', pathsRouter); 30 31// catch 404 and forward to error handler 32app.use(function(req, res, next) { 33 next(createError(404)); 34}); 35 36// error handler 37app.use(function(err, req, res, next) { 38 // set locals, only providing error in development 39 res.locals.message = err.message; 40 res.locals.error = req.app.get('env') === 'development' ? err : {}; 41 42 // render the error page 43 res.status(err.status || 500); 44 res.render('error'); 45}); 46 47module.exports = app; 48

index.ejs

取得した配列データを表示させたいファイル

ejs

1<!DOCTYPE html> 2<html> 3 <head> 4 <title>サンプル</title> 5 <link rel='stylesheet' href='/stylesheets/style.css' /> 6 </head> 7 <body> 8 <div id="file_tree"> 9 ***エラーになる*** 10 <%= dir%> 11 </div> 12 </body> 13</html> 14

エラー内容

エラー表示の場所は上記の <%= dir%>の所で、メッセージは”dir is not defined”となりました。

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

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

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

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

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

hoshi-takanori

2021/09/18 05:48

app.js に app.use('/', indexRouter); app.use('/', pathsRouter); があるので、たぶん indexRouter が優先されてしまい、その中で index.ejs を表示する際に dir が指定されてないのでは。pathsRouter だけならとりあえず表示はされましたよ。
putaro

2021/09/18 05:56

ご指摘いただいた、箇所を修正したら無事に配列データ一覧が表示されました。 ありがとうございます。
putaro

2021/09/18 07:35

これを今回の問題の回答とさせたいのですが、回答欄にご回答いただけますでしょうか。自分の勉強不足を反省します、本当にありがとうございました。
guest

回答1

0

ベストアンサー

app.js に

app.use('/', indexRouter);
app.use('/', pathsRouter);

があるので、たぶん indexRouter が優先されてしまい、その中で index.ejs を表示する際に dir が指定されてないのでは。pathsRouter だけならとりあえず表示はされましたよ。

投稿2021/09/18 07:56

hoshi-takanori

総合スコア7901

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問