ROR jp_prefectureとjpostalで郵便番号から住所を自動入力する

## jp_prefectureとjpostalで住所自動入力を追加しました。
新規にデータを作成する際、住所を自動で入力できると楽だなと思い、使ってみました。
最初なので少しわたわたしたけど、思ったよりは簡単

## jQueryの導入
rails6は``jquery-rails``ではなく、yarnから導入する

```ruby:ターミナル
yarn add jquery
```
environment.jsに設定を追加

```js:config/webpack/environment.js
const webpack = require('webpack')
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery'
  })
)
```
jqueryをimportする

```js:app/javascript/packs/application.js
import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"
import "jquery"

Rails.start()
Turbolinks.start()
ActiveStorage.start()
```

## jp_prefectureの導入
都道府県コードと都道府県名を変換

```ruby:Gemfile
gem 'jp_prefecture'
```

```ruby:ターミナル
bundle install
```

## jpostalを導入
[HP](https://github.com/ninton/jquery.jpostal.js/)からZIPファイルをダウンロード
``jquery.jpostal.js-master``フォルダ内の``jquery.jpostal.js``を``app/javascript/packs``配下に保存する。

packs/jquery.jpostal.jsをimportする。
jpostalを使用するように編集する。

```js:app/javascript/packs/application.js
import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"
import "jquery"
import "packs/jquery.jpostal.js"

Rails.start()
Turbolinks.start()
ActiveStorage.start()

jQuery(document).on("turbolinks:load", function() {
  $('#institution_postcode_text').jpostal({
    postcode : [
      // 取得する郵便番号のテキストボックスをidで指定
      '#institution_postcode_text'
    ],
    address: {
      // %3 => 都道府県、 %4 => 市区町村 %5 => 町域 %6 => 番地 %7 => 名称
      // それぞれを表示するコントロールをidで指定
      "#institution_prefecture"  : "%3",
      "#institution_city_text"   : "%4%5",
      "#institution_street_text" : "%6%7"
    }
  });
});

```

### viewの設定
```erb:new.html.erb
<div class="institution_new_main">
  <div class="institution_new_container">
    <h2>医療機関情報新規作成</h2>
    <%= form_with model: @institution do |f| %>
      <%= render "shared/institution_form", f: f %>
      <div class="institution_name_container">
        <%= f.submit "登録する", class: "institution_submit" %>
      </div>
    <% end %>
  </div>
</div>
```

```erb:shared/institution_form
<div class="flex_spaceevenly">
  <div class="institution_show_info_container">
    <div class="institution_show_name_container">
      <div class= "institution_show_name_label show_label">医療機関名</div>
      <div class="institution_show_name_text show_text"><%= institution.name %></div>
    </div>
    <div class="institution_show_department_container">
      <div class= "institution_show_department_label show_label">診療科目</div>
      <div class="institution_show_department_text show_text"><%= institution.department %></div>
    </div>
    <div class="institution_show_postcode_container">
      <div class="institution_show_postcode_label show_label">郵便番号</div>
      <div class="institution_show_postcode_text show_text"><%= institution.postcode.to_s[0,3] %>-<%= institution.postcode.to_s[3..]%></div>
    </div>
    <div class="institution_show_address_container">
      <div class="institution_show_address_label show_label">住所</div>
      <div class="institution_show_address_text show_text", id="institution_mapping_address"><%= institution.address %></div>
    </div>
    <div class="institution_show_intro_container">
      <div class="institution_show_intro_label show_label">紹介</div>
      <div class="institution_show_intro_text show_text"><%= institution.introduction %></div>
    </div>
  </div>
  <div class="institution_show_image_container">
    <% if institution.image? %>
      <%= image_tag institution.image.url, alt: "アイコン画像", class: "institution_show_image" %>
    <% else %>
      <%= image_tag "default_institution_image.png", alt: "アイコン画像", class: "default_institution_show_image" %>
    <% end %>
  </div>
</div>
```

### Schema
```ruby:schema.rb
create_table "institutions", force: :cascade do |t|
  t.string "name"
  t.string "address"
  t.string "introduction"
  t.datetime "created_at", precision: 6, null: false
  t.datetime "updated_at", precision: 6, null: false
  t.string "image"
  t.integer "postcode"
  t.integer "prefecture_code"
  t.string "address_city"
  t.string "address_street"
  t.string "address_building"
  t.string "prefecture"
  t.string "department"
end
```

### controllerの設定
```rb:controller.rb
def new
  @institution = Institution.new
end

def create
  @institution = Institution.new(institution_params)
  # 住所をつなげてaddressに格納
  @institution.address = @institution.join_address
  if @institution.save
    redirect_to institutions_path, notice: "医療機関を追加しました"
  else
    render "new"
  end
end

def update
  @institution = Institution.find(params[:id])
  if @institution.update(institution_params)
    @institution.address = @institution.join_address
    if @institution.update(institution_params)
      redirect_to institutions_path, notice: "医療機関情報を更新しました"
    else
      render "edit"
    end
  else
    render "edit"
  end
end

private
def institution_params
  params.require(:institution).permit(:name, :postcode, :prefecture, :address_city, :address_street, :address_building, :introduction, :image)
end
```

### modelの設定
```rb.model.rb
class Institution < ApplicationRecord
  # 住所をつなげる関数
  def join_address
    "#{self.prefecture}#{self.address_city}#{self.address_street}#{self.address_building}"
  end
end
```

## jQueryが動かない時は
どうしても動かない時は、以下をviewの最初に追加

```erb:erb
<script type="text/javascript" src="//jpostal-1006.appspot.com/jquery.jpostal.js"></script>
```

## 参考資料
[【Ruby on Rails】郵便番号から住所を自動入力](https://qiita.com/japwork/items/8667a076777fab35c0c4)
[【Rails】jpostalとjp_prefectureを用いて住所自動入力の実装](https://qiita.com/matsubishi5/items/278c1d660a225a3eca18)
[郵便番号から該当する住所を自動で入力できるjQueryプラグイン「jquery.jpostal.js」](https://www.dataplan.jp/blog/jquery/2834)
[【Ruby】f.collection_select　を使ってみた](https://qiita.com/ohnitakahiro/items/c536fe65e37980e1087e)
[【Rails】 form_withの使い方を徹底解説！](https://pikawaka.com/rails/form_with)
[Railsのモデルに書いたメソッドってどうやってコントローラで使うの？](https://qiita.com/leavescomic1/items/99f32f45cd04035f146c)