【Ruby】プログラミング学習時間計測アプリをつくるまでの工程

## 準備
1　どんなビューにしたいか紙に書く
2　Railsで新規アプリケーションを作成

```console:console
$ cd projects
# 該当のディレクトリまで行く

$ rails _5.2.2.1_ new pictweet -d mysql
# rails new コマンド実行
```

3　Gemの追加


```ruby:programmingtime/Gemfile

gem 'mysql2', '0.5.2'
gem 'sass-rails', '5.0.7'
# 該当の箇所に書く。mysql2とsass-railsのバージョン指定

gem 'pry-rails'
gem 'compass-rails', '3.1.0'
gem 'sprockets', '3.7.2'
# 初めからインストールされているGemに加えて3つのGemを追加
```

```console:console
$ bundle update
# Gemfileを更新する
```

4　データベースの作成

```console:console
$ rake db:create
# データベースの作成
```

悩んだポイント：アクションはどれを作成すればいいのか？

## ルーティング・コントローラー作成とか

5 ルーティングの設定

```ruby:routes.rb
Rails.application.routes.draw do
  get 'study' => 'study#index'
end

```

6 コントローラー作成

```console:console
$ rails g controller study
# studyコントローラーの作成
```

7 コントローラー編集

```ruby:study_controller.rb
class StudyController < ApplicationController
  def index
    @study = '20h'
  end
end
```

## ビュー作成

8 ビューファイルの作成
テキストエディタでindex.html.erbファイルを作成する。

`app>views>study(個人によって違う)>index.html.erb`

※ビューファイルは「コントローラと同じ名前のフォルダ」内にある「アクション名と同じファイル名」のものが適用されるというrailsの決まりがあり

今回はstudy_controllerの中にある、indexアクションのためこの流れ。

9 ビューファイルの編集

```erb:index.html.erb
<div class="contents">
  <div class="input_time">
    <p>今日の学習時間を入力してください</p>
  </div>
  <div class="output_time">
    <p>これまでトータルで<%=@study%>勉強したよ！</p>
  </div>
</div>
```
▼その時のビューファイル
<img width="1193" alt="スクリーンショット 2019-12-02 21.25.58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504616/420da66f-b495-6d04-77d0-40b8ca346e3f.png">

▼その時のビューファイル（ズームアップ）
<img width="292" alt="スクリーンショット 2019-12-02 21.26.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504616/5378208e-e7b4-5298-3c3f-12fe7346e8db.png">


10 レイアウトファイルの確認
以下のようになっていればOK

```erb:applictation.html.erb
<!DOCTYPE html>
<html>
  <head>
    <title>Programmingtime</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

```

## DB設計
11 モデルとテーブルの作成
rails g model コマンドでモデルを作る。

```console:console
$ rails g model study
# モデルを作成
```

rails g modelコマンドでモデルのファイルを作成した際、同時にそのモデルと結びつくテーブルの設計図も生成されている。
これをマイグレーションファイルと呼ぶ。
この段階ではまだ、DBには該当するテーブルは存在しない。
このマイグレーションファイルを実行することで、初めてテーブルが作られる。

12 マイグレーションファイルの編集

マイグレーションファイルを以下のように編集

```ruby:2019xxxxxx_create_time.rb
class CreateStudies < ActiveRecord::Migration[5.2]
  def change
    create_table :studies do |t|
      t.float       :time
      t.date        :date
      t.timestamps
    end
  end
end
```

13 マイグレーションファイルの実行

```console:console
$ rake db:migrate
# マイグレーションファイルの実行
```

14 seeds.rb ファイルの編集
実際にデータをいれて表示したいのでseeds.rbファイルに仮のデータをいれてみる。

[railsのseedの書き方いろいろ - Qiita](https://qiita.com/takehanKosuke/items/79a66751fe95010ea5ee)

```ruby:seeds.rb
Study.create([
  {time: 2.5, date: '2019-12-02'},
  {time: 2.0, date: '2019-12-03'},
  {time: 3.0, date: '2019-12-04'},
  {time: 2.0, date: '2019-12-05'},
  {time: 1.5, date: '2019-12-06'},
  {time: 5.5, date: '2019-12-07'},
])
```

14 seedsファイルの実行

```console:console
$ rake db:seed
# seedに書かれた内容をデータベースに反映
```

## controllerとroutingの設定
15 コントローラー編集

```ruby:study_controller.rb
class StudyController < ApplicationController
  def index
    @study = Study.new
    @study = Study.all.sum(:time)
  end
end
```

16 create ルーティングの設定

```ruby:routes.rb
Rails.application.routes.draw do
  get 'study' => 'study#index'
  post 'study' => 'study#create'
end
```

17 create コントローラーの設定

```ruby:study_controller.rb
class StudyController < ApplicationController
  def index
    @study = Study.new
    @study = Study.all.sum(:time)
  end

  def create
    Study.create(study_params)
    redirect_to action: 'index'
  end

  private 

  def study_params
    params.permit(:time, :date)
  end
end
```
## ビューの編集
18 formビューファイルの編集

```erb:index.html.erb
 <div class="contents">
  <div class="input_time">
    <p>今日の学習時間を入力してください</p>
  </div>
  <%= form_tag('/study', method: :post) do %>
    <h3>
      今日の学習時間を入力してね！
    </h3>
    <input placeholder="Date" type="date" name="date">
    <input placeholder="StudyTime" type="float" name="time">
    <input type="submit" value="SENT">
  <% end %>
  <div class="output_time">
    <p>これまでトータルで<%= @study%> hの勉強したよ！</p>
  </div>
</div>
```

▼この時点でのビュー

<img width="346" alt="スクリーンショット 2019-12-02 22.41.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504616/d832ea41-cfbb-0fde-025b-e307d575b204.png">

19 form tagから form forへの変更

悩んだポイント： form forの書き方。 
@study でモデルを受け渡すつもりだったが、コントローラーを単数で作ってしまったのでうまくいかなかった。

```ruby:study_controller.rb
class StudyController < ApplicationController
  def index
    @study = Study.new
    @studies = Study.all.sum(:time) #studiesに変更
  end

  def create
    Study.create(study_params)
    redirect_to action: 'index'
  end

  private 

  def study_params
    params.permit(:time, :date)
  end
end
```

```erb:index.html.erb
 <div class="contents">
  <%= form_for study_path do |f| %>
    <h3>
      今日の学習時間を入力してね！
    </h3>
    <%= f.date_select :date, placeholder: "今日の日付" %>
    <%= f.number_field :time, placeholder: "プログラミング勉強時間" %>
    <%= f.submit "送信" %>
  <% end %>
  <div class="output_time">
    <p>これまでトータルで <span class="study_time"> <%= @studies%> h </span> の勉強したよ！</p>
  </div>
</div>
```

20 pryの導入
フォームがうまく通過しなくなったのでpryの導入を行なった。
[Rails で Pry を使う - Qiita](https://qiita.com/silmisilon/items/8e08435204d8d08d09ff)

21 form withへの変更

pryで見てみると
form_forのパスがおかしかったので書き直した。
ストロングパラメーターもきちんとかけていなかった。


```erb:index.html.erb
<div class="contents">
  <div class="input_time">
  <%= form_with model: @study, url: study_path do |f| %>
    <h3>
      今日の日付を入力してね！
    </h3>
    <%= f.date_select :date %>
    <h3>
      今日のプログラミング学習時間を入力してね！
    </h3>
    <%= f.text_area :time, placeholder: "小数点第一位まで可！", size: "40x5" %>
    <%= f.submit "送信",class: 'submit_btn' %>
  <% end %>
  </div>
  <div class="output_time">
    <div class="balloon">
      <p>これまでトータルで <span class="study_time"> <%= @studies %> h </span> の勉強したよ！</p>
      <p>がんばったね！</p>
    </div>
    <%= image_tag "pompom.png",:size =>'150x150',class: 'pomuo' %>
  </div>
</div>
```

22 ストロングパラメーターの実装

```ruby:study_controller.rb
class StudyController < ApplicationController
  def index
    @study = Study.new
    @studies = Study.all.sum(:time)
  end

  def create
    Study.create(study_params)
    # @study = Study.new(study_params)
    # @study.save
    redirect_to action: 'index'
  end

  private 

  def study_params
    params.require(:study).permit(:time, :date)
  end
end
```

23 ビューをリッチに

```css:study.scss
.contents{
  text-align: center;
  height: 800px;
  background-color:#f8f8ff;
  padding: 50px 50px;
  font-weight: bold;
  color: #191970;
  
  .input_time{
    background-color: #ffffff;
    padding: 30px 30px;
    border-radius: 10px;
  }

  .submit_btn{
    padding: 15px 40px;
    font-size: 1.2em;
    background-color:#191970;
    color: #fff;
    border-style: none;
  }
  .output_time{
    padding: 20px 20px;
    font-size: 25px;

    .balloon {
      position: relative;
      display: inline-block;
      margin: 1.5em 0;
      padding: 20px 10px;
      min-width: 120px;
      max-width: 100%;
      color: #191970;
      font-size: 16px;
      background: #fff9b1;
      border-radius: 10px;
    }
    .balloon:before {
      content: "";
      position: absolute;
      top: 50%;
      left: 100%;
      margin-top: -15px;
      border: 15px solid transparent;
      border-left: 15px solid #fff9b1;
    }
    
    .study_time{
      color: #b22222;
      font-size: 30px;
      font-weight: bold;
    }

    .pomuo{
      padding: 20px 10px;
    }
  }
}

```

## 完成！
かわいい
<img width="1049" alt="スクリーンショット 2019-12-07 18.15.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504616/471e2e1f-06f6-7fd3-0262-6c112ab717fd.png">