node.jsのバックエンドからフロントエンドのjsに値を渡す方法を教えてください

node.jsで作っているwebアプリのroutes/message.jsでmysqlを操作して会員情報を取得しています。
その取得した情報をpublic/js/custom.jsで利用したいのですがどのような方法が考えられますでしょうか？

試したこと

1 axiosを使っての受け渡し
2ejsでフロントに描写してそれを読み込む
3sqlをフロントのjsで操作する
4routes/message.jsの関数をpublic/js/custom.jsで呼び出す

1
axiosを使ってみたのですがpostはできているっぽいのですがgetをしようと思ったらundefinedとなり,
うまくいきませんでした。nodeではaxiosが使えないのかな？と思ってます

2
ejsに反映させてそれをjsで読み込む方法もあるかと思ったのですがセキュリティ的にあんまり良くないと思いました

3
sqlをフロントで操作しようと思ったのですがデータベースの操作にnodeのmoduleをたくさん使っていたので厳しいのかなと思いました。

4
ejsでroutes/message.jsを読み込もうとしたら読み込むことができなかった
相対パスが間違っていたわけではないので呼び出せないようになっているのかなと思った

他にうまく解決する方法をご存知でしたら教えていただきたいです！
1~4の方法でもできるならばできると教えていただきたいです
できそうならエラーなども詳しく記載いたしますのでお付き合いいただけますと幸いです

よろしくお願いします！

退会済みユーザー

2021/01/18 09:13

〈バックエンドからフロントエンドのjsに値を渡す〉タイミングをどこにするか次第のような気がします。

行動規範の内容に同意します

回答1件

ベストアンサー

この辺はHTTP通信を駆使した
Webサーバに対するちゃんとした知識を身に着けていれば
自ずと理解出来でしょ？みたいな所がありますので、
時間が取れたら勉強していってみてください。

今回はその辺の勉強が捗るように
さらっと概要を説明したり一問一答でコメントしていく感じで返します。

axiosを使っての受け渡し

axiosを使ってみたのですがpostはできているっぽいのですがgetをしようと思ったらundefinedとなり,
うまくいきませんでした。nodeではaxiosが使えないのかな？と思ってます

この手法をAjaxと呼び、一般的な手法となっています。

うーん、個人的な意見としてaxiosはなんか上手く動かないんですよねぇ。

私はフロントは普通にHTML5に搭載されているFetch APIを使い、
Node.jsではnode-fetchを利用していたりします。

明確にフロントエンドから
Node.jsで作られたバックエンドのWebサーバに向かって

AjaxのHTTPリクエストを送り
Node.jsのバックエンドからJSONのリクエストを受け取り
JavaScriptの値を更新

こういう流れで勉強してみてください。

ejsでフロントに描写してそれを読み込む

ejsに反映させてそれをjsで読み込む方法もあるかと思ったのですがセキュリティ的にあんまり良くないと思いました

これは別にセキュリティ的な問題があるわけではありません。
元々PHP等では動的なHTMLを生成して訪問者に画面を見せる時に、
そのHTML上にユーザーID等やメールアドレス等の情報を記載して返しています。

teratailやGitHubなんかのサービスも
ログインユーザーの登録情報閲覧・編集画面を見ればそういうデータがHTMLにベタ書きされて閲覧出来ます。
これは丁度ejsに情報を記載しているのと同じ事を指します。

Node.jsをWebサーバとして動作させる
→テンプレートエンジンとしてEJSを採用
→EJSに値を埋め込み、動的なHTMLを生成する
→訪問者のブラウザに返す

重要なのは、見られてヤバいページに、見てはならない人間を入れない認証の仕組みです。

sqlをフロントのjsで操作する

sqlをフロントで操作しようと思ったのですがデータベースの操作にnodeのmoduleをたくさん使っていたので厳しいのかなと思いました。

これは想像通り無理です。
Webサーバの流れを簡単に解説します。

インターネット上に用意したマシンでNode.jsのプログラムを立ち上げて、TCP80番ポートで待ち受ける
利用者はChrome等のブラウザを操作して1のWebサーバを訪問する
2を検知したWebサーバはHTMLファイルを生成してブラウザへ返す
ブラウザは受け取ったHTMLを元に画面を描画する
JavaScriptはブラウザ上で動作し、必要に応じて描画されている画面を書き換える

この時に絶対におさえておかねばならないのは、
ブラウザはHTMLを受け取った時点で「一旦満足して通信を打ち切っている」事です。
なのでJavaScriptとNode.jsには一切の繋がりはありません。

またブラウザ上で動かすJavaScriptは
「訪問したWebページを効率良く読む為」の言語です。

勝手にCドライブの中身を複製して、インターネット上にばらまき始めたら大変な事になりますね。
なのでJavaScriptは厳しいセキュリティ上の制約が課せられ、
AjaxというHTTPリクエストを発射する程度の事しか出来ません。

ejsでroutes/message.jsを読み込もうとしたら読み込むことができなかった

routes/message.jsの関数をpublic/js/custom.jsで呼び出す

それはそう。

しかし、厳密に言えば解決出来る可能性は多少あります。
それにはまずNode.jsとJavaScriptの違いを学習する必要があります。

元々ブラウザがHTMLを読み込み、
画面の描画にする為にDOMツリーというツリー構造をメモリ空間上に作っていました。
JavaScriptはそのDOMツリーを後から書き換えて、画面の更新を促す為に作られた言語です。

なので「外部ファイルを読む」「自由なネットワーク通信」「ローカルの自由なファイルの読み書き」「OSの機能の利用」等の機能はそもそも不要なので存在しません。
スクリプトタグを複数配置して、グローバルスコープに関数をポコポコ生成して、それを使えという男らしい設計思想です。

やがて、Webの発達と共にJavaScriptも人気の言語になります。
そして、PythonやRubyのような汎用スクリプト言語として、
パソコン内から気軽に実行出来るようにしたいと考える人が出てきました。

しかしJavaScriptにはそういう機能はありませんので、
C++で「外部ファイルの読み書き」「自由なネットワーク通信」「OSの機能」等を実装し、
組み込んで使えるようにした魔改造JavaScriptがNode.jsです。

Node.jsは魔改造JSなのでグローバルスコープにrequireが用意されていますが、
素のJavaScriptにはrequireはそもそもありません。
でも便利だから欲しいですよね。Node.jsのユーザー達はそう願うようになり、
JavaScriptでrequireをエミュレートするようになりました。

Webpackのが今の所勢いがありますかね。
まぁ、どちらもやっている事は似たようなもんです。

グローバルスコープになんちゃってrequire関数を用意して、
更に必要そうな複数のJavaScriptファイルを1ファイルにぎゅうぎゅう詰めにしておきます。
なんちゃってrequire関数を実行されると、ぎゅうぎゅう詰めになった箇所から該当のコードを取り出して実行して、結果を返す形で仮想的にrequireを実現させるといった内容になっています。

しかし、JavaScriptはDOMツリーを書き換える為の言語ですので、
Node.jsを実現する為のC++製のツールの部分はどう足掻いても動作しません。
なのでフロントからDBを直接叩くみたいな機能は実装出来ません。

投稿2021/01/18 10:14