カテゴリー
サインイン 新規登録

間違いや改善の指摘

内容の技術的な誤り・誤字脱字やミスのご報告・解説やトピックの追記/改善のご要望は教材をさらに良くしていく上でとても貴重なご意見になります。

少しでも気になった点があれば、ご遠慮なく投稿いただけると幸いです🙏

実際には誤りではなく勘違いであっても、ご報告いただけることで教材のブラッシュアップにつながります。

質問ポリシー①

教材受講者みなさんのスムーズな問題解決のために、心がけていただきたいことがあります。

教材の内容に関する質問を投稿しましょう

教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。

その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。

2-2

仮のトップページを表示

2章ではトップページを作成していきます。ここでいうトップページとはユーザーが作成したリストやカードの情報が表示されるページです。まずトップページから作成するのは、ユーザーが新規登録やサインインした際に遷移するページを用意するためです。

本パートの目標物

本パートでは下記の画像のようにデザインは特にしていない仮のトップページを表示させるところまでやっていきます。

image

目標物を作成するまでの流れ

  1. トップページのルーティングを設定
  2. コントローラーの作成
  3. 作成したコントローラーにアクションを作成
  4. トップページのビューを作成
  5. rootルーティングの設定

ページが表示されるまでの流れは前回の2-1 MVCについて学ぼうで説明した通り、ルーティング→コントローラー→ビューという順で処理が行われるので、実装もこの順番でやっていきます。

では実際に進めていきましょう。

1. トップページのルーティングを設定

まずトップページのルーティングの設定を行います。

ルーティングは受け取ったURLを認識し、適切なコントローラー内のアクションを動かすように設定します。

image

今回はtopコントローラーのindexアクションのルーティングをトップページのルーティングとして設定します。

config/routes.rbに以下のコードを追加してください。

Copied!
config └── routes.rb
config/routes.rb
1234
Copied!
Rails.application.routes.draw do # ここにtopコントローラーのindexアクションのルーティングを追加する get 'top/index' end

追加したルーティングを確認する

rails routesというコマンドを実行することで設定しているルーティングを全て表示できます。実際に下記のコマンドを入力してください。

Copied!
$ rails routes

すると下記の画像のようにルーティングの一覧が表示されます。

image

下記のルーティングが今回設定したルーティングの情報になります。

Copied!
top_index GET /top/index(.:format) top#index
名前付きヘルパー HTTP動詞 パス コントローラー#アクション
top_index GET /top/index top#index

簡単に用語を解説すると、名前付きヘルパーはtop_index_pathのように末尾に_pathを付け加えることで、ビュー内で使えるURLになります。

HTTP動詞はクライアントが行いたい処理をサーバーに伝えるという役割があります。

Railsでは以下の4種類のHTTP動詞があります。

  • GET・・・サーバーからブラウザに情報を返す。単にウェブサイトを閲覧したいときに利用される。
  • POST・・・ブラウザからサーバーにリソースを送信し作成する。フォームでデータを保存したいときに利用される。
  • PATCH・・・リソースを更新する。データを更新したいときに利用される。
  • DELETE・・・リソースを削除する。データを削除したいときに利用される。

今回はページを表示させたいだけなので、HTTP動詞はGETに指定しています。

参考)Rails のルーティング

2. コントローラーの作成

次にトップページで使うコントローラーを作成します。コントローラーの名称は先程設定したルーティングでtopと指定したので、topコントローラーを作成していきます。

コントローラーはルーティングからリクエストを受け取り、データをモデルから取得したりモデルに保存するなどの作業を行い、最後にビューを使用してHTML出力を生成します。

コントローラーは「rails g controller コントローラー名」というコマンドで作成出来ます。以下のコマンドを実行してください。

Copied!
$ rails g controller top

上記のコマンドを実行するとターミナルに下記のような実行結果が表示されます。

Copied!
$ rails g controller top Running via Spring preloader in process 26108 create app/controllers/top_controller.rb invoke erb create app/views/top invoke test_unit create test/controllers/top_controller_test.rb invoke helper create app/helpers/top_helper.rb invoke test_unit invoke assets invoke scss create app/assets/stylesheets/top.scss

3. 作成したコントローラーにアクションを作成

次に作成したコントローラーにアクションを追加していきます。ルーティングが実際に処理するのはコントローラーに作成されたアクションです。

まず先ほど追加したルーティングを確認してみましょう。

名前付きヘルパー HTTP動詞 パス コントローラー#アクション
top_index GET /top/index top#index

今回の場合はtop#index、つまりtopコントローラーのindexアクションを処理するように指定しています。なのでtopコントローラーにindexアクションを作成していきましょう。

app/controlllers/top_controller.rbに以下のコードを追加してください。

Copied!
app └── controllers └── top_controller.rb
app/controlllers/top_controller.rb
12345678
Copied!
class TopController < ApplicationController # ==========ここから追加する========== def index end # ==========ここまで追加する========== end

今回は仮のトップページを表示させるだけで、特にデータベースからデータを取ってくるわけではないのでindexアクションの中には何も書かないです。

4. トップページのビューを作成

最後にビューを追加します。アプリケーションのapp/viewsディレクトリには、1つのコントローラーごとに1つのディレクトリが作成され、そこにビューテンプレートファイルが置かれます。このビューテンプレートはそのコントローラーに関連づけられています。

今回はtopコントローラーなのでtopディレクトリのアクションごとに出力された結果をビューで表示させます。

app/views/top/ディレクトリ内にindex.html.erbを追加してください。追加したらindex.html.erbに以下のコードを追加してください。

Copied!
app └── views └── top └── index.html.erb
app/views/top/index.html.erb
1
Copied!
<p>このページは仮のトップページです。</p>

では、実際に仮のトップページを表示されるか確認します。もう一度今回のパートで追加したルーティングのパスを確認してみましょう。

名前付きヘルパー HTTP動詞 パス コントローラー#アクション
top_index GET /top/index top#index

パスがtop/indexとなっているので「http://localhost:3000/ 」にtop/indexを付け足して、http://localhost:3000/top/index にアクセスしてみましょう。下記の画像のように表示されていればうまく動作しています。

Cloud9の方はこちらを参考にページを表示させてください。

参考)Cloud9でページを表示する方法(Rails)

パスが〜〜amazonaws.comのあとに/top/indexを付け足せば表示できます。

(サーバーを立ち上げていない場合はターミナル上で「bundle exec rails s」を実行してサーバーを立ち上げてください。)

image

5. rootルーティングの設定

仮のトップページを「http://localhost:3000 」にアクセスしたら表示できるようにルーティングの設定を行います。

rootメソッドを使用することで、Railsがルート/とすべき場所を指定できます。

参考)rootを使う

config/routes.rbを以下のように編集してください。

Copied!
config └── routes.rb
config/routes.rb
1234
Copied!
Rails.application.routes.draw do # この行を編集する root 'top#index' end

編集できたら http://localhost:3000 にアクセスして下記の画像のように表示されていればうまく動作しています。

image

以上で今回のパートは終了です。

お疲れ様でした。

現在のパート (7)
全パート (121)
みんなで助け合おう!
現在のパートのディスカッション 全7件
2-2
フナムシ 2022-10-12
Webpacker::Manifest::MissingEntryError in Top#indexを解決したい

発生している問題

app/views/top/ディレクトリ内にindex.html.erbを追加、確認しようとするとエラーが発生。

エラー画面をスクショで添付してください

Image from Gyazo

試したこと

webpacker:installとwebpacker:compileを実行しました。
webpacker:installが実行できませんでしたがwebpackerのバージョンを5.0にすることで実行できるようになりました。
文字制限により、webpacker:installの実行結果を載せることが難しいのでうまく実行できないcompileのみ貼り付けます。

Copied!
$ rails webpacker:compile Warning: you are using an unstable release of Node.js (v15.14.0). If you encounter issues with Node.js, consider switching to an Active LTS release. More info: https://docs.npmjs.com/try-the-latest-stable-version-of-node Compiling... Compilation failed: yarn run v1.22.19 info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command. error Command "webpack" not found.

良ければ解決の糸口になるヒントを頂ければと思います、よろしくお願いします。

2-2
yata78 2021-08-15
質問です

最初のgetアクションの時には
'top/index'
であったのに対し
rootに設定した際には
'top#index'になるのはなぜでしょうか?

2-2
kyohhh 2021-05-10
Webpackerエラーが表示されます

発生している問題

トップページを表示させるために
http://localhost:3000/top/index   にアクセスすると

Webpacker::Manifest::MissingEntryError in Top#index が表示される。

エラー画面のスクショ

試したこと

検索したところwebpackerがコンパイルされていないことが原因なのではないかと思い、
ターミナルにて
rails webpacker:installコマンド
https://gyazo.com/5ff49816d9568c95e207a4e39ddc9da9

rails webpacker:compileコマンド
https://gyazo.com/35eca06ca928e6e69a78fc9b05e19225
を行いましたが、解決できませんでした。

補足情報(フレームワークのバージョン・OS)

ruby 2.6.5
rails Rails 6.0.3.7
macOS Big Sur ver.11.3

原因について教えて頂けませんでしょうか。
よろしくお願い申し上げます。

2-2
Tanaka 2021-03-25
Webpackerのエラーが表示されます

質問させて頂きます。

<やった事>
routes.rbに、get 'top/index'を追加

コントローラに、
def index
end
を追加

views/top/index.html.erbを作成

http://192.168.33.10:3000/top/indexを指定すると、

「Webpacker::Manifest::MissingEntryError in Top#index」のエラーが表示されます。
app/views/layous/application.html.erbの
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
の箇所でストップしております。

原因について教えて頂けませんでしょうか。
よろしくお願い申し上げます。

2-2
坂大和輝 2020-09-30
質問です。

質問失礼いたします。

現在、トップページのビューファイル作成後、ルーティングの設定まで実施。
(root 'top#index'の記述まで実施)

http://localhost:3000へ接続するも、下記画面のエラーが発生している状況です。
https://techpit-market-prod.s3.amazonaws.com/uploads/question_attachment/file/1198/24412873-3c4e-4dc2-8aad-e9e10cede388.png

エラー画面より、routes.rbの内容を確認していますが、デフォルトから何も変更しておりません。
$ rails routesを実行すると上記のようにindexについて何も出てこない状況です。
https://techpit-market-prod.s3.amazonaws.com/uploads/question_attachment/file/1199/236b1fe7-d161-4edb-aac2-61c909471ac2.png

導入部分での質問で大変失礼いたしますが、何卒宜しくお願い致します。