Railsを使ったToDoリストの作成(1.プロジェクトの立ち上げと開発環境の整備)

#概要
本記事は、初学者がRailsを使ってToDoリストを作成する過程を記したものです。
私と同じく初学者の方で、Railsのアウトプット段階でつまづいている方に向けて基礎の基礎を押さえた解説をしております。
抜け漏れや説明不足など多々あるとは思いますが、読んでくださった方にとって少しでも役に立つ記事であれば幸いです。

#環境
* `Homebrew: 2.5.10` -> MacOSのパッケージ管理ツール
* `ruby: 2.6.5p114` -> Ruby
* `Rails: 6.0.3.4` -> Rails
* `node: 14.3.0` -> Node.js
* `yarn: 1.22.10` -> JSのパッケージ管理ツール
* `Bundler: 2.1.4` -> gemのバージョン管理ツール

```:iTerm
$ brew -v => Homebrew 2.5.10
$ ruby -v => ruby 2.6.5p114
$ rails -v => Rails 6.0.3.4
$ npm version => node: '14.3.0'
$ yarn -v => 1.22.10
$ Bundler -v => Bundler version 2.1.4
```

#第１章　プロジェクトの立ち上げ

第１章では、Railsでアプリ開発をするための初期設定を行います。初期設定には、`iTerm`／`VSCode`／`Sourcetree`／`GitHub`を使用します。

##1 iTermでToDoアプリを立ち上げる
まずはターミナルにて、アプリを立ち上げます。
`$ rails new [アプリ名] -d postgresql`と入力しましょう。

```:iTerm
$ rails new ToDoApp -d postgresql
=>Webpacker successfully installed 🎉 🍰
```
>🙋‍♂️ToDoAppというディレクトリ(フォルダ)配下にファイルを作成してください。'-d'オプションでデータベースをPostgreSQLに指定します。
>💻インストールが完了しファイルを作成しました

##2 VSCodeでディレクトリを開く
ファイルの作成が終わったら、VSCodeでディレクトリを開きます。

```:iTerm
$ cd ToDoApp
$ code .
```

>🙋‍♂️ToDoAppディレクトリに移動してください
>🙋‍♂️今いるディレクトリのVSCodeを開いてください

※`$ code .`を実行するためにはVSCodeにて以下の設定が必要です。
1. VSCodeにて`表示`→`コマンドパレット`を開く
2. `Shell Command: Install'code'command in PATH`を検索し実行する

##3 ToDoアプリをGitで管理する
続いて、ディレクトリをGitで管理できるようにしていきましょう。

1. Sourcetreeにて`ファイル`→`開く`→`ToDoApp`を選択
2. 保留中のファイルを選択し、'initial commit'としてコミットする
<br>=>masterブランチが作成される
3. GitHubの`Repositories`→`New`を選択し、Repository nameをつけて`Create repository`を押下する
4. GitHubのSSHのURLをコピーする
5. Sourcetreeの`設定`→`リモート`→`追加`→名前を'origin'、コピーしたURLを貼り付けて設定を完了する
6. materブランチで右クリックし、`プッシュ先`→`origin`を選択
7. GitHubの`<>code`に反映されていればSourcetreeとGitHubの連携完了

##4 サーバを立ち上げる
次にサーバの立ち上げを行います。
まず、サーバを立ち上げる前にデータベースの作成を行います。

```:iTerm
$ rails db:create
=>Created database 'ToDoApp_development'
  Created database 'ToDoApp_test'
```
>🙋‍♂️データベースを作成してください
>💻configのdatabase.ymlに基づいてdevelopmentのデータベースを作成しました
>💻configのdatabase.ymlに基づいてtestのデータベースを作成しました

ここまで完了したらサーバを立ち上げましょう。

```:iTerm
$ rails s
=>* Environment: development
  * Listening on tcp://127.0.0.1:3000
  * Listening on tcp://[::1]:3000
  Use Ctrl-C to stop
```
>🙋‍♂️サーバを立ち上げてください
>💻`Ctrl + C`でサーバを止めることができます

上記のような表示が出たら、ブラウザにて"localhost:3000"と検索してください。
![スクリーンショット 2020-11-16 22.32.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864210/63bb0684-318f-9dbe-797a-df652fa7aed1.png)

このような画面が出てきたら、Railsでのアプリ作成の準備は終了です。

##5 開発を効果的に進めるために①
ここからは開発をより効果的に行うために、いくつかのツールをインストールしていきます。まずはデバッグツールです。
エラーが起こった際に見るべきポイントは２つあり、１つ目は`エラーメッセージ`、２つ目は`変数の値`です。

では、まず１つ目の`エラーメッセージ`を見やすくする[better_errors](https://github.com/BetterErrors/better_errors)というgem(ライブラリ)を導入していきます。

```:Gemfile
gem 'better_errors'
gem 'binding_of_caller'
```
>🙋‍♂️`better_errors`というgemをインストールしてください
>🙋‍♂️`binding_of_caller`というgemをインストールしてください

ターミナルで`$bundle install`を行えばgemのインストールは完了です。
<br>
次に、２つ目の`変数の値`を確認するデバッグツールを導入します。このツールを導入することにより、プログラムがどこまで動いていて、どこから動いていないのかを確認することができます。

まずは[pry-byebug](https://github.com/deivid-rodriguez/pry-byebug)というgemをインストールします。

```:Gemfile
group :development, :test do
  gem 'pry-byebug'
end
```
>🙋‍♂️`pry-byebug`というgemをインストールしてください

ターミナルで`$bundle install`を行えばgemのインストールは完了です。
デバッグを行う際には、`binding.pry`というコードを使う必要がありますが、具体的な使い方は開発を進めながら説明していきます。

##6 開発を効果的に進めるために②
次に、モデルに現在のデータベースの構造(schema)をメモするツールを導入していきます。データベースの構造は'schema.rb'を見れば確認することはできますが、モデルの数が多いと確認することは大変です。そのため、モデルにデータベースの構造をメモし、モデルのファイルを開くだけで簡単にデータベースの構造がわかるようにしておくことは開発を行っていく上では大切となってきます。

では[annotate](https://github.com/ctran/annotate_models)というgemをインストールします。

```:Gemfile
gem 'annotate'
```
>🙋‍♂️`annotate`というgemをインストールしてください

ターミナルで`$bundle install`を行います。
次に、Railsでの設定を行うためにターミナルで以下のコマンドを実行します。

```:iTerm
$ rails g annotate:install
=>create  lib/tasks/auto_annotate_models.rake
```
>🙋‍♂️annotateの設定ファイルを作成してください
>💻ファイルを作成しました

以上で、`$rails db:migrate`をした際に、モデルに現在のデータベースの構造(schema)がメモされるようになりました。