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

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

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

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

Ruby on Rails 7

Ruby on Rails 7は、2021年12月に正式リリースされました。Ruby on Railsのバージョン7であり、フロントエンド開発環境を大幅に刷新。Node.jsを用いない構成がデフォルトになっています。

Q&A

1回答

1506閲覧

Rails7.0におけるjavascriptファイルの実行

Kowa

総合スコア0

JavaScript

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

Ruby on Rails 7

Ruby on Rails 7は、2021年12月に正式リリースされました。Ruby on Railsのバージョン7であり、フロントエンド開発環境を大幅に刷新。Node.jsを用いない構成がデフォルトになっています。

0グッド

0クリップ

投稿2022/12/10 04:15

前提

Rails7.0でimportmapを使用してjavascriptの画像処理を組み込もうとしています。
実装後、目的としていた画像の変換が行われず、Chromeの検証機能で確認したところ以下のエラーメッセージが発生していました。

実現したいこと

  • Rails7.0で javascriptのファイルを実行したい

エラーメッセージ(Chromeの検証機能より)

Uncaught TypeError: Cannot set properties of undefined (setting 'load') at dot2:436:21 at dot2:442:

該当のソースコード(一部抜粋)

javascript

1(function () { 2 var PixelCluster; 3 var _root = this; 4 5 if(typeof exports !== 'undefined') { 6 PixelCluster = exports; 7 } 8 9 var ctx = null, 10 image = null, 11 imgData = null, 12 worker = new Worker('lib/js/kmeans.js'); 13 14 var core = { 15 load: function(fileName, onComplete, onError) {  16 ctx = document.createElement('canvas').getContext('2d'); 17 image = new Image(); 18 imgData = null; 19 image.addEventListener('load', function(e) { 20 var img = e.target; 21 ctx.canvas.width = img.width; 22 ctx.canvas.height = img.height; 23 ctx.drawImage(img, 0, 0); 24 imgData = ctx.getImageData(0, 0, img.width, img.height); 25 if(typeof onComplete === 'function') { 26 onComplete(imgData, new Date()); 27 } 28 }, false); 29 image.addEventListener('error', function() { 30 if(typeof onError === 'function') { 31 onError(); 32 } 33 }, false); 34 image.src = fileName; 35 }, 36 perform: function(division, ncluster, method, onComplete, onError) { 37 var features = core.extractFeatures(division); 38 if(typeof onComplete === 'undefined') { 39 var codebook = core.kmeans(features, ncluster, method); 40 var result = core.vq(features, codebook["centroids"], codebook["code"]); 41 return result; 42 } else { 43 var message = {"samples":features, "ncluster":ncluster, "method":method}; 44 worker.postMessage(message); 45 worker.addEventListener('message', function(e) { 46 e.target.removeEventListener('message', arguments.callee); 47 if(typeof onComplete === 'function') { 48 onComplete(e.data); 49 } 50 }, false); 51 worker.addEventListener('error', function(e) { 52 e.target.removeEventListener('error', arguments.callee); 53 if(typeof onError === 'function') { 54 onError(); 55 } 56 }, false); 57 return true; 58 } 59 } 60 }; 61 // public APIs 62 PixelCluster.load = core.load; //ここのloadが未定義となっている 63 PixelCluster.perform = core.perform; 64}).call(this)

試したこと

前提の確認
画像のプレビュー機能
上記ページを参考に作成したjavascriptのファイルは実行できたので、importmapは正しく機能しているように見えています。

以下、エラーに対して
オブジェクト初期化子の使用
リテラル表記法の書き方が間違っているかと思い上記ページで確認しましたが、解決策とみられることを見つけられませんでした。

ECMAScript 2015 での新しい表記法
上記ページを参考にエラーの該当部を略記法で書き直してみましたが状況は変わりませんでした。
load: function(fileName, onComplete, onError) { 

load(fileName, onComplete, onError) { 

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

Rails7.0
Ruby3.1

初心者質問となりますがよろしくお願いいたします。

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

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

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

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

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

guest

回答1

0

あまりJavaScriptはわかっていないので恐縮ですが・・・
Rails7はHotwireが採用されていて、その中のTurboのイベント処理で記述するとうまくいくかもしれません。

参考:https://turbo.hotwired.dev/reference/events

投稿2022/12/10 21:40

編集2022/12/10 21:41
no1knows

総合スコア3365

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

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

Kowa

2022/12/11 11:05

Hotwireについては調べていなかったので、これから確認してみます。 アドバイスありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問