【Rails】国一覧リストの実装(carmen-rails)

# 実装すること

* gem carmen-railsを使用して、ユーザープロフィールにて国一覧を選択・表示出来るようにする。
 
（私のPFが留学関係である為、世界各国で登録できるようにしたく、実装しました。）

carmen-rails: https://github.com/carmen-ruby/carmen-rails
              https://github.com/jim/carmen-demo-app/

#完成形

* デフォルトでは、日本が選択されているように設定。
* 居住地で国が一覧で表示され、選択が可能。


![gif (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1029483/262bdd0a-1683-c113-6c83-44c9069d98b9.gif)

#前提

下記の機能実装済み。
・devise(今回は、memberモデル)

```ruby:schema.rb
ActiveRecord::Schema.define(version: 2021_05_05_122222) do

  create_table "members", force: :cascade do |t|
    t.string "email", default: "", null: false
    t.string "encrypted_password", default: "", null: false
    t.string "name", default: "", null: false
    t.text "introduction"
    t.string "image_id"
    t.string "country_code", default: "JP"  
    t.string "experienced_country", default: ""
    t.boolean "is_deleted", default: false, null: false
    t.datetime "created_at", null: false
    t.datetime "updated_at", null: false
    t.index ["email"], name: "index_members_on_email", unique: true
    t.index ["reset_password_token"], name: "index_members_on_reset_password_token", unique: true
  end
end
```

#手順
①gem"carmen-rails"の導入
②country_codeカラムの追加
③controllerへの記載
④modelへの記載
⑤viewへの記載

おまけ
⑥日本語表示にしたい場合


#実装

### 1.carmen-railsのインストール
Gemifileにcarmen-railsを追加します。

```ruby:Gemfile
gem 'carmen-rails', '~> 1.0.0'
```
インストールします。

```terminal:terminal
$ bundle install
```

### 2.country_codeカラムの追加

carmen-railsをしようする為には、カラムを追加する必要があります。

```terminal:terminal
$ rails g migration AddCountryCodeToMembers
```
マイグレーションファイルができたと思うので、下記のように記載します。
デフォルトで「**日本**」と表示したいのでdefaultも記載します。

```ruby:db/add_country_code_to_members.rb
class AddCountryCodeToMembers < ActiveRecord::Migration[5.2]
  def change
    add_column :members, :country_code, :string, default: "JP" 
  end
end
```
記載できたら、反映させましょう。

```terminal:terminal
$ rails db:migrate
```
無事できたかschemaファイルで確認しておきましょう。

### 3.controllerへの記載

dbに保存する為にも、ストロングパラメーターにcountry_code追記しておきましょう。

```ruby:members_controller.rb
class Public::MembersController < ApplicationController

  def show
    @member = Member.find(params[:id]
  end

  ----省略----
  
  private
  def member_params
    params.require(:member).permit(:name, :email, :image, :introduction, :country_code, :experienced_country, :is_deleted)
  end
```

### 4.modelへの記載

現状でもviewで表示は可能ですが、
カラム名から分かる通り、そのまま表示すると国コード(2文字)が表示されます。
http://www.kc.tsukuba.ac.jp/ulismeta/metadata/standard/cntry_code.html
(※ ただ、編集画面では、国名がしっかりと表示されます。)

なので、memberモデルに国名で表示させるメソッドを記載します。

```ruby:member.rb
def country
    Carmen::Country.coded(country_code)
end
```

これによって、国コードの国名に変換してくれます。

### 5.viewへの記載

①ユーザー詳細ページ

ここで先ほど作成したメソッドを使用します。

```erb:members/show.html.erb
<div>
　<div>
    <p>住居</p>
    <h5><%= @member.country.name %></h5>
  </div>
</div>
```

②ユーザー編集ページ

form_withを使用しているので、
それに則って下記を記載します。

```erb:
<td><%= f.country_select :country_code %></td>
```

下記のようになるかと思います。

```erb:members/edit.html.erb
<%= form_with model: @member, url:member_path, method: :put, local: true do |f| %>
　　---省略----
<div class="form-group">
  <th><%= f.label :居住地 %></th>
  <td><%= f.country_select :country_code %></td>
</div>
<% end %>
```
country_selectで、選択ができる使用になります。
:以降は、カラム名を記載します。

form_withの説明は省きます。詳しくはこちらでご確認を。

https://pikawaka.com/rails/form_with

### 6.日本語表示にしたい場合

gemで'rails-i18n'というものがあります。
そちらをインストールすると日本語表記に変わりますのでお好み。

https://qiita.com/shimadama/items/7e5c3d75c9a9f51abdd5

以上です。