ジャンル別に投稿・チャットできるようなアプリ作ってみた〜ホーム画面〜

### :sunny: ホーム画面

#### :star: ホーム画面で確認できるもの
![スクリーンショット 2020-08-02 1.42.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/573113/71b7bb78-8dfe-ab9d-4eed-944ed6d5bdd8.png)

- ユーザー名<br>
ユーザー登録した際の名前が表示される<br>
名前を変更したい場合は、登録変更画面で可能（下記記述）
- ユーザーアイコン<br>
登録時のログインでは、アイコンはない
![スクリーンショット 2020-08-02 1.41.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/573113/90abe284-0e93-ac7f-542b-d6c752c3898f.png)
登録変更画面にて自身のフォルダから選択することができる（別記事にて詳細予定）
- ユーザーのお気に入りジャンル（お選びのジャンルだよ(´∀｀)）<br>
お気に入りにしたジャンル名のみを表示する<br>
（ジャンルをお気に入りする方法は別記事にて詳細予定）
なお、このジャンル名はリンクになっており、クリックすればジャンルページに飛ぶ
- ユーザーの所属チャットグループ（所属チャットグループだよ(\*^ω^\*)）<br>
所属しているチャットグループのグループ名を表示<br>
（チャットグループに関しては別記事にて詳細予定）
なお、このグループ名はリンクになっており、クリックすればグループページに飛ぶ

#### :star: ホーム画面でリンクされているもの
- お気に入りジャンル
お選びのジャンル枠内のジャンル名からそのジャンルページに飛ぶ

- ジャンル作成・検索画面
「ジャンルを探す」ボタンから飛べる

- 所属チャットグループ
所属チャットグループ枠内のグループ名からそのグループページに飛ぶ
- ユーザー登録変更画面
リストアイコンをhoverすることで出現するリンク「登録変更」から飛ぶ

- グループ希望画面
リストアイコンをhoverすることで出現するリンク「グループ希望」から飛ぶ

- ログアウト
リストアイコンをhoverすることで出現するリンク「ログアウト」を押すことで、ログアウトする

#### :star: コード記述
```ruby:app/views/homes/index.html.haml
.page-header
  .page-header__user
    .page-header__user__image
      -if @user.icon.file.nil? # もし、userテーブルの指定レコードのiconカラムがnil（空）だったらcameraアイコンを表示
        =icon "fas","camera fa-3x", class: "page-header__user__image__icon"
      -else # そうでない場合は、iconカラムの画像を表示
        = image_tag @user.icon.url,:size =>'125x125'
    .page-header__user__name
      .page-header__user__name__box
        お名前：
        = current_user.name
  .page-header__list
    .page-header__list__icon
      =icon("fas", "list-ul fa-5x", id: "list__icon")
      .page-header__list__icon__box
        %ul.page-header__list__icon__box__list
          %li.page-header__list__icon__box__list__li
            =link_to "登録変更",edit_user_registration_path,id:"icon__li"
          %li.page-header__list__icon__box__list__li
            =link_to "グループ希望",homes_path,id:"icon__li"
          %li.page-header__list__icon__box__list__li
            =link_to "ログアウト",destroy_user_session_path, method: "delete",id:"icon__li"

      
.page-main
  .page-main__genru
    %h1.page-main__genru__title
      お選びのジャンルだよ( ´∀｀)
    .page-main__genru__list
      .page-main__genru__list__top
        - current_user.genrus.each do |genru|  # ログインユーザーと紐づいているジャンル（複数）を一つ一つ取り出す
          .page-main__genru__list__top__name
            =link_to genru_path(genru.id),id: "genru-name" do # ジャンル名をリンクにする
              = genru.name
      .page-main__genru__list__bottom
        = link_to "ジャンルを探す",new_genru_path,id: "genru-bottom"
    
  .page-main__chat
    %h1.page-main__chat__title
      所属チャットグループだよ(*^ω^*)
    .page-main__chat__list
      .page-main__chat__list__top
        - if @groups # もしユーザーに所蔵しているグループ(@groups)があれば↓を表示
          - @groups.each do |g|
            .page-main__chat__list__top__name
              = link_to genru_group_path(genru_id: "{Group.find(g.group_id).genru_id}",id: g.group_id),id: "group-name" do
                =Group.find(g.group_id).name
    
.page-footer
```
```ruby:app/controllers/homes_controller.rb
class HomesController < ApplicationController
  def index
    @user = User.find(current_user.id)
    @groups = @user.users_groups
    # ＠groupsは@userに紐づいている中間テーブル（のレコード）を取り出している
    # users_groupsはusersテーブルとgroupsテーブルの中間テーブル
  end
  
end

```

**:sweat_smile:私の注意点**
link_toを使う且つ文字列以外をリンクにする場合はlink_to ~ doにしなければいけないのをよく忘れていました

```ruby:ただ文字列をリンクにする場合
= link_to "ジャンルを探す",new_genru_path,id: "genru-bottom"
```
```ruby:文字列以外をリンクにする場合
=link_to genru_path(genru.id),id: "genru-name" do # ジャンル名をリンクにする
  = genru.name
```
<br>

ホーム画面については、これくらいです。
次は、登録変更画面について記事にしたいと思います:smile: