2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【Rails】簡単な投稿アプリの作成

Last updated at Posted at 2021-05-22

目的

Railsを使用し、簡単なアプリを作成する。

開発環境

macOS: Big Sur
rubyバージョン: 2.6.5
railsバージョン: 6.0.0
app名: test-app

手順

  1. アプリの立ち上げ
  2. 文字コードの変更
  3. データベースの作成
  4. Gemのバージョン変更と追加
  5. リセットCSSの設定
  6. 要素サイズの調整
  7. ルーティングの設定
  8. コントローラーの作成
  9. モデルの作成
  10. 投稿一覧の表示
  11. 投稿ページの実装
  12. 最終確認

アプリの立ち上げ

早速はじめていきましょう!
まずはアプリを立ち上げます。

ターミナル
rails _6.0.0_ new test-app -d mysql

アプリの立ち上げ自体はrails new アプリ名でできます。
今回は下記のような指定を追加しています!

_6.0.0_でrailsのバージョンを指定。
-d mysqlでdbを指定。

文字コードの変更

続いて文字コードの変更を行います。
下記のようにutf8mb4utf8に変更しましょう!

config/database.yml
default: &default
  adapter: mysql2
  # encoding: utf8mb4
  encoding: utf8
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: root
  password:
  socket: /tmp/mysql.sock

utf8が1文字あたり3バイトであるのに対し、utf8mb4は1文字あたり4バイトになります。
MySQLではデフォルトで3バイトの文字までしか扱えないため、今回はutf8を使用していきます!

#データベースの作成

次にデータベースを作成していきましょう!

ターミナル
rails db:create

これでデータベースの作成ができました!

Gemのバージョン変更と追加

次に既にあるGemのバージョンを変更する作業と、Gemを追加する作業を行います!
下記の2点を行いましょう!

  • Gemfile内で、Gemであるmysql2のバージョンを0.5.3へ変更
  • Gemfile内で、Gemであるpry-railsを追加
Gemfile
source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby '2.6.5'

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 6.0.0'
# Use mysql as the database for Active Record
gem 'mysql2', '0.5.3'
# Use Puma as the app server
gem 'puma', '~> 3.11'

#中略

gem 'pry-rails'

記述できたら、下記コマンドでインストールしましょう!

ターミナル
% bundle install

こちらも忘れずに!

ターミナル
% rails s

リセットCSSの設定

続いてリセットCSSを設定していきます!
今回はYahoo!が開発した「YUI 3」というリセットCSSを使用します。

app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <title>ChatApp</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>
#中略

</html>

これで設定完了です!

要素サイズの調整

続いて要素サイズの調整を行います。
例えば、ある要素にwidth: 500pxを指定し、あわせてpadding: 0 50pxborder: 5px solid #fffを指定すると、横幅は500 + 50×2 + 5×2で合計610pxになります。
これでは、横幅500pxのつもりでレイアウトを作成したとき、表示が崩れてしまいます。

対策として下記のように記述します!

app/assets/stylesheets/application.css
 * {
  box-sizing: border-box;
}

これで、paddingやborderの設定を行っても、要素の大きさはwidthやheightで指定したサイズのまま変わらなくなります。

ルーティングの設定

一通り準備は出来たので、アプリの実装を行っていきます!
まずはルーティングの設定を行います。

config/routes.rb
Rails.application.routes.draw do
  root to: 'posts#index'
  resources :posts, only: :index
end

コントローラーの作成

続いてコントローラーの作成です!

ターミナル
rails g controller posts

rails g controller コントローラー名でコントローラーが作成できます。
rails gのgは、generateの略で、生成するという意味です。
注意点としてコントローラー名は必ず複数系にすること!

モデルの作成

ターミナル
rails g model post

rails g model モデル名でモデルが作成できます。
モデル名は単数形にしましょう!

db/migrate/20xxxxxx_create_posts.rb
class CreatePosts < ActiveRecord::Migration[6.0]
  def change
    create_table :posts do |t|
      t.text :memo
      t.timestamps
    end
  end
end

マイグレーションファイルに、必要なカラム名の記述をします。

ターミナル
rails db:migrate

記述したら、マイグレーションを実行しましょう!

投稿一覧の表示

投稿一覧を表示させるため、コントローラーに記述を追加します。
Post.allで投稿されたデータを取得します!

app/controllers/posts_controller.rb
class PostsController < ApplicationController
  def index
    @posts = Post.all
  end
end
app/views/posts/index.html.erb
<% @posts.each do |post| %>
  <%= post.memo %>
  <%= post.created_at %>
<% end %>

eachメソッドで投稿内容を表示させます!

投稿ページの実装

一覧ページ実装と同様に投稿機能も実装していきます!

config/routes.rb
Rails.application.routes.draw do
  resources :posts, only: [:index, :new]
end
app/controllers/posts_controller.rb
class PostsController < ApplicationController
  def index
    @posts = Post.all
  end

  def new
    @post = Post.new
  end

  def create
    post = Post.create(post_params)
    if post.save
      redirect_to root_path
    else
      render :new
    end
  end

  private
  def post_params
    params.require(:post).permit(:memo)
  end
end
app/models/posts.rb
class Post < ApplicationRecord
  validates :memo, presence: true
end
app/views/posts/index.html.erb
<%= link_to "投稿ページ", new_post_path %>
<% @posts.each do |post|%>
  <%= post.memo %>
  <%= post.created_at %>
<% end %>
app/views/posts/new.html.erb
<h1>投稿ページ</h1>
<%= form_with model: @post, local: true do |form| %>
  <%= form.text_area :memo, placeholder: "memo", rows: "10" %>
  <%= form.submit "投稿する" %>
<% end %>
app/views/posts/create.html.erb
<h1>投稿が完了しました</h1>
<%= link_to "トップページへ戻る", root_path %>

最終確認

投稿一覧ページから新規投稿ページへいき、新規投稿してみましょう!
投稿一覧ページへ戻り、投稿内容が表示されていれば成功です!

最後に

以上で実装完了です!
今回はCSSを編集していないため、簡素なものになっています。必要に応じて各自編集してください。
では。

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?