はじめに
フォームでファイルを選択した際、選択したファイル名を表示したい場面がありますよね？Rails 7では、Stimulusを使うことでシンプルに実現できます。この記事では、ファイル名を表示する機能を、Stimulusを活用して実装する方法を解説します。
実現したいこと
以下のフォームのように、ファイルを選択するとそのファイル名をフォームの下に表示する仕組みを作ります。
特徴:
- 複数ファイルを選択可能。
- ファイル名が長い場合は30文字で切り詰めて表示（トランケート）。
実装手順
1. Stimulusコントローラを作成
Rails 7ではStimulusがデフォルトで導入されているため、Stimulusコントローラを作成します。
以下のコマンドを実行して、新しいStimulusコントローラを生成します：
bin/rails generate stimulus file_input
これにより、app/javascript/controllers/file_input_controller.js が作成されます。
2. コントローラにロジックを追加
file_input_controller.jsに、ファイル選択時に名前を表示する機能を追加します。
修正後のコード
import { Controller } from "@hotwired/stimulus";
// Connects to data-controller="file-input"
export default class extends Controller {
static targets = ["input", "fileNames"]; // ファイル入力と名前表示用ターゲットを定義
connect() {
// ファイル選択時にイベントをトリガー
this.inputTarget.addEventListener("change", this.displayFileNames.bind(this));
}
displayFileNames(event) {
// 選択されたファイルリストを取得
const files = Array.from(this.inputTarget.files);
// ファイル名をトランケートして表示
const truncatedFileNames = files.map((file) => {
const maxLength = 30; // 最大文字数
return file.name.length > maxLength
? file.name.substring(0, maxLength) + "..."
: file.name;
});
// ファイル名をリストとしてHTMLに挿入
this.fileNamesTarget.innerHTML = `
<ul>
${truncatedFileNames.map((name) => `<li>${name}</li>`).join("")}
</ul>
`;
}
}
3. ビューでStimulusコントローラを適用
Stimulusコントローラをフォームに適用します。data-controllerとdata-target属性を利用して、ファイル選択フィールドとファイル名表示エリアを関連付けます。
修正後のフォーム（例: app/views/documents/_form.html.erb）
<div data-controller="file-input">
<div class="field">
<%= form.label :files, "Attach Files" %>
<%= form.file_field :files, multiple: true, data: { target: "file-input.input" } %>
</div>
<div id="file-names" data-target="file-input.fileNames"></div> <!-- ファイル名を表示 -->
</div>
4. Stimulusを読み込む
Stimulusコントローラを有効にするために、エントリーポイント（app/javascript/application.js）でStimulusをロードします。
修正後のapp/javascript/application.js
// Load all Stimulus controllers
import "./controllers";
5. 動作確認
以下を確認してください：
-
ファイル選択時に名前が表示されること：
- フォームでファイルを選択すると、ファイル名が表示されます。
- 長いファイル名は30文字にトランケートされます。
-
複数ファイルを選択可能：
- 複数ファイルを選択すると、全てのファイル名がリスト表示されます。
まとめ
Rails 7ではStimulusを使うことで、フロントエンドの機能を簡単に拡張できます。ファイル選択時に名前を表示する仕組みも、わずか数ステップで実現可能です。
ポイント
- Stimulusの
data-targetでHTML要素を簡単に管理。 - 長いファイル名はJavaScriptで切り詰めて表示。
これでフォームのUXが向上します！ぜひ試してみてください。