JSファイル内でNode.jsで行うシェルコマンドの実行結果を取得したい

Question

前提・実現したいこと

• jsファイル(input.js)に記述している、change()メソッド内で同階層にあるNode.js(guess_cuisine_name.js)の実行結果を取得したいです。
• 現在のソースコードではguess_cuisine()関数を取得し、処理の実行もjsファイル内で行っていますが、処理の実行はnode.jsファイル内で行い、実行結果のみをjsファイルで取得することができればなお理想的かなと思っています。

質問

• なぜエラーが起こっているのか、どうすれば解決しそうなのか教えていただきたく思います。
• また、違うエラーの発生例として「Uncaught TypeError: guess.guess_cuisine is not a function」と出る時もあります。このエラーの場合の解決策があれば併せて教えていただきたいです。

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

bundle.js:50
Uncaught TypeError: guess.guess_cuisine is not a function
    at HTMLInputElement.<anonymous> (bundle.js:50)
    at HTMLInputElement.dispatch (app.js:11813)
    at HTMLInputElement.elemData.handle (app.js:11617)

• 「guess.guess_cuisineは関数ではない」とエラーを吐いていますが、関数で定義しているはずなのになぜエラーが出るのでしょうか。
• node.jsファイル内とjsファイル内では仕様が変わるのでしょうか。

該当のソースコード

bundle.js

(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){

},{}],2:[function(require,module,exports){
let exec = require('child_process').exec;

function guess_cuisine() {
  let command = '/home/vagrant/code/nutrient_management/TensorFlow/example/.venv/bin/python tf_example.py /home/vagrant/code/nutrient_management/storage/app/public/img/zarusoba.jpeg 2>error.log';
  exec(command, {
    cwd: '/home/vagrant/code/nutrient_management/TensorFlow/example'
  }, function (err, stdout, stderr) {
    if (err) {
      console.log(err);
      return;
    } // シェル上で実行したコマンドの標準出力が stdout に格納されている


    console.log('stdout: ' + stdout); // シェル上で実行したコマンドの標準エラーが stderr に格納されている

    console.log('stderr: ' + stderr);
  });
}

; // console.log(exec());

module.exports = guess_cuisine;

},{"child_process":1}],3:[function(require,module,exports){
$(function () {
  const guess = require('./guess_cuisine_name.js');

  $('#select_img').on('change', function (event) {
    // ファイルが選択された際に、ファイル名をボタン横に表示
    let selected_file = $(this).prop('files')[0];
    $('#file_name_text').text(selected_file.name);
    let reader = new FileReader();
    let file = event.target.files[0]; // 画像ファイル以外は処理停止

    if (file.type.indexOf("image") < 0) {
      return false;
    } // ファイル読み込みが完了した際に発火するイベントを登録


    reader.onload = function (e) {
      // .prevewの領域の中にロードした画像を表示
      $('#img').attr('src', e.target.result); // console.log(e.target.result);
    };

    reader.readAsDataURL(file); // console.log(stdout);

    guess.guess_cuisine();
  });
});

},{"./guess_cuisine_name.js":2}]},{},[3]);

試したこと

• browserifyを用いてinput.jsからbundle.jsを作成しています。
• require()を使ってモジュールや関数を取得しようとしてもうまく取得できていない気がします。

気になること

• jsファイル(今回ではinput.js)とnode.jsファイル(今回ではguess_cuisine_name.js)のそれぞれ独立させて実行すると特に問題はないが、1つのファイルに集約するとうまく機能していないことから、ファイル内における関数の意味が違うのかなと気になっています。
• jsファイルとnode.jsファイルでは見た目上における違いはあるのでしょうか。(何を基準としてjsもしくはnode.jsと判断しているのか気になります。)

Answer 1

Uncaught TypeError: guess.guess_cuisine is not a function

エラーメッセージのとおりです。

const guess = require('./guess_cuisine_name.js');としてますが、このguessの値はmodule.exports = guess_cuisine;としたguess_cuisineそのものです。

単にguess()と呼べばいいだけで、guess.guess_cuisineでは意味が通りません。

Comments

[maisumakun]

表示のエラーは修正できますが、もっと大きな問題があります。

require('child_process')はNode.js専用で、ブラウザからは利用できません（そもそも、通常のブラウザJavaScriptからローカルのプログラムを呼び出すことは不可能です）。

[maisumakun]

ちょうどタイミングが重なりましたが、上にコメントした「もっと大きな問題」です。

根本的に、「（HTTP経由でアクセスできない）外部プログラムを呼び出すコード」をブラウザ内で実行することはできません。

[super-sub]

タイミングが重なり、お手数をおかけしました。
ブラウザ上(jsファイル)からnode.jsを利用できないことは理解しました。

この質問をしたのも、現在jQueryで「画像をプレビュー表示するタイミングでその写真の料理名を推測する」実装をしたいと思っておりました。
そのためにはjQueryのchange()メソッドの処理の中で、料理名を推測するためのpythonコマンドの実行結果を取得したいのです。
その際シェルコマンドを使うため、node.jsを利用しようとしておりました。
どうしてもクライアントサイドとサーバーサイドの連携を取るのが難しいかなと感じております。

もし可能であればですが、maisumakun様がイメージできる段階で構いませんので、思いつく実装方法は何かありますでしょうか。
もしくは諦めるべきでしょうか。

ちなみに開発環境はhomestead上でlaravel6を扱っています。