【Twitterクローン作成】1.トップページの作成

プログラミング




 

ども〜 りょーへいです

 

rails学習が2ヶ月目に突入しました。

やっと学習の成果が出てきたところでしょうか、アプリを見れば機能を理解してrailsで作れる部分は時間をかければ何とか形になるようになったというところ。

だいぶ作成が楽しくなってきました!

 

とはいうものの、railsを始めた当初はめちゃくちゃきつかったです。

HTMLやCSSは書けば表示されるので、理解がそれほど深くなくても時間かければできちゃうので

プログラミング簡単じゃん!

と調子こいていたのですが、そんな喜びも束の間。

Ruby・Ruby on rails・MySQLなどを始めたときはさっぱりわからずrailsで何ができるのかを理解するだけでも1週間近くかかった気がします…

覚えることはめちゃくちゃあるし、コード書いたら書いたでエラーの連続

だんだん理解できてきたような気がして喜んでいてもまた次の難関。

そう。Twitter作成です。

railsを始めた人の多くがまず初めにTwitterの作成でつまずくのではないでしょうか?

僕はこの理解に結構時間がかかりました。

CRUD? ログイン? フォロー? 多-多?

また、覚えることが大量に。。

こいつも1週間くらいかけて頑張って理解しました。

Twitter構造の理解は時間がかかるものの、これを攻略したら他のアプリの作成はトントン拍子で進んだので、ぜひrailsを始めた方にはTwitterの作成には全力で取り組むことをお勧めします!

だからと言ったら何なんですが、1ヶ月間railsをやってみてTwitterクローンをなんとか作れるようになったので、自分のアウトプットも含め重要ポイント抑えつつ何回かに分けてTwitterを作成していきます。

参考にしていただけたら幸いです。

 




なぜTwitterをまず初めに作るのか?

まずなぜTwitterをrails初心者が最初に作るのかを説明します。

webアプリケーションを作る際に基礎となる機能であるCRUD操作という機能があります。

Create

→投稿機能

Read

→自分と他者の投稿を読むことができる機能

Update

→修正機能

Delete

→削除機能

これらのwebアプリケーションの基礎機能に加えて、ログイン機能やサインアップの機能も必要になってきます。

そこでTwitterは上記の機能を包括しているため、初心者はまずTwitterを作るというのが王道のパターンになっています。

ここを学ぶのは最初はきついですが、逆に言ってしまえばここさえできるようになってしまえば基礎に関しては完璧と言っても大丈夫でしょう。

 

ということで早速作っていきます!

 

Twitterに実装する機能

  1. ユーザ登録機能
  2. ログイン機能
  3. ツイート機能
  4. フォロー・フォロバ機能
  5. お気に入り機能

これらの機能をTwitterに実装していきます。

トップページ作成も合わせて全6回に分けてTwitter作成についての記事を書いていきます。

 

トップページの作成

railsプロジェクト作成

ターミナル上での操作

$ rails _5.0.6_ new Twitter --database=mysql

–database=mysqlを忘れずにつけて下さい。そうしないと、railsのデフォルトで用意されている別のデータベースを使うことになってしまいます。

データベースとの接続

ターミナル上での操作

$ rails db:create

 

ページネーションの追加

Gemfileに下記のgemを追加

gem 'kaminari'

gemを追加したら下記を必ず実行します

$ bundle install

gemを読み込むために実行します。

 

トップページの作成

Model

作成するトップページは投稿を表示するためだけのものなので、Modelは必要ありません。

 

Router

Rails.application.routes.draw do
  root to: 'toppages#index'
end

 

Controller

ターミナル

$ rails g controller toppages index

 

app/controllers/toppages_controller.rb

class ToppagesController < ApplicationController
  def index
  end
end

ここではViewで表示するものがないため、特にインスタンスを生成する必要はありません。

後ほどトップページで表示するものが出てきたらその都度、モデルからインスタンスを作成して記述していきます。

 

View

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Twitter</title>
    <%= csrf_meta_tags %>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <%= stylesheet_link_tag  'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </head>

  <body>
    <%= render 'layouts/navbar' %>

    <div class="container">
      <%= render 'layouts/flash_messages' %>

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

↑Bootstrapも追加してあります。

 

エラーメッセージ

app/views/layouts/_error_messages.html.erb

<% if model.errors.any? %>
  <div class="alert alert-warning">
    <ul>
      <% model.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
    </ul>
  </div>
<% end %>

このバリデーションに引っかかった際のエラーメッセージを表示する機能はデフォルトでrailsに内蔵されています。

 

フラッシュメッセージ

app/views/layouts/_flash_messages.html.erb

<% flash.each do |message_type, message| %>
  <div class="alert alert-<%= message_type %>"><%= message %></div>
<% end %>

フラッシュはハッシュの形になります。

 

ナビバー

app/views/layouts/_navbar.html.erb

<header>
  <nav class="navbar navbar-inverse navbar-static-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="/">Twitter</a>
      </div>
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#">Signup</a></li>
          <li><a href="#">Login</a></li>
        </ul>
      </div>
    </div>
  </nav>
</header>

Bootstrapのナビバーについて詳しく知りたい方はこちら→ナビバー

SignupやLoginのリンク先がこの時点では#になっていますが後ほど、追加していきます。

 

トップページ

app/views/toppages/index.html.erb

<div class="center jumbotron">
  <div class="text-center">
    <h1>Twitter</h1>
  </div>
</div>

 

以上でトップページの作成は終了です!

まとめ

この回では、環境構築とトップページの作成を行いました。

実際のところトップページは作っても、作らなくても大丈夫です。

ただトップページがあるとユーザが最初にたどり着くページとなり、投稿やユーザを表示したりと汎用性が増すのでできるだけ作ることをお勧めします。

次はユーザ登録機能の実装です。

Twitterクローン作成】2.ユーザ登録機能