Railsでポートフォリオ作成の記録 - 初心者向け①

実際にRailsを使用されている方に、手取足取り教えていただきながらポートフォリオを作成しました。

備忘録として書き残します。

*この記事をお読みの皆様、特に初心者の方に少しでもお役に立てれば、という思いでこちらに書き残しております。
しかし、当方初心者であること、この記事が完璧ではないことを前提にお読みいただければと存じますm(_ _)m

想定読者様層：未経験
　　　　　　　Railsチュートリアルを終えたところの方
　　　　　　　ポートフォリオを作成する予定だが全く経験のない方


0.ポートフォリオの構想

google driveを使用して、どんなポートフォリオを作りたいか、ざっくり言語化しました。

https://www.google.com/drive/

![スクリーンショット 2019-11-23 18.31.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434847/137351c1-96c8-44c6-919a-6193eb5b304c.png)
![スクリーンショット 2019-11-23 18.34.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434847/50221104-44a0-e7d8-790d-12663751de9f.png)

自分の中でアイデアを整理できますし、自身のアイデアをメンターの方にも共有し、アドバイスをいただけます。

Microsoft officeのワードやエクセルのように使いやすかったです^^
便利だし無料だし、めちゃくちゃオススメです^^

また、この時点で、メンターと一緒に、使用するgemも確認・記載しました。
例えば、私は"マッチングサービス"を作成したかったので、「ログイン機能」や「検索機能」が必要になります。
その場合は、「ログイン機能 rails gem」  「検索機能 rails gem」などと検索していき、評判のいいgemを見つけ、メンターの方に共有しました＾＾

＊使用gem決定のための参考記事
ログイン機能 gem
https://qiita.com/Orangina1050/items/a16e655519a60f35b394
検索機能 gem
https://qiita.com/mochikichi321/items/5c9630c5d87b47130942



1.DB設計
Cacooでデータベースの設計をしました。
Cacooは、初心者向けのDB設計・ER図作成のツールとして評判がいいです。
https://cacoo.com/app/p/recent

設計の際、以下のサイトを参考にしましたが、非常〜にわかりやすかったです^^
https://it-koala.com/entity-relationship-diagram-1897
(しかし私は上記のサイトだけでは理解しきれなかったので、他の検索上位に出てきたサイトも参考にしました^^;)

最終的にこんな感じになりました〜〜

![スクリーンショット 2019-11-23 18.40.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434847/96b79bc7-e1b1-7d4a-6c9f-e74ab8c37d45.png)


2.DB作成 - "devise"の使用 - 購入者と販売者のDB作成
DBの設計のOKが出たあと、DBの作成に入りました。

rails new アプリ名

で新しいアプリケーションを作成し、

rails g controller .......

と本格的にDBを作成していきました。

多くの方は、Userモデルも、ログイン機能も作成されると思います。
"devise"を使用する場合、以下のサイトがわかりやすくオススメです。

https://qiita.com/cigalecigales/items/f4274088f20832252374

ただし、上記のサイトだけだと、"username"を作成しないため、エラーが出ます。
以下のページを参照してusernameを作成すると、エラーがなくなりました。

https://qiita.com/hz1_d/items/77e440b09a1ddbe56263


*ちなみに、私の場合はマッチングサービスで、"User"(購入者)の他に"販売者"を作成する必要がありました。その際、以下の解説記事が大変参考になしました。

https://qiita.com/Yama-to/items/54ab4ce08e126ef7dade 

3.DB作成 - 商品情報 - 外部キー

UserとSallerのDBを作り終えると、他のデータのDBも作成し始めました^^

```
rails g model <テーブル名>
```

すると

```
class Createテーブル名 < ActiveRecord::Migration[5.2]
  def change
    create_table :vessels do |t|

      t.timestamps
    end
  end
end
```

マイグレーションファイルができます^^
私の場合は、マイグレーションファイルにカラムを直接書き入れ、DBを完成させました。
今回は kind:string などを追加し、 rails db:migrate を。



　　db/migrate/20191123091949_create_vessels.rb

```
class CreateVessels < ActiveRecord::Migration[5.2]
  def change
    create_table :vessels do |t|
      t.string :kind　　=>ここを追加！！！
      t.timestamps
    end
  end
end
```

```
rails db:migrate
```


ところが、この時、外部キーを入れ忘れたんですよね。。。
販売者が「商品」を投稿するシステムのため、販売者と商品を紐づける必要があったのです。

その場合、既存のマイグレーションファイルを書き直してDBを修正する方が、マイグレーションファイルが増えず、やりやすかったです^^

```
class CreateVessels < ActiveRecord::Migration[5.2]
  def change
    create_table :vessels do |t|
      t.references :saller, null: false, foreign_key: true  <=ここを追加！！！
      t.string :kind
      t.timestamps
    end
  end
end
```


```
rails db:migrate:reset
```

rails db:migrate:resetだと、登録しているユーザーなどは消えますが、テーブルを修正したいことも多いと思いますし、便利なコマンドですね^^


マイグレーションファイルや、誤ったDBを作った時、以下の記事が大変参考になりました。

https://qiita.com/erieeeeeeeeru/items/2198e2961a9fc7d10bd2


4.DB作成 - 取引ページ - トークルーム作成を見据えて

　＊Flagの使用＊
　マッチングサイトの場合、購入者は販売者に商品の状態を聞いたり、値引き交渉をしたいと思います。販売者は、見積書や証明書などを購入者に連絡できると便利です。そのため、今回はLINEのようなトークルームが必要となります。

　このトークルームは、購入者が、商品ページの「問い合わせ」から問い合わせメッセージを送信した時に作成されるような仕組みになります。その場合、それぞれのメッセージが、送信者なのか受信者なのか、わかるようなテーブル構造にする必要があります。

その際、Flagが有効です。
今回は　送信者フラグ(send_user_flag) を使用しました。

```
class CreateDeals < ActiveRecord::Migration[5.2]
  def change
    create_table :deals do |t|

      t.boolean :send_flag, default: false

    end
  end
end

```

Flagは、メッセージの送信者を区別する際に非常に有効な手段になります。TrueとFalseで、1か0で管理しているため、例えば送信者を「名前」（string等）で管理するよりも検索を早くすることができます。


5.画像のアップロード機能

　ところで、User、販売者、商品説明ページにて画像アップロード機能が必要になりますが、今回は以下のgemを使用することとしました。

```
gem 'carrierwave',
gem 'mini_magick',
gem 'fog-aws',
```

Railsチュートリアルでもありましたね^^
調べてみると、"fog"よりも'fog-aws'の方が人気で、動作もスムーズに行くみたいです。



続きます。。。。。。。。