プログラミングで暮らしをハック
ITで暮らしを便利にするブログ
Web制作のノウハウ

Ruby on RailsでWebアプリを作る!写真付きで解説

Ruby on RailsでWebアプリを作る流れを写真で解説します。

1.ひな形ファイルの作成と初期設定

0.Gemのインストール

ec2-user:~/environment $

gem install rails -v 5

 

1.アプリのひな形ファイルを作る

ec2-user:~/environment $

rails _5_ new 好きなファイル名

 

※「_5_」はファイルをバージョン5で作るという意味。

※最新のバージョンは6。

※5を使っている人が多いのでしばらく5で作る。

 

2.作ったファイルにアクセスする

ec2-user:~/environment $

cd ~/environment/ファイル名

 

※入力の途中でTabキーを押すと予測変換してくれる。

 

 

3.sqlite3のバージョンを設定する

Gemfileを開き、バージョンを書き換える

 

 

gem ‘sqlite3’のあとに

,’~> 1.3.6′

を追加して保存する。

 

 

バージョンの設定を更新する

ec2-user:~/environment/sample-app $

bundle update

 

※1.3.6じゃなくても「1.3.○」になっていればOK。

※この設定をしないとエラーがおきる。

 

4.サーバーを立ち上げる

ec2-user:~/environment/sample-app $

rails s -b $IP -p $PORT

 

5.ブラウザに表示されるか確認する

「Preview」ボタンはブラウザ幅を広げないと出てこない

Railsの画面が表示されればOK。

 

表示されない時は

・「cd ~/」でファイルにアクセスしている?

・sqlite3の設定は済んでいる?

 

 

6.サーバーをとめる

【コマンド】

ec2-user:~/environment/sample-app $

control+c

 

2.各種ファイルの作成

1.コントローラをつくる

コントローラの役割は、

「ビューに値を渡すこと」

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 ファイル名

 

2.ルーティングの作成

ルーティングは、

ユーザがアクセスしたURLによって、どのコントローラにアクセスするか振り分ける役割。

 

ユーザ→ルーティング→コントローラ→モデル、ビュー

 

【作り方】

作らない。

もともとあるファイルを編集する。

【保存場所】

config > routes.rb

【ファイル名】

routes.rb

 

【記述内容】

※最初から入っているコメントは消してよい

Rails ・・・ do

  get “/URL”, to:コントローラ名#アクション名”

end

 

【意味】

“このURLにアクセスされたら、このコントローラの中のこのアクションを呼び出せ”

 

3.ビューの作成

ビューの役割は、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の変更などはここからやる。

 

4.デザインをあてる

【CSSファイルの保存場所】

app > assets > style sheets >

application.css(全ページに適用されるCSS)

コントローラ名.scss(個々のページに適用されるCSS)

 

【Bootstrapを使う方法】

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は文字が入りますよー

 

のようなファイル。

idnameagemail

 

【モデルファイル】

app/models/user.rb

【マイグレーションファイル】

db/migrale/20191013・・・

 

6.データベースをつくる

データベースは、エクセルのシートのようなイメージ。

usersテーブル

idnameagemail
1a22a@g.com
2b30b@g.com
3c26c@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は、この2つの命令文だけ覚えればOK。

 

【データベースを操作する】

モデルとマイグレーションファイルとデータベースを作ったらデータが操作できるようになる。

追加、読み込み、更新、削除が可能となる。

この4つの処理ができれば大抵のWebアプリケーションが作れるようになる。

この4つの処理を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は1からはじまる。

配列のように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