教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。
その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。
2章ではトップページを作成していきます。ここでいうトップページとはユーザーが作成したリストやカードの情報が表示されるページです。まずトップページから作成するのは、ユーザーが新規登録やサインインした際に遷移するページを用意するためです。
本パートでは下記の画像のようにデザインは特にしていない仮のトップページを表示させるところまでやっていきます。
ページが表示されるまでの流れは前回の2-1 MVCについて学ぼうで説明した通り、ルーティング→コントローラー→ビューという順で処理が行われるので、実装もこの順番でやっていきます。
では実際に進めていきましょう。
まずトップページのルーティングの設定を行います。
ルーティングは受け取ったURLを認識し、適切なコントローラー内のアクションを動かすように設定します。
今回はtopコントローラーのindexアクションのルーティングをトップページのルーティングとして設定します。
config/routes.rb
に以下のコードを追加してください。
Copied!config
└── routes.rb
config/routes.rb1234 Copied!Rails.application.routes.draw do
# ここにtopコントローラーのindexアクションのルーティングを追加する
get 'top/index'
end
rails routes
というコマンドを実行することで設定しているルーティングを全て表示できます。実際に下記のコマンドを入力してください。
Copied!$ rails routes
すると下記の画像のようにルーティングの一覧が表示されます。
下記のルーティングが今回設定したルーティングの情報になります。
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動詞があります。
今回はページを表示させたいだけなので、HTTP動詞はGET
に指定しています。
次にトップページで使うコントローラーを作成します。コントローラーの名称は先程設定したルーティングで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
次に作成したコントローラーにアクションを追加していきます。ルーティングが実際に処理するのはコントローラーに作成されたアクションです。
まず先ほど追加したルーティングを確認してみましょう。
名前付きヘルパー | 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.rb12345678 Copied!class TopController < ApplicationController
# ==========ここから追加する==========
def index
end
# ==========ここまで追加する==========
end
今回は仮のトップページを表示させるだけで、特にデータベースからデータを取ってくるわけではないのでindexアクションの中には何も書かないです。
最後にビューを追加します。アプリケーションの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.erb1 Copied!<p>このページは仮のトップページです。</p>
では、実際に仮のトップページを表示されるか確認します。もう一度今回のパートで追加したルーティングのパスを確認してみましょう。
名前付きヘルパー | HTTP動詞 | パス | コントローラー#アクション |
---|---|---|---|
top_index | GET | /top/index | top#index |
パスがtop/index
となっているので「http://localhost:3000/ 」にtop/index
を付け足して、http://localhost:3000/top/index にアクセスしてみましょう。下記の画像のように表示されていればうまく動作しています。
Cloud9の方はこちらを参考にページを表示させてください。
パスが
〜〜amazonaws.com
のあとに/top/index
を付け足せば表示できます。
(サーバーを立ち上げていない場合はターミナル上で「bundle exec rails s」を実行してサーバーを立ち上げてください。)
仮のトップページを「http://localhost:3000 」にアクセスしたら表示できるようにルーティングの設定を行います。
rootメソッドを使用することで、Railsがルート/
とすべき場所を指定できます。
参考)rootを使う
config/routes.rb
を以下のように編集してください。
Copied!config
└── routes.rb
config/routes.rb1234 Copied!Rails.application.routes.draw do
# この行を編集する
root 'top#index'
end
編集できたら http://localhost:3000 にアクセスして下記の画像のように表示されていればうまく動作しています。
以上で今回のパートは終了です。
お疲れ様でした。
app/views/top/ディレクトリ内にindex.html.erbを追加、確認しようとするとエラーが発生。
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.
良ければ解決の糸口になるヒントを頂ければと思います、よろしくお願いします。
最初のgetアクションの時には
'top/index'
であったのに対し
rootに設定した際には
'top#index'になるのはなぜでしょうか?
トップページを表示させるために
http://localhost:3000/top/index にアクセスすると
Webpacker::Manifest::MissingEntryError in Top#index が表示される。
ブラウザ画面
ターミナル画面(ローカルサーバー)
https://gyazo.com/c8f2143b077c1540403b1f9bd62e372c
検索したところwebpackerがコンパイルされていないことが原因なのではないかと思い、
ターミナルにて
rails webpacker:installコマンド
https://gyazo.com/5ff49816d9568c95e207a4e39ddc9da9
rails webpacker:compileコマンド
https://gyazo.com/35eca06ca928e6e69a78fc9b05e19225
を行いましたが、解決できませんでした。
ruby 2.6.5
rails Rails 6.0.3.7
macOS Big Sur ver.11.3
原因について教えて頂けませんでしょうか。
よろしくお願い申し上げます。
質問させて頂きます。
<やった事>
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' %>
の箇所でストップしております。
原因について教えて頂けませんでしょうか。
よろしくお願い申し上げます。
質問失礼いたします。
現在、トップページのビューファイル作成後、ルーティングの設定まで実施。
(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
導入部分での質問で大変失礼いたしますが、何卒宜しくお願い致します。