LoginSignup
0
1

More than 1 year has passed since last update.

オリジナルアプリ開発#4【topページの表示】

Last updated at Posted at 2021-05-16

現在、転職先の企業へのアピールポイントになるポートフォリオ作成(オリジナルアプリ開発)をしています。
私は、タスク管理ツールの完成を目指しています。

今回は、仮topページの表示を行います。

ルーティングの設定

仮トップページを「http://localhost:3000 」にアクセスしたら表示できるようにルーティングの設定をします。
rootメソッドを使用することで、Railsがルート/とすべき場所を指定できます。

config/routes.rb
root 'top#index'

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

「rails routes」コマンドを実行することで設定しているルーティングを全て表示できます。

ターミナル
rails routes

オリジナルアプリ【仮topルーティング】.png

下記が今回設定したルーティングの情報。

root GET / top#index

コントローラーの作成

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

ターミナル
rails g controller [コントローラー名]
ターミナル
rails g controller top

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

ターミナル
Running via Spring preloader in process 55767
      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

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

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

app/controlllers/top_controller.rb
class TopController < ApplicationController

  # 追加
  def index
  end
  # 追加

end

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

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

app/views/top/ディレクトリ内にindex.html.erbを追加します。

app/controlllers/top_controller.rb
<p>仮トップページです。</p>

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

ターミナルでローカルサーバーを立ち上げていない場合は、
「rails s」コマンドで立ち上げてから「http://localhost:3000/ 」にアクセスします。

オリジナルアプリ【仮top表示】.png

今回は、以上になります。

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1