[未経験からのRuby開発 #1] ダイビングのログブックを紙からWebに変える

#これなに
エンジニア人事をし始めてから10年近くが経つのですが、自分でつくりたいものがなく、今まで自分でアプリ開発はしませんでした。しかし、ここ2年でハマったダイビングで毎回書いている[ログブック](https://kotobank.jp/word/%E3%83%AD%E3%82%B0%E3%83%96%E3%83%83%E3%82%AF-663463#E3.83.80.E3.82.A4.E3.83.93.E3.83.B3.E3.82.B0.E7.94.A8.E8.AA.9E.E9.9B.86)が基本紙で管理していますが、毎回持ち歩くのが面倒なので、Webアプリをつくることにした記録です。

##いつも書いてるログブックはこんなやつ
[mic21](http://ec.mic21.com/shop/)さんオリジナルのログレフィルをつかってファイリングしています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160443/8ad4e929-4947-1646-ae94-88fa7bb3a6c8.png)


#どうやるか
パートナーが幸いにもWebエンジニア（世間でいうフルスタック？）なので先生をしてもらいます。
初心者なので[Progate](https://prog-8.com/dashboard)でRuby、SQL、フロントエンドの学習も同時並行で進めます。

##参考
- [Progate](https://prog-8.com/dashboard)
- [未経験からRuby on Railsを学んで仕事につなげるまでの1000時間メニュー](https://qiita.com/saboyutaka/items/1a8c40e105e93ac6856a)
- [Ruby on Rails実践講座 - Twitterの簡易クローンを開発する](https://cyllabus.jp/courses/LVlXWNb8GcWTKy8x1gHS5g)

#Day1にやったこと
## DB構成を考える
DB構成を考えるために、ER図をつくることにしました。Excelでつくるのも大変なので、何かいい方法はないか探して、**[PlantUML](http://plantuml.com/ja/)** を使うことにしました。

> 私「DB構成図つくったよ」
先生「DB構成図っていいません。ER図っていいます」
私「ER？緊急なの？」
先生「…。救命のことじゃない。Entity Relationshipの略です」

まずはテキストエディタで書きます。

###参考
- [PlantUMLでER図を書く](https://shinkufencer.hateblo.jp/entry/2018/11/29/000000)
- [ER図とは](http://itref.fc2web.com/technology/entity_relationship_diagram.html)

```
@startuml
entity "user" {
  + id [PK]
  ==
  name:text
}
entity "log" {
  + id [PK]
  ==
  # user_id [FK(user, id)]
  divr_no:integer
  date:timestamp
  location_name:text
  point_name:text
  lat:float
  lng:float
  weather:integer
  dive_style:integer
  dive_in:timestamp
  dive_out:timestamp
  air_in:integer
  air_out:integer
  temperature:float
  water_temperature:float
  visibility:integer
  max_depth:float
  avg_depth:float
  suit_type:integer
  suit_thickness:float
  weight:integer
  tank_type:integer
  tank_pressure:integer 
  memo:text
}
user --|{ log
@enduml
```

その次はターミナルで下記のコマンドを実行します。

```
brew install graphviz
brew install plantuml
```
最後に `plantuml {ファイル名}` を実行するとER図ができます！ なんて便利なんや。
![logbook.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160443/89ea022d-9035-b53e-eb42-ce9a5e3f666d.png)

##rails newする
railsアプリの雛形をつくります。`rails new logbook`のコマンドを実行します。MySQLの設定はあとでやるのでここでは割愛。

###参考
- [新規Railsプロジェクトの作成手順まとめ](https://qiita.com/yuitnnn/items/b45bba658d86eabdbb26)

##モデルとマイグレーションを生成する
`user` `log`のmodelを作成します。
###参考
- [いつも忘れる「Railsのgenerateコマンド」の備忘録](https://maeharin.hatenablog.com/entry/20130212/rails_generate)

##git pushする
```
git add .
git commit -m "[hoge]"
git push
```
先生に確認してもらいやすくするため、[bitbucket](https://bitbucket.org/
)へPUSHしました。その後、Visual Studio Codeでファイルを開いて開発をし始めました。

##has_many、belongs_toを設定する
1つのuserに紐づくlogデータが複数あるため、`user.rb`へ`has_many :logs`、`log.rb`へ`belongs_to :user`を追記します。

###参考
- [【Rails入門】has_many、belongs_toの使い方まとめ](https://www.sejuku.net/blog/26617)

##ログイン機能をつくる
- 1) deviseを使ってログイン機能をつくる
- 2) Omniauthを使いたい

###参考
- 1) [[初心者] deviseを使ってログイン機能を実装してみよう](https://qiita.com/Orangina1050/items/a16e655519a60f35b394)
- 2) [[Rails] Facebook/Twitter/Googleでのユーザー登録をDevise & Omniauthを使って爆速で実装する](https://qiita.com/kazuooooo/items/47e7d426cbb33355590e)

###小話
- ブラウザで確認するときは、Railsサーバーを立ち上げるのを忘れずに！`rails s`をやる！
- 1) でログインできるかテストしたあと 2) で `localhost:3000/users/sign_up`はアクセスしようとすると 1)のログイン情報が残っていて`localhost:3000`へreloadされてしまいます。トリック！
    - 違うブラウザで確認してみる

と、うまいこと動いてたので何かしらおかしいなと思いメインで使っているブラウザの(Chrome)でもコンソールから下記をやると動いてるようでした。

![スクリーンショット_2019-06-29_23_45_59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160443/f99884b8-70a1-81ba-650d-834b4a4f965b.png)

- Visual Studio Codeのインデント幅はRubyの場合は2が一般的らしい。私は最初4になっていたので途中で変更。
    - [Visual Studio Code インデントをスペースで幅2にする](http://sh-yoshida.hatenablog.com/entry/2016/09/29/180000)

#Day1の成果
`http://localhost:3000/users/sign_up`
![スクリーンショット 2019-06-29 23.50.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160443/a6a4fd61-e9d8-a168-5cad-98e1af653240.png)

#Day2どうする
- [各プラットフォームごとの設定をする](https://qiita.com/kazuooooo/items/47e7d426cbb33355590e)
    - ちらっとみた感じだと参考にさせてもらっているQiitaの内容とFacebook developersツールのページが変わっているので、自分で探さないと…。いろいろすぐ変わるからこういうの大変そうだなぁ。