【javascript】resolve()で返した値がundefinedになってしまう

Question

前提・実現したいこと

electronを用いたアプリ開発を始めたのですが、resolve()で返した値がundefinedになってしまいます。どなたか理由がお分かりなる方がいらっしゃいましたら、ご教授の程よろしくお願いします。

発生している問題・エラーメッセージ

resolve()で返した値がundefinedになる。

該当のソースコード

class FileManagerとfunction openFile()は別々のjsファイルに記載されています。

function openFile() {
  showOpenFileDialog() // ファイルダイアログを表示してパスを取得しresolve()で値を返す
    .then((filePath) => {
      path = filePath.filePaths[0];
      fileManager.readFile(filePath.filePaths[0]); // fileManagerはFileManagerのインスタンス
    })
    .then((text) => {
      console.log(text); // undefinedになってしまう
      mainWindow.sendText(text);
    })
    .catch((error) => {
      console.log(error);
    });
}

class FileManager {
  constructor(){
    this.filePath = "";
  }
  readFile(filePath) {
    return new Promise((resolve) => {
      const text = fs.readFileSync(filePath, "utf8"); //ファイルを読み込んでtextに格納
      this.filePath = filePath;
      console.log(text); //ファイルの中身がきちんと表示される
      resolve(text);
    });
  }
}

試したこと

当然ですが以下のようにしたら問題なく動きました。

function openFile() {
  showOpenFileDialog()
    .then((filePath) => {
      path = filePath.filePaths[0];
      const text = fs.readFileSync(filePath.filePaths[0], "utf8");
      fileManager.readFile(filePath.filePaths[0]);
      return text;
    })
    .then((text) => {
      console.log(text); //ファイルの中身がきちんと表示される
      mainWindow.sendText(text);
    })
    .catch((error) => {
      console.log(error);
    });
}

class FileManager {
  constructor(){
    this.filePath = "";
  }
  readFile(filePath) {
    /*return new Promise((resolve) => {
      const text = fs.readFileSync(filePath, "utf8");*/
      this.filePath = filePath;
      /*resolve();
    });*/
  }
}

補足情報（FW/ツールのバージョンなど）

//package.json
{
  "name": "markdown_editor",
  "version": "1.0.0",
  "description": "",
  "main": "dist/main/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-loader": "^8.0.6",
    "babel-preset-react": "^6.24.1",
    "marked": "^0.8.0",
    "photon": "github:connors/photon",
    "react": "^16.13.0",
    "react-dom": "^16.13.0"
  },
  "devDependencies": {
    "@babel/core": "^7.8.7",
    "@babel/preset-env": "^7.8.7",
    "@babel/preset-react": "^7.8.3",
    "babel-cli": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "css-loader": "^3.4.2",
    "electron": "^8.1.1",
    "style-loader": "^1.1.3",
    "webpack": "^4.42.0",
    "webpack-cli": "^3.3.11"
  }
}

Answer 1

fileManager.readFile()の戻り値をreturnしていないからだと思われます。

    .then((filePath) => {
      path = filePath.filePaths[0];
      return fileManager.readFile(filePath.filePaths[0]); // fileManagerはFileManagerのインスタンス
    })

Comments

[loup]

thenを続けて書いたことがなかったので、resolveしたら勝手に値がreturnされるものだと思い込んでいました。１日悩んでいたのですっきりしました。本当にありがとうございます！！

[karamarimo]

「関数が値を返す(return)」と「promiseが値を返す(resolve)」はまったく別の話なので気をつけてください。後者は便宜的に「返す」と表現しているだけで言語上全く異なる仕組みを使っています。
(ちゃんと理解するにはご自分で勉強していただくしかありませんが)

[karamarimo]

簡単に言うと`.then(関数A).then(関数B)`で関数Aが返した(return)値がpromiseならば、そのpromiseのresolve値が関数Bに渡されます。逆に関数Aが返した(return)値がpromiseでないならば、その値が直接関数Bに渡されます。

[loup]

なるほど、そういうことなんですね。勉強になりました。