映画レビューサイトの作成
「mooovi」という名前の映画レビューサイトを作成する。
自分が見た映画のレビューを投稿することができ、他の人のレビューも見ることができるアプリケーション。
アプリケーションを作成
アプリケーションを開発していく上で、アプリケーションを配置するディレクトリや、必要なファイルを準備する。
アプリケーションを配置するディレクトリに移動
ソースコードをダウンロード
使用するソースコードはGithubというサービスに上がっている場合、それをPCにダウンロードするために、git clone(クローン)
という操作をする。
Git
Gitはソースコードの変更履歴、バージョン等を記録するツールで、開発する際には必須といえるツール。FacebookやGoogleなどの有名企業も開発の際には利用している。
Github
githubはチーム開発やソースコードの共有にとても便利なサービスでfacebook等有名な企業も活用している。自分のソースコードを保管できるためエンジニアの履歴書のような役割も果たしている。
git clone リポジトリURL ディレクトリ名
git clone コマンドは、外部のサーバーにあるGitで管理されたソースコードを自分のパソコン(ローカル環境)にダウンロードするコマンド。実際に使用する際にはgit clone リポジトリURL ディレクトリ名
という形でターミナルで実行し使用する。
lsコマンド
lsコマンドはlinuxコマンドの一種。lsコマンドを使用すると、現在のディレクトリにあるファイルを表示することができる。ちなみに、ls
は「list segments」の略を意味している。
1 2 |
$ ls
# 現在のディレクトリにあるファイルを表示
|
アプリケーションは「~/projects」ディレクトリで管理しているので、そのディレクトリにcloneを行う。
1 2 3 4 5 6 7 8 |
# projectsディレクトリに移動
$ cd ~/projects
# ソースコードをクローン
$ git clone https://github.com/exp-drill/mooovi.git
# 現在のディレクトリにあるファイルを表示し、「mooovi」というファイルがあるか確認
$ ls
|
ディレクトリの構成を確認
アプリケーション開発をする上で、ファイルの分け方(ディレクトリの構成)は重要になってくる。
それぞれ、役割ごとにディレクトリを分けて、開発者自身やチーム内でわかりやすいディレクトリ構成を作ることで効率化を図ることが出来る。
テキストエディタで「mooovi」ディレクトリを開く
テキストエディタで「command + o」ボタンを使用することによってディレクトリごとファイルを開くことができる。今回のアプリケーションは「ユーザー名/projects/mooovi」。
- mooovi
- app
- controllers
- application_controller.rb ①
- products_controller.rb ②
- ranking_controller.rb ③
- reviews_controller.rb ④
- models
- views
- products
- index.html.erb ⑤
- search.html.erb ⑥
- show.html.erb ⑦
- reviews
- new.html.erb ⑧
- products
- controllers
- app
番号 | 内容 |
---|---|
① | アプリケーションコントローラ |
② | 作品情報を扱うコントローラ |
③ | サイドバーのコントローラ |
④ | レビュー情報を扱うコントローラ |
⑤ | トップページ用のビューファイル |
⑥ | 検索用のビューファイル |
⑦ | 作品ページ用のビューファイル |
⑧ | レビュー投稿用のビューファイル |
サーバーを立上げられるようにする
まだアプリケーションをgitからクローンしてきただけなのでサーバーを立ち上げようとすると、エラーが起きてしまう。まずはアプリケーションを自分のローカル環境で実行することができるようにする。
bundle install
今回作成するアプリケーションもgemを使用する。そのため、前もってgemをインストールしておく必要がある。gemをインストールするコマンドはbundle install
。
コマンドを打つ前にmoooviのディレクトリに移動する。
1 2 3 4 5 6 7 8 |
bundle installでエラーが出る場合
インストールしてあるRubyやRailsのバージョンが古い場合はエラーが出ることがある。その時はまずrubyのバージョンを確認する。
1 |
ruby -v
|
ここでバージョンが2.5.1と表示されなかった時は先の以下の手順を実行してからbundle installをもう一度行う。
1 2 3 4 5 6 |
> rbenv install 2.5.1
> rbenv global 2.5.1
> gem install rails -- version="5.2.1"
> rbenv rehash
|
データベースをつくる
まずはデータベースを作成する。
注意点
ターミナル上で「rails ~」や「rake ~」というコマンドを実行することがあるが、その際は、必ず接頭にbundle execという文字をつけて実行してください。
bundlerによるgem管理
bundlerを利用してインストールしたgemは、Railsの各プロジェクトではなく、Rubyのバージョンごとにある保存場所にインストールされている。
bundle show [gemの名前]
というコマンドを実行するとbundlerでインストールしたgemがどこに保存されているのか確認することができる。
試しに、railsがどこに保存されているのか確認してみる。
bundle show rails コマンドを実行すると、railsの保存場所を確認することができる。
1 2 3 |
bundle installを実行した際、bundlerは先ほどの保存場所からrailsプロジェクトのGemfileに書いてあるgemだけを読み込み、使える状態にしてくれる。
bundle execコマンド
bundle exec は2つ以上のrailsアプリケーションを同じバージョンのRubyを利用して作成している際に必要となるコマンド。
rakeコマンドやrailsコマンドなどはそれぞれrake、railsというgemによって使うことができるが、
開発しているプロジェクトが2つ以上ある場合に「rake db:migrate」などのコマンドを打ち込んでしまうと下の画像のようなエラーが起きることがある。
これは同じRubyのバージョンで複数のアプリケーションを開発していると、同じ名前のgemでもアプリケーションごとにバージョンが異なることがあるためである。
例えば、以下の様にアプリがある場合。
アプリ | rubyバージョン | nokogiriバージョン |
---|---|---|
アプリケーション1 | 2.3.1 | 1.3.3 |
アプリケーション2 | 2.3.1 | 1.5.9 |
アプリケーション1をターミナルでrake db:migrateしたい際には、bundle execコマンドを接頭につけてrakeコマンドを実行すると、Gemfileで指定した環境下のrakeのコマンドとして実行される。
1 2 |
$ bundle exec rake db:migrate
# 必ず最初に bundle exec をつけて実行する。
|
1 2 |
$ bundle exec rake db:create
# データベースの作成
|
上記のコマンドによってconfig/database.ymlの設定に基いてデータベースが作成されたはずである。
Sequel Proでデータベースがきちんと作成されているか確認する。
きちんと作成されていたら、「mooovi_development」「mooovi_test」の2つのデータベースが表示されるのを確認することができる。
サーバーを立ち上げる
これでサーバーを起動する準備が整ったので、moooviのディレクトリでサーバーを起動してみる。サーバーを起動させるためのコマンドはrails s
。
1 2 |
$ bundle exec rails s
# サーバーを起動
|
サーバーが正しく起動できていれば、以下の様な出力結果が表示される。
1 2 3 4 5 6 7 8 9 |
=> Booting Puma
=> Rails 5.2.1 application starting in development
=> Run `rails server -h` for more startup options
Puma starting in single mode...
* Version 3.12.0 (ruby 2.3.1-p112), codename: Llamas in Pajamas
* Min threads: 5, max threads: 5
* Environment: development
* Listening on tcp://0.0.0.0:3000
Use Ctrl-C to stop
|
ビューが表示されるか確認
サーバーを立ち上げたのでhttp://localhost:3000
で映画レビューアプリケーションにアクセスできるようになったはず。
以上でアプリケーションを作成するための前準備は終了。