### 1. rails new myappをターミナルで実行 
```
$rails new myapp 　#myappのところには自由に名前を入れる
```
### 2. gemに下記を追加し bundle install 

```
 ​gem 'sqlite3', '~> 1.3.13' 　#sqlite3には '~> 1.3.13'を足す

 gem 'devise'       
 gem 'jp_prefecture' 
 ````
```
```
 $ bundle install
```
### 3. Deviseを導入（ターミナルで実行）
```
 $ rails g devise:install
 $ rails g devise User 
 $ rails g devise:controllers users 
 $ rails g devise:views 
```
### 4. routes.rb（ルーティング設定） 
```
 devise_for :users, :controllers => {
   :registrations => 'users/registrations', 
   :sessions => 'users/sessions' 
 } 
```
### 5. userテーブルに郵便番号用下記カラム追加 (ターミナルで実行）
```
 $ rails g migration addColumnToUsers 
```
### 6. migrationファイルに下記を追加 
```
 class AddColumnsToUsers < ActiveRecord::Migration[5.1] 
    def change       
       add_column :users, :postcode, :integer
       add_column :users, :prefecture_code, :integer
       add_column :users, :address_city, :string
       add_column :users, :address_street, :string
       add_column :users, :address_building, :string
     end
   end 
 ```
### 7. models/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 
```
### 8. assets/javascripts/users.coffeeに下記を追加 
```
 ​ $(document).on 'turbolinks:load', ->
   $('#user_postcode').jpostal 
     postcode: [ '#user_postcode' ] 
     address:       '#user_prefecture_code': '%3'
            	    '#user_address_city': '%4'
     		    '#user_address_street': '%5%6'
     		    '#user_address_building': '%7' 
```
### 9.views/devise/registrations/edit.html.erbを下記に追加 
```
<div class="field">
     <%= f.label :postcode %><br />
     <%= f.text_field :postcode, autofocus: true, autocomplete: "postcode" %>   </div>     
<div class="field">
     <%= f.label :prefecture_code %><br />
     <%= f.collection_select :prefecture_code, JpPrefecture::Prefecture.all, :code, :name %>
</div>     
<div class="field">
     <%= f.label :address_city %><br />
     <%= f.text_field :address_city, autofocus: true, autocomplete: "address_city" %>   
</div>     
<div class="field">
     <%= f.label :address_street %><br />
     <%= f.text_field :address_street, autofocus: true, autocomplete: "address_street" %>   
</div>     
<div class="field">
     <%= f.label :address_building %><br />
     <%= f.text_field :address_building, autofocus: true, autocomplete: "address_building" %>   
</div> 
```
### 10.assets/javascripts/jquery.jpostal.jsを追加
```
  ​git clone url  
```
url の部分に(https://github.com/ninton/jquery.jpostal.js/)を入れる。クローンしたらassets/javascripts/直下にjquery.jpostal.jsファイルのみを配置する。 
***
不明点、修正点ございましたらコメントよろしくお願いします。