Ruby on Rails道場1の振り返り(Progate)
引っかかったところ
✅最初の「rails new （アプリ名）」忘れ ※フォルダ生成
✅次の「rails s」忘れ ※Railsサーバー起動
✅「rails g controller home top」を、スペースでなく「home/top」や「home.top」と書いてしまい✖️
✅aboutを作るとき、home内なのに手動作成せず「rails g」…とやりかけ✖️
✅aboutのルーティングを「/about」としてるのに、ヘッダーからのリンクで「home/about」と書き✖️
✅編集すべきファイルがどこにあるか覚えていない
✅違うフォルダにも似た名前のファイルがあり、別ファイルと気付かずに開いて編集してしまい、エラーになる（それでも気付かない）
ex.) controllerを編集するつもりがmodelsフォルダを開いている、等
✅ビューファイル（html）内のRuby記述、link_toなど<%= %>で書くべきところを<% %>で書き、エラーになる。その逆も。
✅「rails g model Post content:text」を「post」や「posts」と書きそうになる
✅「rails console」でコンソールで入る前に「post = Post.new~」✖️
❗️✅コンソールで「post = Post.new("テスト1")」と書き、saveしてもエラーをもらい続け、ずっと止まりました✖️✖️
※正しくはPost.new(content: "テスト1")
✅コンソールquit後、「rails db:migrate」をもう一度しないとエラーをもらうことがあった（テーブルの構成を変えてしまってた？）
✅投稿一覧、配列からの取り出し「@posts.each do |post|」、doの前後はスペース、ということを忘れがち（ピリオドを打ってしまったり）
✅配列「@posts」から取り出した一件のデータは変数「post」に入れてあるのに、「@post」と書いて✖️
✅アクション記述でのpostsテーブル全件取得、「@posts = Post.all」まで書いて満足してしまい、降順にする「.order(created_at: :desc)」を忘れて✖️ （いつもやってしまう）
✅投稿詳細ページ、””の中に変数等を置くための「#{ }」が身についておらず混乱
✅index.html（投稿一覧）からのリンク記述は「link_to( post.content, "/posts/#{ post.id }")」だったが、またも「"/posts/#{ @post.id "}」と、@を付けてしまい✖️
✅単純なスペルミス（結局これが一番多くて一番見つけにくかったり）
✅エディタの補完入力「""」（一回打ったら2つ出る／中から消すと2つとも消える）で、誤って「"」1つだけにしてしまい、以降のコードが全て文字列とみなされてしまい✖️
✅カッコの不整合（足りない／足しすぎ／編集のどさくさで必要なものも削除してしまったり）
✅｛｝と［］の間違い（死ぬので要注意です）
Twitterですら区別つかなかったので、ダイマックス😤
— ラヴィ(╹◡╹*) (@lovekakin) February 24, 2020
これを使い分けろっていうのがもう、平仮名の「へ」と片仮名の「ヘ」の違いでエラー返すようなもんで、既存言語のアカンところだと思う(；∀；) #Progate https://t.co/WjVqmwlEfU pic.twitter.com/jHkU8td2Hz
進め方
1 目標物確認
操作画面、タブが左から順に
エディタ／ターミナル／ブラウザ／データベース の4
エディタとターミナルに入力して課題を進める。
ブラウザとデータベースのタブは確認・閲覧。
エディタ画面は、左上のフォルダマークから、ファイルを開いた数だけタブができる。
開き直し以外でタブの順序は変えられない（変えたい）。
2 アプリケーションを用意しよう
初期画面になってるターミナルで
rails new tweet_app
を入力して、アプリのフォルダ構成が自動生成。
rails s
で、起動。
ブラウザに移って、URL「localhost:3000」でEnter
→ Yay! You're on Rails!
（ヤイ？？ イェイ？？） ＼＼└( '∀' )┘／／ｲｪｲ！
3 トップページを作ろう
ターミナルで
rails g controller home top
で、homeフォルダができるので、エディタに移ってフォルダマークから、
tweet_app / app / views / home / top.html.erb
を開いて、手順書のHTMLをコピペ。
次に、
tweet_app / app / assets / stylesheets / home.scss
を開いて、手順書のCSSをコピペ。
ブラウザのURLの末尾に「/home/top」を足してEnter
→ トップ画面が表示される
4 URLを変更しよう
編集すべきファイルの場所、覚えてなくて、
これが最初は大変！
app / config
の中の、下から3番目の「routes.rb」を開く。
get "home/top" => "home#top"
とあるのを、
get "/" => "home#top"
に修正（※常に自動保存されてるので保存不要）
ブラウザ「localhost:3000/home/top」で表示してたのが、
「localhost:3000」（ホーム）でそのまま表示されるようになる
前回のhome/topのURLはエラーになるので（「Routing Error」と赤い画面で表示されててビビる）
「home/top」を削除してEnter、改めてトップページを表示して終了。
5 サービス紹介ページを作ろう
手動でaboutを作る。
ビュー
ルーティング
アクション
新しいファイルを作るのは、ビュー。
home.html.erb があるフォルダで右クリックして、
「about.html.erb」と入力して決定。
できたファイルをポチッとしてエディット画面で開く。
手順書のHTMLをコピペ。
さっき開いたままのroutes.rbの
get "/" => "home#top"
の下に、
get "about" => "home#about"
を書く。
ルーティングができたので、あとはアクション。
homeのコントローラーを開く。
/ app / controller / home_controller.rb
を開く。
def top
end
の下に、
def about
end
を書く。
ブラウザに移って「/about」を入力
（「localhost:3000/about」だけど、前半は全URL共通なので割愛）
※aboutはtopと同じhomeフォルダ内にあるので、cssファイルは同じものが適用される
6 ヘッダーを作ろう
app / views / layouts / application.html.erb
を開く。
<body>
<%= yield %>
の間に改行を挟んで、手順書のHTMLをコピペする。
TweetApp
TweetAppとは
となってる行を、それぞれ
<%= link_to("TweetApp", "/") %>
<%= link_to("TweetAppとは", "/about") %>
に編集。
ブラウザに移って、ヘッダーの左右にリンクがあるのを確認。
topとaboutに、それぞれ飛べることを確認して終了。
❗️
7 モデルとテーブルを作ろう
ターミナルで
rails g model Post content:text
を実行。
rails db:migrate
で、自動生成されたマイグレーションファイルの通りにpostsテーブル作成。
「データベース」タブに初めて移動して、
「id」や「content」等のカラムができてることを確認する。
ターミナルに戻って
rails console
で、そのままコンソールモードへ。
post = Post.new(content: "てきとう1")
でEnter.
post.save
でEnter.
Content欄に「てきとう1」が入ったレコードが登録されたか、
データベースタブで確認。
ターミナルに戻って、
コンソールモードでそのまま、「てきとう2」も入力してsaveしておく。（また確認も）
終了前にコンソールモードから出た方が良いので、
「quit」で通常のターミナルに。
そのまま終了で良いと思うけど、ダメと言われることがある。
そしたらターミナルで「rails db:migrate」をもう一度実行。したら終われた。
❗️
8 投稿一覧ページを作ろう
がんばる。
ターミナルで
rails g controller posts index
を実行して、postsコントローラーとindex.html.erbのビューファイルを自動生成。
ルーティングファイルrouets.rbを開いて、
以下が自動で追加されてることを確認する。
get "posts/index" => "posts#index"
さっきのhomeと同じ要領で、index.html.erbとpost.controllerを探して開く。
posts.controller.rb で、
def index
end
の間に
@posts = Post.all
の処理を追加する（postsテーブルからレコード全件を取得して配列に入れる）。
その全件を、新しい順に表示したいので、次のように書き足して降順にする。
@posts = Post.all.order(created_at: :desc)
index.htmlに移動して、手順にあるHTMLをコピペして、編集する。
<% each文を用いてください %>
〜
<%= 投稿の内容 %>
〜
<% each文を閉じてください %>
を、それぞれ
<% @posts.each do |post| %>
〜
<%= post.content %>
〜
<% end %>
に編集。
自動生成されたcssを開いて、手順のをコピペ。
ヘッダーに「投稿一覧」を追加するために、
application.html.erbを開いて、
<li>
<%= link_to("TweetAppとは", "/about") %>
</li>
の三行をコピーして、直下にペースト。して、リンク修正する
<li>
<%= link_to("TweetAppとは", "/about") %>
</li>
<li>
<%= link_to("投稿一覧", "/posts/index") %>
</li>
ブラウザタブで「投稿一覧」のリンクがヘッダーにできてることと、
リンクを飛んで、データの中身が上から新しい順に表示されてることを確認して終了。
9 投稿詳細ページを作ろう
ルーティング／アクション／ビュー を作成。
でもその前に、投稿一覧画面から飛べるように、リンクを作る。
index.html.erbの
<%= post.content %>
だったところを、
<%= link_to(post.content, "/posts/#{post.id}") %>
に修正する。
※一覧表示はcontentのままで、リンクが「そのpostのid」になるように
「post.id」を指定。ただ""内にそのまま書くと、ただの文字列として認識されてしまうので、
文字列じゃないよ！と分かってもらうために「#{ }」の中に入れる。
これでリンクができたので、やっと投稿詳細ページの
ルーティング／アクション／ビュー の作成に入れる。
・ルーティング
routes.rbの編集画面で、controllerのどのアクションへ飛ぶかを指定。
indexのルーティングをコピペで二行にして、下側を編集。
get "posts/index" => "posts#index"
get "posts/index" => "posts#index"
投稿一覧でどの投稿（id）をクリックしたかによって表示内容を変えるので、引数として「:id」を指定
→ postsコントローラの「show」に飛ばすので、行き先は「posts#show」 にする
get "posts/:id" => "posts#show"
行き先に指定した「show」アクションを定義するために、posts_controller.rbへ移動
def index
@posts = Post.all.order(created_at: :desc)
end
の下に
def show
end
を定義。間に、投稿を表示するための処理を間に書く。
※endを忘れない
※ファイル内、一番左下の「end」は、クラスファイルの終了を宣言しているendなので、
絶対消さない／新たに作るアクションの「end」に使わない
def show
@post = Post.find_by(id: params[:id])
end
※一覧画面と違って、データを一件だけ取ってくるので「@post」と単数形の変数にする
全件の「all」でなく、一件取得の「find_by」にする。
※投稿一覧のindex.html.erbに書いたURL「posts/:id」の「:id」部分（1とか2とか）を使って、
postsテーブルからそのidのデータをとってくるので、id: params[id] となる。
・ビュー
app / views/ posts にカーソルを合わせて右クリック
aboutを作ったときと同じように、手動で「show.html.erb」を作成して、開く。
手順欄のHTMLをコピペ。cssはさっきのposts.scssが適用されるので編集不要。
<%= 投稿の内容 %>
〜
<%= 投稿の作成時刻 %>
の部分を、
<%= @post.content %>
〜
<%= @post.crated_by %>
に編集。
ブラウザタブに移って、投稿一覧画面から、リンクを飛んで、
その投稿の詳細ページが表示されるか確認する。
おしまい！
この記事が気に入ったらサポートをしてみませんか？