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

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

ただいまの
回答率

90.35%

  • JavaScript

    22092questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Node.js

    2529questions

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

フロントエンドのjavascriptでnode.jsのモジュールをrequireしたい

解決済

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 625

mote

score 19

以下のコードのように
htmlからフォーム送信する内容に公開鍵暗号を設定しようと思い
node.jsで公開鍵をつける関数を作り
module.exportsしています。

その自作したモジュールをフロントエンドで使いたいと思い
browselifyをnpmからインストールし
$ browselify crypt.js > bundle.js
としてディレクトリ内にbundle.jsが作成されました。

これでフロントエンドでrequireが使えると思ったら
Uncaught ReferenceError: require is not defined

というエラーがクライアントコンソールに出てしまいます。

ネットに書いてある通り<script src="bundle.js"></script>
としているので、何がダメなのか分かりません。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>socket.io</title>
</head>
<body>
  <h1>ログイン画面</h1>
  <h2>名前とパスワードを入力してください</h2>
  <form name="myid">
    <input type="text" name="name">
    <input type="number" name="password">
    <input type="submit" value="送信">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>

    <script src="http://localhost:3000/socket.io/socket.io.js"></script>

<script src="bundle.js"></script>
<script>
    let cryp = require("crypt") ;
    let name = $(`input[name="name"]`).val() ;
    let pass = $(`input[name="password"]`).val() ;
    let cryp_name = cryp.cip(name) ;
    let cryp_pass = cryp.cip(pass) ;

    let socket = io.connect();
    $(`form[name="myid"]`).submit(function(e){
      console.log("c:"+cryp_name) ;
        socket.emit("emit_data",{
          name : cryp_name,
          password : cryp_pass
        });
     e.preventDefault();
}) ;
    </script>
  </body>
  </html>

↓crypt.js

let crypto = require("crypto");

 //let text="aiueo";
 let key="key" ;
// 暗号化するテキスト  text
// 暗号化キー         pass

let cip = function(text){
  // 暗号化
  let cipher = crypto.createCipher("aes192", key) ;
  cipher.update(text, "utf8", "hex") ;
  let cipheredText = cipher.final("hex") ;

  console.log("暗号化(AES192) :") ;
  console.log(cipheredText) ;
  return cipheredText ;
}

let decip = function(text){
  // 復号
  let decipher = crypto.createDecipher("aes192", key) ;
  decipher.update(text, "hex", "utf8") ;
  let deciphered = decipher.final("utf8") ;

  console.log("復号化(AES192) : ") ;
  console.log(decipherd) ;
  return deciphered ;
}

let cryp= function(text){
  cip(text) ;
  decip(text) ;
}
module.exports = cryp ;
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

<script>
    let cryp = require("crypt") ;

Browserifyを通さない、HTMLに直接書くJavaScriptにrequireは使えません。あくまで「Browserifyで処理するコード」だけrequireが処理されるものであって、「これでフロントエンドでrequireが使える」ようになるものではありません。

module.exportsではなく、window.cryp = crypのような形でグローバルオブジェクトから使う」あるいは「すべてをBrowserifyで処理するJavaScriptソース側に書いてしまう」などの書き方が必要です。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/12/09 13:39

    ありがとうございます

    キャンセル

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

  • ただいまの回答率 90.35%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • JavaScript

    22092questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Node.js

    2529questions

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