3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Rails6でJavaScriptを書く

Last updated at Posted at 2021-09-25

はじめに

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?