【リモートワークで暇?プログラミングやろう!】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;
}


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

こんな感じで、僕はまだ知識不足なので、画面いっぱいにおみくじを表示させることしかできません。

しかし!!これは大きな一歩!!!
Web上で動くアプリを作れたのです!!!



そしてそして、迫さんの紹介動画通りに作ったあと、何も見ずに自分でも作ることもできました。色は青に変えちゃいました。

いやあ、何か作れるって本当楽しい。次は何を作れるようになるのか、楽しみです。

最後まで読んでいただき、ありがとうございます。
皆さんも、何かやってみるなら、「今」だと思います。行動に移せば何かは変わります。きっと。



それでは、また。

〜Skill Hacksが気になった方〜
-Skill Hacks- 動画で学ぶWebアプリ開発講座


〜迫さんは他にも色々やられてるみたいです〜

-Design Hacks- 今日から使える実践デザイン講座

-FrontHacks- フロントエンドプログラミング

-PHP Hacks- PHPプログラミング学習講座

-DietHacks- 現役パーソナルトレーナーのオンラインダイエット講座

-Instagram Hacks- 現役法人コンサルが教えるインスタ運用術

-Blog Hacks- 完全サポート付きブログ講座

-Movie Hacks- YouTubeに特化した動画編集講座

コメントを残す

メールアドレスが公開されることはありません。