Rails プロジェクトの開始(topページ表示まで)

#### Railsのバージョンを指定してプロジェクト作成
```
cd ~/environment/ 　#作成するディレクトリへ移動
rails _5.2.5_ new アプリ名 --database=mysql --skip-test
　# version5.2.5を指定、DB:mySQL、testスキップ
```
#### データベース作成
cloud9OSがUbuntsの場合、database.ymlを変更

```rb:config/database.yml
(16行目) username: dbuser
(17行目) password: dbpass
```
作成したアプリへ移動``` cd アプリ名```
データベースを作成```rails db:create``` 
```rails s```で 動作確認（サーバを起動）  
#### ジェネレータ設定
rails gで不要なものを自動生成しない設定
config/initializersに【generators.rb】ファイルを作成し、以下を必要に応じて記述

```rb:config/initializers/generators.rb
Rails.application.config.generators do |g|
  g.stylesheets false   #CSS
  g.javascripts false   #javascripts
  g.helper false        #helper
  g.skip_routes true    #routes
end
```  
#### ページネーション(ページ割り)
Gemfileに```gem 'kaminari'```を追加し、```bundle install```
bootstrapデザインを適用```rails g kaminari:views bootstrap4```

#### トップページ作成(model不要)
1.ルーティング作成

```ruby:config/routes.rb
Rails.application.routes.draw do
  root to: 'toppages#index'
end
```  
2.toppage controllerを作成(indexアクション、viewファイル自動生成)
```rails g controller toppages index```  

3-1.共通レイアウト
```app/views/layouts/application.html.erb```が全てのページ(view)の共通レイアウト。
追加で作成していくviewが```<%= yield %>```部分に反映されていく。

```html:app/views/layouts/application.html.erb
<!DOCTYPE html>
<html  lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>アプリ名</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

    <%= stylesheet_link_tag  'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
    <script defer src="https://use.fontawesome.com/releases/v5.7.2/js/all.js"></script>
  </head>

  <body>
    <%= render 'layouts/navbar' %>

    <div class="container">
      <%= render 'layouts/flash_messages' %>

      <%= yield %> #ここにそれぞれのviewが反映される
    </div>
  </body>
</html>
```  
3-2. フラッシュ
コントローラで設定する「フラッシュメッセージ」をパーシャル( _***.html.erb)として作成。

```erb:app/views/layouts/_flash_messages.html.erb
<% flash.each do |message_type, message| %>
  <div class="alert alert-<%= message_type %>"><%= message %></div>
<% end %>
```  
3-3.エラーメッセージ
validationで発生する「エラーメッセージ」をパーシャルとして作成。

```erb:app/views/layouts/_error_messages.html.erb
<% if model.errors.any? %>
  <div id="error_explanation" class="alert alert-warning">
    <ul class="mb-0">
      <% model.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
    </ul>
  </div>
<% end %>
```  
3-4.ナビバー
共通のナビバー（上部バー）をパーシャルで作成。

```erb:app/views/layouts/_navbar.html.erb
<header class="mb-4">
  <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
    <a class="navbar-brand" href="/">アプリ名</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
      <ul class="navbar-nav">
        <li class="nav-item"><a href="#" class="nav-link">Signup</a></li>
        <li class="nav-item"><a href="#" class="nav-link">Login</a></li>
      </ul>
    </div>
  </nav>
</header>
```  
4.viewファイル編集

```erb:app/views/toppages/index.html.erb
<div class="center jumbotron">
  <div class="text-center">
    <h1>ようこそ、'アプリ名'へ！</h1>
  </div>
</div>
```  

プレビューで表示を確認。