Ruby on Rails 住所自動入力実装方法

はじめに

現在のバージョン：
macOS Catalina 10.15.3

Ruby on Railsで住所自動入力を実装してみました。
備忘録として記述します。もし参考になれば幸いです。

手順

（1）はじめに下記からjsファイル(jQueryプラグイン)をダウンロード。
jquery.jpostal.js

（2）ダウンロードしたjsファイルをapp/assets/javascriptsに配置。

（3）Gemfileに下記を追加後、ターミナルで$ bundle install。

Gemfile

# RailsでjQueryを使えるようにするため
gem 'jquery-rails'
# 住所機能
gem 'jp_prefecture'

（4）Userモデルに下記カラムを追加後、ターミナルで$ rails db:migrate。

ターミナル

rails generate migration AddColumnsToUsers postal_code:string prefecture_code:string address_city:string address_street:string

（5）Userモデルを編集する為、app/models/user.rbに下記追加

user.rb

  include JpPrefecture
  jp_prefecture :prefecture_code

  def prefecture_name
    JpPrefecture::Prefecture.find(code: prefecture_code).try(:name)
  end

  def prefecture_name=(prefecture_name)
    self.prefecture_code = JpPrefecture::Prefecture.find(name: prefecture_name).code
  end

（6）表示をさせるビューに下記追加(本記事はdeviseを導入して新規会員登録画面で実装)app/views/devise/registrations/new.html.erbに追加記述

new.html.erb

<%= f.label :郵便番号 %>
<%= f.text_field :postal_code, autocomplete: "postal_code", id: "customer_postal_code" %>

<%= f.label :都道府県 %>
<%= f.collection_select :prefecture_code, JpPrefecture::Prefecture.all,  :name, :name, autocomplete: "prefecture_code", id: "customer_prefecture_code" %>

<%= f.label :市区町村 %>
<%= f.text_field :address_city,  autocomplete: "address_city", id: "customer_address_city" %>

<%= f.label :町名番地 %>
<%= f.text_field :address_street,  autocomplete: "address_street", id: "customer_address_street" %>

（7）app/assets/javascripts/user.coffeeにjpostalメソッドを呼び出す為記述。

user.coffee

$ ->
  $("#user_postcode").jpostal({
    postcode : [ "#user_postcode" ],
    address  : {
                  "#user_prefecture_code" : "%3",
                  "#user_address_city" : "%4",
                  "#user_address_street" : "%5%6%7"
                }
  })
  # 入力項目フォーマット
    #   %3  都道府県
    #   %4  市区町村
    #   %5  町域
    #   %6  大口事業所の番地
    #   %7  大口事業所の名称

（8）app/controllers/users_controller.rbに下記追加記述

users_controller.rb

  private
  def user_params
    params.require(:user).permit(:postcode, :prefecture_code, :address_city, :address_street) #保存を許すカラム
  end

以上で郵便番号入力後、住所が自動で入力がされるかと思います。

補足

住所自動入力を設定した画面に遷移してリロードしないと郵便番号の自動入力がしない場合、リンクの記述に data: {"turbolinks" => false} を追加すると解消できました。

<%= link_to '会員登録', '/customers/sign_up',  data: {"turbolinks" => false} %>

初めて実装した場合約20分はかかりました。
ご参考になれば幸いです。