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

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

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

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

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

Q&A

解決済

1回答

5790閲覧

[Rails]自作のJS関数を実装・呼び出す方法

YaMuRo765

総合スコア15

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

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

0グッド

0クリップ

投稿2016/12/08 11:58

編集2016/12/09 05:17

###前提・実現したいこと
Railsにて、自作のJS関数を全ページから利用できるようにしたいです。

実際に関数を使用する場所は vender/assets/javascript/ 以下にある
各ページの制御用JSファイルです。


試した手順は、以下の通りです

① 自作のJS関数を書いたファイル mymethod.js をvender/assets/javascript/に設置

javascript

1function myMethod(value) { 2 alert("My method"); 3}

② app/assets/javascripts/application.js の末尾に「//= require mymethod」を追加

③ vender/assets/javascript/ 以下にある、とあるページ制御用JSにてMyMethodを呼び出す

###発生している問題・エラーメッセージ
手順③の箇所で以下のエラーが出ます

Uncaught ReferenceError: myMethod is not defined

情報に不足がございましたら申し訳ございません。
何卒よろしく御願いいたします。

###蛇足(以下も、御解説頂けますと幸いです)
vender/assets/javascript/ には
第三者のプラグインを置くところ、という印象を受けました。
ここに自作ファイルを置く、という考えは誤りなのでしょうか……

###(2016/12/09 14:15)追記
ひとまずの解決策を得られましたが(回答・それに連なるコメント欄参照)
よりベストな方法が今後得られる可能性がある為、
その際は更新させていただければと考えています。

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

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

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

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

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

guest

回答1

0

ベストアンサー

application.js は読み込んでますか?

自分で作ったものは普通はapp/assetsですねぇ

投稿2016/12/08 13:31

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

YaMuRo765

2016/12/09 01:07

tanyzz様、御回答ありがとうございます。 app/assets/javascriptに自作ファイルを移動して再挑戦しましたが上手くいきませんでした… ・app/views/layouts/application.html.erbの冒頭に  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>  とあるのですが、こちらがapp/assets/javascripts/application.jsを  読み込んでいる場所という認識でいます…が、  Chromeのデバッグツールで「Source」を見ると、application.jsらしきものが見当たりません。  これはRails(Assets Pipeline?)の仕様なのでしょうか… ・app/assetsにて実装がやはり普通なのですね、ありがとうございます  # 言い訳がましいですが、他の方が作成されたコードをトレースしており、Rails初心者としては少々苦戦しそうな構造をしております…
退会済みユーザー

退会済みユーザー

2016/12/09 01:33

fingerprintingはついてるかもしれませんが、application-{md5}.jsが読み込まれてないとどうしようもないですね。Railsといっても最終出力はHTML+αなので、HTMLが出てないと無理です。 ・layouts は読み込まれているか、  view_paths が違ってて別のlayoutsファイルが読み込まれているとか  render layout: false で読み込まれていないとか  render text: "aa" とかで layout 含まれてないとか ・.jsは読み込まれているか、  ビューがキャッシュされているとか ・.jsの中は更新されているか、  config.assets.compile = false になってて自動で更新されないとか  そもそも development じゃないとか
YaMuRo765

2016/12/09 03:12

tanyzz様 御回答・御助言ありがとうございます。 失礼いたしました、public\assets配下にあるapplication-{md5}.jsが 読み込まれているのを確認しました。 以下、御助言頂いた事項の報告です ・layouts 配下のファイルを一部変更してみたところ反映されたので読み込まれている様です。  view_pathsはgrepしたところ該当がありませんでした  render layout: falseはHTTPエラーの対応(と思われるもの)しか該当しませんでした ・キャッシュクリアをしましたが変化はありませんでした ・config.assets.compile = trueであることを確認しました # 今更ですが、前提の追加をさせて頂きます アプリが動作している環境ですが、 既存のアプリを載せて動きを見ており、Railsコマンドを使えない環境にあります。 application-{md5}.jsの生成されるタイミングがいまいち把握できていないのですが Railsコマンド(あるいはrubyやgemコマンド)を使用しなければならないのでしょうか # 一般的な造りに反しているかと思いますが 最終手段として「app/views/layouts/application.html.erb」に 直接<script src="/assets/mymethod.js"></script>を埋め込んでしまおうかと 考えているのですが、危惧すべき点はございますでしょうか 知識も浅はかなままに、何度も尋ね直してしまい申し訳ございません。 可能な限り、御助言の程よろしく御願いいたします。
退会済みユーザー

退会済みユーザー

2016/12/09 04:32 編集

development(compile: true)では、変更後、 次のアクセス時にファイルの内容と参照URLが更新されます。 productionでは rake assets:precompile コマンドで物理ファイルを書き出し、 Railsの再起動で参照URLが更新されます、多分。 developmentでも高速化のためのメモリーキャッシュなどかかってれば再起動が必要です。 直接指定でも大丈夫です。 懸念としては、"/assets/" は config.assets.prefix で設定できるので 変動する場合は/assets/から指定するか、ヘルパーメソッドを使わずassets以外に直接置くか。 Nginx等で強力なキャッシュ設定がある場合、fingerprintingがないので更新されにくいこと。
YaMuRo765

2016/12/09 05:12

tanyzz様 御教授頂きありがとうございます。 期限のある作業であるため、 ひとまずapplication.html.erbにて直接指定を行うことにしました (/assets/配下にファイルを設置し、アプリの再起動を行うと直ぐに反映できました)。 時間が取れ次第、一から基礎を見直していきたいと思います。 一度本件は締めさせて頂き、 改善ができましたら更新させていただきたいと思います。 本当にありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問