rails7 jsファイルから写真を選択しhtmlに描写したい

Question

ruby 3.1.0, rails 7.0.2.2を使い簡単なゲームアプリを作っています。
今はその中の一つとしてトランプゲームのブラックジャックを作っています。

ゲーム自体は今の段階ではサーバーとやり取りをするほどではないのjavascrpitを用いて実装を考えています。

やりたいこと

js内でランダムの数字を生成し、それに対応するトランプのカードをapp/asssets/imgages内に保存されているplayer_card-(各数字)の名前の写真を取得し、htmlに描写をしたいです

<div class="w-1/2 mx-auto relative" data-controller="blackjack"> 
	<div class="flex justify-around my-10">
		<p id="hit">Hit</p>
		<p id="stand">Stand</p>
	</div>
	<div class="">
		<div id="player-field" class="flex justify-center mb-2" data-controller="card_holder">
			<div class="w-20"><%= image_tag "player_card-#{@userFirstNum}" %></div>
			<div class="w-20"><%= image_tag "player_card-#{@userSecondNum}" %></div>
			<div class="w-20 bg-slate-400 card-holder"></div>
		</div>
		<div class="mb-2">
			<%= image_tag "img_play-field_user-icon.png", width: "75px", class: "mx-auto"%>
		</div>
		<h2>YOU</h2>
	</div>
</div>

app/javascript/controllers/blackjack_controller

import { Controller } from "@hotwired/stimulus"

export default class extends Controller{
	connect(){
		const hitBtn = document.getElementById('hit')
		const playerField = document.getElementById('player-field')
		hitBtn.addEventListener('click', ()=>{
			let imgElement = document.createElement('img')
			let playCard = Math.floor(Math.random()*(14-1)+1)
			imgElement.setAttribute('src', `/assets/images/player_card-${playCard}.png`)
			playerField.querySelector('.card-holder').appendChild(imgElement)
		})
	}

ボタンを押した後のchromeでの出力結果です

<div class="w-20 bg-slate-400 card-holder"><img src="/assets/images/player_card-1.png"></div>

//consoleでのエラーメッセージです
 get http://127.0.0.1:3000/assets/images/player_card-1.png 404 (Not Found)

質問

1. javascript内からassets/imagesに接続するためにはどの様にpathを書かなければいけないのでしょうか？
2. 独学で勉強しており今回の様な場合どこにjavascriptの処理を書くべきなのかわかっておらず、data-controllerを使って動かそうとしています。もし他に良い方法があれば教えていただけると幸いです

追記

ボタンを押した際の動きをターミナルで追ったところ以下のエラーメッセージを発見しました。

ActionController::RoutingError (No route matches [GET] "/assets/images/player_card-1.png"):

もちろん上記のようなroutesは設定していませんし、ページの中だけで完結させたいのでcontrollerを使ってサーバーサイドとやり取りをすることは考えていませんのでそちらの治し方も教えていただきたいです

Answer 1

javascript内からassets/imagesに接続するためにはどの様にpathを書かなければいけないのでしょうか？

app/asssets/imgages配下に保存した画像は、/assets/IMAGE_NAME.pngで呼び出せます。
なので、/assets/images/player_card-${playCard}.pngあたりを/assets/player_card-${playCard}.pngに変更すると画像の取得ができると思います。

独学で勉強しており今回の様な場合どこにjavascriptの処理を書くべきなのかわかっておらず、data-controllerを使って動かそうとしています。もし他に良い方法があれば教えていただけると幸いです

Railsの専門家ではない(Railsアプリケーションを作れるだけ)ので流してもよいですが、今回使用されているRails7は、2021年12月リリースとかなり最近公開されたものです。
JavaScriptの記述方法を調べられてあまり有用な情報が出てこなかったと思いますが、新しいバージョンかつRails6からRails7になった際にJavaScript周りの状況が大きく変更されている為、有益な回答や情報は得られないと思います。
なので、現在はRails7でアプリを作成されていますが、WebアプリやRails初心者の場合は、情報元や開発経験を持つ方が多いRails6を使って開発したほうがいいと思います。
情報の少ないRails7を使いたい(Rails6は使えて7に移行する為に質問をしているなど)理由があればRails7を使用しても問題ないと思いますが。

また、Webアプリケーションの仕組みに関して、少し誤解されているように感じたので、コメントしますと。

サーバーとやり取りをするほどではない
ページの中だけで完結させたいのでcontrollerを使ってサーバーサイドとやり取りをすることは考えていません

と書かれていますが、今回の場合はHTMLを取得した後でも、サーバーとのやり取りをしないと実現できません。
具体的には、画像ファイルの取得部分なのですが、必ずサーバーから画像を取得する(やり取りをする)必要があります。
JavaScriptから見ると、単にsrcに画像のPathを記述したimgタグを生成するだけに用に見えますが、タグが生成されるとブラウザがサーバーに対して画像を取得するリクエストを投げます。
app/asssets/imgages配下に画像を保存するとわざわざcontrollerを作成せずとも画像の取得ができるというだけです。
なので、JavaScriptを/assets/player_card-${playCard}.pngに変更すると画像が表示されると思いますが、同時にserver側のログにgetリクエストを受け取った事(サーバーとやり取りをしたこと)が出ます。
これに関しては、serverと通信するしか方法はないと思うので、無理に通信をしないようにとは考えない方がよいと思います。
そもそもClient - Server System自体、Clientはリクエストを投げるだけで処理をしないことがベース(JavaScriptが無かった時代からの考え方)だと思います。

Comments

[Yuu]

また、railsはあくまでWeb開発を便利にするツール群の集合体なので、Webの事情(Server-Client, Bundler等)が分からないと扱いにくいと思います。
簡単にWebページを作成するのであれば、単純にWebサーバーの立ち上げ、Railsを新しく触ってみたいのであれば、ドキュメントが多いrails6の使用をお勧めします。

[退会済みユーザー]

Yuu Tさん。ご連絡ありがとうございます。無事にpathを変更することで描写させることができました。またrailsについてのアドバイスもありがとうございます。参考にさせていただいて勉強を頑張りたいと思います

Answer 2

/assets/images/player_card-1.pngで表示されないのは、railsのデフォルトで　config.assets.digest = true だからです。これが true だとapp/assets/images/player_card-1.pngを表示させるには
/assets/player_card-1-d2d3c5b8766735b66b5953ab835eb3b9238ddd8b012ded58eabcc5014f37a58b.pngにアクセスする必要があります。-以降のでたらめな文字列はダイジェストと呼ばれます。

html.erbの以下に対応する部分をブラウザで確認してみてください。
srcのパスにダイジェストが付加されているはずです。

			<div class="w-20"><%= image_tag "player_card-#{@userFirstNum}" %></div>
			<div class="w-20"><%= image_tag "player_card-#{@userSecondNum}" %></div>

config/environments/development.rb などで config.assets.digest = false とすると/assets/player_card-1.png でアクセスできるようになり javascript から指定できるようになりますが、今度はerbでダイジェストが付加されないようになってしまいます。

digest を true なまま javascript から画像を表示するようにするには以下の方法が考えられます。

• js で書き換える画像をpublic/以下に置く
• すべての画像を(image_tagで)display: none で埋め込んでおいてjsでは表示を切り替える
• 画像を書き換える処理を turbo でやる
• webpack を導入して画像を javascript で扱う