Ruby on Rails チュートリアルをHello Worldまでノンストップで！

#はじめに
[Ruby on Rails チュートリアル 第6版](https://railstutorial.jp/chapters/beginning?version=6.0)を１から初めてのアプリケーション作成までなぞっていく体験記事を書きました。
自分が進めていて説明が分かりづらかった部分やエラーが発生した部分を抜粋して画像付きでまとめたものになります。完全初心者向けにしたつもりですので、チュートリアルを見ながら行う際にエラーなどで悩む時間を省略できるかと思います。

#環境構築
###AWS Cloud9で作業環境を構築
Create environmentする部分までは画像付きで解説されているため問題なく進められると思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/702028/a7ba828a-3516-c5f5-d74b-49c3cdb4761a.png)
インデント設定を変更する際の設定変更は画面左上の雲マークをクリックすると出てくるメニューの一番上の<font color="red">**Preference**</font>から行うことができます。


###Railsのインストール
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/702028/a45b55d3-feaa-518f-baef-558dec3c8002.png)
ここから先のコマンドは上の画像の赤で囲まれた部分に記述していきます。

```
$ echo "gem: --no-document" >> ~/.gemrc
```
上記のコマンドをそのままコピペして不要なドキュメントをインストールしないようにする設定を行います。

```
$ gem install rails -v 6.0.3
```
上記のコマンドでRailsのインストールを行います。インストールが正常に行われていれば数十行のログが出力されます。
一応インストールしたRailsのバージョンが正しいか確認するために、

```
$ rails -v
```
を実行してRails 6.0.3と表示されればインストール完了です。

###Yarnプログラムのインストール
下記のコマンドでJavaソフトウェアの依存関係を管理するYarnプログラムをインストールする。(クラウドIDE環境の場合、つまり今回)

```
$ source <(curl -sL https://cdn.learnenough.com/yarn_install)
```

※エラーが発生した場合は、

```
$ yarn install --check-files
```
を実行した後に再度Yarnプログラムのインストールを行う。

環境構築は以上になります。

#Hello Worldアプリケーション
###hello_appファイル、ディレクトリの作成
Ruby on Railsで最初に作成するアプリケーションはコンピュータプログラムの伝統「Hello World」です。
まずはAWS Cloud9のターミナルの作業場所が、下の画像の赤く囲んだ部分のように~/environmentとなっていることを確認します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/702028/a3007ca1-a7f6-30c6-efd6-be0dd39b66df.png)

作業場所がenvironmentになっていることが確認出来たら、

```
$ rails _6.0.3_ new hello_app
```
を実行します。すると大量のファイルとディレクトリが作成されるので完了するまで待機します。

###Gemfileの編集
hello_appのアプリケーションの作成が完了したら、次はBundlerを実行してアプリケーションに必要なgemをインストールします。今回はデフォルトのgemを変更するためはじめにGemfileの編集を行います。
画像のようにhello_app > Gemfileと選択してGemfileを開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/702028/95443817-f015-4890-3e6c-f833b9cc977e.png)

Gemfileを以下の内容に書き換えます。ここで行っているのはGemfileの内容を一新させることと、Rubyのバージョン番号を削除することです。

```rb:Gemfile

source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

gem 'rails',      '6.0.3'
gem 'puma',       '4.3.6'
gem 'sass-rails', '5.1.0'
gem 'webpacker',  '4.0.7'
gem 'turbolinks', '5.2.0'
gem 'jbuilder',   '2.9.1'
gem 'bootsnap',   '1.4.5', require: false

group :development, :test do
  gem 'sqlite3', '1.4.1'
  gem 'byebug',  '11.0.1', platforms: [:mri, :mingw, :x64_mingw]
end

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

group :test do
  gem 'capybara',           '3.28.0'
  gem 'selenium-webdriver', '3.142.4'
  gem 'webdrivers',         '4.1.2'
end

# Windows ではタイムゾーン情報用の tzinfo-data gem を含める必要があります
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
```

###gemのインストール
Gemfileの書き換えが完了したら次は下記のコマンドを実行してgemのインストールを行います。
実行前にディレクトリがhello_appになっていることを確認してください。

```
$ bundle install
```

※実行するとおそらくbundle updateを実行してくださいと言われます。その時は、

```
$ bundle update
```
を実行してから再度bundle installを実行してください。

これで実際に動かすことができるアプリケーションが作成されました。

#アプリケーションを実行する
###ローカルWebサーバーへの接続許可を付与する
アプリケーションを実行する前にローカルWebサーバーへの接続を許可する必要が生じることがあります。
そのため、以下の2行を下図に示す部分に挿入してください。

```Ruby
 # Cloud9 への接続を許可する
  config.hosts.clear
```
ファイルの階層は以下のようになっています。development.rbが編集対象のファイルです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/702028/740d42a3-ab6b-ee28-687e-d25247f198bd.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/702028/ff0fef36-21e8-9af0-9a69-5111a51cd1a6.png)
末尾のendの前の行に挿入してください。

これで実行する準備が完了しました。

###アプリケーションの実行
ディレクトリがhello_appであることを確認して、

```
$ rails server
```
コマンドを実行してください。rails sというコマンドでも同じことができます。
サーバーが起動状態になるので、その状態で下の画像の赤丸に囲まれた部分をクリックすると新しいタブが開いてさらに下の画像のページが開けば成功です。
サーバーを終了する場合には「Ctrl + C」を押してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/702028/b17cfaa0-08e7-7f52-807a-d64ee5c08712.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/702028/114b2f32-bda6-9a54-0b29-1aa7c6d9b267.png)


※私の場合ですが、rails serverコマンドを実行した際、yarnプログラムをインストールしてくださいという旨のメッセージとともにサーバーが勝手に終了しました。
その場合はエラーメッセージで出てくるダブルクォーテーション囲み("○○○○○○○○")のコマンドを実行することで解決したので試してみてください。

##参考にしたサイト##
[Ruby on Rails チュートリアル 第6版](https://railstutorial.jp/chapters/beginning?version=6.0)