Rails × Vue.js でメモアプリを作成しながらモダンな開発を学ぼう！

メモアプリケーションを作成しながら、Webpackerの導入や非同期通信、Vue.jsの基礎などを学びます。 Vue.jsでアプリケーションを開発することが初めてでも、短時間でアプリケーション開発を体験できるように設計しています。

1-1

新規Railsプロジェクトの作成

この回からは、RailsでWebアプリケーションを作成していきます（Rails6の環境がある前提で解説します）。

今回のゴール

今回の目標は「ローカルサーバーを立ち上げて、Railsのデフォルトページを表示する」ことです。

ゴールまでの流れ

ゴールまでの手順は次のとおりです。

ローカルにインストールされたRailsのバージョンを確認する
新規Railsアプリケーションを作成する
作成したディレクトリに移動する
データベースを作成する
ローカルサーバーを起動する
Railsのデフォルトページを表示する

それでは、実際にWebアプリケーションの作成を行いましょう。

1. ローカルにインストールされたRailsのバージョンを確認する

新規Railsアプリケーションを作成する前に、ローカルにインストールされたRailsのバージョンを確認します。

ターミナル上で、次のコマンドを入力してください。


Copied!
gem search ^rails$ -l

コマンドを実行すると、次のような結果が表示されます。

console
     
Copied!
gem search ^rails$ -l

*** LOCAL GEMS ***

rails (6.0.3.2, 6.0.3)

「Rails6.0.3.2」と「Rails6.0.3」がインストールされていることがわかります。

これらのバージョンのいずれかを使って、Railsアプリケーションを作成します。

※ Rails6のバージョンがインストールされていない場合は、「0-3 Ruby on Rails の環境構築(macOS)」のパートでインストールしてください。

2. 新規Railsアプリケーションを作成する

RailsでWebアプリケーションを新規作成します。

Webアプリケーションの新規作成では、rails newコマンドを入力します。

rails newコマンドでは命令文の最後に作成するアプリケーション名を指定します。


Copied!
rails new 作成するアプリケーション名

今回はRails6.0.3.2を使って「memo-app」という名前のアプリケーションを作成します。

次のコマンドを入力します。


Copied!
rails _6.0.3.2_ new memo-app --database=postgresql

命令文のrailsとnewの間にRailsのバージョンを入力すると、Railsのバージョンを指定できます（ここではローカルにある6.0.3.2を指定）。

また--database= で利用するデータベースを指定できます（ここではpostgresqlを指定）。

rails newコマンドで「memo-app」というディレクトリ（フォルダ）が作成されました。

3. 作成したディレクトリに移動する

cdコマンドを使って、新たに作成した「memo-app」ディレクトリに移動します。

ちなみに「cd」は、change directory（ディレクトリを移動する）の略です。

ディレクトリ移動を行う命令文は、次の表現になります。


Copied!
cd 移動したいディレクトリ名

今回は「memo-app」ディレクトリに移動するため、次のコマンドを入力します。


Copied!
cd memo-app

コマンドを実行すると、「memo-app」ディレクトリに移動します。

4. データベースを作成する

「memo-app」ディレクトリ内にローカルサーバーを立ち上げるために、データベースを作成します。

データベースを作成するには、次のコマンドを入力します。


Copied!
rails db:create

コマンドを実行すると、次の実行結果が表示されます。

console
   
Copied!
rails db:create
Created database 'memo_app_development'
Created database 'memo_app_test'

rails db:create コマンドを実行すると、config/database.ymlファイルを元にデータベースを作成します。

config/database.ymlファイルには、データベースに関する設定が記述されているファイルです。実際にファイルの中身を見てみましょう。

config/database.yml

yml
123456789101112131415161718192021222324252627
                           
Copied!
# 中略
# 
# gem 'pg'
#
default: &default
  adapter: postgresql
  encoding: unicode
  # For details on connection pooling, see Rails configuration guide
  # https://guides.rubyonrails.org/configuring.html#database-pooling
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>

development:
  <<: *default
  database: memo_app_development

  # The specified database role being used to connect to postgres.
  
  # 中略

# Do not set this db to the same as development or production.
test:
  <<: *default
  database: memo_app_test

# As with config/credentials.yml, you never want to store sensitive information,
#
# 中略

以下のコードを見てください。

yml
123456789
         
Copied!
development:
  <<: *default
  database: memo_app_development

  # 中略

test:
  <<: *default
  database: memo_app_test

development は開発用という意味で、testはテスト用という意味になります。

database はデータベース名を指定しています。今回でいうと開発用はmemo_app_development、テスト用はmemo_app_testという名前でデータベースを作成しています。

5. ローカルサーバーを起動する

ローカルサーバーを立ち上げるには、次のコマンドを入力します。


Copied!
rails server

コマンドを実行するとサーバーが起動します（rails sと省略することも可能）。

うまくサーバーが起動すると、ターミナルで次のように表示されます。

console
           
Copied!
rails server
=> Booting Puma
=> Rails 6.0.3.2 application starting in development 
=> Run `rails server --help` for more startup options
Puma starting in single mode...
* Version 4.3.5 (ruby 2.7.1-p83), codename: Mysterious Traveller
* Min threads: 5, max threads: 5
* Environment: development
* Listening on tcp://127.0.0.1:3000
* Listening on tcp://[::1]:3000
Use Ctrl-C to stop

6. Railsのデフォルトページを表示する

ローカルサーバーを起動したら、ブラウザで「http://localhost:3000/ 」にアクセスします。

次の画像のようにRailsのデフォルトページが表示されていれば、うまく動作しています。

以上で今回のパートは終了です。

お疲れさまでした。

間違いや改善の指摘

質問ポリシー①

教材の内容に関する質問を投稿しましょう