Webエンジニア目指して#34

どうも無職マンです。

退職証明書類が未だ届かず、事務手続きを全て終わらせてからWebエンジニアのスクールへ臨むつもりが遅れてます。はよしてくれ〜〜〜〜〜

運動不足をなんとかしようと思って２億年振りにDDRやったんですが、全然踏めません。軟体動物が地団駄を踏むゲームになっています

そんな感じでいきまShow　ProgateのRuby on Rails I !!!!!!!!!!!!!!

Webアプリケーションの生成
$ rails new application_name

ターミナルでこいつを入力すると自動で必要なディレクトリを作ってくれるらしい！行くぜうおお！
あ、$はコマンドを表す文字で、ターミナルに元々表示されるため入力は不要です f:id:misokatsu_sand:20210202062741p:plain Rails入っとらんやんけ！！！！！！！

f:id:misokatsu_sand:20210202063445p:plain 入れてきました。なにやら警告されてますが初めてRailsを始める場合は無視でいいそうなので無視します

というわけで先程のrails newを実行すると f:id:misokatsu_sand:20210202112551p:plain 予想よりたくさん生成されました。これがwebアプリの土台になるわけですね。こんなん手作業で作ってられないのでRailsは偉大ですね

サーバーの起動

rails newをしたら今度はサーバーを起動します 別途ターミナルを立ち上げて下記の通り入力

$ rails server

するとこんな表示になります。
f:id:misokatsu_sand:20210203181814p:plain Ctrl+Cでサーバーを閉じるまではこの窓は開きっぱなしにします。
忘れると閉じられなくなるんで回りくどい操作が必要になってしまうそうな

次にブラウザでlocalhost:3000をアドレスバーに入力するとこんな画面が出ます。 これでサーバーが立ちました。 f:id:misokatsu_sand:20210204162806p:plain

トップページの自動生成
$ rails generate controller home top

このコマンドを実行するとトップページが自動生成されます メリットはまだ分かりませんがなにやら色々やってるのでただトップページを作るだけじゃないみたい f:id:misokatsu_sand:20210205004828p:plain この状態でlocalhost:3000/home/topをブラウザで開くといかにもデフォルトな感じのページが開きます f:id:misokatsu_sand:20210205005235p:plain

viewについて

Railsページにはview,controller,routingの3ファイルが必要で、
ブラウザの要求に対してRailsはrouting>controller>viewの順に経由しviewを返します

viewは見た目の部分、つまりhtmlのことです
viewファイルは下図のディレクトリに入ってます。自動生成したhome/topも入ってますね f:id:misokatsu_sand:20210205010215p:plain

生成したtop.html.erbはhtmlのノリで編集できます。末尾にerbがついてますがhtmlと同じ記述らしい

controllerについて

先述の通り、Railsがブラウザにviewを返す前にcontrollerファイルを経由してきます。さてはサーバーサイドの処理だな？

rails generate controller home topで生成されたものの中にcontrollerと名のついた.rb拡張子のファイルがあります f:id:misokatsu_sand:20210205011333p:plain これの中身がこちら

class HomeController < ApplicationController
  def top
  end
end

home/topを生成したのに合わせてtopメソッドが書かれてます

このようにcontrollerに書かれたメソッドをactionといって、

routingについて

rountingはブラウザに入力されるURLとcontrollerをリンクさせるファイルです

[viewについて]で書いた流れを細かく書くと、
1.ブラウザからの要求に対しRailsがURLとroutingを参照
2.対応したcontrollerファイル名とそのactionを参照
3.そのaction名のviewとなるhtmlをブラウザに返す って感じですね

このroutingも自動生成されてます f:id:misokatsu_sand:20210205015623p:plain その中身がこちら

Rails.application.routes.draw do
  get 'home/top'
  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
end

あれ、Progateだとget "home/top" => "home#top"となりましたが結果が違う
ver.の違いでしょうか(Rails6.1.1)

コメントアウトに書いてあるURLへ行ってみると、どうやらURLの指定とcontroller actionが同じだと省略できるみたいです。なるほどね

ちなみに全然関係ないURLを入力したらrounting errorが出ました。

f:id:misokatsu_sand:20210205030216p:plain
やばそう
routingがうまく記述できてないとこうなるわけですね

routingの変更

controllerを呼び出すURLを変えます

Rails.application.routes.draw do
  get 'top'=>'home#top'
end

こうするとlocalhost:3000/topだけで呼び出せるようになります f:id:misokatsu_sand:20210205031150p:plain

また、下のように書いた場合はlocalhost:3000だけで呼び出せます

Rails.application.routes.draw do
  get '/'=>'home#top'
end
2個目以降のページの作成

home/topはrailsコマンドを使って自動生成しましたが、重複したcontrollerはコマンドが弾かれるため今まで書いたview,controller,routingファイルの自作が必要です

cssの適用

railsで下図のようにcss専用のフォルダが作られます f:id:misokatsu_sand:20210207184036p:plain home.scssがhomeフォルダのview全てに適用、
application.cssが全てのviewに適用されます

適用順はapplication>homeなので重複要素があればapplicationの記述は上書きされます

railsではscssなんですね。sass覚えといて良かった〜

画像の保存場所

railsは独特な参照をするみたいで、<img src="/bnr_mini.png">みたいな書き方をすると下図のフォルダを参照します。 f:id:misokatsu_sand:20210208233243p:plain 別にもapp/assets/imagesに保存場所があってどっちやねん！って感じですね
参照する際は/assets/images/xxx.pngのように記述します。appがルートディレクトリになるわけですね

ちらっと調べた感じwebアプリを立ち上げたとして、ユーザーが利用する範囲のものはpublic、システム画像などであまり変化のないものはassets/imagesに置くのがいいというのを見ました

htmlリンクの設定

htmlのaタグのリンク先にroutingのパスを記述するとその設定通りに飛ぶ

<a href="/">トップページ</a>

途中で調べることが多くて止まっちゃいましたがRails Iおわり！ではでは