はじめに
初めてRuby on Railsを触ることになり、JavaScriptを使ってみることになった。
うまく動く資料が見当たらなかったため、備忘録として書いておくことにした。
JavaScriptの実装
JavaScriptの書く場所
app > javascript > packs
- file下に制作のファイルを作成するのがおすすめ
- 自分はusersというファイルを作成し、その下にjsファイルを作成した
jsファイルに書くべきこと
- 読み込み時に表示
window.onload = function(){
//中略
//ウィンドウが読み込まれたとき表示する
}
- 動作により呼び出す場合
app>javascript>packs>user>common.js
window.onchange = function hogehoge(){
//中略
//自分はonchangeで呼び出しをしたためこのように記載した
}
##書いたjsを読み込ませる
app>javascript>packs>application.js
import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"
Rails.start()
Turbolinks.start()
ActiveStorage.start()
// 追加した
require("./user/common.js")
##viewファイル
app>view>device>registrations>new.html.erb
<!--略-->
<%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f| %>
<%= render "devise/shared/error_messages", resource: resource %>
<div class = "set">
<div class = "side">
<%= f.label :icon %>
<!--ファイルを選択したら呼び出し-->
<%= f.file_field :icon, type:"file", autofocus: true, onchange: "previewImage()" %>
<%= f.hidden_field :icon_cache %>
<%= image_tag @user.icon.url, id: 'preview' %>
<label>
<%= f.check_box :remove_icon %>
画像を削除する
</label>
</div>
<!--略-->