Rails と JavaScript を一緒にデバッグする

コントローラーを追加する

1. Ctrl を 2 回押して、 controller と入力し始めます。 rails generate controller を選択して Enter を押します。

2. 新しいコントローラーを追加 ダイアログで、コントローラー名を Welcome に設定し、 インデックス という名前のアクションを追加します。 OK をクリックします。

3. config/routes.rb を開き、 Rails アプリケーションのルートを定義します。例: Rails.application.routes.draw do ... end ブロック内に次の行を追加します:

   root "welcome#index"

ビューを更新する

生成されたビューにボタンを追加します。

1. プロジェクト ビュー (Alt+1) で、 app/views/welcome/index.html.erb を開きます。

2. ファイルの内容を次のコードに置き換えます:

   <h1>Hello, Rails!</h1> <button id="greet-user-button" type="button">Hello!</button>

   ボタンには、JavaScript ハンドラーが使用する識別子があります。

JavaScript ハンドラーを追加する

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

1. プロジェクト ビューで、 app/javascript ディレクトリを選択します。

2. Alt+Insert を押して JavaScript ファイル を選択します。

3. ファイル名として hello を入力し、 Enter を押します。

4. 次のコードを hello.js に追加します:

   const button = document.getElementById("greet-user-button") if (button) { button.addEventListener("click", () => { alert("Hello, JavaScript!") }) }

   このスクリプトはボタンを見つけて、クリックハンドラーをアタッチします。

5. app/javascript/application.js を開き、Rails によって生成されたインポートを残したまま、次のインポートを追加します:

   import "./hello"

6. app/views/layouts/application.html.erb を開き、生成されたアプリケーションバンドルが読み込まれることを確認します:

   <%= javascript_include_tag "application", "data-turbo-track": "reload", type: "module" %>

JavaScript バンドルをビルドする

1. プロジェクト ビューで、 package.json を開きます。

2. スクリプト セクションに次のビルドコマンドが含まれていることを確認します:

   { "scripts": { "build": "esbuild app/javascript/*.* --bundle --sourcemap --format=esm --outdir=app/assets/builds --public-path=/assets" } }

   --sourcemap オプションにより、 hello.js 内のブレークポイントが機能します: ブラウザーで実行中のバンドルを元のファイルに結び付けるソースマップを生成します。

3. ビルド スクリプトの横にあるガター内の 実行 アイコンをクリックし、 'build' を実行 を選択します。

   RubyMine は yarn build を実行し、結果を 実行 ツールウィンドウに表示します。

   

1. 実行 | 実行構成の編集 に移動し、 Rails グループで自動的に作成された開発構成を選択します。

2. 以下のオプションを指定してください。

   

   • ブラウザーの実行 オプションを有効化し、 http://127.0.0.1:3000 を指定します。 この URL は、JavaScript アセットを使用する app/views/welcome/index.html.erb ビューを開きます。

   • デバッグ時に自動的に JavaScript デバッガーを起動する を有効化します。

1. アプリ/javascript/hello.js を開き、 alert を呼び出す行にブレークポイントを設定します。

   

2. デバッグを開始するには、 Ctrl を二度押して、 開発 構成の名前の入力を開始します。 構成を選択し、 Shift を押したまま (ダイアログのタイトルが デバッグ に変わります)、 Enter を押します。

3. 開いた http://127.0.0.1:3000 ページで、 こんにちは ! をクリックします。 デバッガーはブレークポイントで一時停止し、アプリケーションの状態を確認する機能を有効化します。 詳細については、 Chrome での JavaScript のデバッグ を参照してください。