【Ruby on Rails】【Pokemon API】カントー地方151匹をすべて表示させてみよう

Railsでポケモンいえるかなを開発したくて、
まず初段階としてポケモンをすべて表示させてみようと思いました。その為の備忘録です。

1.Railsプロジェクトの作成

まずはRailsプロジェクトを作成します。

terminal

$ rails new kanto_pokemon

kanto_pokemonプロジェクトが作成されたら
ターミナル上でkanto_pokemonプロジェクトに移動します。
(cdコマンドを使用します。)

次にfaradayというHTTP通信させたいときに使うgemをGemfileに追記してbundle installします。

• Faradayのざっくり説明
  • HTTPクライアントライブラリ。
  • Rubyの標準ライブラリのnet/httpでもHTTPリクエストはできますが、Faradayはより簡単にHTTPリクエストを行うことができる。

Gemfile

gem 'faraday'

terminal

$ bundle install

次にPokemonsコントローラーとPokemonモデルを作成します
モデルはstring型のnameを格納します

terminal(コントローラの作成)

$ rails g controller pokemons index

terminal(モデルの作成)

$ rails g model pokemon name:string

コントローラは命名時は複数形、モデルは単数形なので
間違えないようにしてください

今回はPokeAPIを使用します。

APIとは他サービスの機能を連携できる仕組みのことである

例えばメタモンの情報を取り出したいとき、
Try it now!の下のフォームに
pokemons/dittoと入力すると
下にdittoのJSONがダダーーっと出ます。

ここではポケモン名は英語名で検索する必要があります。
ポケモン図鑑ソードシールド > ポケモン 英語名リスト
などで英語名を調べてから検索しましょう。

ここではpokemons/[ポケモンの英語名]でポケモンの情報を習得しましたが、
他にもわざや、タイプ、道具などで検索・習得することができます。
詳しくは公式リファレンスを読んでください。
(すべて英語ですが、翻訳で読みましょう。)

pokeAPIと先程Gemfileに追加したFaradayを利用して
図鑑no.001～no.151までのポケモンを取得して
ページに表示させてみましょう。
app/controllers/pokemons_controller.rbを編集します。

app/controllers/pokemons_controller.rb

class PokemonsController < ApplicationController
  def index
    pokemons = []# ポケモンの名前を格納する空の配列を作成

    response = Faraday.get "https://pokeapi.co/api/v2/pokemon-species?limit=151&offset=0"
    #↑ pokeAPIからno.001からno.151までを取得（GET）する
    response = JSON.parse(response.body)
    # JSON.parseとはJSON形式の文字列をRubyのHash（ハッシュ）形式に変換するためのメソッド
    response.each do |k, value|
      if k == "results"
        value.each do |key, val|
          response = Faraday.get(key["url"])
          response = JSON.parse(response.body)
          pokemons.push(response)
        end
      end
    end
    
    pokemons.map do |poke|
      unless pokemons.find(1) #2重保存防止
        Pokemon.create(
          id: poke['id'],
          name: poke['names'][0]['name']
        )
      end
    end
    @pokemons = Pokemon.all
  end
end

あとはViewです！index.html.erbを編集してください

app/views/pokemons/index.html.erb

<%= @pokemons.each do |p| %>
  <p><%= p.name %></p>
<% end %>

これでポケモンno.001からno.151までのポケモンが表示されます。
お疲れ様でした！