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'としてコミットする
   =>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"と検索してください。

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

5 開発を効果的に進めるために①

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

では、まず１つ目のエラーメッセージを見やすくするbetter_errorsというgem(ライブラリ)を導入していきます。

Gemfile

gem 'better_errors'
gem 'binding_of_caller'

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

ターミナルで$bundle installを行えばgemのインストールは完了です。


次に、２つ目の変数の値を確認するデバッグツールを導入します。このツールを導入することにより、プログラムがどこまで動いていて、どこから動いていないのかを確認することができます。

まずは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という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)がメモされるようになりました。