今日からド初心者がRuby on rails の学習を始めます。

ド初心者ですが、HTMLとCSSの基礎知識は過去の独学で少しはある方。

モノづくりが好きで、エンジニアになりたいと思ったアラサー。

何かを始めるのに遅すぎることはない!

今日からがんばります!

 

今日はProgateでRuby on rails 学習Ⅰを完了。
試行錯誤の上完了しても、改めて自分の頭を整理しないとすぐに忘れてしまった、というのが過去の独学の反省。
なので今回は学習したら、学んだことをブログに書いていくことにした。

 

今日学んだこと:

★Railsアプリケーションの準備

・アプリケーション名と同名のフォルダの中に開発に必要なフォルダやファイルを作成
→ターミナル1で$ rails new xxxx_app(アプリケーション名) を実行

・サーバーの準備
→ターミナル2で$ rails serverを実行
(サーバー起動後、URL: localhost:3000にアクセスすると初期画面が出る)
【疑問】なぜターミナル2でターミナル別のにした…?
→rails serverは起動し続けておく必要あり

 

★TOPページを作成する

・ターミナルでrails generate controller home topを実行
→localhost:3000/home/topにアクセスするとtopというが表示されるように

 

★railsでページの表示に必要な3点

*erb = embedded Ruby on railsの略

■view(app/views/home/top.html.erb)
*Progateの画像内はhomeが抜けてた☆
■controller(app/controllers/home_controller.rb)
→ file内にtopメソッド(=アクション**)が追加される)
■routing(xxxx_app/config/routes.rb)
→get “URL” => “controller名#action名” (送信されたURLに対して、どのcontrollerでどのactionで処理するかの対応表)
*xxxx_appの部分もProgateの画像内記述間違ってた☆

**コントローラー内のメソッドをアクションと言う。
rails generate controller home topの実行で自動生成されるアクションは下記。

 

★ページyyyを追加する

・$ rails generate controller コントローラ名(home) アクション名(yyy)でページを追加
・ルーティング(routes.rb)にルーティングを追加
・コントローラー(home_controller.rb)でアクションを追加
・新しいページ用のビューを追加(homeフォルダを右クリック→新規ファイル作成→名前はyyy.html.erb)

 

★CSSファイルを調整する

・app/assets/stylesheetsフォルダにhome.scssが自動生成されている
→ここに書けば全てのページに適応される

 

★画像を追加する

・画像はpublicに入れることで、「<img src=”/画像名” >」や「background-image: url(“/画像名”);」と指定が可能

 

★リンクを追加する

・<a href “/”> リンクにしたい文字</a>
・ルーティングが”/”に対応しているかチェック

 

★posts controllerを作成する

(目的に合わせたコントローラーを作成した方がよい)
・rails generate controller posts index
・config/routes.rb に自動で get “URL” => “posts#index”  が追加される
・posts_controller.rb が自動生成される
・app/views/posts/index.html.erb が自動生成される
・posts.css が自動生成される
*一覧ページを作成するときは、indexというAction名を使用することが一般的

 

★viewファイル内で変数を定義する

・erb形式のファイル内では<% %>で囲むことで、HTML内にRubyコードを書くことができる。
・Rubyコードをブラウザに表示したいときは、<%= %>
・app/views/posts/index.html.erb の中に、<% post1 = “あいうえお” %>と<%= post1 %>

 

★配列を用意

<% posts = [
“あいうえお”,
“かきくけこ”
]
%>

 

★each文

下記を書くことで、投稿の数だけHTMLを書く必要がなくなる

<% posts.each do |post| %>
<%= post %>
<% end %>

 

★Railsでは変数をアクションで定義することが一般的

(→変数をアクションに移動)

・posts_controller.erb の中の def index と end の中で定義
def index
@posts = [
“あいうえお”,
“かきくけこ”
]
end
・viewファイルでも@postsを使うのを忘れないように!
<% @posts.each do |post| %>
<%= post %>
<% end %>

 

★postsテーブルを作成する準備

STEP1: ターミナルに$ rails generate model post content:text を入力
(post(モデル名) content(カラム名) text(データ型))
・db/migrateフォルダにマイグレーションファイル(xxxxx_create_posts.rb)(データベースに変更を指示するファイル)が作成される
・これでapp/modelsフォルダにPostsモデルが定義されたファイル(post.rb)も作成される
ApplicationRecordクラスを継承するPostクラスが定義される。
*ApplicationRecordクラスを継承するクラスをモデルと言う

STEP2: データベースに変更を反映する。
→ターミナルに$ rails db:migrate を入力
→データベースにid, content, create_at, updated_at をカラムとしたposts tableが作成される

 

★rails console

・1+1=2などの実行や、変数の定義をすることも可能。quitで終了できる

 

★テーブルに投稿データを保存する

STEP1:newメソッドでpostモデルのインスタンスを作成する
例)
contentが「Hello World」であるpostインスタンスを作成
post = Post.new(content: “Hello World”)

STEP2:post テーブルに保存
post.save で保存する

 

★テーブルのデータを取り出す

⇣postsテーブルの最初のデータのcontent内容を取得する
post = Post.first
post.content

⇣全てのデータを配列で取り出す>post0番目のコンテンツを取得する
posts = Post.all
post[0].content

ここで、下記とすると、全てのデータを代入できる
posts_controller.rb の@posts = Post.all
viewファイルを下記に変更すると、contentを取得できる
<% @posts.each do |post| %>
<%= post.content %>
<% end %>

 

★共通のレイアウトをまとめる

・Railsでは、views/layouts/application.html.erb に共通のレイアウトを書いておくことができる
・application.html.erb の中の<%= yield %>は、各viewファイルに代入され表示される

 

★link_toメソッド

Railsでは link_to でリンクが追加できる
<% link_to = (“About”, “/about”) %>
→<a href = “/about”>About</a>に変換される