郵便番号による住所自動入力機能について

こんにちは、たにーです。

今回は、郵便番号を入力すると
自動的に住所が入力される機能についてです。

#前提
- railsでのアプリケーション
- deviseにて新規登録画面を作成済み。
- userモデルに郵便番号と住所のカラムがあること。<br>
（今回は、postcode,addressです。）


**参考画像**
![スクリーンショット 2021-03-26 0.22.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1029483/5b1e2d68-48dd-557b-3a7d-56ef306d2929.png)

**モデルのカラム(schemaファイル)**

``` rb:app/db/schema.rb

ActiveRecord::Schema.define(version: 2021_03_25_151319) do

  create_table "users", force: :cascade do |t|
    t.string "email", default: "", null: false
    t.string "encrypted_password", default: "", null: false
    t.string "reset_password_token"
    t.datetime "reset_password_sent_at"
    t.datetime "remember_created_at"
    t.string "name"
    t.string "postcode"         #追加しました
    t.string "address"          #追加しました
    ~ 省略　~
   end
```

**コード**

```html:devise/registrations/new.html.erb
<h2>Sign up</h2>

<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
  <%= render "devise/shared/error_messages", resource: resource %>

  <div class="field">
    <%= f.label :名前 %><br />
    <%= f.text_field :name, autofocus: true, autocomplete: "name" %>
  </div>

　　 <!-----------------------追加------------------------->

  <div class="field">
      <%= f.label :郵便番号 %><br />
      <%= f.text_field :postcode, autofocus: true, autocomplete: "postcode"%>
    </div>
  <div class="field">
      <%= f.label :住所 %><br />
      <%= f.text_field :address, autofocus: true, autocomplete: "address" %>
    </div>

　　 <!-----------------------追加------------------------->

  <div class="field">
    <%= f.label :email %><br />
    <%= f.email_field :email, autofocus: true, autocomplete: "email" %>
  </div>

```

#実装開始

流れは以下の通りです。
①gemの導入。(jp_prefectureとjquery-rails)
②jquery.jpostal.jsを導入
③application.jsの編集

②に関しては、下記のgithubを使用して進めますのでURLを貼っておきます。

https://github.com/ninton/jquery.jpostal.js/


##gemの導入

最初に、Gemfileに2つのgemを追加します。

```rb:Gemfile
gem 'jp_prefecture' 
gem 'jquery-rails' 
```
そのあとは、ターミナルでインストールを実行。

```terminal:terminal
 $ bundle install (bundleだけでもOK)
```

簡単ですね。次にいきましょう。

##jquery.jpostal.jsを導入

次に、下記のgithubへ移動。

https://github.com/ninton/jquery.jpostal.js/

右にあるCodeボタンを選択し、DownloadZIPをクリック。ダウンロードが進みます。
![スクリーンショット 2021-03-26 0.35.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1029483/8bddb2a7-4e62-995e-6492-11320e8f4519.png)

**下記が該当するファイルです**
![スクリーンショット 2021-03-26 0.31.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1029483/05609b1d-063e-adbe-ffb0-b87c82aefde7.png)

その後、ダウンロードしたファイルの中から、
**jquery.jpostal.js**のみをapp/assets/javascriptsに格納します。
ドラッグで簡単にコピー/移動できます。

![スクリーンショット 2021-03-26 0.34.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1029483/23ca0ffe-89e8-27ab-b261-a0153e5c8be2.png)

##application.jsの編集

app/assets/javascriptsに格納されているapplication.jsを開いて編集します。

```js:application.js

//= require rails-ujs <--削除
//= require jquery <--追加
//= require jquery_ujs <--追加
//= require activestorage
//= require turbolinks
//= require jquery.jpostal <--追加
//= require_tree .

$(function() {
  $(document).on('turbolinks:load', () => {　//turbolinks適応させないため
    $('#user_postcode').jpostal({　  // #フォームに付与されているid名を記載
      postcode : [
        '#user_postcode'  // #フォームに付与されているid名を記載
      ],
      address: {
        "#user_address": "%3%4%5", // # 都道府県市区町村と町域が入力される
                                   // # フォームに付与されているid名を記載
      }
    });
  });
});
```

##備考：フォームのIDの付与をみる方法

idなんて書いてないからわからない！
そんな時は、実際のWEBページを開いて、右クリック。
検証を選んで、ディベロッパーツールを開きましょう。

値を入力するコード（フォーム）を見てみると、idが書いてあるかと思います。

参考までに。

https://www.sakurasaku-labo.jp/blogs/developer-tools

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

```rb:application.html.erb
<%= link_to '会員登録', '/customers/sign_up',  data: {"turbolinks" => false} %>
```

#完成

下記のようにできましたでしょうか？
もし、出来なかった場合、コメントにて教えていただけると助かります。

![ezgif-1-e1872ff8691d.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1029483/70cc4749-77b5-f1a4-cba2-6b046c9cbaa8.gif)


以上、たにーでした。
#参考資料

https://qiita.com/japwork/items/8667a076777fab35c0c4

https://hajimeteblog.com/jpostal/

https://qiita.com/tiger26/items/d67582c7439b7f582f35