Ruby on RailsでWebアプリを作る流れを写真で解説します。
１．ひな形ファイルの作成と初期設定
0.Gemのインストール
ec2-user:~/environment $
gem install rails -v 5
１．アプリのひな形ファイルを作る
ec2-user:~/environment $
rails _5_ new 好きなファイル名
※「_5_」はファイルをバージョン5で作るという意味。
※最新のバージョンは6。
※5を使っている人が多いのでしばらく5で作る。
２．作ったファイルにアクセスする
ec2-user:~/environment $
cd ~/environment/ファイル名
※入力の途中でTabキーを押すと予測変換してくれる。
３．sqlite3のバージョンを設定する
Gemfileを開き、バージョンを書き換える
gem ‘sqlite3’のあとに
,’~> 1.3.6′
を追加して保存する。
バージョンの設定を更新する
ec2-user:~/environment/sample-app $
bundle update
※1.3.6じゃなくても「1.3.○」になっていればＯＫ。
※この設定をしないとエラーがおきる。
４．サーバーを立ち上げる
ec2-user:~/environment/sample-app $
rails s -b $IP -p $PORT
５．ブラウザに表示されるか確認する
「Preview」ボタンはブラウザ幅を広げないと出てこない
Railsの画面が表示されればＯＫ。
・「cd ~/」でファイルにアクセスしている？
・sqlite3の設定は済んでいる？
６．サーバーをとめる
【コマンド】
ec2-user:~/environment/sample-app $
control＋c
２．各種ファイルの作成
１．コントローラをつくる
コントローラの役割は、
「ビューに値を渡すこと」
Webページで表示したいことがひとつしかなければ、コントローラーは必要ない。
ページごとに表示を変えたいときに、コントローラーが威力を発揮する。
※ページごとに表示内容を変えることを「動的なページ」と言う。
ユーザがアクセス→ルーティング→コントローラ→モデル、ビュー
【作り方】
ec2-user:~/environment/sample-app $
rails g controller 好きな名前
・名前は末尾にsをつけた複数形にする。
・そのあと「アクション名」を書くと、対応するビューのHTMLのファイルも自動で作られる。
【保存される場所】
app/controllers
【ファイル名】
複数形_controller.rb
【記述内容】
def アクション名
処理
end
defの中には、インスタンス変数を定義できる
【ファイルの削除】
コントローラのファイルは複数形の名前で作成することが原則。
ファイル名を間違えたときは、削除して作り直しが必要。
ec2-user:~/environment/sample-app $
rails destroy controller ファイル名
２．ルーティングの作成
ルーティングは、
ユーザがアクセスしたURLによって、どのコントローラにアクセスするか振り分ける役割。
ユーザ→ルーティング→コントローラ→モデル、ビュー
【作り方】
作らない。
もともとあるファイルを編集する。
【保存場所】
config > routes.rb
【ファイル名】
routes.rb
【記述内容】
※最初から入っているコメントは消してよい
Rails ･･･ do
get “/URL”, to:コントローラ名#アクション名”
end
【意味】
“このURLにアクセスされたら、このコントローラの中のこのアクションを呼び出せ”
３．ビューの作成
ビューの役割は、HTMLを表示すること。
ユーザ→ルーティング→コントローラ→ビュー、モデル
【作り方】
対応させるコントローラ名のフォルダを選んで右クリック「new file」で作成する。
app > views > コントローラ名 > ここ
名前は「アクション名.html.erb」
※保存場所をまちがえないように注意！
【記述内容】
通常のHTMLとRubyのプログラムを記入する。
【Rubyの書き方】
・Rubyのコードは<% %>の中に記入する。
・それをHTMLのpタグで囲むと段落として表示できる。
たとえば、
<% name = “taiyo” %>
<p><%= name %></p>
これで、
変数nameに文字のtaiyoを入れろ。
変数nameを段落で表示しろ。
となる。
「変数の定義」など画面に表示させる必要がなければ、
<% name = “taiyo” %>
のように、
<%のあとに=はつけない。
画面に表示させたい場合は、
<%= name %>
のように、
<%のあとに=をつける。
ちなみに、
コントローラファイルで定義した「インスタンス変数」を使うこともできる。
<%= @変数 %>
【HTMLの大元のファイルがある！】
今まで作ってきた「アクション名.html.erb」はHTMLのbodyタグに入る「内容の部分」を作るファイル。
headタグが記述された大元のファイルは別にある。
【保存場所】
app > views > layouts > application.html.erb
これが大元のHTML。
titleの変更などはここからやる。
４．デザインをあてる
【CSSファイルの保存場所】
app > assets > style sheets >
application.css（全ページに適用されるCSS）
コントローラ名.scss（個々のページに適用されるCSS）
【Bootstrapを使う方法】
バージョン3.3.7を選択
「Getting started」
「Bootstrap CDN」
CSSとJavaScriptのリンクをコピーしてapplication.html.erbに貼り付ける。
「CSS」はheadタグに貼る。
「JavaScript」はbodyタグに貼る。
※jqueryのスクリプトは入れなくてOK。
Railsには最初から入っている！
あとは、
作りたいもののクラス名をコピペして使う。
【書き方】
<%= submit_tag “計算をする”,class:”クラス名” %>
5．モデルをつくる
モデルの役割は、
「データベースにデータを保存したり、データベースからデータを取り出すこと」
ユーザがアクセス→ルーティング→コントローラ→モデル→データベース
【作り方】
ec2-user:~/environment/sample-app $
rails g model User name:string age:integer
rails g model モデル名 カラム名:データの形式 ・・・・・・
【データの形式】
255文字以下の文字はstring
255文字以上の文字text
整数はinteger
実数はfloat
・モデル名は大文字からはじまる単数形にする。
・「rails g model」とすると、モデルとマイグレーションファイルの2つのファイルが生成される。
マイグレーションファイルとは、
テーブルのカラムとその形式が記述されたファイル。
テーブルのカラムはnameとageとmailですよー
nameは文字が入りますよー
ageは整数が入りますよー
mailは文字が入りますよー
のようなファイル。
| id | name | age | |
|---|---|---|---|
【モデルファイル】
app/models/user.rb
【マイグレーションファイル】
db/migrale/20191013・・・
6.データベースをつくる
データベースは、エクセルのシートのようなイメージ。
usersテーブル
| id | name | age | |
|---|---|---|---|
| 1 | a | 22 | a@g.com |
| 2 | b | 30 | b@g.com |
| 3 | c | 26 | c@g.com |
行をレコード
列をカラム
見出し（カラム）は自分で決めるものだが、idだけは自動的に付与される。
idはデータが保存された順に1から自動で振られていく。
【データベースの作り方】
ec2-user:~/environment/sample-app $
rails db:migrate
とすると、マイグレーションファイルをもとにデータベース（テーブル）が生成できる。
テーブル名は「rails g model User」でモデルを作った時のデータをもとに、小文字で複数形の名前が自動的につく。
【データベースができているか確認する】
ec2-user:~/environment/sample-app $
rails dbconsole
これで、SQL言語が入力できるモードとなる。
sqlite>
.tables
「users」と表示されれば「users」テーブルができているということなのでOK。
sqlite>
.exit
でデータベース確認モードを終了できる。
「.tables」と「.exit」は、SQL言語。
SQLは、この２つの命令文だけ覚えればOK。
【データベースを操作する】
モデルとマイグレーションファイルとデータベースを作ったらデータが操作できるようになる。
追加、読み込み、更新、削除が可能となる。
この４つの処理ができれば大抵のWebアプリケーションが作れるようになる。
この４つの処理をCRUD処理という。
Create、Read、Update、Deleteの頭文字。
コンソール上でCRUD処理ができるモードにする
ec2-user:~/environment/sample-app $
rails c
で、コンソールでRuby on Railsの言語を使ってCRUD処理ができるようになる。
データの追加（Create）
2.6.3 :001 >
User.create(name:”Aくん”,age:22)
データの読み込み（Read）
①idで検索する場合
2.6.3 :001 >
User.find(1)
でidが1のデータを参照できる。
データベースに保存されるidは１からはじまる。
配列のように0からではない。
②見出し（カラム名）で検索する
2.6.3 :001 >
User.find_by(age:”22″)
でageが22の人を検索できる。
ageが22の人が複数いる場合、1番古いデータしか表示してくれない。
③複数のデータを取得する
2.6.3 :001 >
User.where(age:22)
④全てのデータを取得する
2.6.3 :001 >
User.all
データの編集（Update）
データを編集するには、まず「どのデータを編集するのか」データを取得してくる必要がある。
取得→書き換え→保存という流れ。
【取得】
2.6.3 :001 >
change_user = User.find(3)
Userの中からidが3の人を探し出してきて変数change_userに入れろ。
【書き換え】
2.6.3 :001 >
change_user.age = 35
change_userのageを35にしろ。
【保存】
2.6.3 :001 >
change_user.save
change_userのデータを保存しろ。
※取得の部分は.find_by(name:”B”)としてもよい。
テーブルの全てのデータを配列に入れて出力する
users = User.all
users
とすると、
Userの中の全てのデータを変数usersに入れる。
配列となっているので、番号指定でデータを参照できる。
データの削除（Delete）
データの削除も、まずはどのデータを削除するのか、データを取得する必要がある。
【取得】
2.6.3 :001 >
user = User.find(1)
【削除】
2.6.3 :001 >
user.destroy
userは変数、Userはモデル名。
データベース操作モードを終了させる
2.6.3 :001 >
exit
