【第2章】Ruby on Rails 入門 ~ プロジェクトを作成しよう ~

ここでは、フロント側は実装できるけど、Ruby on Rails はよく分からない!!という方向けに書いたものになります! 第2章はインストールしたRuby on Railsを使って実際にプロジェクトを作成していきましょう!また、開発するにあたって絶対に必要な「binding」もインストールします!

プロジェクトを新規構築しよう!

実際にRuby on Railsでプロジェクトを新規作成していきましょう!

まずは、作業用のフォルダを作成して、そこに移動します。

mkdir work
cd work

今回は「work」というフォルダ名にしました。

ここは何でもOKです!

そしたら、今度は以下のコマンドでプロジェクトを作成しましょう!

rails new rails_thread

プロジェクト名は「rails_thread」にしてみました!

ここも好きな名前を付けてもらえばOKです!

このコマンドを実行すると、勝手にプロジェクトに関係するフォルダを作成してくれるのでちょっと待ちます。

完了するとプロジェクトフォルダ(rails_thread)に以下のようなフォルダやファイルが作成されるかと思います。

こんな感じで出てくれば、晴れてプロジェクトの構築完了です!!!

便利ツールの「binding」を入れておこう!

bindingってどんなもの?

とりあえず、環境構築が完了したら最低限のツールを入れておきましょう!

今回入れるのは「binding」というもので、デバッグをする際に役に立ちます。

binding.pry

上のコードをRubyに記述すると記述位置で実行が停止します。

ChromeのデベロッパーツールのブレイクポイントやJavaScriptのdebuggerみたいな感じですね!

実際にインストールしよう!

では、実際にこのツールをインストールしましょう!

インストールするには、先ほど作成したプロジェクトの中にある「Gemfile」を編集します。

Gemfileはこのプロジェクトで使われるライブラリの種類やバージョンを管理します。

バージョンが違うだけでうまく動かないことはよくあるので、このプロジェクトではこれを使う!というのを決めることが出来ます。

では、実際にインストールしてみましょう!まずは、「Gemfile」をエディタで開きます。


source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby '2.6.3'

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 5.2.3'
# Use sqlite3 as the database for Active Record
gem 'sqlite3'
# Use Puma as the app server
gem 'puma', '~> 3.11'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
~略~

中を見るとこんな感じのコードが書かれていると思います。

このファイルの最後の行あたりに以下のコードを貼り付けて保存します。


group :development, :test do
  gem 'pry-rails'
  gem 'pry-byebug'
  gem 'pry-doc'
end

次にコマンドを操作します。

プロジェクトのトップをカレント状態にして(Gemfileがあるフォルダに移動すればOK)以下のコマンドを実行します。


bundle install --path vendor/bundle

「bundle install」とはGemfileで定義したライブラリを全てインストールするコマンドになります。

引数で与えている「--path vendor/bundle」はどこにインストールするのかを指定するものになります。

以下のようなメッセージが出たらインストール完了です!!


Bundle complete! 19 Gemfile dependencies, 82 gems now installed.
Bundled gems are installed into `./vendor/bundle`

ちなみにライブラリを削除したい場合は、Gemfile内にある削除したいライブラリ名を削除してから「bundle install」を実行すればOKです!

というわけで、最後までありがとうございました!!

次回は実際にページを表示するところまでやってみます!!