Ruby on Rails Ⅱ

# 投稿一覧ページ
データベースをHTMLに直接書く

投稿に関するページ
postsコントローラ
indexアクション名

コマンド
「rails generate controller posts index」は「rails g controller posts index」と省略可
作成された「views/posts/index.html.erb」に投稿一覧ページ用のHTMLを書いていく

「config/routes.rb」を開いて、
get "posts/index" => "posts#index"
というルーティング

「app/controllers/posts_controller.rb」を開いて、
indexアクションを持ったpostsコントローラ

「app/views/posts/index.html.erb」を開いて、ビューファイルが作成されている
HTMLファイルを張り付け
<header>
  <div class="header-logo">
    <a href="/">TweetApp</a>
  </div>
  <ul class="header-menus">
    <li>
      <a href="/about">TweetAppとは</a>
    </li>
  </ul>
</header>

<div class="main posts-index">
  <div class="container">
    <div class="posts-index-item">
      今日からProgateでRailsの勉強するよー！
    </div>
    <div class="posts-index-item">
      投稿一覧ページ作成中！
    </div>
  </div>
</div>


「app/assets/stylesheets/posts.scss」
CSS
/* posts/index ================================ */
.posts-index-item {
  padding: 20px 30px;
  background-color: white;
  overflow: hidden;
  box-shadow: 0 2px 6px #c1ced7;
}

.post-left img {
  width: 50px;
  height: 50px;
  border-radius: 40%;
  box-shadow: 0 2px 6px #c1ced7;
  object-fit: cover;
}

.post-user-name a {
  font-weight: 600;
}

.post-user-name a:hover {
  color: #3ecdc6;
}

.post-left {
  float: left;
  width: 10%;
}

.post-right {
  float: left;
  width: 90%;
  padding-left: 25px;
  text-align: left;
}

/* posts/show ================================ */
.posts-show form {
  display: inline;
}

.posts-show-item {
  padding: 30px;
  background-color: white;
  box-shadow: 0 2px 6px #c1ced7;
  overflow: hidden;
}

.posts-show-item img {
  width: 60px;
  height: 60px;
  border-radius: 40%;
  box-shadow: 0 2px 6px #c1ced7;
  vertical-align: middle;
  object-fit: cover;
}

.posts-show-item .post-user-name a {
  vertical-align: middle;
  font-size: 24px;
  margin-left: 15px;
}

.posts-show-item p {
  font-size: 24px;
  margin: 20px 0;
}

.post-time {
  color: #8899a6;
  margin-bottom: 10px;
}

.post-menus {
  float: right;
}

.post-menus a, .post-menus input {
  color: #8899a6;
  text-decoration: underline;
  font-size: 14px;
}

/* posts/new ================================ */
.posts-new textarea {
  font-size: 20px;
  padding: 10px;
  min-height: 140px;
  border: 1px solid rgb(216, 218, 223);
  resize: none;
}

.posts-new textarea::-webkit-input-placeholder {
  font-size: 24px;
  opacity: 0.5;
}


# viewファイル内で変数を定義
index.html.erbのようなerbという形式のファイルでは、以下の図のように<% %>で囲むことで、HTMLファイルの中にRubyのコードを記述することができます。
「erb」とは「Embedded Ruby（埋め込みRuby）」の略
埋め込むRubyコードをブラウザに表示したい場合には、以下の図のように
<% %>ではなく、<%= %>を用いま
<% %> 変数
<%= %> 表示

<!-- ここに変数post1を定義して、指定された投稿内容を代入してください -->
<% post1 = "今日からProgateでRailsの勉強するよー！"  %>
<!-- ここに変数post2を定義して、指定された投稿内容を代入してください -->
<% post2 = "投稿一覧ページ作成中！"  %>

<div class="main posts-index">
  <div class="container">
    <div class="posts-index-item">
      <!-- 以下の投稿を、変数post1を用いて書き換えてください -->
      <%= post1 %>
    </div>
    <div class="posts-index-item">
      <!-- 以下の投稿を、変数post2を用いて書き換えてください -->
      <%= post2 %>
    </div>
  </div>
</div>

      
# each文で表示
<!-- 以下の「<% %>」の中に指定された内容の配列postsを定義してください -->
<%
  posts = [
    "今日からProgateでRailsの勉強するよー！",
    "投稿一覧ページ作成中！"
    ]
%>

<div class="main posts-index">
  <div class="container">
    <!-- 以下の<% %>を使ってeach文を追加してください -->
    <% posts.each do |post| %>
      <div class="posts-index-item">
        <!-- 以下の<%= %>を使って投稿内容を表示してください -->
        <%= post %>
      </div>
    <!-- 以下の<% %>を使ってeach文のendを追加してください -->
    <% end %>
  </div>
</div>


# アクションで変数を定義
Rails ではビューではなく、アクションで定義することが一般的

@変数  
変数名を「@」から始めることでこの変数は特殊な変数となり、ビューファイルでも使用することができる
.rb ビューで使える変数
def index
    @post1 = "にんじゃわんこ"
end

.erb アクションで定義した変数の呼び出し
<%= @post1 %>


# データベースを用意
マイグレーションファイルと呼ばれる、データベースに変更を指示するためのファイルを作成
「rails g model Post content:text」というコマンドで作成する
        generate Postsテーブル カラム名 データ型
    db/migrateフォルダの下にマイグレーションファイルが作成
    
# テーブルを用意
「rails db:migrate」を実行
マイグレーションファイルを作成した場合は必ず「rails db:migrate」を実行する必要がある

# モデルを確認
テーブルを操作するためのモデルと呼ばれる特殊なクラス
「rails g model」コマンドでposts テーブルを操作するための Post モデルがすでに生成
「post.rb」が、app/modelsフォルダの中に作成されていま
・app/modelsフォルダにモデルが定義されたファイル
・db/migrateフォルダにマイグレーションファイル


# rails consoleを使ってみよう
ターミナル上で「rails console」と入力し実行（Enter）することで、コンソールを起動することができます。コンソールを起動した状態で、「1+1」を実行すると、その実行結果が表示されます。
また、「quit」を実行すると、コンソールを終了することができる

# テーブルに投稿データを保存しよう
posts テーブルにデータを追加するには右の図のように、
① new メソッドで Post モデルのインスタンスを作成
② posts テーブルに保存

newメソッド
saveメソッド
    
post1 = Post.new(content: " ")
post1.save
    

# テーブルからデータを取り出そう
    # テーブルから1つのデータを取り出す
「Post.first」とすることで、 posts テーブルにある最初のデータを取得する
# contentカラムの値を取り出そう
    「post.content」とすることで「Post.first」で取得したデータから投稿内容を取得することができる

# テーブルから全てのデータを取り出そう
全ての投稿を取り出す posts = Post.all
 投稿の配列から１つのデータを取り出す Post.all [0] 
配列のデータから投稿内容を取り出す Post.all[0].content 

# データベースのデータを表示しよう
rails consoleのまとめ
    データの作成 (new,save)
    データの取得 (Post.all,post.content)
    
    # 全ての投稿を表示する
    class PostsController < ApplicationController
  def index
    @posts = Post.all
  end
end
                                                 
<div class="main posts-index">
  <div class="container">
    <% @posts.each do |post| %>
      <div class="posts-index-item">
        <!-- post.contentを使って書き換えてください -->
        <%= post.content %>
      </div>
    <% end %>
  </div>
</div>

        
# 共通のレイアウトをまとめよう
    Railsでは、「views/layouts/application.html.erb」に共通のHTMLを書いておくことができる
        
# link_toメソッド
        Rails ではlink_toというメソッドを使うと<a>タグを作成することができるぞ。 link_to メソッドは Ruby のコードなので、「<%=%>」で囲む
    第一引数に表示する文字を、第二引数に URLを書くことでリンクが作成される
  <body>
    <header>
      <div class="header-logo">
        <!-- 以下のリンクをlink_toメソッドを用いて変更してください -->
        <%= link_to("TweetApp","/") %>
      </div>
      <ul class="header-menus">
        <li>
          <!-- 以下のリンクをlink_toメソッドを用いて変更してください -->
          <%= link_to("TweetAppとは","/about") %>
        </li>
        <li>
          <!-- ここにlink_toメソッドを用いて投稿一覧ページへのリンクを作成してください -->
          <%= link_to("投稿一覧","/posts/index") %>
        </li>
      </ul>
    </header>
    <%= yield %>
  </body>
</html>