9/18　今日の学習内容〜これまでのRailsの学習を振り返る（RubyOnRailsの基本のキホン）〜

###今日の学習内容
***
今日はこれまでやってきた学習内容を振り返りました(・ω・)ノ

こうして見てみると、時間をかけた割に全然進んでいないのがとても残念ですが...

**少し長いので、気になるところ以外は読み飛ばしていってください**
（すべて順々に読んでもらえればこれまでの私の学習内容がおさらいできるので、初学者の方やRailsを始めてみたい方はすべて読んでもらえると嬉しいです(*^^*)一緒に楽しく覚えていきましょう！！）

　
これまでは学習を進めていく上で混乱しないように、[改定基礎3版RubyOnRails](https://www.amazon.co.jp/dp/4844338153)の通りに書いて進めてきましたが、自分なりにもう一度作り直してみたいと思い立ったわけです(￣▽￣)

なので、今一度cloud9でRailsを使い始めるところから復習していきます。

これまでの学習内容から引用しているとこともあります。ご了承くださいm(__)m

　

####cloud9でBlank（テンプレートなし）を選択し、Railsを使えるようにする
***
私の場合はcloud9で学習を始めることにしたので、cloud9の登録から始めました。
登録が完了されましたら、ワークスペースの作成を行ってください。↓

![スクリーンショット 2016-09-18 20.56.44.png](https://qiita-image-store.s3.amazonaws.com/0/137880/33581a08-65aa-f258-5d01-d8ad644f9876.png)

今回は``happy_hacking_days``という名前にしましたが、ここは皆様のお好きな名前に変えてください( ´ ▽ ` )ﾉ

テンプレートなし（Blank）で始めたので、まず、ターミナルに``gem install rails``と打ち込み、Railsをインストールしましたね(￣▽￣)

![スクリーンショット 2016-09-18 21.45.41.png](https://qiita-image-store.s3.amazonaws.com/0/137880/91463173-d100-3779-8953-811062ff277e.png)

　
　
####cloud9のワークスペースにアプリケーションフォルダを作る
***
次にアプリケーションフォルダを作っていきます。
アプリケーションフォルダを作るには、``rails new``コマンドを使います。

今回は、``happy_hacking_days``の頭文字をとって``rails new hhd``とターミナルに打ち込み、実行しました。

![スクリーンショット 2016-09-18 23.06.03.png](https://qiita-image-store.s3.amazonaws.com/0/137880/5c78973e-1b06-700b-43f3-e550224f0926.png)

上記のようなフォルダが作成されたと思います(￣▽￣)

動作確認をしておきましょう！
ターミナルに``cd アプリケーション名``を打ち込んで、アプリケーションのフォルダに移動してください。

移動ができたら、Railsサーバを起動します。
cloud9では``rails s -b $IP -p $PORT``と打ち込むことで起動できます( ´ ▽ ` )ﾉ

打ち込んだ後にずらずらと文字列が流れてくるので、``Rails 5.0.0.1 application starting in development on http://0.0.0.0:8080``という文章の最後にあるリンクをクリックして開いてください。
下の画像のページに移動したら成功です！↓

![スクリーンショット 2016-09-18 23.10.32.png](https://qiita-image-store.s3.amazonaws.com/0/137880/4c4c88fc-4fcd-be86-3b91-74d152bfa5de.png)

　
　
####コントローラの作成
***
コントローラを作成するには``rails g``コマンドを使います。
``root``コントローラを作成したい場合、``rails g controller root``とターミナルに打ち込み実行します。(￣▽￣)

↓``happy_hacking_days/app/controller``に``root_controller.rb``が生成されましたね。
![スクリーンショット 2016-09-18 23.37.18.png](https://qiita-image-store.s3.amazonaws.com/0/137880/f9173c50-f93c-3262-3350-2dbc7546d90c.png)

　　
　
####アクションの作成
***
アクションはコントローラのファイルの中に記述することで作成できます。
![スクリーンショット 2016-09-18 23.43.17.png](https://qiita-image-store.s3.amazonaws.com/0/137880/c690927e-c230-4374-10f3-7975068209ab.png)

今回は、中身のない空のアクション``top_page``を作成しました。↑
このアクションは、次に復讐するルーティングの仕方でトップページに設定します( ^ω^ )


　
####トップページのルーティング
***
Railsアプリケーションのページは、コントローラとアクションを作っただけでは出来ません(ｰ ｰ;)
ルーティングというURLのパスとコントローラを結びつける指示書のようなものが必要となってきます。

ルーティングは``app/config``の中にある``routes.rb``にコードを書くことで行うことができます。

![スクリーンショット 2016-09-19 0.00.34.png](https://qiita-image-store.s3.amazonaws.com/0/137880/4d119bc8-084f-bfb5-ef14-e76bf1f0838d.png)

↑上の画像のように書くことで、トップページ（ルートディレクトリ？）を設定することができます( ´ ▽ ` )ﾉ
``root#top_page``の``root``はコントローラ名、``top_page``はアクション名ですね。

　
　
####ビューの作成
***
ビュー（テンプレート）は``app/views/コントローラ名``フォルダの中に、``erb``で終わるファイルを作ることで作成できます。
例えば、``top_page``アクションのビューを作りたい場合は``root``フォルダの中に``top_page.html.erb``というファイルを作成するわけです(￣▽￣)↓
とりあえず、中身は適当です（笑）

![スクリーンショット 2016-09-19 0.09.22.png](https://qiita-image-store.s3.amazonaws.com/0/137880/be454a98-36c8-8c23-a087-9f0a880a36d2.png)

####ルーティング
***
先ほどトップページのルーティングを行いましたが、次はトップページ以外でURLのパスとコントローラ（アクション）を結びつけていきたいと思います。

下準備として、``introduction``アクションを``root_controller.rb``の中に作成します。↓

![スクリーンショット 2016-09-19 0.29.46.png](https://qiita-image-store.s3.amazonaws.com/0/137880/e5ce1f1b-1290-db8e-86f5-d25830cd1ae0.png)

同じ名前のテンプレートも用意しておきましょう。↓
文面はお好きなように変更してくださいm(__)m

![スクリーンショット 2016-09-19 0.53.16.png](https://qiita-image-store.s3.amazonaws.com/0/137880/5783cdec-a1ab-134e-f754-bc7ab0112055.png)

では、ルーティングをしていきますね。
先ほどと同じように``routes.rb``を変更していきます。

![スクリーンショット 2016-09-19 0.55.17.png](https://qiita-image-store.s3.amazonaws.com/0/137880/1f17b8a7-7825-216d-21df-48ab9de5daf8.png)

上の画像のように、``get "URLのパス" => "コントローラ名#アクション名"とすることで、URL欄に``/コントローラ名/アクション名``と打ち込まれた時にアクションを呼び出せます。

``as:``オプションでルーティングに名前をつけ、コントローラやビューで``つけた名前_path``メソッドを使うことで文字列``/つけた名前``を返すようにすることができるのです(￣▽￣)

####リダイレクション
***
リダイレクションとは、リクエストされたURLとは別のURLのページに移動させることですね。
こちらをRailsで行うには、``redirect_to``メソッドを使うことで行うことができます( ´ ▽ ` )ﾉ

例えば、``redirect_to :action "top_page"``を``introduction``アクションの中に記述したとします。
そうすると、``introduction``アクションが呼び出された時に``top_page``アクションのページに移動するわけです(￣▽￣)

詳しくは[こちら](http://qiita.com/shouxuohs/items/f3e7fd1ce7e32fa82ca6)をご覧くださいm(__)m

####リンクの作成
***
リンクは``link_to``メソッドを使うことで作成できます。
とても簡単ですね(*^^*)

試しに``introduction.html.erb``の中身を書き足してトップページへのリンクを作ってみます。
↓
![スクリーンショット 2016-09-19 1.38.30.png](https://qiita-image-store.s3.amazonaws.com/0/137880/10595646-4f0b-edc3-6444-a71e63fb5b4a.png)

``root_path``は``/``を返すメソッドなので、トップページに設定した``top_page``アクションが呼び出されます( ´ ▽ ` )ﾉ

↓リンクが作られたページ
![スクリーンショット 2016-09-19 1.41.48.png](https://qiita-image-store.s3.amazonaws.com/0/137880/c8296341-9ac4-23f1-8948-b99701df536a.png)

↓``トップページ``を押した後のページ
![スクリーンショット 2016-09-19 1.43.00.png](https://qiita-image-store.s3.amazonaws.com/0/137880/afdbff92-7551-427f-eb2c-60f5c03857fd.png)


　画像をクリックしてリンク先に移動した経験はありませんか？
そのようなことも``link_to``メソッドで行うことができます( ´ ▽ ` )ﾉ

方法はとても簡単で、``link_to``メソッドの引数に``image_tag``メソッドを使うのです。
![スクリーンショット 2016-09-19 2.09.55.png](https://qiita-image-store.s3.amazonaws.com/0/137880/7347aaf8-ee7e-ca4c-de68-b5741cd9b3d3.png)

すると、↓
![スクリーンショット 2016-09-19 2.12.11.png](https://qiita-image-store.s3.amazonaws.com/0/137880/bb9e9827-5b04-2f96-ca27-0a12044f32f9.png)
画像が表示されましたね。

この画像をクリックしても、トップページに移動するようになっています(￣▽￣)

####レイアウトテンプレートの指定方法
***
レイアウトテンプレートを指定する方法は3つあります。

　
　
#####その1、ファイル名が``コントローラー名.html.erb``のファイルを置く
***
ファイル名が``コントローラー名.html.erb``のファイルを``app/views/layouts``フォルダに置くという方法が一つ目ですね(￣▽￣)

そのテンプレートが、コントローラ名の場所に入れたコントローラのテンプレートになります。

``app/views/layouts``フォルダの場所については下の画像を参考にしてください。

![スクリーンショット 2016-09-16 22.53.36.png](https://qiita-image-store.s3.amazonaws.com/0/137880/ebabdbd9-ed22-3a80-e38a-e112872fe1a9.png)

　

#####その二、コントローラで``layout``メソッドを利用する
***
コントローラで``layout``メソッドを利用することが、二つ目の方法です。

例えとして、``TopController``のレイアウトテンプレート`に``sample.html.erb``を使いたいときの場合を説明したいと思います(・ω・)ノ

まず、``sample.html.erb``を``app/views/layouts``フォルダに作成しておきます。

次に、``top_controller``に

```ruby:top_controller.rb
layout "sample"
```
を書き足します。

引数に入るのは、上の画像のように拡張子を除いた名前になります(・ω・)ノ
ちなみに、シンボルではなく、文字列にする必要があるようです。

　
　
#####その三、アクション内で``render``メソッドにオプションをつける
***
アクション内で``render``メソッドに``layout``オプションをつけることで指定することができます。

例として、``sample``アクションを作って指定してみたいと思います。↓

```ruby:sampleアクション
def sample
   if "何らかのエラーが発生"
      render layout: "Error!"
   end
end
```

このように、ある条件の時にだけレイアウトを切り替えられます( ´ ▽ ` )ﾉ

　
　
###あとがき
***
今日は新しく``happy_hacking_days``ワークスペースを作成して復習していきましたが、[改定基礎3版RubyOnRails](https://www.amazon.co.jp/dp/4844338153)では最終的にログイン機能や簡単なブログ機能のついた草野球チームのサイトが作れるということです。
なので、今日作ったワークスペースを利用して、簡単なプログラミング学習日誌をつけるようなサイトを作っていきたいと思っています。(￣▽￣)

皆様も、自分の作ってみたいものを想像してみることで学習意欲が高まると思いますので、ぜひ作りたいものを想像してみてください( ´ ▽ ` )ﾉ

長文でしたが、ここまで読んでくださりありがとうございましたm(__)m
誤字・脱字が多かったかもしれないですね(^◇^;)
　
　

これまでの学習内容はこちらから御覧ください↓
今日書いたより詳しく書いてるはずなので、初学者の方でも大丈夫だと思います( ´ ▽ ` )ﾉ
私が初学者ですし（笑）

9/20日　追記
今月中に、HTMLハイブリットアプリの開発に本腰を入れて学習することになったので、9月いっぱいは更新できなくなると思います。
すみませんm(__)m

> [やぎさんのitems](http://qiita.com/shouxuohs/items)

###参考にさせていただいたサイト・文献
***
- [改定基礎3版RubyOnRails](https://www.amazon.co.jp/dp/4844338153)
- [cloud9](https://ide.c9.io/)