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