JavaScript アセットを Rails アプリケーションに追加する

このチュートリアルでは、Rails アプリケーションに JavaScript アセットを追加する方法を説明します。このトピックで作成したプロジェクトを引き続き使用し、Web ページにボタンを追加して、クライアント側でボタンのクリックイベントを処理します。

始める前に、こちらの手順に従ってプロジェクトを作成してください。プロジェクトが作成されたら、以下の手順を実行してください。

Ctrl を 2 回押して、 controller と入力し始めます。呼び出されたリストで rails generate controller を選択し、 Enter を押します。
呼び出された新しいコントローラーを追加ダイアログで、コントローラー名を Welcomeに設定し、 indexというアクションを追加します。 OKです。をクリックします。
RubyMine は、コントローラー、ビュー、およびその他のいくつかのファイルを作成します。このプロセスはファイル名を指定して実行ツールウィンドウに表示されます。このウィンドウで index.html.erb ファイルをクリックします。
アプリケーションのホームページを index に設定するには、 config/routes.rb ファイルを開き、 Rails アプリケーションのルートを定義します。例: Rails.application.routes.draw do ... end ブロック内に次の行を追加します：
root 'welcome#index'
アプリケーションのホームページの設定(英語)で詳細を参照してください。

まず、ビューにボタンを追加する必要があります。 JavaScript コードは、Rails のデフォルトの JavaScript 設定を使用して別途接続します。

app/views/home/index.html.erb ファイルを開きます。
次のコードを追加します。
<h1>Hello, Rails!</h1> <button id="greet-user-button">Hello!</button>
h1 タグ内の既存の静的テキストとは別に、ビューファイルには JavaScript で使用される特定の識別子を持つボタン要素が追加されました。

次に、ボタンクリックを処理する JavaScript ファイルを作成します。

プロジェクトビューの Alt+1 で、 app/javascript ディレクトリを選択します。
Alt+Insert を押して JavaScript ファイルを選択します。
ファイル名（hello ）を指定して、 Enter を押してください。
作成した hello.js ファイルに、次のコードを追加します。
const button = document.getElementById("greet-user-button") if (button) { button.addEventListener("click", () => { alert("Hello!, JavaScript!") }) }
このスクリプトでは、次のことを行います。
- ボタンを識別子で検索してください。
- アラートを表示し、コンソールにメッセージを記録するクリックハンドラーをアタッチします。
このファイルをアプリケーションで使用できるようにするには、 app/javascript/application.js を開いて以下を追加します。
import "hello"
アプリケーションのレイアウトに JavaScript アセットが含まれていることを確認してください。 app/views/layouts/application.html.erb を開き、以下の内容が含まれていることを確認してください。
< %= javascript_importmap_tags %>
config/importmap.rb ファイルを開き、次の行を追加してください。
pin "hello"

アプリケーションの動作を確認するには、Web サーバーを起動する必要があります。

2026 年 6 月 2 日