【あなたにも簡単にできる！】おみくじのWebアプリ作ってみた

どうも、どせぜんです。

皆さんそろそろリモートワーク、自宅待機にも慣れてきましたでしょうか。
慣れるもクソもないかもですが、自分に使える時間が多くなった時にただボーッとSNSを眺めたり、Youtubeを観たりしているだけではコロナ収束後にまた「時間が足りない」とかいうことになると思います。

正直こんなに自分の時間を持てることは今後少ないと思います。しかも学校ならば在籍しつつも、仕事ならば給料をもらいながら。

行動するなら、「今」です。

ということで、SkillHacks 8日目、やってきました。
前回はエラーに対処してWebアプリ作れなかったのですが、今回はできましたぜ。

それでは、どうぞ。

Railsでアプリを作る手順

はい、まずはアプリの雛形を作製します。ここ注意なんですが、Railsが6.0にアップデートされているのですが、使うのは5.0なので、Railsのバージョンを5に指定してアプリを作製しています。

rails _5_ new sample-app

次にコントローラーを作製します。

rails g controller greets

greets という名前のコントローラーを作製

gはgenerateという意味で、Railsの決まりとして、controllerの名前は複数形にしないといけない、という注意点があります。

アクションの定義

/controller/greets_controller.rb　を開き、classとendの間に

classほにゃらら
    def hello
       render plain: "hello"
    end
end

を挿入（helloと画面上に表示する処理）

どういう時にそのアクションを実行するか

/config/routes.rb　の中のほにゃらら doとendの間に

ほにゃらら do
   get "/aisatsu", to:"greets#hello"
end

これは、/aisatsu がURLの末尾に追記された時、greetsという名前のcontrollerの中に記載されている、helloというアクション(先ほどdefで定義)を実行する、という意味です。

間違えて作製してしまったcontrollerを削除するためには、関連ファイルも消せるため、

rails destroy controller ○○

を使うようにしましょう。

また、コントローラーを作って、さらに中のアクションまで作れるコマンドもあります。

rails g controller memos index

さらにさらに、現在定義されているルーティング（どういう時に定義したアクションを実行するか）の一覧を見るには、

rake routes

というコマンドが使えます。

ここで、さっきまでは、/controller/greets_controller.rb　に直接アクションを定義したところで文字を表示させていましたが、それだと簡単な文字とかしか表示できないです。
そこで、view でHTMLを使ってやるのが普通です。

ということで、アクションの定義だけして、

classほにゃらら
    def hello
    end
end

/views/greets/hello.html.erb を作製し、HTMLの文を記載します。
例えば、

<h1>こんにちは</h1>
<p>私の名前はどせぜんです。</p>

みたいな。

つまり、
/views/コントローラー名/アクション名.html.erb というふうに対応させて作成すれば、HTMLを用いたちょっと凝った文字とかも表示させられるんですね。すごい。

ここで、rubyを埋め込みたいときは、

<%= ○○ %>
または、
<% ○○ %>

みたいな感じで、○○を囲ってやればいいです。

この二つの違いとしては、

<%= ○○ %>
こっちは○○の処理されて画面上に表示する。

または、

<% ○○ %>
こっちは○○の処理はするが表示はしない。（if文とかで使う）

みたいな感じです。

/controller/greets_controller.rb　の中で

アクションの定義の中で、@○○ = △△ とかにすると、controllerからviewに値を渡せます。
例えば、

classほにゃらら
    def index
        @name = "どせぜん"
        @age = 23
    end
end

と記載して、viewに渡すと、

/views/greets/hello.html.erb　

<h1><%= @name%>さん、ようこそ</h1>

<% if @age < 20 %>
    <p>このサイトは20歳以上のみ閲覧可能です。</p>
<% else %>
    <p>あなたはOK</p>
<% end %>

このように使えて、名前や年齢を別の場所で定義しておくことで、見やすくなり、条件分岐とかも便利になるって感じです。

この @○○ をインスタンス変数と言います。

ところで、HTMLファイルをいじってるけど前までやってたテンプレートみたいなのはいらないのか？と考えたそこのあなた。鋭いですね。

実は、
/views/layouts/application.html.erb　というHTMLファイルがあり、それが大元となっているのです。

<!DOCTYPE html>
<html>
  <head>
    <title>始めてのWebサービス</title>
    <%= csrf_meta_tags %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

この中のyield ってとこにさっき編集したhello.html.erb の内容が埋め込まれる。ことで、結局今前やってたみたいな反映のされ方をするわけです。

また、大元となるCSSファイルも存在します。
/asets/stylesheets/application.css
ここでやったものは全てに反映されます。
例えば、

p {
color :red;
}

とすれば、全てのpタブの要素が赤文字になります。

Railsでおみくじアプリを作ってみる

~environment/ に移動して、アプリの雛形を作製。

rails _5_ new omikuji

として、おみくじアプリの雛形を作製。補足動画の通りに修正箇所は修正。

コントローラーを作製し、

rails g controller omikujis

~environment/omikuji/controllers/omikujis_controller.rb　を開き、classほにゃららとendの間にindex という名前のアクションを定義し、おみくじの結果をインスタンス関数に配列をぶち込んで作製。

classほにゃらら
     def index
         @omikuji = ["大吉", "中吉", "小吉"]
     end
end

その後、~encironment/omikuji/views/omikujis/index.html.erb を開き、
controllerから渡された@omikujiの中から、.sampleでランダムで取り出して表示させるアクションを記載！！

<h1>おみくじアプリ</h1>

<p class="omikuji"><%= @omikuji.sample %></p>

あとは体裁をゴリゴリ整え、、、

*{
    text-align:center;
}

.result{
    margin: 30px auto;
    color: red;
    width: 200px;
    height: 200px;
    font-size: 30px;
    border: 2px solid red;
    border-radius: 50%;
    line-height: 200px;
}

そしてこれらのプロセスを経て作製したおみくじアプリがこちら！！！