Windows10 + heroku + github + Ruby on Rails 事始め②（2020/02版）

# 概要
 
 - IDEとして VSCode の準備を行う
 - sqlite3 のインストールを行う
 - github のリポジトリからbranchを切る
 - branchに対してソースコードの修正を行う
 - ローカルで確認する
 - github にあげる
 - heroku で確認する

# VSCode の設定

VSCode を以下URLからインストールします。

RoRを快適に作業するための拡張機能をインストールします。

 - Ruby
 - endwise
 - Rails

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254327/bbb161e9-2af6-0024-6aca-d9e3ed3cdfac.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254327/661a870d-89e1-47c0-123e-1dc70b0bb1de.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254327/7c4d7cdb-cb40-954f-69fe-92ce30663988.png)

# sqlite3のインストール

`sqlite3.exe` と `sqlite3.dll` を、<ワークディレクトリ>に配置します。

https://www.sqlite.org/index.html

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254327/633d23e6-f871-5805-b625-13ad947f09dd.png)

dllとtoolのzipをダウンロードします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254327/8a3c5adc-1ea2-c8fb-5d5c-9aea5353e60a.png)

解凍したファイルを、Rubyのインストールディレクトリ ＞ bin ディレクトリ 配下に配置します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254327/115c2789-3b27-9dff-5425-bfca84fc1cc5.png)

git bash を再起動して、sqlite3 が動くことを確認します。

```bash
<ワークディレクトリ>/ror-sample (work-create-page)
$ sqlite3 -version
3.31.1 2020-01-27 19:55:54 
```

# github から branch を切る

①で作成したワークディレクトリ上で、branch を切ります。

```bash
<ワークディレクトリ>/ror-sample (master)
$ git checkout -b work-create-page
Switched to a new branch 'work-create-page'

<ワークディレクトリ>/ror-sample (work-create-page)
$ git branch
  master
* work-create-page

<ワークディレクトリ>/ror-sample (work-create-page)
```

一旦 branchをあげてしまいます。

```bash
<ワークディレクトリ>/ror-sample (work-create-page)
$ git push origin work-create-page
Enter passphrase for key '<ワークディレクトリ>/.ssh/id_rsa':
Total 0 (delta 0), reused 0 (delta 0)
remote:
remote: Create a pull request for 'work-create-page' on GitHub by visiting:
remote:      https://github.com/miu200521358/ror-sample/pull/new/work-create-page
remote:
To github:miu200521358/ror-sample.git
 * [new branch]      work-create-page -> work-create-page
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254327/9c0338b8-110f-6b07-242e-463df60f004f.png)

push すると、branch が github 上に登録されます。

# branch 上で作業をする

## 画面を追加する

RoR で画面を表示させるには、以下のセットが必要になります。

 - routing　…　指定されたURLに対応する `Controller` を引き当てる
 - Controller　…　どの `View` をどのように表示するか（Action）を決めて引き当てる（
 - View　…　指定されたデータを受け取り、表示する。

上記のセットを、コマンドで作成します。

```bash
rails generate controller <コントローラー名> <アクション名>
```

```bash

<ワークディレクトリ>/ror-sample (work-create-page)
$ rails generate controller home top
      create  app/controllers/home_controller.rb
       route  get 'home/top'
      invoke  erb
      create    app/views/home
      create    app/views/home/top.html.erb
      invoke  test_unit
      create    test/controllers/home_controller_test.rb
      invoke  helper
      create    app/helpers/home_helper.rb
      invoke    test_unit
      invoke  assets
      invoke    coffee
      create      app/assets/javascripts/home.coffee
      invoke    scss
      create      app/assets/stylesheets/home.scss
```

何やら色々ファイルが出来ました。
それだけでなく、`config/routes.rb` にも先ほど指定したコントローラー名とアクション名のルーティングが追加されています。

```bash
<ワークディレクトリ>/ror-sample (work-create-page)
$ git diff
warning: LF will be replaced by CRLF in config/routes.rb.
The file will have its original line endings in your working directory.
diff --git a/config/routes.rb b/config/routes.rb
index 787824f..d3f7ad6 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -1,3 +1,4 @@
 Rails.application.routes.draw do
+  get 'home/top'
   # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
 end
```

では、RoRサーバーの実行…の前に、データベースを作成します。
（一度そのまま起動したのですが、エラーとなったため、手戻りです。）

```bash
<ワークディレクトリ>/ror-sample (work-create-page)
$ bundle exec rake db:migrate
== 20200201042410 CreateBlogs: migrating ======================================
-- create_table(:blogs)
   -> 0.0028s
== 20200201042410 CreateBlogs: migrated (0.0028s) =============================
```

では、RoRサーバーを起動します。

```bash
<ワークディレクトリ>\ror-sample>rails server
=> Booting Puma
=> Rails 5.2.4.1 application starting in development
=> Run `rails server -h` for more startup options
*** SIGUSR2 not implemented, signal based restart unavailable!
*** SIGUSR1 not implemented, signal based restart unavailable!
*** SIGHUP not implemented, signal based logs reopening unavailable!
Puma starting in single mode...
* Version 3.12.2 (ruby 2.6.5-p114), codename: Llamas in Pajamas
* Min threads: 5, max threads: 5
* Environment: development
* Listening on tcp://localhost:3000
Use Ctrl-C to stop
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254327/08e006d8-e5b5-fda2-5df6-671c6f217037.png)

ログも出力されています。

```bash
Started GET "/" for ::1 at 2020-02-03 14:16:03 +0900
   (0.3ms)  SELECT "schema_migrations"."version" FROM "schema_migrations" ORDER BY "schema_migrations"."version" ASC
  ? C:/Development/Ruby26-x64/lib/ruby/gems/2.6.0/gems/activerecord-5.2.4.1/lib/active_record/log_subscriber.rb:98
Processing by Rails::WelcomeController#index as HTML
  Rendering C:/Development/Ruby26-x64/lib/ruby/gems/2.6.0/gems/railties-5.2.4.1/lib/rails/templates/rails/welcome/index.html.erb
  Rendered C:/Development/Ruby26-x64/lib/ruby/gems/2.6.0/gems/railties-5.2.4.1/lib/rails/templates/rails/welcome/index.html.erb (11.1ms)
Completed 200 OK in 65ms (Views: 43.4ms | ActiveRecord: 0.0ms)


Started GET "/home/top" for ::1 at 2020-02-03 14:16:17 +0900
Processing by HomeController#top as HTML
  Rendering home/top.html.erb within layouts/application
  Rendered home/top.html.erb within layouts/application (2.1ms)
Completed 200 OK in 1595ms (Views: 1589.3ms | ActiveRecord: 0.0ms)
```

# github にあげる

修正したソースをgithubにあげます。

```bash
$ git add -A
$ git commit -m "home>topページ追加"
$ git push origin work-create-page
```

github に追加されました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254327/28cbe9da-e1ad-7a2c-03e2-f94cc95c62bf.png)

# heroku で確認する

branch名をherokuにpushして、コードをあげます。
①で作成したリポジトリと紐付いているため、`miu200521358-ror-sample` にリリースされます。

```bash
$ git push heroku work-create-page:master
Total 0 (delta 0), reused 0 (delta 0)
remote: Compressing source files... done.
remote: Building source:
remote:
remote: -----> Ruby app detected
remote: -----> Compiling Ruby/Rails
remote: -----> Using Ruby version: ruby-2.6.5
remote: -----> Vendoring libpq 5.12.1
remote: -----> Removing BUNDLED WITH version in the Gemfile.lock
(略）
```

`/home/top` パスをURLに追加すると、先ほど登録した画面が表示されました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254327/3e742145-008c-a6d2-ff97-c048381841f7.png)

コードの修正と、そのデプロイまで出来るようになりました。
次回はDBを作成してみます。

[Windows10 + heroku + github + Ruby on Rails 事始め③ DB編（2020/02版）](https://qiita.com/miu200521358/items/3faf4d5d04e19d858b06)