Rails5でjp_prefectureとjpostal.jpを使って郵便番号から住所を自動入力する

rails jp_prefecture jpostal

ユーザーに住所を入力してもらう時、郵便番号を入力したら、住所も自動で入るフォームをjp_prefectureとjpostal.jsで作っていきます。
都道府県はプルダウンメニューにします。また、formはsimple_formで書いています。

JpPrefecture
都道府県コードと都道府県名を変換するGemです。
https://github.com/chocoby/jp_prefecture
jquery.jpostal.js
郵便番号から住所を自動入力してくれるjQueryプラグインです。
https://github.com/ninton/jquery.jpostal.js/

環境はこちらです

準備

はじめにScaffoldでユーザーを作っておきます。

$ bundle install を実行します

jpostal.jp – GitHubからダウンロードしてjquery.jposta.jsというファイルを、app/assets/javascripts/に配置します。

assets/javascripts/application.jsにこれを入れないとrails5ではjQueryが動きません。

Migration

郵便番号や住所を入れるカラムを追加していきます。

できたマイグレーションファイルに次のようにカラムを書き足します。
ちなみにprefecture_codeはintegerです。

$ rails db:migrate を実行します。

Model

prefecture_codeからprefecture_nameに変換するメソッドをモデルに書いておきます。

app/models/user.rb

View

シンプルフォームで書いていきます。都道府県はプルダウンにするので、collectionです。include_blankで空のオプションを先頭に追加しています。

app/views/users/_form.html.erb

jQuery

CoffeeScriptでjpostalメソッドを呼んでいます。それぞれのフィールドのID属性を指定しておきます。

app/assets/javascripts/user.coffee

これで郵便番号を入力すると、住所が自動で入るかと思います。

Controller

忘れずにストロングパラメーターを追加しておくことで、create, updateができるかと思います。

app/controllers/users_controller.rb

以上です!
また、gemを使わずに都道府県データを持つ実装方法の記事はこちらをご覧ください。
ありがとうございました。😊


投稿者:

Shuji Tenra

「仕事に特化したQ&AサイトJobQuery【ジョブクエリ】」の開発/運営をしています。https://jobquery.jp