hiyoko-programingの日記

プログラミングを勉強したてのひよっ子。   エンジニア目指して勉強中。

映画レビューサイトの作成

「mooovi」という名前の映画レビューサイトを作成する。
自分が見た映画のレビューを投稿することができ、他の人のレビューも見ることができるアプリケーション。

アプリケーションを作成

アプリケーションを開発していく上で、アプリケーションを配置するディレクトリや、必要なファイルを準備する。

アプリケーションを配置するディレクトリに移動

ターミナル
1
2
3
4
5
  $ cd ~/projects
  # 「projects」ディレクトリに移動

  $ pwd
  # 現在のディレクトリのパスを表示

 

ソースコードをダウンロード

使用するソースコードGithubというサービスに上がっている場合、それをPCにダウンロードするために、git clone(クローン)という操作をする。

 Git

Gitはソースコードの変更履歴、バージョン等を記録するツールで、開発する際には必須といえるツール。FacebookGoogleなどの有名企業も開発の際には利用している。

 Github

githubはチーム開発やソースコードの共有にとても便利なサービスでfacebook等有名な企業も活用している。自分のソースコードを保管できるためエンジニアの履歴書のような役割も果たしている。

https://github.com

 git clone リポジトリURL ディレクトリ名

git clone コマンドは、外部のサーバーにあるGitで管理されたソースコードを自分のパソコン(ローカル環境)にダウンロードするコマンド。実際に使用する際にはgit clone リポジトリURL ディレクトリ名という形でターミナルで実行し使用する。

ターミナル
1
2
  $ 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 ⑧
番号 内容
アプリケーションコントローラ
作品情報を扱うコントローラ
サイドバーのコントローラ
レビュー情報を扱うコントローラ
トップページ用のビューファイル
検索用のビューファイル
作品ページ用のビューファイル
レビュー投稿用のビューファイル

 

サーバーを立上げられるようにする

まだアプリケーションをgitからクローンしてきただけなのでサーバーを立ち上げようとすると、エラーが起きてしまう。まずはアプリケーションを自分のローカル環境で実行することができるようにする。

bundle install

今回作成するアプリケーションもgemを使用する。そのため、前もってgemをインストールしておく必要がある。gemをインストールするコマンドはbundle install

 コマンドを打つ前にmoooviのディレクトリに移動する。

ターミナル
1
2
3
4
5
6
7
8
  $ cd mooovi
  # 「projects」ディレクトリから、「mooovi」ディレクトリへ移動

  $ pwd
  # 現在のディレクトリが「/Users/ユーザー名/projects/mooovi」であることを確認

  $ bundle install
  # Gemfileの内容に従ってGemをインストール

 bundle installでエラーが出る場合

インストールしてあるRubyRailsのバージョンが古い場合はエラーが出ることがある。その時はまず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 show rails
  /.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/rails-4.2.6
  # bundler によって保存されるgemの保存場所を表示

bundle installを実行した際、bundlerは先ほどの保存場所からrailsプロジェクトのGemfileに書いてあるgemだけを読み込み、使える状態にしてくれる。

 bundle execコマンド

bundle exec は2つ以上のrailsアプリケーションを同じバージョンのRubyを利用して作成している際に必要となるコマンド。

rakeコマンドやrailsコマンドなどはそれぞれrake、railsというgemによって使うことができるが、

開発しているプロジェクトが2つ以上ある場合に「rake db:migrate」などのコマンドを打ち込んでしまうと下の画像のようなエラーが起きることがある。

https://tech-master.s3.amazonaws.com/uploads/curriculums//5a902fd1b8e10c7f517dcdc265ece1f6.png

これは同じ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つのデータベースが表示されるのを確認することができる。

https://tech-master.s3.amazonaws.com/uploads/curriculums//e907b302ea1af1a09dd48f429153e269.png

 

サーバーを立ち上げる

これでサーバーを起動する準備が整ったので、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で映画レビューアプリケーションにアクセスできるようになったはず。

mooovi

 

以上でアプリケーションを作成するための前準備は終了。