はじめに
今回下記アドベントカレンダーに参加したので、個人開発でチャレンジしたオートコンプリート機能について記事を書きたいと思います。
具体的には、Railsを使ったCSVファイルのインポートとフォームへのデータ表示の方法を共有します。
初めて挑戦する際に悩んだポイントや解決の流れも交えていますので、初心者の方に少しでも参考になれば嬉しいです。
合計すると1週間は悩んだ末にたどりついた
いや、正直心が限界で「こころここにあらず」でしたがある記事に最後の望みを託し挑戦したらできました。
(コードで空欄がだいぶありますが、実際に入力したファイルからそのまま持ってきているのでご了承ください💦)
環境
Windows, WSL
Docker
Ruby 3.2.3
Rails 7.1.3
実装の流れ
1. CSVファイルの用意と配置
まず、データベースにインポートするためのCSVファイルを作成します。
以下のように、idとnameを含むデータを準備してください。
CSV例
id,name
1,Tokyo
2,Yokohama
3,Osaka
作成したCSVファイルを、プロジェクトディレクトリのdb配下に配置します（例: db/stations.csv）。
2. CSVファイルをデータベースにインポート
コンテナ内に入る
docker composeを使用している場合、以下のコマンドでWebコンテナ内に入ります。
docker compose exec web bash
インポート用コードの作成
CSVを読み込むためのコードをdb/seeds.rbに記述します。
require 'csv'
CSV.foreach(Rails.root.join('db/stations.csv'), headers: true) do |row|
Station.create(
id: row['id'],
name: row['name']
)
end
コード実行
以下のコマンドを実行して、CSVファイルをデータベースにインポートします。
rails db:seed
データ確認
Railsコンソールを開き、データが正しくインポートされているか確認します。
rails console
Station.all
3. 新規投稿フォームに駅名を表示する
ビューの編集
app/views/posts/new.html.erbを編集し、datalistで駅名を表示します。
<label for="station_id">駅名</label>
<input type="text" id="station_id" name="station_id" value="<%= @station.present? ? "#{@station.name} (ID: #{@station.id})" : '' %>" autocomplete="on" list="stations">
<datalist id="stations">
<% @stations.each do |station| %>
<option value="<%= "#{station.name} (ID: #{station.id})" %>"></option>
<% end %>
</datalist>
コントローラーの編集
app/controllers/posts_controller.rbのnewアクションを編集し、データをビューに渡します。
def new
@post = Post.new
@stations = Station.all
end
表示確認
ブラウザでフォームを開き、datalistに駅名が表示されていることを確認します。
👇：表示確認
参考記事
今回の実装にあたり下記記事を参考にして進めました
さいごに
RailsでのCSVデータのインポートやビューへの反映は、最初は戸惑うことも多いですが、一度理解すれば非常に便利な機能です。
この記事を通じて、少しでもみなさんの開発に役立つ情報を提供できれば嬉しいです。
これからも試行錯誤を続け、アウトプットを増やしていきたいと思います！