Railsでポケモン図鑑を作ろう

# はじめに
本投稿は講義資料であり、Rubyの基礎は理解しているが、[Ruby on Railsチュートリアル](https://railstutorial.jp/)で躓く読者を対象としています。

## 今回作るものの完成図
### ポケモン図鑑一覧ページ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33092/f3aafa3d-91a7-98a9-df4f-b14d88ea09d1.png)


### ポケモン詳細ページ
![スクリーンショット 2023-04-19 12.42.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33092/3a89ceaa-869e-5ab4-55ac-f4fad2d96229.png)

### ポケモン登録ページ
![スクリーンショット 2023-04-19 12.42.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33092/90f67feb-9ab0-3689-917a-5b5f7d53a8c7.png)


今回はポケモンずかんの開発を進める中で、webサービス開発の基礎知識を学んでいきます。

講義は基本的にテキスト通りに進めますが、
講師が実際に現場で使われている経験や知識を交えながら進行していきます。
区切りの良いところで止めて、教室を見回るので詰まっている方は気軽に呼び止めてください。

## 目次
[Railsでポケモン図鑑を作ろう](https://qiita.com/earth660/items/6773e8b59cc24c772244) ◀ いまここ
[Railsでポケモン図鑑を作ろう 課題](https://qiita.com/earth660/items/94fcec3943f5004090d9)

***


# 前置き：講義を進める前に注意事項
##### 1. コマンドについて
本資料では、下のような画像を多数載せています。
これらにはターミナルに打ち込むコードや、プログラムを記述しています。

行頭に`>`と記述されている行は、ターミナルへのコマンドであることを示しています。

その下の行は、コマンドの実行結果です

<font color="Red">**コードをコピーする際は行頭の`>`を除いてください。**</font>


##### ↓サンプル↓
```text:コマンドプロンプト（１行ずつ実行してください）
> cd /D Z:\ 
> mkdir rails_app
> cd rails_app
> rails new pokemon_zukan
```


##### 2.記述場所

↓サンプル↓　
```ruby:app/controllers/pokemons_controller.rb
class PokemonsController < ApplicationController
  def index
  end

  def show
  end

  def new
  end
end
```

コードを記述するファイルの場所は、枠内左上に記載しています。
(このコードだと場所はapp/controllers/pokemons_controller.rb)
どこに書くのか確認しつつすすめてください。
**（新しくファイルを作成する場合もあれば、既に作成されているファイルに追記する場合もあります）**



*** 

本テキストではポケモン図鑑を作りながら、Railsでのwebアプリケーション
開発を学んでいきます。

まず下記の２つのページの解説を読んでください。

# Webページが表示される仕組み
https://pikawaka.com/rails/curriculums-rails-basic-routing-controller-view

https://pikawaka.com/rails/mvc




***
# Webフレームワーク -MVCとは 
MVCに関しては後でも説明するので、いまはふわっとした理解で大丈夫です。


::: note info 
**Modelは、データベースとのやりとりを担う**
**Viewは、表示関連全般を担う**
**Controllerは、橋渡しの役割を担う**
:::


![MVC-02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33092/3ab78069-8c5d-2dcb-e1eb-6fb4d4fa07ba.png)

例) /usersのindexページをブラウザで開くという操作を行う時

1. ブラウザから `/users`へのリクエストをRailsサーバーに送信する
2. `router` によって、`/users` は `Users controller`の`index`アクションを呼び出す
3. `index` アクションから、`User Model`が呼び出される
4. `User Model` は `DataBase` からデータを取り出す
5. 取り出したデータを、`Controller`に返す
6. 受け取ったデータを`@users`に保存し、 View (indexアクションなので index.html.erb) に渡す。
7. ERBを実行し、`@users`のデータを含んだ HTMLを生成し、`Controller`へ返す
8. `Controller`は、受け取ったHTMLをブラウザにわたす

今後もModel View Controller を構築していくので、適宜図を見返してください。

    
# 下準備
## 1.Railsアプリケーションを作成する
まずはRailsアプリケーションを作成しましょう。
コマンドプロンプトを開き、（左下のwindowsのアイコンをクリック→検索バーににcmdと入力すると検索結果が表示されますので、その中から「コマンドプロンプト」をクリックして下さい）
`>`からコマンドを入力してEnterキーを押して実行します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33092/0a75ad37-47a3-aea4-faa6-7fa62732c72e.png)

Zドライブ > rails_app > pokemon_zukan を作業ディレクトリとしたい場合を例に講義を進めていきます。

下の４つのコマンドを１つずつ実行してください。

```text:コマンドプロンプト（１行ずつ実行してください）
> cd /D Z:\ 
> mkdir rails_app
> cd rails_app
> rails new pokemon_zukan
```

::: note
コマンドの説明を軽く説明します。
`cd`は`change directory`の略でディレクトリを移動する時に使用します。
`mkdir`は`make directory`の略でディレクトリを作成する時に使用します。
`rails new`は 新しいRailsアプリケーションを作成する時に使用します。

自分が今どのフォルダにいるか確認したい場合は、`@cd`コマンドで確認できます。
:::

下の画像のようにコマンドを入力するところに戻ったら、Railsアプリケーションが正常に作られています。
![スクリーンショット (15).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33092/8f7efcfc-f570-a7ed-d12d-3c927f13933d.png)


次に`rails s`を実行して、ブラウザで表示してみましょう。



`rails s`コマンド(`rails server`の略です)を実行すると、開発用のPC上でWebブラウザを経由してRailsアプリケーションにアクセスすることができます。
下の2つのコマンドを１つずつ実行してください。
```txt:コマンドプロンプト（１行ずつ実行してください）
> cd pokemon_zukan
> rails s
```



 
`Use Ctrl-C to stop`と出たらwebブラウザでアクセスができるようになります。
![スクリーンショット (16).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33092/04b76835-7091-a655-412f-a0fab5cba9e6.png)


ブラウザを立ち上げて http://localhost:3000 にアクセスすると、Railsアプリケーションが動作します。


下記の画像のようになっていれば、正常に動作しています！
![スクリーンショット (58).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33092/9a13c720-d4e5-b7c4-203e-e50a02de40e2.png)

***

## 1. CSSフレームワークを導入してみよう
今回はBulmaというCSSフレームワークを使用します。

https://udemy.benesse.co.jp/design/web-design/what-is-css.html

https://bulma.io/

### erbファイルに追記する

Visual Studio Code等のエディタにてファイルにコードを書いていきます。


`app/views/layouts/application.html.erb`をエディタで開いてください。

下記のコードを
`<%= csp_meta_tag %>`の下の空いてる行にコピー＆ペーストしてください。

```erb:app/views/layouts/application.html.erb
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
```


　　

<font color="gray">結果</font>
![スクリーンショット (37).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33092/771a2063-8cdc-6270-841e-e0c7ccccf29f.png)



## 2.Font Awesomeの導入
次に、webフォントアイコンを導入しましょう。

**webフォントアイコンとは**
> HTMLのタグや特有のクラス名を付与することで、簡単にWebサイト上にアイコンを表示できるサービス。
> フォントとしてアイコンを利用することができるので、CSSで簡単にサイズや色を変更できるため、使い勝手にも優れている。

` font-awesome-sass`というgemを使用します。
まずはGemfileを開きましょう。
pokemon_zukanのGemfileをクリックすると、下の画像の様なコードが表示されると思います。
![スクリーンショット 2023-05-24 17.03.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33092/49389a06-c0d6-3fa9-634a-9af34c399c5a.png)

開いたGemfileの4行目の`ruby "2.7.6"`の下に
`gem 'font-awesome-sass'`を追加しましょう。
```Gemfile:Gemfile(下記の１行を追記してください)
gem 'font-awesome-sass'
```


  
  

<font color="gray">結果</font>
![スクリーンショット 2023-05-12 16.58.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33092/c54de06c-27b5-38e6-e1a4-541c9f2786c9.png)


追記したら上書き保存しましょう。（Ctrlキーを押しながらSキーを押す）



現在起動中のコマンドプロンプトは、railsサーバを実行しているため、新たに別のコマンドプロンプトを起動させてください。

新しく起動したコマンドプロンプトで下の3つのコマンドを1つずつ実行します。
```text:コマンドプロンプト（１つずつ実行してください）
> cd /D Z:\ 
> cd rails_app/pokemon_zukan
> bundle install
```

::: note info
`bundle install`とは先程Gemfileに入力した`font-awesome-sass`を使えるようにするコマンドです。
:::

Bundle complete!と表示されるとインストール完了です。




### stylesheetの編集
まずは`application.css`を右クリック⇒名前を変更(Rename)より
`application.scss`にファイル名を変更してください。

![スクリーンショット (21).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33092/d58b515f-989a-46e5-40c8-0a08387f3499.png)

`application.scss`をVisual Studio Code等のエディタで開いて、
一番下に下の1行を追加します。
```scss:app/assets/stylesheets/application.scss
// （ #### 省略 #### ）
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */

 @import 'font-awesome';  // これを追加する

```

[上記の方法でRailsにFontAwesomeが入らない人はこの記事を見てください](https://qiita.com/earth660/items/04e63a55c0ea16ac9d30)

## 3.画像アップロードの準備
アプリケーションにポケモンの画像を投稿する機能を追加したいので、
Rails5.2より追加されたActive Storageという公式で公開されたファイルアップロード機能を使用します。

https://pikawaka.com/rails/active_storage


### 3.1  Active Strageのインストール
Active StrageをRailsアプリケーションに追加します。
コマンドプロンプトで下記のコマンドを**1行ずつ実行してください。**
```terminal:コマンドプロンプト(1行ずつ実行してください)
> rails active_storage:install
> rails db:migrate
```


　　
<font color="gray">`rails active_storage:install`をした結果👇
```terminal
> rails active_storage:install
Copied migration 20230711043149_create_active_storage_tables.active_storage.rb from active_storage
```

<font color="gray">`rails db:migrate`をした結果👇</font>
```terminal:数字は人によって異なります
> rails db:migrate
== 2023071104314[ここの日付は人により異なります] CreateActiveStorageTables: migrating ========================
-- create_table(:active_storage_blobs, {:id=>:primary_key})
   -> 0.0035s
-- create_table(:active_storage_attachments, {:id=>:primary_key})
   -> 0.0023s
-- create_table(:active_storage_variant_records, {:id=>:primary_key})
   -> 0.0014s
== 20230711043149 CreateActiveStorageTables: migrated (0.0099s) ===============
```

### 3.2 Gemfile に追加
Gemfileの6, 7行目あたり(先程追加した`gem 'font-awesome-sass'`の下)に下記の２つのGemを追記し上書き保存した後、`bundle install`を実行してください。
```Gemfile:Gemfile(下記の２行を追記してください)
gem 'mini_magick'
gem 'image_processing', '~> 1.2'
```

<font color="gray">追記した結果👇</font>
![スクリーンショット 2023-05-12 15.39.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33092/0aa9c54d-1e00-c735-17fb-34aa95105200.png)



```terminal:コマンドプロンプト(ターミナルで実行してください)
> bundle install
```
ここでも
Bundle complete! 
と表示されていたらOKです


### 3.3 config/application.rbの編集

エディタで`config/application.rb`を開いてください。

12行目にある`config.load_defaults 7.0`の下に下記の１行を追記してください。
```rb:config/application.rb
config.active_storage.variant_processor = :mini_magick
```

　　　
　
<font color="gray">追記した結果↓</font>
![スクリーンショット 2023-05-12 15.51.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33092/bf2c8f9e-794b-1f13-b0f8-4e4218ccf3ac.png)
追記したら上書き保存し、サーバを再起動してください。




::: note
新たにgemを入れたあとはサーバーを起動し直しましょう。
でないと、追加したgemが反映されません。

`rails s`を実行してるコマンドプロンプトをクリックしアクティブにした状態でCtrl + C を同時に押すとサーバーを止めることができます。

もう一度`rails s`を実行してください


【サーバーが起動しないときの対処法　２つ】
**A：**
Ctrl + C せずにターミナルを消してしまったときに、rails serverを再起動できないことがあります。下記のコマンドでPIDを指定しタスクを終了させることができます。

PIDが仮に 12345　であるなら↓
```コマンドプロンプト
>taskkill /pid 12345 
(実際には終了させたいプロセスIDを入力してください）
```
　PIDは　rails s実行時に下記のように表示されています。
```
         PID: 16672
* Listening on http://[::1]:3000
* Listening on http://127.0.0.1:3000
Use Ctrl-C to stop
```

**B:**
　rails サーバを別のポートを指定して起動することもできます。

```terminal
> rails s -p 3001
```
その場合、アプリケーションを確かめるには ブラウザのURL欄より
http://localhost:3001
を開いてください。

:::

## 4. protect_from_forgeryの追加

https://qiita.com/eshow/items/915f8e8ad317aa8e49a6

`app/controllers/application_controller.rb`の3行目に`protect_from_forgery`を追記してください。
```ruby:app/controllers/application_controller.rb
class ApplicationController < ActionController::Base
 protect_from_forgery # これを追加する
end
```


これで下準備は完了です。
次にページを作っていきます。


# ページを作成する方法
### ポケモン図鑑一覧ページ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33092/db2c972c-dc43-5f6a-110b-396ec0848ed9.png)


### ポケモン詳細ページ
![スクリーンショット 2023-04-19 12.42.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33092/3a89ceaa-869e-5ab4-55ac-f4fad2d96229.png)

### ポケモン登録ページ
![スクリーンショット 2023-04-19 12.42.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33092/90f67feb-9ab0-3689-917a-5b5f7d53a8c7.png)

ページを作成するにはcotrollerとviewが必要になります。
## Controller と View の作成

作成は基本的に **`generate`** コマンドを用います。
(gは generateコマンドの短縮形です)
gの後は、controller に続けて、コントローラーの名前(`複数形`)を書きます。

```rails g controller Pokemons index show new```

そのうしろ（引数といいます）に書いたもの(index,show,new)は、
同名のviewとアクションが自動生成されます。

(Viewは views/pokemons の中に、アクションは app/pokemons_controller.rbの中に生成されています`)

```terminal:コマンドプロンプト
> rails g controller Pokemons index show new
     create    app/controllers/pokemons_controller.rb
     route     get 'pokemons/index'
               get 'pokemons/show'
               get 'pokemons/new'
     create    app/views/pokemons
     create    app/views/pokemons/index.html.erb
     create    app/views/pokemons/show.html.erb
     create    app/views/pokemons/new.html.erb
```


先程の`rails g`コマンドでルーティングが生成されているので、確認してみましょう。
確認するには`rails routes`コマンドを実行します。

```terminal:コマンドプロンプト
> rails routes # 実行してしばらくすると下記ルーティングが出てきます
  Verb  URI                Pattern
  GET   /pokemons/index    pokemons#index
  GET   /pokemons/show     pokemons#show
  GET   /pokemons/new      pokemons#new
  (以下略)
```

これは具体的には、　http://localhost:3000/pokemons/index
というURLに対するリクエストがあれば、 **pokemons_controller** の**index アクション**を呼び出すというものです。
今回indexアクションの中身が空なので、Model は呼び出されず、単に対応するView (index.html.erb) が実行されるだけです。(MVCの図の3,4,5の部分が素通りされます)

ルーティングがうまくいってみるか確認するために、試しにアクセスしてみましょう。
(サーバーを起動していない場合はコマンドプロンプトで`rails s`を実行してください)

indexページにアクセスしてみましょう。
localhost:3000/　に続いて
`pokemons/index`を追記してアクセスしてください。

http://localhost:3000/pokemons/index

![スクリーンショット 2023-05-16 14.08.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33092/117af167-e949-38d7-4a03-3d157b54ff1c.png)



このように表示されていることを確認してください
ここで準備したCSSフレームワークが適用されているか確認してください。
（画像と同じスタイルになっていたら正しく適用されています。）

::: note warn
教材配布 > 基礎演習 > images　にあるPNG画像1２枚をapp/assets/imagesフォルダ内に移動させてください。
フォルダごとではなく中にある画像１２枚を移動させてください。
:::


### デザインの変更
まずは`pokemons.scss`というファイルを新規作成します。
(新規ファイルは、コードエディタのNew Text File等から作成可能です)

`pokemons.scss`をコードを追記します。
<details open><summary>"▶"マークをクリックすると、pokemons.scssのコードが表示されます。

表示されたコードを　app/assets/stylesheets/pokemons.scss　にコピー＆ペーストして上書き保存してください。</summary>



```scss:app/assets/stylesheets/pokemons.scss
// =====  Pokemon/show ===== //
.pokemon-name {
  background-color: #344e67;
  color: #f2f5ec;
  font-size: 25px;
  line-height: 65px;
}

.p-type {
  display:inline;
  font-size: 20px;
  margin: 3em;  
}

.p-description {
  background-color: #fff;
  color: #283b4f;
  font-size: 20px;
  line-height: 1.5;  
  padding: 50px;
}

.pokemon-card {
  background-color: #fff;
  display: table;
  padding: 20px;
}

.p-name {
  display: table-cell;
  vertical-align: middle;
}

.vertical-middle {
  display: inline-block;
  vertical-align: middle;
}

.p-edit {
  margin-top: 110px;
  
  a {
    font-size: 16px;
    display:inline;
    margin-top: 60px;
  }
}

.alert {
  background-color: #ffebe8;
  border: 2px solid #990000;
  color: #262626;
  font-weight: 850;
  text-align: center;
  padding: 12px;
}
```
</details>




#### Viewの変更
Viewを変更してみましょう。
indexページに「ポケモンいちらん」という文字を表示させる為に

`app/views/pokemons/index.html.erb`にあるコードを削除し、
下記を追記してください。
```erb:app/views/pokemons/index.html.erb
<h1 class="title has-text-centered">ポケモンいちらん</h1>
```


::: note
erb の中身がシンプルすぎて不思議な方もいらっしゃるかもしれません。
【気になって次にすすめない人向けの解説】
`app/views/layouts/application.html.erb`　を開いてください。
コード内の`= yield`の部分に、`index.html.erb`が移植されて HTML を生成しています。　


https://railstutorial.jp/chapters/filling_in_the_layout?version=5.0#sec-partials 
を読むことでより深く理解できます
:::


#### Controllerの変更

コントローラーの中にアクションが本当に作られているかも確認してみましょう。
app/controllers/pokemons_controller.rb を開いてみてください。

```ruby:app/controllers/pokemons_controller.rb
class PokemonsController < ApplicationController
  def index
  end

  def show
  end

  def new
  end
end
```

データベース内のデータを取り出して表示するには、まずControllerのアクション内で
    Model を呼び出して取り出します。

```ruby:app/controllers/pokemons_controller.rb
class PokemonsController < ApplicationController
  def index
  end

  def show
    @pokemon = Pokemon.find(1) # これを追記
  end

  def new
  end
end
```

::: note

findメソッドは主キー(RailsではID)を指定して1件のレコードを取得するメソッドです。
<font color="gray">引用元</font>[【Rails】findとwhereの違いを徹底解説【初心者向け】](https://ichigick.com/rails-find-where/#:~:text=find%E3%83%A1%E3%82%BD%E3%83%83%E3%83%89%E3%81%AF%20%E4%B8%BB%E3%82%AD%E3%83%BC%E3%82%92%E6%8C%87%E5%AE%9A%E3%81%97%E3%81%A61%E4%BB%B6%E3%81%AE%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89%E3%82%92%E5%8F%96%E5%BE%97%E3%81%99%E3%82%8B%E3%83%A1%E3%82%BD%E3%83%83%E3%83%89%20%E3%81%A7%E3%81%99%E3%80%82%20%E4%B8%BB%E3%82%AD%E3%83%BC%E3%81%A8%E3%81%AF%E5%90%84%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89%E3%82%92%E4%B8%80%E6%84%8F%E3%81%AB%E7%89%B9%E5%AE%9A%E3%81%99%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AE%E3%82%AB%E3%83%A9%E3%83%A0%E3%81%A7%E3%81%99%E3%80%82,Rails%E3%81%A7%E3%81%AF%E9%80%9A%E5%B8%B8%E3%81%AFid%E3%82%AB%E3%83%A9%E3%83%A0%E3%81%A7%E3%81%99%E3%80%82%20%E4%B8%80%E6%96%B9%E3%80%81where%E3%83%A1%E3%82%BD%E3%83%83%E3%83%89%E3%81%AF%20%E6%9D%A1%E4%BB%B6%E3%82%92%E6%8C%87%E5%AE%9A%E3%81%97%E3%81%A6%E8%A4%87%E6%95%B0%E4%BB%B6%E3%81%AE%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89%E3%82%92%E5%8F%96%E5%BE%97%E3%81%99%E3%82%8B%E3%83%A1%E3%82%BD%E3%83%83%E3%83%89%20%E3%81%A7%E3%81%99%E3%80%82)
:::

しかし、このまま`pokemons/show`にアクセスしても
**uninitialized constant PokemonsController::Pokemon**というエラーがでます。
![スクリーンショット (61).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33092/c6e244f3-8866-9c44-82f9-5684f77d076d.png)


（Modelも、ポケモンの情報も作っていないからです）

ですので、次は先程使用した`rails g`コマンドを使用して、`Model`を作成していきます。

# 情報のやりとり(データベース) の使用方法
## Modelの作成
次にデータベースを作ります。
データベースについて分からない人は下の記事を読んで理解しましょう。

https://qiita.com/mzmz__02/items/0f73224dd77fe7d24c1b

pokemonsテーブルには、
ポケモンの名前(**name**) :  **string**型(文字列)
図鑑番号(公式の図鑑番号を使います)(**number**):  **integer**型(数値)
ポケモンのタイプ(**zokusei**):  **string**型(文字列型)
ポケモンの説明(**description**):  **text**型(長い文字列型)
ポケモンの画像(**image**):  **attachment型**(ActiveStorage用の属性を追加するときに使う)
を持たせていきます。


g の後は、model に続けて、Model名(`単数形`)、そして項目（**カラム**といいます）を書きます。
```terminal:コマンドプロンプト
> rails g model Pokemon name:string number:integer zokusei:string description:text image:attachment
      invoke  active_record
      create    db/migrate/20220426050238_create_pokemons.rb
      create    app/models/pokemon.rb
      invoke    test_unit
      create      test/models/pokemon_test.rb
      create      test/fixtures/pokemons.yml

```

作成・編集したマイグレーションファイルはコマンドプロンプトで`rails db:migrate`を実行すると読み込まれ、データベースに反映されます。
`rails db:migrate`を実行しましょう。
```terminal:コマンドプロンプト
> rails db:migrate
== 20220426050238 CreatePokemons: migrating ===================================
-- create_table(:pokemons)
   -> 0.0052s
== 20220426050238 CreatePokemons: migrated (0.0058s) ==========================
```

:::note info
`db/migrate/[作成日時]_create_pokemons.rb`を見てみましょう。
開いてみると、下記のようなコードがあると思います。
```rb:db/migrate/[作成日付]_create_pokemons.rb
class CreatePokemons < ActiveRecord
  def change
    create_table :pokemons do |t|
      t.string :name
      t.integer :number
      t.string :zokusei
      t.text :description
      t.timestamps
    end
  end
end
```
上記は string型であるnameというカラム（他5つ）を持つ pokemons テーブルを作成せよという意味です。 change以外に up, down などもあります。詳細は下記サイトなどを参照ください
[【Rails入門】データベースを設定するrails db:migrateを説明！](https://www.sejuku.net/blog/14229)
:::

***

これでpokemonsテーブルが作成されました。

テーブルは作成したけども、ポケモンの情報はまだ何もいれてませんね。
初期データをいれるには`db/seeds.rb`にコードを書いて読み込む必要があります。

大量のデータを手入力するのは手間なのでseed.rbを作成していきます。
(そもそもブラウザからデータをいれる機能もまだ作っていません)


seed.rbを編集しましょう。

<details><summary>`▶`をクリックしてソースコードを開き、
丸々コピー＆ペーストしてください</summary>


```rb:db/seeds.rb
pokemon = Pokemon.create!(name: "フシギダネ",
						 zokusei: "くさ",
						 number: 1,
						 description: "うまれてから しばらくの あいだは せなかの タネから えいようを もらって おおきく そだつ。")
pokemon.image.attach(io: File.open(Rails.root.join('app/assets/images/hushigidane.png')),
                  filename: 'hushigidane.png')

pokemon = Pokemon.create!(name: "フシギソウ",
						 zokusei: "くさ",
						 number: 2,
						 description: "せなかの つぼみが ふくらみだすと あまい においが ただよいはじめる。たいりんの はなが さく まえぶれ。")
pokemon.image.attach(io: File.open(Rails.root.join('app/assets/images/hushigisou.png')),
                  filename: 'hushigisou.png')

pokemon = Pokemon.create!(name: "フシギバナ",
						 zokusei: "くさ",
						 number: 3,
						 description: "あめの ふった よくじつは せなかの はなの かおりが つよまる。かおりに さそわれ ポケモンが あつまる。")
pokemon.image.attach(io: File.open(Rails.root.join('app/assets/images/hushigibana.png')),
                  filename: 'hushigibana.png')


pokemon = Pokemon.create!(name: "ヒトカゲ",
						 zokusei: "ほのお",
						 number: 4,
						 description: "ヒトカゲの　ほのおの　しっぽは　いのちの　ともしび。　げんきなときは　ほのおも　ちからづよく　もえあがる。")
pokemon.image.attach(io: File.open(Rails.root.join('app/assets/images/hitokage.png')), filename:'hitokage.png')

pokemon = Pokemon.create!(name: "リザード",
						 zokusei: "ほのお",
						 number: 5,
						 description: "リザードが くらす いわやまを よなかに みあげると しっぽの ほのおが ほしのように みえる。")
pokemon.image.attach(io: File.open(Rails.root.join('app/assets/images/riza-do.png')), filename:'riza-do.png')

pokemon = Pokemon.create!(name: "リザードン",
						 zokusei: "ほのお",
						 number: 6,
						 description: "くるしい たたかいを けいけんした リザードンほど ほのおの おんどが たかくなると いわれている。
")
pokemon.image.attach(io: File.open(Rails.root.join('app/assets/images/riza-don.png')), filename:'riza-don.png')



pokemon = Pokemon.create!(name: "ゼニガメ",
						 zokusei: "みず",
						 number: 7,
						 description: "こうらに とじこもり みを まもる。 あいての すきを みのがさず みずを ふきだして はんげきする。")
pokemon.image.attach(io: File.open(Rails.root.join('app/assets/images/zenigame.png')),
                  filename: 'zenigame.png')

pokemon = Pokemon.create!(name: "カメール",
						 zokusei: "みず",
						 number: 8,
						 description: "いちまんねんの じゅみょうを もつと いわれている。ふさふさの しっぽは ながいきの シンボルとして にんき。")
pokemon.image.attach(io: File.open(Rails.root.join('app/assets/images/kame-ru.png')),
                  filename: 'kame-ru.png')

pokemon = Pokemon.create!(name: "カメックス",
						 zokusei: "みず",
						 number: 9,
						 description: "こうらの ふんしゃこうの ねらいは せいかく。みずの だんがんを 50メートル はなれた あきかんに めいちゅうさせる ことが できるぞ。")
pokemon.image.attach(io: File.open(Rails.root.join('app/assets/images/kamekkusu.png')),
                  filename: 'kamekkusu.png')


pokemon = Pokemon.create!(name: "イーブイ",
						 zokusei: "ノーマル",
						 number: 133,
						 description: "しんかのとき すがたと のうりょくが かわることで きびしい かんきょうに たいおうする めずらしい ポケモン。")
pokemon.image.attach(io: File.open(Rails.root.join('app/assets/images/i-bui.png')),
                  filename: 'i-bui.png')
```
</details>


そしてデータの読み込みを`rails db:seed`で行います。
```terminal:terminal
$ rails db:seed
```

データが保存されたかの確認は`rails c`でコンソールを起動すると確認できます。

```text:terminal
$ rails c
unning via Spring preloader in process 6309
Loading development environment (Rails 6.0.3.2)
irb(main):001:0>  (ここにコマンドを入力する)
```
このような文字が表示されたらコンソールは起動されています。
`irb(main):001:0>`に下記のコマンドを1行ずつ入力していきます。 

```rb:(irb(main):001:0に以下のコマンドを1行ずつ入力して実行してください)
>> p = Pokemon.find(1)
>> p
```


フシギダネの情報がimage以外表示されていればOKです

```terminal:コンソール
irb(main):001:0> p = Pokemon.find(1)
  Pokemon Load (0.2ms)  SELECT "pokemons".* FROM "pokemons" WHERE "pokemons"."id" = ? LIMIT ?  [["id", 1], ["LIMIT", 1]]
=>
#<Pokemon:0x00000274bee2c608
...
irb(main):002:0> p
=>
#<Pokemon:0x00000274bee2c608
 id: 1,
 name: "フシギダネ",
 number: 1,
 zokusei: "くさ",
 description: "うまれてから しばらくの あいだは せなかの タネから えいようを もらって おおきく そだつ。",
 created_at: Tue, 11 Jul 2023 06:35:19.247315000 UTC +00:00,
 updated_at: Tue, 11 Jul 2023 06:35:19.837892000 UTC +00:00>
irb(main):003:0>
```


::: note
  コンソールから出る場合は**exit**を入力すると戻る事が出来ます。
:::

フシギダネの情報をページ上で表示させたいので、
`app/views/pokemons/show.html.erb`を下記のように編集しましょう。

```erb:app/views/pokemons/show.html.erb
<div class="pokemon-name">
  <div class="container">
    <p style="display: inline; padding-left: 40px;">
      NO.<%= @pokemon.number %>
      <%= @pokemon.name%>
    </p>
        
    <p class="p-type">
      <%= @pokemon.zokusei %>
    </p>
  </div>
</div>

<div class="columns">
  <div class="column is-4">
    <div class="pokemon-img">
      <%= image_tag @pokemon.image %>
    </div>
  </div>
    
  <div class="column is-8">
    <div class="p-description">
      <%= @pokemon.description %>
    </div>
  </div>
</div>
```

localhost:3000/pokemons/show
    にアクセスすると、フシギダネの情報が表示されたかと思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33092/c69414ea-327a-fac2-544a-a652a038ea8f.png)



::: note warn
フシギダネが表示されずに
`Can't resolve image into URL: undefined method persisted? for nil:NilClass`とエラーが出た場合、以下のコマンドを1行ずつ実行しなおしてみてください。
```text:コマンドプロンプト(１行ずつ実行してください)
> rails db:drop
> rails db:setup
> rails db:migrate
> rails db:seed
```
このコマンドはデータベースを作り直し、seed.rbを読み込んでいます。

:::

# URLからパラメーターの取得
ポケモンのデータを取り出して表示するところまでうまくいきました！
すごい進歩です！

ただ、まだ不満点があります。
それは、 id:1 のポケモンのデータしか表示できていない点です。
理由は、Contoroller の show アクションをみると、
`@pokemon = Pokemon.find(1)`
となっているためです(id:1 のポケモンの情報しか見つけてきていない)

ここをidパラメーターが１以外も入力できるように変更するにはどうすればよいでしょうか。
`@pokemon = Pokemon.find(params[:id])`
とすることで、１以外のパラメーターを見つけて表示することができます。


:::note
**params[:id]について**
paramsは送られてきたパラメーターを入れる箱のようなメソッドです。
パラメーター（情報）はコントローラーはそのままの形で受け取れません
なので箱に入れてから送ります

送られてくる情報(リクエストパラメータ)は主に、getのクエリパラメータとpostでフォームから送信されるデータの2つです

params[:カラム名]で値を受け取ることができます。
:::


```ruby:app/controllers/pokemons_controller.rb
 def show
   @pokemon = Pokemon.find(params[:id]) # 変更する
 end
```

パラメーター（数値）は、どこで指定すればよいでしょうか。
URLにパラメーターを含めて渡すテクニックがあるので覚えておきましょう。
例）IDが２のポケモンの情報を取得したい場合　
localhost:3000/pokemons/show/2
　 このままではルーティングエラーが表示されます。`config/routes.rb`を見ると
　 **pokemons/show** へのリクエストに関しては記述していますが、 
　 **pokemons/show/(数字)**　へのリクエストについては何も書いていない為です。

`config/routes.rb`を開いてください。
URLに含まれる数字をパラメーターとして取得するには、下記のように記述します。

```ruby:config/routes.rb
Rails.application.routes.draw do
  get 'pokemons/index'
  get 'pokemons/show/:id', to:'pokemons#show', as: 'pokemon' # 変更する
  get 'pokemons/new'
end
```

こうすることで /pokemons/show/2　の 2の部分が、:id パラメーターとして利用可能になります。
( 利用するときは、params[:id] と書きます)

:::note
index と new は to: が書かれていませんね。
前章でも説明したとおり、Railsは、アクションが呼び出されると、
自動的に　**アクション名.html.erb**が呼び出されるので、
下記と同じ意味になります。
get 'pokemons/index' to: 'pokemonss#index'
get 'pokemons/new', to: 'pokemons#new'
:::

to: 'pokemons#show'　
pokemonsコントローラーの show アクションを呼び出す指示になります。

これで、任意のidのポケモンの情報を取得できるようになりました。

##### localhost:3000/pokemons/show/2

![スクリーンショット 2023-04-19 12.31.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33092/29f10dbc-67fe-df83-f872-724e55f3495a.png)


##### localhost:3000pokemons/show/3
![スクリーンショット 2023-04-19 12.31.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33092/4986bdd8-ac35-36b7-ad11-d42f175c3e8b.png)


# Model 検索
今ポケモンの情報の取り出しに id を利用していますが、
id 以外のカラムを用いて取り出す方法も覚えておくと便利です。

コンソールを起動してください。 ( ターミナルで`rails c`で起動 )
下記を参考に色々と試してみてください。

```ruby:railsコンソール
>> Pokemon.all
   #pokemonテーブルのすべてのデータを取得します。
>> Pokemon.find_by(name: "ヒトカゲ")
   #条件に合ったデータを、１件だけ取得します。
>> Pokemon.where(zokusei: "みず")
   #条件に合ったデータを、すべて取得します。
>> Pokemon.where(zokusei: "みず").where(number: 7)
   #AND検索。　みずタイプで ずかん番号番を取得しています。
>> Pokemon.where("(zokusei = ?) OR (number = ?)","みず",7)
   #OR検索。　みずタイプ　または　ずかん番号7番のポケモンを取得しています。
>> Pokemon.order(create_at: :asc)
   #並び順を指定します。　作成日時の昇順で取得しています。
```


# データ登録フォームの作成
データベースから情報を取り出したり加工したりする方法は覚えました。
しかしこのままではポケモンを登録することができません。

ポケモンを登録するための機能を作成する方法を学んでいきましょう。
form_withを使用します。

#### form_with

https://pikawaka.com/rails/form_with

データベースに新しいデータを保存したいので、 Model を呼び出します。
`app/views/pokemons/new.html.erb`に登録フォームを置きたいので、
`pokemons_controller.rb`の`newアクション`内に書きましょう。
新しいデータを登録するときは、` Model名.new`とします。下記のコードを追記してください。


```ruby:app/controllers/pokemons_controller.rb
  # (中略)
  def new
    @pokemon = Pokemon.new # これを追加する
  end
```

<font color='gray'>ここまでの`app/controllers/pokemons_controller.rb`です。
自分のコードとあってるか確認してください。</font>
```rb:app/controllers/pokemons_controller.rb
class PokemonsController < ApplicationController
  def index
  end

  def show
    @pokemon = Pokemon.find(params[:id])
  end

  def new
    @pokemon = Pokemon.new
  end
end

```

`new.html.erb`に入力フォームを作成していきましょう。
railsでは、フォームを簡単につくれる`form_with`ヘルパーというものがあります。

```erb:app/views/pokemons/new.html.erb
<div class="container mt-6">
  <div class="columns">
    <div class="column is-three-fifths is-offset-one-fifth">
      <%= form_with model: @pokemon, url: { action: :create }, local: true do |f| %>
        <!-- 	エラーメッセージ	 -->
        <% if @pokemon.errors %>
          <% @pokemon.errors.full_messages.each do |message| %>
		    <div class='alert'>
		      <ul>
          　　   <li><%= message %></li>
			  </ul>
			</div>
          <% end %>
      　<% end %>
		<!-- 	ここまでエラーメッセージ	 -->
        <div class="field">
          <%= f.label :name, "なまえ", class: 'label'%>
          <div class="control">
            <%= f.text_field :name, class:'input'%>
          </div>
        </div>
        <div class="field">
          <%= f.label :number, "ばんごう", class: 'label' %>
          <div class="control">
            <%= f.text_field :number, class: 'input'%>
          </div>
        </div>
        <div class='field'>
          <%= f.label :zokusei, "タイプ", class: 'label' %>
          <div class="control">
            <%= f.text_field :zokusei, class: 'input'%>
          </div>
        </div>
        <div class="field">
          <%= f.label :description, "せつめい", class: 'label' %>
          <div class="control">
            <%= f.text_area :description, class: 'textarea' %> 
          </div>       
        </div>
        
        <div class="file">
          <label class="file-label"></label>
        </div>
        <br/>
        <br/>
        <div class="file is-boxed">
            <label class="file-label">
            <%= f.file_field :image, class: 'file-input'%>
              <span class="file-cta">
                  <span class="file-icon">
                      <i class="fas fa-upload"></i>
                  </span>
                  <span class="file-label">
                    <%= f.label :image, 'がぞう', class: 'label'%>
                  </span>
             </span>
          </label>
        </div>
        
        <%= f.submit "登録", class: 'button is-link'%>
      <% end %>
    </div>
  </div>
</div>
```
ここでは重要な部分だけ、簡単に解説します。
上の form_withヘルパーにより、下記のような HTML が生成されます。（少しシンプル化してます）
ブラウザで確認したい時はページを右クリックして`検証`（ブラウザによっては`開発者ツールで調査する`の場合があります）

```html:解説用のコードなのでコピー&ペーストしないでください
<form action="/pokemons" accept-charset="UTF-8" data-remote="true" method="post">
  <input type="hidden" name="authenticity_token" value="Nbbcp8B2ekJyks0THuIdAQcyafXQJdj7reyZeAkZbkLreXymKvbIwE6rL9pXcN58G2ZOrdlWFDHz5uXAkMNNqQ==">
        <div class="field">
          <label class="label" for="pokemon_name">なまえ</label>
          <div class="control">
            <input class="input" type="text" name="pokemon[name]" id="pokemon_name">
          </div>
        </div>
        <div class="field">
          <label class="label" for="pokemon_number">ばんごう</label>
          <div class="control">
            <input class="input" type="text" name="pokemon[number]" id="pokemon_number">
          </div>
        </div>
          
        <div class="field">
          <label class="label" for="pokemon_zokusei">タイプ</label>
          <div class="control">
            <input class="input" type="text" name="pokemon[zokusei]" id="pokemon_zokusei">
          </div>
        </div>
        
        <div class="field">
          <label class="label" for="pokemon_description">せつめい</label>
          <div class="control">
            <textarea class="textarea" name="pokemon[description]" id="pokemon_description"></textarea>        
        </div>
        
         <div class="field">
          <div class="file">
            <label class="file-label">
              <%= f.file_field :image, class: 'file-input'%>
              <span class="file-cta">
                <span class="file-label">
                がぞうをえらんでください
                </span>
              </span>
            </label>
          </div>
        </div>
        <input type="submit" name="commit" value="登録" class="button is-link" data-disable-with="登録">
    </div></form>
```

ここで重要な属性は、 
`<form action="/pokemons" accept-charset="UTF-8" data-remote="true" method="post">`
の中の、 **action="/pokemons"** と **method="post"** の２つです。

この２つは送信ボタンが押されたら、 
**/pokemons に対して、 POST リクエストを送信する**
という指示をしています。

なので、 /pokemons に対して、 POST リクエストがあった場合の処理を書いていきましょう。
送信したあとは、pokemons_controller の create アクションに飛ばしたいです。
(後ほどデータベースに保存する処理を`pokemons_controller.rb`のcreate アクションに書いていきます）

`post 'pokemons', to: 'pokemons#create' `
コードはこのようになるので、 routes.rb に追記しましょう。
```diff_ruby:config/routes.rb
Rails.application.routes.draw do
   get 'pokemons/index'
   get 'pokemons/show/:id', to:'pokemons#show', as: 'pokemon'
   get 'pokemons/new'
   post 'pokemons', to: 'pokemons#create'  # 追記する
end
```

***
１. 登録ボタンが押される
２. フォームに入力されたデータを、create アクションに飛ばす

という流れで、データが動いているので最後に、
create アクションの中で情報をデータベースに保存する処理を書きます。Modelを呼び出します。

```terminal:コマンドプロンプトを見ると分かります
Parameters: {...(中略)... "pokemon"=>{"name"=>"フシギダネ", "number"=>"1", "zokusei"=>"くさ", "description"=>"（中略）"
```

パラメーターをみると、二重の連想配列になっているのがわかると思います。
（　parameters{} の中に pokemon{} が入っている　）

通常の連想配列の場合は、**params[:title]**　として取得できていました。
二重の連想配列の場合は、**params[:pokemon][:title]**　とすることで取得できます。
（ **pokemonキー の中のtitleキー** のデータを取得しています　）
　連想配列について詳しくはこちらを参照してください　

https://qiita.com/kentarok/items/5d38c3f7df37a7396ef9

さて、ここまで理解できていれば create アクションの中身も想像できると思います。
(`sconfig/seeds.rb`の、ポケモンの情報が書かれていた部分をパラメーターの中身に書き換えるだけです )
newアクションの下に新しく`createアクション`を作成しましょう。
```rb:app/controllers/pokemons_controller.rb
#   (中略)
def create
  @pokemon = Pokemon.new
  @pokemon.name = params[:pokemon][:name]
  @pokemon.zokusei = params[:pokemon][:zokusei]
  @pokemon.number = params[:pokemon][:number]
  @pokemon.description  = params[:pokemon][:description]
  @pokemon.image = params[:pokemon][:image]
  @pokemon.save
  redirect_to @pokemon
end
```

最後の、`redirect_to @pokemon`の部分ですが、
登録ボタンを押したあとに、作成したポケモンの詳細ページに画面遷移してほしいので、リダイレクト先を指定しました。


##### http:localhost:3000/pokemons/new   ここでポケモンの情報を登録

![スクリーンショット 2023-04-19 12.32.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33092/452548e4-5367-67ef-bb55-702c53be9e04.png)

 localhost:3000/pokemons/show/[ID]
 ここで登録内容を確認

このままでは自由にポケモンを登録できる状態です。
numberは数値を入力してもらいたいので入力制限をかけてみましょう。

Rails では制限(validation)も簡単に設定することができます。

## バリデーション
#### バリデーションとは

:::note
データを保存する前に、無効なデータでないことを検証する機能のこと。門番みたいなもの。
空のデータが保存されないようにしたり、数字以外は保存できないようにしたり、文字数に制限を設けたり、保存するデータに制限をかける時に使います。
:::

`app/models/pokemon.rb`を開き、
下記の２行を`class Pokemon ~~ end`の間に入力してください。


```ruby:app/models/pokemon.rb
class Pokemon < ApplicationRecord
  has_one_attached :image
  validates :name, presence: true # 追記する
  validates :number, numericality: true # 追記する
end
```
::: note 
`numericality: true`
**属性に数値のみが使われている事を検証する**
`presence: true`
**必須項目にする**
:::

これだけで制限を設けることができます。

次に`pokemons_controller.rb`の`create`メソッドを編集します
```ruby:app/controllers/pokemons_controller.rb
def create
  @pokemon = Pokemon.new
  @pokemon.name = params[:pokemon][:name]
  @pokemon.zokusei = params[:pokemon][:zokusei]
  @pokemon.number = params[:pokemon][:number]
  @pokemon.description  = params[:pokemon][:description]
  @pokemon.image = params[:pokemon][:image]
  @pokemon.save
  if @pokemon.save # も保存が成功した時の処理
	redirect_to controller: :pokemons, action: :index
  else #バリデーションにひっかかり、保存が失敗した時の処理
    render :new, status: :unprocessable_entity # もう一度登録ページにリダイレクトする
  end
end
```

Pokemon Model に追記しているので、pokemonsテーブルの numberカラムに対して制限をかけます。
実際に試してみると、ポケモンいちらんに登録されていません。


これでポケモンのばんごうを数値以外入力して保存すると
上部にメッセージが出ます。
そして数値を入力して保存するとポケモン一覧ページに遷移先します
![スクリーンショット 2022-06-28 16.42.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33092/c80af4b6-5fb5-893b-122c-24ef7c9d1dff.png)



# ポケモン一覧ページの作成
しかし、これだとポケモンを登録してもポケモン一覧ページは何も表示されていません
最後に登録したポケモンを一覧するページを作成しましょう。

まずはコントローラーの編集です。
先程コンソールで`Pokemon.all`を実行するとすべてのポケモンが表示されましたね。
それを利用しましょう。
```ruby:app/controllers/pokemons_controller.rb
class PokemonsController < ApplicationController
  def index
    @pokemons = Pokemon.all # これを追加する
  end
# （省略）
```

今までshowアクションやnewアクションでは@pokemonと単数形になっていたのに、
indexアクションでは@pokemonsと複数形になっています。
分かりやすく説明してる記事があるので、参考にしてください。

https://qiita.com/kgchdsk/items/b8b4c53d9c8bfb27720f

#### ビューの編集
`app/views/pokemons/index.html.erb`を編集しましょう。
```erb:app/views/pokemons/index.html.erb
<div class="container mt-6">
  <h1 class="title has-text-centered"> ポケモンいちらん </h1>
  <div class="columns is-multiline">
    <% @pokemons.each do |p| %>
      <div class="column is-one-quarter">
        <div class="pokemon-card">
          <%= image_tag p.image %>
          <div class="subtitle has-text-centered">
            <p> NO. <%= p.number %> </p>
            <p class="title has-text-centered"><%= link_to p.name, pokemon_path(p) %></p>
          </div>
        </div>
      </div>
      <% end %>
  </div>
</div>
```
![スクリーンショット 2023-04-19 12.39.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33092/de0bf760-3fda-3904-b821-2782eb63707b.png)

このように`seed.rb`で入れたデータや自分で入力したデータが表示されていれば完成です、お疲れ様でした！


### ポケモン図鑑一覧ページ
![スクリーンショット 2023-04-19 12.41.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33092/e7bcb622-f13e-8c0e-9b72-4825d0b063a5.png)

### ポケモン詳細ページ
![スクリーンショット 2023-04-19 12.42.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33092/3a89ceaa-869e-5ab4-55ac-f4fad2d96229.png)

### ポケモン登録ページ
![スクリーンショット 2023-04-19 12.42.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33092/90f67feb-9ab0-3689-917a-5b5f7d53a8c7.png)