2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2016-09-18

###今日の学習内容


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

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

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

 
これまでは学習を進めていく上で混乱しないように、改定基礎3版RubyOnRailsの通りに書いて進めてきましたが、自分なりにもう一度作り直してみたいと思い立ったわけです( ̄▽ ̄)

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

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

 

####cloud9でBlank(テンプレートなし)を選択し、Railsを使えるようにする


私の場合はcloud9で学習を始めることにしたので、cloud9の登録から始めました。
登録が完了されましたら、ワークスペースの作成を行ってください。↓

スクリーンショット 2016-09-18 20.56.44.png

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

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

スクリーンショット 2016-09-18 21.45.41.png

 
 
####cloud9のワークスペースにアプリケーションフォルダを作る


次にアプリケーションフォルダを作っていきます。
アプリケーションフォルダを作るには、rails newコマンドを使います。

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

スクリーンショット 2016-09-18 23.06.03.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

 
 
####コントローラの作成


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

happy_hacking_days/app/controllerroot_controller.rbが生成されましたね。
スクリーンショット 2016-09-18 23.37.18.png

  
 
####アクションの作成


アクションはコントローラのファイルの中に記述することで作成できます。
スクリーンショット 2016-09-18 23.43.17.png

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

 
####トップページのルーティング


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

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

スクリーンショット 2016-09-19 0.00.34.png

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

 
 
####ビューの作成


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

スクリーンショット 2016-09-19 0.09.22.png

####ルーティング


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

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

スクリーンショット 2016-09-19 0.29.46.png

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

スクリーンショット 2016-09-19 0.53.16.png

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

スクリーンショット 2016-09-19 0.55.17.png

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

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

####リダイレクション


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

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

詳しくはこちらをご覧くださいm(__)m

####リンクの作成


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

試しにintroduction.html.erbの中身を書き足してトップページへのリンクを作ってみます。

スクリーンショット 2016-09-19 1.38.30.png

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

↓リンクが作られたページ
スクリーンショット 2016-09-19 1.41.48.png

トップページを押した後のページ
スクリーンショット 2016-09-19 1.43.00.png

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

方法はとても簡単で、link_toメソッドの引数にimage_tagメソッドを使うのです。
スクリーンショット 2016-09-19 2.09.55.png

すると、↓
スクリーンショット 2016-09-19 2.12.11.png
画像が表示されましたね。

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

####レイアウトテンプレートの指定方法


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

 
 
#####その1、ファイル名がコントローラー名.html.erbのファイルを置く


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

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

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

スクリーンショット 2016-09-16 22.53.36.png

 

#####その二、コントローラでlayoutメソッドを利用する


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

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

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

次に、top_controller

top_controller.rb
layout "sample"

を書き足します。

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

 
 
#####その三、アクション内でrenderメソッドにオプションをつける


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

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

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

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

 
 
###あとがき


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

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

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

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

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

やぎさんのitems

###参考にさせていただいたサイト・文献


2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?