初心者の気持ちがわかる!!　Railsチュートリアル第1章(1.3)

#初心者の気持ちがわかる！！Railsチュートリアル 1.3
##Railsチュートリアル (1.3)
###1.3 最初のアプリケーション
さっそくWebページに「hello,world!」を表示してみましょう。

と、その前に今回のRailsプロジェクトで使うためのenvironmentディレクトリを作成しましょう。(Cloud9 IDEを使用している人は元からあるので不要)


```リスト1.2
$ cd                  # ホームディレクトリに移動する
$ mkdir environment     # 'environment' ディレクトリを作成する
$ cd environment/       # 'environment' ディレクトリに移動する
```

実際に使いながら学びたい人は

[ドットインストールのUNIXコマンド入門 一般ユーザー編 (全24回)](https://dotinstall.com/lessons/basic_unix_v2)
をやってみよう。

cdやmkdirなどのunixコマンドは以下で確認。
![スクリーンショット 2020-04-04 16.54.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/590181/b3f410f7-6b9f-7508-cb62-183fbf173168.png)

**Q.UNIXコマンドとは？**
**A.**
簡単に言うと、マウスで視覚的にフォルダを開いたり削除したりしているものをターミナルにコマンドを入力することで実行することが出来るもの。



次にリスト1.1でインストールしたRailsを使って最初のアプリケーションを作成します。

``` リスト1.3
$ cd ~/environment (cdのディレクトリに移動）
$ rails _5.1.6_ new hello_app　（hello_appディレクトリを作成）
```

environmentディレクトリの中にhello_appというディレクトリが作成され、hello_appの中に大量のディレクトリができている。これはrails5.1.6を使うことで一気に生成されている。（時短、効率化に繋がっているということ？）
本来Webアプリケーションのディレクトリをどう構成するかは自由であるが、このように標準化されていることで、他の開発者が見ても、コードが読みやすくなっている。
###1.3.1 Bundler
アプリケーションに必要なgem（アプリ作成に必要な便利グッツ？）をインストールします。
その際、リスト1.3で生成されたhello_appの中にあるgemfileを変更しインストールしていきます。それをbundlerを実行するといいます。（terminalにはbundle installと記載し実行する。）

実は既にrailsアプリケーションを新規作成すると自動でbundlerを実行し、既存のgemfile（リスト1.4)をインストールしている。

それをリスト1.５のように書き換え、bundlerを実行し、インストールする。

gemfileの場所
![スクリーンショット 2020-04-04 17.50.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/590181/00aa0d5b-527e-2dd9-a21f-db70844506e9.png)

```リスト1.5以下のように書き換える
source 'https://rubygems.org'

gem 'rails',        '5.1.6'
gem 'puma',         '3.9.1'
gem 'sass-rails',   '5.0.6'
gem 'uglifier',     '3.2.0'
gem 'coffee-rails', '4.2.2'
gem 'jquery-rails', '4.3.1'
gem 'turbolinks',   '5.0.1'
gem 'jbuilder',     '2.6.4'

group :development, :test do
  gem 'sqlite3',      '1.3.13'
  gem 'byebug', '9.0.6', platform: :mri
end

group :development do
  gem 'web-console',           '3.5.1'
  gem 'listen',                '3.1.5'
  gem 'spring',                '2.0.2'
  gem 'spring-watcher-listen', '2.0.1'
end

# Windows環境ではtzinfo-dataというgemを含める必要があります
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
```
ターミナルで以下をbundlerを実行

```
$ cd hello_app/ 　（hello_appディレクトリへ移動）
$ bundle install　
```
ここで以下のようなエラーが出た場合
![スクリーンショット 2020-04-04 18.07.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/590181/59d5f25c-bc10-8d7b-9fcf-8575c489b378.png)

```
$ bundle update
```
を実行する。

###1.3.2 rails server
本文の写真を見ながら、新しいターミナルを開き、サーバーを起動します。
（hello_appディレクトリに移動するのを忘れないように！）

```リスト1.6
$ cd ~/environment/hello_app/
$ rails server
```
ここで私はpreviewボタンがないじゃないか〜！！と思いました。
![スクリーンショット 2020-04-04 18.13.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/590181/9ec5e796-eea9-08e2-d57a-317537dc4fb1.png)
画面幅を広げると出てきますよ　笑
![スクリーンショット 2020-04-04 18.16.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/590181/2b8a323a-cc21-1e24-0b7b-1bc44b5f0560.png)

###演習
```1.
$ ruby -v
ruby 2.6.3p62 (2019-04-16 revision 67580) [x86_64-linux]
```
ruby 2.6.3である。

```2.
$ rails -v
Rails 5.1.6
```
rails 5.1.6である。
どちらも一致している。
![スクリーンショット 2020-04-04 18.21.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/590181/8c6d089b-230e-8d7a-9334-25514c1c7424.png)

###1.3.3 Model-View-Controller (MVC)
Railsアプリケーションの全体的な仕組みについてざっくり見ておきます。
後で、しっかり理解しまーす。

###1.3.4 Hello,world!
hello,world!を表示させよう！
コントローラーアクションを追加することで表示させてみます。

まずコントローラーの確認

```
$ ls app/controllers/*_controller.rb
app/controllers/application_controller.rb（結果一つしかない）
```

app/controllers/の中にある~~controller.rbというファイルを表示して〜、とお願いしている。
今は一つしかありません。

それではapp/controllers/application_controller.rbを開いて記入してみる。
ファイルは以下の場所にあります。
![スクリーンショット 2020-04-04 18.41.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/590181/e1077057-5405-87e5-f9c0-a36453e0cceb.png)

以下のように記載する。

```リスト1.7(app/controllers/application_controller.rb)
class ApplicationController < ActionController::Base
  protect_from_forgery with: :exception

  def hello
    render html: "hello, world!"
  end
end
```
簡単に説明すると、defの右にある”hello"が呼び出されると、renderメソッドにより「hello,world!」をテキストとして表示してください。って感じです。
現状は書き方など深く理解しなくてもいいですよ〜
（defで定義した"hello"はなんでもいい"world"でもなんでもいい。定義したものを呼び出す時のために名前をつけている。）

それでは先ほどサーバーで呼び出したデフォルトページを表示するのではなく、定義したものを呼び出して「hello,world!」を表示してみます。

そのために、Railsのルーター (router) を編集します。


```リスト1.9（config/routes.rb）
Rails.application.routes.draw do
  root 'application#hello'
end
```

上記の内容はrootURLにアクセスした場合、applicationコントローラーのhelloというアクションを呼び出し表示する。

以上で先ほどのdefaltページでリロードボタンを押すか[command+r]を押すとページが更新され、「hello,world!」が表示される。

###演習

１.解答

```1.(app/controllers/application_controller.rb)
class ApplicationController < ActionController::Base
  protect_from_forgery with: :exception
  
  def hello
    render html: "hola, mundo!"
  end
end
```
上記のようにアクション内容を書き換える

２.解答

```2.(app/controllers/application_controller.rb)
class ApplicationController < ActionController::Base
  protect_from_forgery with: :exception
  
  def hello
    render html: "¡Hola, mundo!"
  end
end
```

3.解答

```3.(app/controllers/application_controller.rb)
class ApplicationController < ActionController::Base
  protect_from_forgery with: :exception
  
  def hello
    render html: "goodbye, world!"
  end
end
```

```3.（config/routes.rb）
Rails.application.routes.draw do
  root 'application#goodbye'
end
```
上記のように書き換える。

##筆者コメント
普段文章を書かないせいか、理解不足のせいかなかなか時間がかかります。どこまで理解して、どこまで書こうか、線引きが曖昧なのが問題？？
しかし、まとめるには今まで以上の理解が必要で、なんとなくわかった気になって進んでしまうのが防げるのでいいかなと思っています。
とりあえず出来るところまでやってみよう！！