43日目：Ruby on Rails Ⅰ：「url⇒routes⇒controllers⇒views⇒ブラウザ」の流れを掴もう (views/controllers/routes/ブラウザ/ターミナル/サーバー)
<学習日>
43日目
<学習内容>
① Ruby on Rails Ⅰ(0-100%)：「url⇒routes⇒controllers⇒views⇒ブラウザ」の流れを掴もう (views/controllers/routes/ブラウザ/ターミナル/サーバー)
<参考>
Progateレベル：187
<学習内容詳細>
Rubyの次は何やろうかなと思ったのだけど、ここは素直に「Ruby on Rails」に進むことにしました^^
ただあれですね、ボリュームが鬼のようになっていますね^^;;
心して焦らずに取り組みます！
① Ruby on Rails Ⅰ(0-100%)：「url⇒routes⇒controllers⇒views⇒ブラウザ」の流れを掴もう (views/controllers/routes/ブラウザ/ターミナル/サーバー)
以前「Node.js」で？マークが飛びまくっていた内容を、今回の「Ruby on Rails Ⅰ」でめっちゃくわしく解説してくれていました！
なんとなく気付き始めてきたのですが、各々のコースって「一番左上から順番に全て学習していること」を前提に資料が作成されていて、内容が被る部分に関しては、後半のカリキュラムでははしょりまくっていることが多いです××;;
WEB開発パス(Node.js)を素直に進めている場合、「Node.js」で挫折する可能性が高まるので要注意ですね^^;;
(私は苦労しました。。。)
さて、早速実際のcodeや、学習中のメモを見ながら、振り返っていきます！
・Ruby on RailsはWEBアプリケーション開発の実態を反映した形で、今までのRubyのようなエディタだけで完結させる形では進まないことに注意
WEBアプリケーションは、ターミナル/エディタ/ブラウザ/サーバーがそれぞれの役割をもって動いて、初めて機能として動くという理解(ちょっとまだ理解が不十分なところがあるから、基本情報技術者のテキストで並行して勉強するけれど)。
codeを書くのは基本的にエディタなので、プログラミング言語の基本的な部分はエディタ上で勉強すればよいけれど、実際にWEBアプリを開発するのであれば、テスト等も含めて全体的な構造に慣れておく必要があるのかなという印象。
なお、Railsのcodeをリアルタイムでブラウザに反映するためには、Railsのサーバーが起動している状態である必要があるので、命令を出すターミナルとは別に、Railsのサーバーを起動させておくためだけの命令を出すターミナルを用意しているっぽい。
・Railsでページを作成する方法について：最初の一発
3つのファイルがエディタ上で必要となる。これらのファイルを作成するのが以下のcodeとなる。
<ターミナル>
$ rails generate controller home top
上記で作成される3つのフォルダについて説明して、上記のcodeで何が作成されるのかを列挙する。
<viewsフォルダ>
1つ目がviewsフォルダで、htmlのcodeを書いていき、最終的にブラウザにhtml情報を渡す役割
viewsフォルダが作成されて、その中にhomeフォルダとtop.html.erbファイルが作成される。
app/views/home/top.html.erbという感じ。
<controllersフォルダ>
2つ目がcontrollersフォルダで、viewsフォルダで作成したhtmlファイルの中から、適切なhtmlファイルを探す役割
基本的な役割は「コントローラと同じ名前のビューフォルダから、アクション名と同じ名前のhtmlファイルの繋ぐ」となっている。
controllersフォルダが作成されて、その中にhome_controller.rbフォルダとtopメソッド(アクション)が作成される。
app/controllers/home_controller.rb/topメソッドという感じ。
<routesファイル>
3つ目がroutesファイルで、ブラウザで指定されたurlから、適切なcontrollersファイルを見つけだす役割
基本的な役割は「ブラウザから指定されたurlから、対応するコントローラファイルに繋ぐ」となっている。
configファイルの中にあるroutes.rbファイルの中に、上記の役割をもつcodeがが作成される。
app/config/routes.rbの中にcode生成という感じ。
codeの中身は、「get"url" => "コントローラー名#アクション名"」で記載され、左と一致するコントローラーファイルにアクセスする。
以上より、ターミナルに記載するcodeの最後の2つは、ファイル名やフォルダ名を変えたければ、任意に変えればいいと思う。最後の2つの前半がコントローラー名、後半がアクション名に対応している。
(urlも変わり、上記3つのフォルダやファイルの名前が、それに対応した名前に変わる)
全体としての流れは以下のとおり
①ブラウザでurlを入力
②ルートにurlの情報が飛ぶ
③urlで指定されたコントローラファイルを探して繋ぐ＠ルートフォルダ
④コントローラのファイル名とアクション名と一致するhtmlフォルダを探して繋ぐ＠コントローラーフォルダ
⑤ブラウザに表示しいhtmlコードを書いてブラウザに返す＠ビューフォルダ
・routesフォルダからurlを変更する方法
コントローラーファイルは変えることなく「ここのページのurlはこう変えたい」ような場合について考える。
例えば、今のrulがhost名/home/getviewだとして、これをhost名/topにしたい場合は以下のとおり。
<routesファイル>
変更前
Rails.application.routes.draw do
get "home/getview" => "home#getreview"
end
変更後
Rails.application.routes.draw do
get "top" => "home#getreview"
end
つまり、get"url"の部分は「このurlが指定されたら」という意味なので、この部分を変更したいurlに変えれば、以下の命令はそのまま実行されるということになる。
(変更後はhost名/homeというurlが指定されたら、homeというコントローラー名のgetreviewというアクションに繋いでね、というcodeになる。逆に前の長いurlを入力すると、エラーで繋がらなくなる)
・2ページ目以降のページの作成方法について
3つのフォルダ全てで対応する必要がある。具体的に、knowusというページを新しく作る場合は以下のとおり。
<routesファイル>
get "knowus" = "home#knowus"
上記を追加
<controllersフォルダ>
def knowus
end
上記を追加
<viewsフォルダ>
app/views/homeのフォルダを右クリックして、knowus.html.erbを新規作成して、knowusページに示したいhtmlのcodeを記載する
・デザインの反映方法
cssのcodeをどこで書くのかというと、「app/assets/stylesheets」の中になる、今回でいうとhome.scssファイルとなる。
このファイルも、実は一番最初にターミナルに入力した「$ rails generate controller home top」という命令で、自動生成している。
このファイルに記載したデザインは、viewsのhomeフォルダに格納された、全てhtmlファイルに反映される。
・画像の反映方法
画像自体の反映方法は、以前HTML&CSSで勉強した通りの方法で問題ないけれど、問題の画像ファイルをどこに保存していたのかについて。
基本的に画像フォルダは「app/public」の中に直接放り込んでおくこと。
これで、画像のリンクは「/画像ファイル名」でOKとなる。
・リンクの飛ばし方
これもhtml&cssで学習した内容だけど、今回の「url⇒routes⇒controllers⇒views⇒ブラウザ」の流れを理解してからだと、ちゃんと意味合いがわかる。
<a href"/top">文字列<a>
上記のような形で、host名/topに飛べるボタンが作れる。
ということで、今回は実際のcodeよりも、全体的な流れの部分の基礎が多かったので、説明口調になってやや長文になってしまいました^^;;
ただ、今回の学習内容はとにかく大切な部分なので、なんとなくではなくて、しっかりと理解した上で進んでいこうと思います！
大切なのは
「url⇒routes⇒controllers⇒views⇒ブラウザ」の流れ
ですね^^
ではでは、1日でも長く続けられるように頑張っていきます^^
同志の方、一緒に頑張っていきましょう！
