学生向けプログラミング入門 | 無料

学生向けにプログラミングを無料で解説。Java、C++、Ruby、PHP、データベース、Ruby on Rails, Python, Django

Rails導入編 | カート機能の実装 | 04 | Railsの構成

↓↓クリックして頂けると励みになります。



03 | アプリケーションの作成】 << 【ホーム】 >> 【05 | scaffoldの生成



Railsは、モデル(Model)、ビュー(View)、コントローラ(Controller)というMVC(Model-View-Controller)アーキテクチャを採用しています。
これにより、アプリケーションのロジックを分離し、保守性と可読性を向上させることができます。


Railsのモデルは、アプリケーションのデータ層を担当する部分です。
具体的には、データベースとのやり取りやビジネスロジックの実装など、データに関連する操作を中心に行います。


Railsのコントローラーは、アプリケーションを制御し、HTTPリクエストに応じて適切なレスポンスを生成する部分です。
コントローラーは、ユーザーからのリクエストを受け取り、適切なモデルの操作を行ったり、ビューをレンダリングしたりする役割を持っています。


Railsのビューは、ユーザーに表示されるコンテンツを生成する部分であり、アプリケーションのユーザーインターフェイスを形成します。
ビューは、HTML、ERB(Embedded Ruby)、JavaScriptなどの言語やテンプレートエンジンを使用して、動的なウェブページを生成します。


では実際にコントローラを作成して動作を見てみます。
ターミナルで「rails generate controller Says hello goodby」と入力します。
「rails generate」コマンドで「Saysコントローラ」を作成しています。
コントローラ名は複数形にするという決まりがあります。


コマンド
rails generate controller Says hello goodby

~/Desktop/Rails7_1/SampleCart $ rails generate controller Says hello goodby
      create  app/controllers/says_controller.rb
       route  get 'says/hello'
              get 'says/goodby'
      invoke  erb
      create    app/views/says
      create    app/views/says/hello.html.erb
      create    app/views/says/goodby.html.erb
      invoke  test_unit
      create    test/controllers/says_controller_test.rb
      invoke  helper
      create    app/helpers/says_helper.rb
      invoke    test_unit



ビューやヘルパーも同時に作成されていることがわかります。
まずはコントローラのソースファイルを見てみます。
ファイルは「SampleCart/app/controllers」フォルダにある「says_controller.rb」ファイルです。


内容確認 【SampleCart/app/controllers/says_controller.rb】

class SaysController < ApplicationController
  def hello
  end

  def goodby
  end
end



Webサーバを起動して、ブラウザのURLにhttp://localhost:3000/says/helloと入力してみます。
ブラウザには以下のように表示されます。

ブラウザ表示
ブラウザ表示



次はビューを書き換えてみます。
「SampleCart/app/views/says」フォルダにある「hello.html.erb」ファイルは以下のようになっています。


内容確認 【SampleCart/app/views/says/hello.html.erb】

<h1>Says#hello</h1>
<p>Find me in app/views/says/hello.html.erb</p>



これを以下のように書き換えます。

<h1>こんにちは!</h1>
<p>Find me in app/views/says/hello.html.erb</p>



ブラウザのURLhttp://localhost:3000/says/helloを更新すると書き換えが反映しているのがわかります。

更新が反映
更新が反映



このように「.html.erb」ファイルにはHTMLの記述ができますが、<%=%>の間に記述されたコードはRubyのコードと解釈されて実行されます。
「hello.html.erb」ファイルを以下のように書き換えます。

<h1>こんにちは!</h1>
<p>現在の時刻は<%= Time.now %>です。</p>
<p>Find me in app/views/says/hello.html.erb</p>



ブラウザでhttp://localhost:3000/says/helloを更新します。

ブラウザ更新
ブラウザ更新



実際には「.html.erb」ファイルに直接Rubyコードを埋め込むより、コントローラにインスタンス変数を記述してそれを呼び出す方法を取ります。
インスタンス変数は変数名の頭に「@」をつけます。
「Says」コントローラの「hello」メソッド部分にインスタンス変数「@time」の記述を追加します。


記述追加 【SampleCart/app/controllers/says_controller.rb】3行目

class SaysController < ApplicationController
  def hello
    @time = Time.now
  end

  def goodby
  end
end



次にビューファイル「hello.html.erb」でインスタンス変数「@time」を呼び出します。


記述変更 【SampleCart/app/views/says/hello.html.erb】

<h1>こんにちは!</h1>
<p>現在の時刻は<%= @time %>です。</p>
<p>Find me in app/views/says/hello.html.erb</p>



結果は先ほどと同じになります。

ブラウザ更新
ブラウザ更新



この「Says」コントローラにはすでに「goodby」というアクションを定義済みなので、「SampleCart/app/views/says」フォルダにある「goodby.html.erb」ファイルを以下のように書き換えてみます。


記述編集 【SampleCart/app/views/says/goodby.html.erb】

<h1>さようなら!</h1>
<p>ご訪問ありがとうございました。</p>
<p>Find me in app/views/says/goodby.html.erb</p>



ブラウザでURL「http://localhost:3000/says/goodby」にアクセスして確認します。

ブラウザ確認
ブラウザ確認



続いてこの「hello」と「goodby」の2つ画面を繋ぐリンクを作成してみます。
Railsにはビューテンプレート内で使用可能なヘルパーメソッドが用意されています。
ここでは「link_to()」メソッドを利用します。


記述変更 【SampleCart/app/views/says/hello.html.erb】

<h1>こんにちは!</h1>
<p>現在の時刻は<%= @time %>です。</p>
<br/>
<div><%= link_to "さようなら", says_goodby_path %>と表示する</div>
<br/>
<p>Find me in app/views/says/hello.html.erb</p>



これで「goodby」ビューへのリンクができます。
http://localhost:3000/says/helloにアクセスして確認してみます。

ブラウザ確認
ブラウザ確認



続いて、カレントディレクトリに存在するファイルリストを返すメソッド「Dir.glob()」を利用してみます。


記述追加 【SampleCart/app/controllers/says_controller.rb】7行目

class SaysController < ApplicationController
  def hello
    @time = Time.now
  end

  def goodby
    @files = Dir.glob('*')
  end
end



ビューを編集します。


記述編集 【SampleCart/app/views/says/goodby.html.erb】

<h1>さようなら!</h1>
<p>ご訪問ありがとうございました。</p>
<br/>
<p>カレントディレクトリのファイル名:</p>
<ol>
	<% for file in @files %>
		<li>
			<%= file %>
		</li>
	<% end %>
</ol>
<br/>
<p>Find me in app/views/says/goodby.html.erb</p>



ブラウザでhttp://localhost:3000/says/goodbyにアクセスして確認します。

ブラウザ表示確認
ブラウザ表示確認




03 | アプリケーションの作成】 << 【ホーム】 >> 【05 | scaffoldの生成





↓↓クリックして頂けると励みになります。

YAE C5 CLINIC(札幌美容クリニック)

関連記事(外部サイト)