Rails6でJavaScriptを書く

はじめに

初めて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>
<!--略-->