【Rails初心者必見】ブラウザに文字を表示させたい
はじめに：
RailsアプリケーションをVisual Studio Code（以下VScode）で開き、そこからブラウザ（Google Chrome）で表示させたあと、ブラウザに「Hello」と表示させるまでの手順をまとめている。プログラミング初学者がVScodeを用いてRails環境の構築後、スムーズに開発が行えることを目的としている。
この記事を読むことで得られる結果：
ローカル環境（自分のPC）にインストールされているVScodeからRailsアプリケーションをブラウザで表示させ、そのブラウザに自分が表示しない内容が表示できることが可能となる。
開発環境：
- windows 11
- Vscode 1.87.2
- Ubuntu 22.04
- wsl 2.1.5.0
- ruby 3.2.3
- rails 6.1.7
- sqlite3 3.37.2
- node 12.22.9
- nmp 10.5.0
開発環境の構築がまだの方はこちらから：
（前提）ブラウザに文字を表示させる前に：
ファイルの構造を理解しておこう
Railsアプリケーションのファイルの構造
| フォルダ名 | 目的・内容 |
|---|---|
| app/ | モデル、ビュー、コントローラのディレクトリ |
| bin/ | アプリケーションの起動やアップデートやデプロイに用いるディレクトリ |
| config/ | ルーティングや言語設定やその他各種設定ファイルのディレクトリ |
| db/ | データベースに関するディレクトリ |
| lib/ | 複数のアプリケーション間で共有するライブラリ用のディレクトリ |
| log/ | ログファイル用のディレクトリ |
| public/ | Web上に公開するファイル用のディレクトリ |
| storage/ | ファイルのアップロードで保存されるディレクトリ |
| test/ | アプリケーションのテストに使うファイル用のディレクトリ |
| temp/ | 一時ファイル用のディレクトリ |
| vendor/ | 外部ライブラリ用のディレクトリ |
詳細はこちらから↓
ここから使うフォルダは、この2つ。（★）のファイルを使用していく。
| フォルダ名 | 目的・内容 |
|---|---|
| app/ | モデル、ビュー（★）、コントローラ（★）のディレクトリ |
| config/ | ルーティング（★）や言語設定やその他各種設定ファイルのディレクトリ |
ブラウザに文字を表示させるまでの流れ：
1．webサーバーを起動し、ブラウザ表示を行う
1: ターミナルを立ち上げる。
2: アプリケーションのあるディレクトリまで移動する。
cdコマンドを用いて、ディレクトリの移動を行う。
cdコマンドとは
ディレクトリを移動するためのコマンド。アプリケーションに対してファイルを作成する場合は、作成しているアプリケーションのディレクトリに移動していなければならないので比較的良く使用する。
3: サーバーを起動するためのコマンドをターミナルに打ち込み、ctrl＋クリックでブラウザを開く。
rails server
※rails sでもよい。
- ブラウザにRailsのtopページが表示されるかを確認する。（rails7だと少し違う）
Rails６のtop画面
2．コントローラーを作成する
1: 新しいターミナルを立ち上げる。
2: アプリケーションのあるディレクトリまで移動する。
cdコマンドを用いて、ディレクトリの移動を行う。
3: ターミナルからコントローラーを作成するコマンドを入力する。
rails generate controller Posts index
※rails g controller Post indexでも良い。必要なファイルをRailsが生成してくれる。
4: 作成されたファイルを確認する。
Posts_controller.rbというファイルが作成されており、ファイル内には、indexとうメソッドが定義されている。
class PostsController < ApplicationController
def index
//行いたい処理
end
end
ここで少し用語の整理を行う。
●●.controller.rb（コントローラーファイル）とは
ユーザーのリクエスト（URLの入力）に対して、対象のページを開く前に行う処理を記述するファイル。
def メソッド名
//行いたい処理
end
上記記述を行うことで、コントローラファイルの中に行いたい処理を記述することができる。
メソッド(Method）とは
アクションとも呼ばれる。複数（特定）の処理をひとまとめにしたもの。
ここで勘の良い方はお気づきかと思うが、メソッド（index)の処理の部分に「私の要望するページを表示して」という処理を記述しておくと良い。
class PostsController < ApplicationController
def index
//Helloを表示するための処理を記述
end
end
ただ、コントローラもページを表示することはわかっているため、メソッド（index)の処理の部分に記述をせずともページを表示してくれる。
3．ルーティングを設定する。
1: ルーティングの設定を確認する。
実は先ほどのrails generate controller Posts indexで自動的にコントローラに加えてルーティングも自動的に作成されています。
config/routes.rb
Rails.application.routes.draw do
get 'posts/index' #Postscontrollerのindexメソッドを呼び出しますという意味
end
routes.rb（ルーティングファイル）とは
受け取ったURLを認識し、適切なコントローラ内メソッド（アクション）への振り分けを記述するファイル。
ルーティング➡コントローラ（メソッド）へ渡される感じ。
４. ビューを作成する。
1: ビューファイルを確認する。
実は先ほどのrails generate controller Posts indexで自動的にコントローラ、ルーティングに加えて、ビューも自動的に作成されています。
app/views/posts/indexhtml.erb
2: ビューファイルを編集する。
app/views/posts/indexhtml.erb内に<h1>Hello<h1>と入力する。
app/views/posts/indexhtml.erb
3: （http://127.0.0.1:3000/Posts）にアクセスし、ブラウザで表示されるか確認する。
ブラウザでの表示画面
参考サイト
おわりに
今回、 RailsアプリケーションをVisual Studio Code（以下VScode）で開き、そこからブラウザ（Google Chrome）で表示させたあと、ブラウザに「Hello」と表示させるまでの手順をまとめていた。ビューファイルを編集していけば、自分の表示したい内容が表示させれるようになるため、ワクワクしますね。
Discussion