What's New Qiita

20210101のRailsに関する記事は14件です。

  • 投稿日：2021-01-01T23:58:46+09:00

記事の並べ方(昇順・降順)について

自己紹介

こんにちは！
今回初めて投稿をします。
同じことで何度も悩んでしまわない為の、自分用のメモとして、またアウトプットする事によって記憶の定着に繋がればと思い始めました。

それでも、もしかするとどなたかに拝見していただける機会があるかもしれませんので、少しだけ自己紹介をさせていただきます。
2020年10月中旬より本格的にプログラミングの勉強をスタートさせ、現在はプログラミングスクールも活用し、未経験の中途という形でエンジニア転職を目指している者です。

さて今回の本題に！

投稿された記事をIDの若い順に並べてください。

この言葉にまず「若い順」ってどういう意味だろうと疑問に感じました。
結果から言うと、答えはそのままの意味で1.2.3.4....となるような数字の小さい順という事でした。
この若い順が一般的な昇順(asc)、その反対が降順(desc)になります。

今回のIDの話で例えると、
・昇順：IDが小さい順。古い記事が上にくる。
・降順：IDが大きい順。新しい記事が先頭にくる。

今回は、コントローラに記述する方法を使用したので残しておく事にします。

1.昇順、降順どちらも指定しない場合。
デフォルト値は降順になります。
スクリーンショット 2020-12-09 18.38.38.png

2.昇順、降順指定をする場合。
掲載画像のコメントにも載せましたが、orderを記述する場合は手前のallは省略可能。
スクリーンショット 2020-12-09 18.56.56.png

何かを投稿するようなSNSなどには必ず必要な表記になりそうですね。
忘れないようにここに記して、今回の投稿は以上で終了とさせていただきます。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-01-01T22:36:05+09:00

【Rails】slick(スライダー機能)を簡単に導入する方法

はじめに

簡単？に実装できると思います。

slickとは画像等をスライドショーのように表示させる機能を付けられるjQueryプラグインです。

本記事は導入方法と簡単な実装のみを紹介します。

「サイトをおしゃれに仕上げたいから、もっと発展的なことを教えてくれ！」という方。
ごめんなさい。

hamlやslimではなく普通のhtmlで記述していますので、初学者の人にとっても分かりやすいはず。。
haml.slimで書かれてる記事多すぎだぜ(つらい)

また私が最初に導入してエラーを吐いたところも解決方法とともに紹介していきます。
誰かが躓くところは皆転ぶ！

こんな人に向けて

１．haml.slimがよくわからない初学者
２．rails に slickを導入したいけど方法が分からない人
３．他の記事を見ながら実装し、エラーを吐かれて詰んだ人　(この記事で詰まったらごめんなさい)

今回はrails 5.2.4を使っています。
またOSはWindowsですが、macでも同じだと思います。(見た目は少し違うかも。。。)

１．導入準備

１．rails newコマンドでアプリケーションを既に作成していること
２．rails sでサーバーを起動したとき、ページが表示されるようになっていること(ルート・コントローラ・ビューが正しく記載されている)

上記の2点を前提として続けていきます。

まずslickはjQueryを使っていますので、

Gemfile
gem "jquery-rails"

を記述し、インストールします。

ターミナル
bundle install

インストールしたら別の場所にも以下を記述します。

app/assets/javascripts/application.js
下2行を追加(←日本語の文字はいらないです)
//= require jquery
//= require jquery_ujs

//= require rails-ujs
//= require activestorage

//= require_tree .

以下の文は一応消しておきます。

//= require turbolinks

これで準備は完了です。
さっそく導入していきます。

２．slickを導入する

１．公式からファイルをダウンロード
２．自分のアプリケーションの特定のフォルダにファイルを入れる
３．htmlに特定の記述をする
４．scssに特定の記述をする
の3段階で導入できるので分けて説明します。

２－１．公式からダウンロード

slickからファイルをダウンロードします。
スクリーンショット (16)_LI.jpg
このボタンでダウンロードを開始します。(下の方にスクロールすると上記のような画面があります)

２－２．特定のフォルダに入れる

slick-1.8.1.zip
というフォルダがダウンロードされます。

そこから　slick-1.8.1　→　slick と進んでいくとファイルがいくつかあります。
その中から
・slick.min.js
・slick.scss
・slick-theme.scss
の3つを使います。(最低限必要なものだけを)

ファイル 格納場所
slick.min.js app/assets/javascripts/
slick.scss app/assets/stylesheets/
slick-theme.scss app/assets/stylesheets/

上記の場所に入れてください。

２－３．htmlに記述をする

htmlに記述します。

app/views/layouts/application.html.erb
  <head>
    <title>Title</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

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

    <!--この下2行を追加-->
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>

    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

  </head>

２－４．scssに記述をする

scssをインポートするために、以下の記述をします。

app/assets/stylesheets/application.scss
 *= require_tree .
 *= require_self
 */

*以下の2行を追加
@import "slick-theme"; 
@import "slick";

これで導入はできました。

３．slickを使用する

導入はできたのでこれから実際に使ってみます。

今回は基本的な以下の機能を実装します。(アレンジする場合は他の人の記事を見てくださいね)
・下にドットを表示する
・ドットを押せば写真がスライドする
・画像をフリックするとスライドする

html.erb
<div class="hoge">
    <div class="nest-hoge">aaa</div>
    <div class="nest-hoge">bbb</div>
    <div class="nest-hoge">ccc</div>
</div>

hogeやnest-hogeの部分は何でもいいです。(cssの命名規則は分からない。。)

app/assets/javascripts/application.js
$(function() {
    $('.hoge').slick({
        dots: true,
    });
});

親クラスを指定してあげれば動きます。

これで実装できました。(簡単なのか？)

４．エラー集(私のミスを含む)

最後に私が初めてslickを導入したときに起きたエラーを紹介します。
笑える人は笑ってください。

４－１．bundle install 忘れ

動かない

gemを追加しているので、bundle installをしましょう。

４－２．ファイル格納場所間違え

正しい位置に入れましょう。

間違ってもjsのファイルをstylesheets下に入れないように

４－３．htmlに未記述

ファイルをダウンロードしているし、記述はいらないと思ってました。
スクリーンショット (18).png
デベロッパーモードでエラーがこんにちは
記述は必要みたいです。

４－４．application.jsで注意マークが

スクリーンショット (23).png

もう無理。。。どうすればいいのだろう。。。
スクリーンショット (25).png

18行目に注目。

/*global $*/

を追加すればOKみたいです。

さいごに

以上で終わりです。
スライダープラグインはslickだけでなくswiperなどいろいろなものがあります。
まとめサイトもありますので参考にしてみてください。

ではでは。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-01-01T22:29:45+09:00

【Rails奮闘記/Railsチュートリアル編】Railsチュートリアル3章で学んだこと

はじめに

Railsチュートリアル3章を終えました。
実務に入った上で、ルーティング・コントローラー・ビュー周りとテストを学習しました。
学習した中で、実務に使える内容をまとめました。

コントローラー生成のコマンド

コントローラーを生成するときのコマンドは以下のようになります。

$ rails g controller （コントローラー名） （アクション名）

generateスクリプトではアクション名をまとめて指定することができる。
Railsチュートリアルでは、アクション名がhome、help、aboutに当たる。

もし、例えばコントローラー名のスペルを間違えた時など、コントローラーをコマンドですでに生成してまったら普通だったら1つ1つのファイルを削除することを考えるかと思います。
では、どうすれば良いか？
そんなときに便利なコマンドが以下のコマンドで、生成したコントローラーのファイルを一挙に削除することができます。

$ rails destroy controller （コントローラー名） （アクション名）

これだけで生成したコントローラーのファイルを削除して元に戻すことができます。

モデルの生成のコマンド

コントローラー生成と同じ要領で、モデル生成するときは以下のコマンドを叩きます。

$ rails g model （モデル名） （カラム名: データ型）

すでに生成してしまったモデルを生成する前に戻したいときは、以下のコマンドを叩きます。

$ rails destroy model （モデル名）

モデルを削除したいときはモデル名のあとの引数は不要です。

テスト

Railsチュートリアルでは、コントローラーのテスト（3章）、モデルのテスト（6章）、統合テスト（7章）の3つ。
テストは以下の順番で行う。
1.失敗するテストを最初に書く
2.アプリケーションのコードを書いて成功させる（テストをパスさせる）
3.必要ならリファクタリングを行う
これがテスト駆動サイクルと呼ばれるものになる。

minitest reporters

minitest-reportersはgemの1つであり、これを使えるようにすることで、テスト成功と失敗が見やすくなります。
RailsのテストはRSpecが主流ですが、Railsチュートリアルではミニテストで最後までやっていこうと思います。

Guard

Guardの設定を終えたら、以下のコマンドを叩きます。

$ bundle exec guard

コマンドを実行することで、コントローラーのファイルを変更すると、そのコントローラーのテストを自動で実行してくれます。
コマンドを終了したいときは、Ctrl + Dで終了することができます。
テスト自動化は本当に便利なので、初期設定を早めに終わらせておいたほうが開発に専念できそうだなとQiitaで書いていて思いました。

終わりに

以上がRailsチュートリアル3章のまとめになります。
自分の中で実務に活かせそうなことをQiitaにまとめした。
こんな感じで各章を終えたら、どこが実務で生きるかをまとめていこうと思います。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-01-01T22:27:58+09:00

Simple Calendar gemの導入・基本的な使い方

RailsのgemであるSimple Calendarを使ったアプリ開発を行っているので、後学のために、Simple Calendarの導入と基本的な使い方を説明します。

内容的にはsimple_calendarの公式GitHubの日本語訳になります。

Simple Calendarとは

カレンダー表示機能を簡単に実装できるようにしてくれるgemです。

実行環境

  • Ruby 2.6.5
  • Rails 6.0.3.4

Simple Calenderのインストール

Gemfileに以下のように記述し、ターミナルでbundle installを入力します。

Gemfile
gem "simple_calendar", "~> 2.0"
ターミナル
bundle install

application.cssファイルにデフォルトのスタイルシートを読み込みます。

app/assets/stylesheets/application.css
*= require simple_calendar

もしくはapplication.scssファイルに下記の記述をします。

app/assets/stylesheets/application.scss
@import "simple_calendar";

メソッドを使ってビューファイルにカレンダーを生成

Simple Calendarのメソッドを使ってビューファイルにカレンダーを生成する方法を説明します。

month_calendarメソッド

month_calendarメソッドを使えば月間カレンダーを生成できます。

month.html.erb
<%= month_calendar do |date| %>
  <%= date %>
<% end %>

スクリーンショット 2021-01-01 21.52.59.png

week_calendarメソッド

week_calendarメソッドを使えば週間カレンダーが生成できます。
オプションのnumber_of_weeksで何週分表示するかを設定できます。number_of_weeksを記述しない場合は、デフォルトで１週分表示します。

week.html.erb
<%= week_calendar(number_of_weeks: 2) do |date| %>
  <%= date %>
<% end %>

スクリーンショット 2021-01-01 21.55.36.png

calendarメソッド（表示日数をカスタムする）

calendarメソッドを使えばカレンダーの表示日数をカスタムすることができます。
オプションのnumber_of_daysで何日分表示するかを設定できます。number_of_daysを記述しない場合は、デフォルトで4日分表示します。

custom.html.erb
<%= calendar(number_of_days: 4) do |date| %>
  <%= date %>
<% end %>

スクリーンショット 2021-01-01 22.01.07.png

Simple Calendarの導入から基本的な使い方まではここまでとなります。

Simple Calendarの見た目を自分で編集する

各カレンダーの見た目を編集したい場合は下記のコマンドを入力して、ビューファイルを自身のアプリにコピーします。

ターミナル
rails g simple_calendar:views

#以下の通りsimple_calendarフォルダと各ビューファイルが自身のアプリに生成されます
create  app/views/simple_calendar
create  app/views/simple_calendar/_calendar.html.erb
create  app/views/simple_calendar/_month_calendar.html.erb
create  app/views/simple_calendar/_week_calendar.html.erb

参考資料

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-01-01T21:56:59+09:00

Gemを追加したら、There was an error parsing `Gemfile`と言われる

対象者

タイトルの通り、Gem追加したら、There was an error parsing Gemfileというエラーメッセージが出た方

エラー文を読む(現状把握)

fakerを開発環境、テスト環境に入れようとGemfileに記載。

group :development, :test do

   **gem 'faker'** 　←これを追加

end

そして、bundle installを試みるも、

bundle install

タイトル記載のエラーが出る。

[!] There was an error parsing `Gemfile`: You cannot specify the same gem twice with different version requirements.
You specified: faker (>= 0) and faker (= 2.1.2). Bundler cannot continue.

 #  from /Users/XXXX/XXXX/XXXX/Gemfile:88
 #  -------------------------------------------
 #  gem 'dotenv-rails'
 >  gem 'faker',                   '2.1.2'
 #  gem 'carrierwave'
 #  -------------------------------------------

エラー文を読むと、

Gemfile`の解析にエラーが発生。異なるバージョン要件で同じgemを2回指定できません。
faker (>= 0) と faker (= 2.1.2) を指定したので、Bundlerが続行できません。
※DeepLの翻訳を参考にしています。

と言われていることから、fakerが既に入っているようだ。
案の上、Gemfile下部に既にfakerの記載があった。

gem 'faker',                   '2.1.2'

エラー文で注意されたように、
異なるバージョン要件で同じgemを2回指定しようとしてしまったわけです。
的確に言われて、グウの音も出ません。

解決策

解決策は、fakerは既に入っていてテスト環境においても使用できる形になっていますので,「gemfileは追加しない」になります。
解決策とは違うかもですが、原因がわかりましたね。おしまい。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-01-01T19:42:54+09:00

モデル単体テスト内で、Fakerを使ってランダムな値を生成できるように上書きをする方法

はじめに

　FakerはFactoryBotでのみ使えるものだと勝手に思っていたけど、RSpecでモデルの単体テストコードを記述するファイルでも使うことができることに気づき、新たに学んだことを記録しておきます。

Faker

　数字をランダムに生成する記述。

基本的な使い方としては、

Faker::Number.between(from: 5, to: 11) #5以上11以下をランダム生成

条件を減らすこともできます。

Faker::Number.between(from: 11) #11以上をランダム生成

betweenってあるけど、to:を付けなければ、最高値を設けずに値を生成できる。
逆に、

Faker::Number.between(to: 11) #11以下をランダム生成

from:をto:にすれば、最高値のみを設けて値を生成できる。

具体的な使い方

目的

学年を入力する欄で8以上が入力出来ないようになっているかを確認するコードです。

テストコード

before do
  @class_room = FactoryBot.build(:class_room)
end
it '学年が8以上では登録できないこと' do
  @class_room.grade = Faker::Number.between(from: 8) #確かめたい部分を上書き
  @class_room.valid?
  expect(@class_room.errors.full_messages).to include("学年は一覧にありません")
end

最後に

　Railsが便利にRubyを使えるようにしてくれているから、「なぜそうなるのか」ブラックボックスになっていることがたくさんあることに日々気づかされるばかりです。今回でいうと、FakerはFactoryBot内だけだと、思い込んでしました。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-01-01T16:41:52+09:00

indexアクションの設定　自分のメモ

メモ　
database.ymlではデータベースの設定を記述できる
RDBとは表形式でデータを管理できるデータベース
RDBMSはRDBを管理するシステムで、RDBMSの中にはMySQLがある！！

複雑な機能をまとめたものをライブラリという
Gemの情報はGemfile内で管理する

データベースに記録する内容をマイグレーションファイルに記述する時

def change
create_table :tweets do |t|
t.string :name
t.text :image
end

のように記述する　t.型 :カラム名　　の形で記述
データベースに反映させるときは　rails db:migrateコマンドを使用

・ここまでの流れで出来上がったカラム名に対してデータを追加する場合
コンソールを起動

Tweet.create(name: "takashi", text: "Nice to meet you!")

これでTweetモデルから作ったtweetsテーブルのnameカラムとimageカラムにそれぞれ情報を保存（create）できたことになる。
→でもレコード番号を指定してないなら保存できないんじゃ...??
と思ったけど勝手にレコード番号が１になるらしい

ツイート一覧表示

コントローラーにはindexアクションを定義する
routes.rbファイルに書き込む

7つのアクションへのルーティングを自動生成するメソッドとしてresourcesメソッドを用いる

Rails.application.routes.draw.do
resources :tweets
end

→resourcesの引数として :tweets というシンボルを指定している。
すると、/tweets のパスに対応するルーティングが生成される！

表示機能つまり、indexアクションのみを指定したければ　resources :tweets, only: :index と記載

コントローラー編

rails d controller tweets でtweetsという名前のコントローラーを作る！
tweets_controller.rbを編集する！

app/controllers/tweets_controller.rbのパスを指定

class TweetsController にindexアクションを記載

def index
@tweets = Tweet.all
end

→これでtweetsテーブルのの中にある全てのレコードをインスタンス変数に代入し、ビューへ送れるようになった

ビュー編

index.html.erbというファイルを作成する。ここで、ツイート投稿全てを表示する
tweetsテーブルにある全ての情報を抜き出したいときはeachメソッドを使う！

@tweets.each do |tweet|

tweet.text
tweet.name

end

これで、全てのレコードから(eachメソッドによって)tweetsテーブルのtextカラムとnameカラムから情報を抜き出し、投稿一覧画面に表示できた！

<% %>などを全部省略して大事なとこだけ記載した

レイアウトテンプレートについて
→ヘッダーやフッターなど、全てのビューファイルで共通する部分を記載
application.html.erb というファイルに記載
これはapp/views/layouts/application.html.erb に存在する

application.html.erbのbody要素にある　<%= yield %> に各ビューファイルの記述が集約される

CSSの記述に関して
→　　app/assets/stylesheets/application.css
に記述する

stylesheetsというファイルの中に存在する●●.cssの記述は、全てapplication.cssに読み込まれる！

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-01-01T15:18:43+09:00

【Rails奮闘記/Railsチュートリアル編】Herokuコマンドのまとめ

はじめに

あけましておめでとうございます。
今日から2021年になりました。
本年度もよろしくお願いします。
今回はRailsチュートリアルのHerokuコマンドについて自分で学習したことを簡単にまとめました。
ここではHerokuのアカウントの新規アカウントの作成とHerokuをインストールについては省略します。

Herokuコマンド

Herokuがインストールされてるかどうかを確認したいとき

$ heroku --version

Herokuを開かずにログインしたいとき

$ heroku login --interactive

Herokuに新しいアプリケーションを作成したいとき

$ heroku create

Gitを使ってHerokuにリポジトリをプッシュ

$ git push heroku master

アプリケーションの名前を変更したいとき

$ heroku rename （アプリの名前）

本番環境のログを取得したいとき

$ heroku logs

イベントが発生するたびに自動表示（Ctrl+Cで終了）

$ heroku logs --tail

終わりに

今回はHerokuコマンドについて簡単に復習としてまとめました。
開発環境ばかりに集中して本番環境に手が回らないという人が多いのではないでしょうか？
実際、私も開発現場に入るまでは開発ばかりに気を取られてしまうことが多かったです。
本番環境にも目が行き届く余裕が欲しいと思う2021年になりそうです。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-01-01T14:55:19+09:00

Rails でDB に保存されたenum の値をattribute_before_type_cast で取得する

はじめに

Rails でDB に保存されたenum の値をattribute_before_type_cast で取得する方法の備忘録です

環境

  • macOS 10.15.6
  • Ruby 2.5.7
  • Rails 5.2.3

参考URL

https://api.rubyonrails.org/classes/ActiveRecord/AttributeMethods/BeforeTypeCast.html

https://railsdoc.com/page/options_for_select

https://310nae.com/rails-selectbox/

https://qiita.com/ozackiee/items/17b91e26fad58e147f2e

https://ja.stackoverflow.com/questions/72551/enum-%e3%81%a7%e3%82%bb%e3%83%ac%e3%82%af%e3%83%88%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9%e3%82%92%e8%a1%a8%e7%a4%ba%e3%81%95%e3%81%9b%e3%81%a6%e3%82%a4%e3%83%b3%e3%83%87%e3%83%83%e3%82%af%e3%82%b9%e7%95%aa%e5%8f%b7%e3%82%92db-%e3%81%ab%e4%bf%9d%e5%ad%98%e3%81%97%e3%81%9f%e3%81%84

attribute_before_type_cast とは？

  • enum の文字列ではなくDB に保存された実態値を取得できる
  • enum 定義した際に利用できるインスタンスメソッド

enum の名前定義の値と実態値について

enum 使用時は値の見え方がRails 上とDB に保存される値が異なるので注意が必要です

Railsのenumはコードの表記上、文字列(またはシンボル）で透過的に扱えるように実装されています

SQLを直接叩いたり、DBのGUIクライアントを使って保存されたレコード情報を見るとわかりますが実際は文字列ではなく数値が保存されています。

参考URL: https://ja.stackoverflow.com/questions/72551/enum-%e3%81%a7%e3%82%bb%e3%83%ac%e3%82%af%e3%83%88%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9%e3%82%92%e8%a1%a8%e7%a4%ba%e3%81%95%e3%81%9b%e3%81%a6%e3%82%a4%e3%83%b3%e3%83%87%e3%83%83%e3%82%af%e3%82%b9%e7%95%aa%e5%8f%b7%e3%82%92db-%e3%81%ab%e4%bf%9d%e5%ad%98%e3%81%97%e3%81%9f%e3%81%84

enum で定義した実態値はRails 上では名前定義として振る舞います。

sample.rb
# 血液型(blood_type) をenum 定義する

  enum blood_type: {
    A型: 0,
    B型: 1,
    O型: 2,
    AB型: 3,
    # Rails 上での名前定義: DB に保存される実態値
  }

動作確認

下記の想定で動作確認を行います

  • Person モデルにname カラム, blood_type カラムを作成
  • Person モデルでblood_type をenum で定義
schema.rb
# Parson モデルにname カラム, blood_type カラム を作成
  create_table "persons", force: :cascade do |t|
    t.string "name"
    t.integer "blood_type"
  end
parson.rb
# model にblood_type をenum で定義
class Person < ApplicationRecord

  enum blood_type: {
    A型: 0,
    B型: 1,
    O型: 2,
    AB型: 3,
  }
end

attribute_before_type_cast メソッド

rails console を使ってattribite_before_type_cast の動作確認

$ rails console
> person = Person.create(name: "Alice", blood_type: 0) # person オブジェクトを作成, DB 保存
:name => "Alice"
:blood_type => "A型"
> person.blood_type # rails 上の値を取得
"A型"
> person.blood_type # rails 上の値のクラスを取得
String < Object
> person.blood_type_before_type_cast # DB の値を取得
0
> person.blood_type_before_type_cast # DB の値のクラスを取得
Integer < Numeric

attributes, attributes_before_type_cast メソッド

  • attributes: インスタンスに対して属性名 => 値 が取得できるインスタンスメソッド

  • attributes_before_type_cast: attributes のbefore 版。DB 上の実態値を属性名 => 値 の形で取得できるインスタンスメソッド

rails console を使ってattributes, attributes_before_type_cast の動作の違いを確認します

$ rails console
> person = Person.create(name: "Alice", blood_type: 0) # person オブジェクトを作成, DB 保存
:name => "Alice"
:blood_type => "A型"
> person.attributes # rails 上の 名前定義を表示
"name" => "Alice"
"blood_type" => "A型"
> person.attributes_type_before_type_cast # DB の実態値を表示
"name" => "Alice"
"blood_type" => 0

使用例

私の場合はenum で定義した値から新規投稿フォームを生成するのに使用しました

# 出力したいHTML
<select>
  <option value="1">type1</option>
  <option value="2">type2</option>
  <option value="3">type3</option>
</select>
person.rb
# blood_type をenum で定義
class Person < ApplicationRecord

  enum blood_type: {
    A型: 0,
    B型: 1,
    O型: 2,
    AB型: 3,
  }
end
persons_controller.rb
# person オブジェクトを作成
def new
  @person = Person.new
end

デフォルト値(selected: value) の設定にattirbute_before_type_cast で取得した値を使用しています

new.html.erb
# enum の値からフォーム生成
<%= form_with model: @person local: true do |f| %>
  <%= f.select :blood_type, options_for_select(Person.blood_types, @person.expense_before_type_cast), {}  %>
  <%= f.submit %>
<% end %>

# フォーム生成時の各値
<%= form_with model: @モデル名 do |f| %>
  <%= f.select :カラム名, options_for_select(モデル名.カラム名複数形, @モデル名.カラム名_before_type_cast), {}  %>
  <%= f.submit %>
<% end %>

select タグの空カッコ({}) には注意点があります

必ず通常のオプションを設定しない場合でも空のカッコ{},をオプション部分に設定してください。
この空のカッコがないと、HTMLオプションが無視されてしまうので、id/classを設定したのに効いていない！ということになってしまいます。

参考URL: https://310nae.com/rails-selectbox/

# options_for_select の文法
options_for_select(要素の配列 or ハッシュ, デフォルト値, {オプション}, {htmlオプション})
  • オプション例
    • include_blank: true (先頭行を空にする)
    • selected: default_value (デフォルト値)
  • HTMLオプション例
    • id: id_name (id を付与)
    • class: class_name (class を付与)

まとめ

  • enum 使用時にDB に保存された実態値の取得にはattribute_before_type_castかattributes_before_type_cast を使用する
  • enum の名前定義の値と実態値は取得方法が異なる

enum を使った事が無くポートフォリオ作成時に見事にハマってしまったので良い勉強になりました！
間違っている場合はコメント頂けると助かります！

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-01-01T14:48:23+09:00

HerokuにDockerのコンテナをpushするときに出たエラー「no basic auth credentials」の解決策

問題

HerokuにDockerのコンテナをコマンド「heroku container:push web」にてpushしようとすると、下記エラーが発生する。

no basic auth credentials
 !    Error: docker push exited with Error: 1

解決策

下記コマンドにてherokuにログインする。

heroku container:login

参考

  1. stackoverflow：『Deploy docker images to heroku』
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-01-01T14:27:13+09:00

騙されるな！プログラミングの勉強なんて最初はこれだけで十分！

「プログラマーなら最低限これくらい勉強しておかないと…」
「今時、〇〇を使わないなんて…」

うるせーーーーーーー！！！！！！！

近頃、プログラミングについての情報発信が多いので、色々と勉強しないといけないと思っている人が多いです。

初心者がDockerを勉強していたり、CI/CDツールを使おうとしていたり…

楽しいならそれでいいのですが、特に必要性もないのに無理に難しい技術を使っても頭に入ってこないと思います。

プログラミングを効率よく習得するなら、勉強するより開発することです。

料理も座学で勉強しまくるより、作りまくったほうが上達しますよね？
プログラミングもそんなもんです。

特にプログラミングをまだ面白いと思えていない方は、情報に振り回されて勉強ばかりしている可能性大です。
上達するためにも、楽しさを知るためにも、簡単なサービスでいいのでさっさと開発してみましょう。

とはいえ知識0では開発することが難しいという意見も分かります。
そこで下記の対象者のような方が、何をどれくらい勉強すればいいのか簡単に紹介します。

「対象者」

  • 勉強を始めたばかりのプログラミング初心者
  • 勉強はそこまで好きではないがプログラミングをしてみたい方
  • プログラミングの知識はないけど個人開発をしてみたい方
  • 開発せずに勉強に逃げている方

最後の「開発せずに勉強に逃げている方」は、もしかしたら今回紹介する勉強内容をすでに終えているかもしれません。
それなら次に勉強するものを探すのではなく、すぐに開発に取り組みましょう！

まずはProgateで勉強

  • HTML/CSS
  • JavaScript
  • Ruby
  • Ruby on Rails
  • Command Line
  • Git
  • SQL

分かりやすい良い教材です。

プログラミング初心者の方もとっつきやすいと思います。

https://prog-8.com/

様々なコースがありますが、まずは上記で紹介したコースを学ぶことをオススメします。

これらを学ぶことがどう役立つかは実際に作ってみないと分からない部分も多々あります。

とりあえず学んでみることをオススメします。

Ruby on Railsの知見を深める

さすがにProgateレベルの知識だけで開発をするのはしんどいと思います。

そこでRuby on Railsの知見を、もう少し深めましょう。

オススメは「Railsチュートリアル」という教材です。

https://railstutorial.jp/

(解説動画付きだと高額になりますが、テキストのみだと最新版でも980円+税で読めます)

ただし有名な教材だけあって質はいいのですが、難しいです。

そのため1周目で完璧に理解する必要はありません。

何なら挫折して当たり前くらいの気持ちで、挑戦してください。


Railsチュートリアルがあまりにも難しいと感じた方は、僕が作った「Railsビギナー」という教材に挑戦してみてください。

Railsチュートリアルに挫折する方が多いので、プロゲートとRailsチュートリアルの間の難易度の教材を自分で作ってみました。

もちろん無料で読めるので安心してください。

無料ですが合計で6万文字以上あるちゃんとした教材です。

https://maki-nomad.com/rails-beginner/


「Railsチュートリアルなんて初心者向けの教材なんだから簡単だよ！」というアドバイスは聞かなくていいです。

難しい教材を簡単だと紹介して自分のレベルを高く見せようとする、初心者に優しくないクソみたいなエンジニアのアドバイスは無視して大丈夫です。

さぁ、開発を始めよう

これだけ勉強すればさっさとサービスを作ってみてください。

めちゃくちゃしょぼいサービスしか作れないと思いますが、それでいいのです。

プログラミングの楽しさに気付けると思います。

こんなことを言うと「実際に仕事で使えるようになるには、もっと勉強が必要だ」とか、しょーもないことを言ってくるエンジニアもいます。

「仕事で使えるようになるのに必要な勉強量」なんて言っていません。
「まずはこれだけで十分」という話です。

まずは楽しさを知ってください。
最初から難しい技術に挑戦して楽しめるのは天才だけです。

楽しさに気づけたら自然と興味が湧いてきます。

「もっと分かりやすいコードを書くにはどうすれば？」
「もっとカッコよく動きのあるサービスを作ってみたいなぁ」

そうなれば自然と学習をしていて、以前より苦しまずに勉強に取り組めますよ。


今回紹介した学習の道筋は、勉強がそこまで好きではない方に向けたものです。

勉強がけっこう好きな方には、もう少し学習のボリュームを増やしたオススメの学習の道筋もあります。

https://note.com/maki_yuya/n/n24618b7087ac

↑以前まで有料の記事でしたが、2021年に無料化しました！また有料化するかもしれないので、お早めにチェック！


あと、もしあなたが個人開発に興味があるなら、無理に難しい技術を使う必要はないということも知っておいてください。

実際に僕も個人開発をするとき、Dockerは使いませんし、デプロイする先はAWSではなくHerokuです。

そんな感じで僕が作ったサービスはこちら↓

https://tanomun.net/about

お願い事ができる&届くサービスです。

初詣に行きにくい人が多いと思ったので、せめて気分だけでも初詣を味わってください！

まとめ

勉強することが目的ではありません。

あなたの頭の中に知識が詰まっているだけでは意味がありません。

開発してサービスを生み出して初めて価値になります。

勉強に逃げず、開発をしてみましょう。

それが楽しさと成長に繋がります。

これからプログラミングの勉強を始めてフリーランスを目指す方は、こちらの記事も参考にしてみてください↓

https://note.com/maki_yuya/n/nb3ddcc27daf6

フリーランスになるまでの悪い面もリアルに書いたので、参考になると思います。

それでは2021年を良い年にしていきましょう！！！

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-01-01T11:12:07+09:00

Docker上のRailsでコントローラーの変更がブラウザに反映されない時の対処法

問題

controller.rbの変更がブラウザに反映されない。
コンテナを再起動すれば反映されるが、毎回再起動するのは手間がかかる。

環境

Windows 10 home
Docker for Windows
Rails 6.1
Ruby 2.7

解決策

config\environments\development.rb内の
config.file_watcher = ActiveSupport::EventedFileUpdateCheckerを下記コードに修正する。

config.file_watcher = ActiveSupport::FileUpdateChecker

わからないこと

下記コードを記載しても解決できる。
Railsガイドを見ても上記コードとの違いがわからなかったので、違いが分かる人がいましたら、ご教授いただければ幸いです。

config.reload_classes_only_on_change = false

参照：『Railsガイド』- Rails アプリケーションを設定する

参考

  1. Rails5でmodelやcontrollerの修正が反映されないやつ
  2. Vagrant + Rails 6.0.2.1 のdevelopmentでコード変更が反映されない現象を解決
  3. 【Rails6】Dockerコンテナを再起動しないとソースコードが反映されない
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-01-01T00:58:45+09:00

初心者の自分がコードレビューを受けて指摘されたことまとめ

はじめに

アプリのコードレビューを初めて受けて何点か指摘があったので次からは気を付けて行きたいといった意味を込めて指摘を受けた部分をまとめていく。
なお、指摘を受けた内容はフリマアプリの制作段階でのことである。

REDMEでのコードレビュー

・deviseを使用したのだがencrypted_passwordというカラムを記述するのを忘れていた。

・メールアドレスは一意性という条件が設けられているにも関わらず一意性制約の記述がなかったこと。

・見本アプリではユーザーの登録時、姓、名、姓（フリガナ）、名（フリガナ）と入力欄が細かく分かれているのに姓名を一緒にしてしまっていたこと。

・誕生日カラムをdate型で年、月、日と一つにするのではなく、単に数字だからという考えでinteger型にしていたこと。

・imageの実装はactive storageを使うためREDMEに記述する必要がないにも関わらず記述していたこと。

・郵便番号はハイフンも含めるためinteger型にする必要があるのにstring型にしていたこと。

・active hashを使用時データはidで保存されるため、integer型にしなければならないのに、string型にしていたこと。

・電話番号は数字の文字列で保存するためstring型にしなければならないこと。

新規登録・ログイン機能でのコードレビュー

・バリデーションをwith_optionsでまとめていなかったこと。可読性を上げるためにもまとめた方が良い。

・passwordでの文字数制限のバリデーションはdeviseでデフォルト設定になっているにも関わらずmaximumで設定しようとしていたこと。

・パスをprefixで記述していなかったこと。可読性を上げるためにもprefixで記述した方が良い。

・不要なコメントアウトの消し忘れ。可読性を上げるため。

商品を出品する機能でのコードレビュー

・before_action :authenticate_user!で制限を設ける際、application_controller.rb内に記述してしまっていたこと。

・with_optionsをネストせずに分けて記述していたこと。

・300円以下は登録できないというテストコードを実装する際、境界値の299で実装した方が良いのに200で実装していたこと。

商品の購入機能でのコードレビュー

・ @item = Item.find(params[:id])はdestroy,edit,update,showで共通なため、before_actionでまとめた方が可読性が上がるにも関わらずまとめていなかったこと。

・resources :items, only: [:index, :new, :create, :show, :edit, :update, :destroy]と全てのアクションが記述されているのに　resources :itemとまとめて記述していなかったこと。

・フォームオブジェクトの中に、:user_idと:item_idを記述していなかったこと。ユーザーのIDと商品のIDが無い場合、確実に購入できないようにするために必要。

・任意である、建物名の「建物名が空でも購入できること」のテストコードを実装していなかったこと。建物名は任意入力となっているため建物名を記入せずに購入するユーザーが居る可能性を想定したテストコードを実施する。

最後に

改めてこのようにまとめてみると、初歩的なミスが多かったなと思った。同じミスせず効率よくコードを描けるように頑張って行きたい。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-01-01T00:01:47+09:00

【環境構築】Ruby on Rails 6 開発環境を1時間以内に手に入れる

内容

「プログラミングをはじめたい！」「Webエンジニアを目指したい！」という思いを持ち始めたプログラミング初学者の方が、Ruby及びそれを使ったフレームワークであるRuby on Railsに挑戦するというのは王道の学習パターンなのではないかと思います。

Ruby on Railsをはじめるにあたって最初に大きな壁として立ちはだかるのが環境構築です。私自身も約３ヶ月前に異業種からの転職でRubyエンジニアとして働きはじめたばかりなので、環境構築などの「プログラミング学習を始める以前の準備」に時間を取られた時のことは記憶に新しいです。

本記事では、一人でも多くのプログラミング初学者の方にRailsの魅力を感じて欲しいという思いから「Ruby on Rails 6 開発環境を1時間以内に手に入れる」ことを目標に、そのための手順を紹介します。

ゴール

Ruby on Rails6の開発環境を備えたUbuntuの仮想環境をmacOS上に構築する（目標１時間以内）。

前提環境

macOSCatalina バージョン 10.15.7

※ Windowsの方はゴメンナサイ。また、macOSの方でもバージョンの差異で多少の違いが発生する可能性はあります。

Virtual Box 6.1.16

※ インストール手順は後述

Vagrant 2.2.14

※ インストール手順は後述

想定する読者

・macOSユーザーの方
・macOSのターミナルを使った経験があり、基本的なLinuxコマンド(cd, mkdir, lsなど)の意味を知っている方
・ProgateなどでRuby on Railsの概要を学んだことがある方
・AWS Could9などのクラウドベースの統合開発環境に限界を感じている方
・過去にRuby on Railsの環境構築に挫折した経験のある方

仮想環境とは？

使っているOS(ホストOS:本記事ではmacOSを想定)の中に、あたかも別のOS(ゲストOS:本記事ではUbuntuを使用)が入っているような環境のことを言います。

ホストOS上に開発環境を直接構築する場合、誤った設定や削除を行ってしまったことによりホストOSに悪影響を与えてしまう可能性はありますが、仮想環境上で環境構築をする場合であれば、何かミスをしてしまった時はその仮想環境ごと削除してやり直せば良く、ホストOSに悪影響を与えることはありません。

また、AWS Could9などのクラウドベースの統合開発環境よりもリソース拡張の自由度が高く、CPUの性能限界やメモリ不足に悩まされることは（少なくともRailsでWebアプリケーションを開発するだけであれば）ほとんどないと言っていいと思います。

Virtual Box

仮想環境を構築するための「仮想化ソフト」として、まずはVirtualBoxをインストールします。

下記のダウンロードページから、（本記事ではmacOSを想定しているので）「OS X hosts」のリンクをクリックしてインストーラをダウンロードしてください。

ダウンロードしたインストーラを起動すれば、インストール手順がわかりやすく書いてあるので、それに従えばVirtual Boxのインストールは終了となります。

（※ 2021年1月1日現在の最新版は6.1.16なので、ここからはそのバージョンでの動作を前提としております）

Virtual Box ダウンロードページ

Vagrant

次に、仮想化ソフトを管理するツールであるVagrantをインストールします。
下記ダウンロードページにアクセスし、上記のVirtualBoxと同様に、インストーラのダウンロード、インストーラ起動、インストールという手順を踏めばほとんど迷うことなく完了すると思います。

仮想化ソフトである「VirtualBox」を操作するためのツールが「Vagrant」である、という認識を持っていただければとりあえず最低限の知識としてはOKです。

（※ 2021年1月1日現在の最新版は2.2.14なので、ここからはそのバージョンでの動作を前提としております）

Vagrant ダウンロードページ

環境構築手順

Virtual BoxとVagrantを問題なくインストールしたら、ここからは実際に仮想環境を構築して行きたいと思います。今回は、Ubuntu(18.04)というゲストOSが入っている仮想環境を構築します。

ここからの操作はmacOSのターミナルで行います。作業に入る前にvagrantが正しくインストールされていることを確認しましょう。ターミナルを開いてvagrant -vと入力してみてください。Vagrant 2.2.14という出力が返ってくれば準備はOKです、早速はじめていきましょう！

1. vagrant-vbguestのインストール

$ vagrant plugin install vagrant-vbguest

仮想マシンでの操作を簡単にしてくれる役割がある、という理解でとりあえずはOKです。

2. 任意の場所にディレクトリを作成

$ mkdir rails6_dev
$ cd rails6_dev

3. Vagrantfile作成

$ vagrant init

上記コマンドでデフォルトのVagrantfileが作成されます。

Vagrantfile(デフォルト|一部抜粋)
# -*- mode: ruby -*-
# vi: set ft=ruby :

# All Vagrant configuration is done below. The "2" in Vagrant.configure
# configures the configuration version (we support older styles for
# backwards compatibility). Please don't change it unless you know what
# you're doing.
Vagrant.configure("2") do |config|
  ~
  ~
  config.vm.box = "base"
  ~
  ~
  # config.vm.network "forwarded_port", guest: 80, host: 8080
  ~
  ~
  # config.vm.network "private_network", ip: "192.168.33.10"
  ~
  ~
end

上記のデフォルト状態のVagrantfileの中身を、下記のコードに書き換えてください。

Vagrantfile(書き換え後)
# -*- mode: ruby -*-
# vi: set ft=ruby :
# All Vagrant configuration is done below. The "2" in Vagrant.configure
# configures the configuration version (we support older styles for
# backwards compatibility). Please don't change it unless you know what
# you're doing.
Vagrant.configure("2") do |config|
  GUEST_RUBY_VERSION = '2.6.6'
  GUEST_RAILS_VERSION = '6.0.3.4'
  config.vm.box = "bento/ubuntu-18.04"
  config.vm.box_check_update = false
  config.vm.network "forwarded_port", guest: 3000, host: 3000
  config.vm.network "private_network", ip: "192.168.33.10"
  config.vm.synced_folder "./", "/home/vagrant/work"
  config.ssh.forward_agent = true
  config.vm.provider "virtualbox" do |vb|
      vb.gui = false
  end
  config.vm.provision "shell", inline: <<-SHELL
      echo '### installing tools ###'
      sudo timedatectl set-timezone Asia/Tokyo
      sudo apt update -y
      sudo apt upgrade -y
      sudo apt install build-essential -y
      sudo apt install -y libssl-dev libreadline-dev zlib1g-dev
      sudo apt install -y imagemagick
  SHELL
  config.vm.provision "shell", privileged: false, inline: <<-SHELL
      echo '### installing Ruby ###'
      git clone https://github.com/sstephenson/rbenv.git ~/.rbenv
      echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bash_profile
      echo 'eval "$(rbenv init -)"' >> ~/.bash_profile
      source ~/.bash_profile
      git clone https://github.com/sstephenson/ruby-build.git ~/.rbenv/plugins/ruby-build
      rbenv install #{GUEST_RUBY_VERSION}
      rbenv global #{GUEST_RUBY_VERSION}
      echo '### installing Rails ###'
      gem install rails -v #{GUEST_RAILS_VERSION}
      echo '### installing SQLITE3 ###'
      sudo apt install libsqlite3-dev
      echo '### installing NodeJS ###'
      sudo apt install -y nodejs npm
      sudo npm install n -g
      sudo n lts
      sudo apt purge -y nodejs npm
      sudo apt -y autoremove
      sudo npm install yarn -g
      sudo chown -R $USER:$GROUP ~/.config
      echo ' -+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-'
      echo 'You are now on Rails!'
      echo ' -+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-'
  SHELL
end

本記事での解説は避けますが、このVagrantfileにはRailsを使えるようにするための設定が書いてあります。最初は難解に感じるかもしれませんが、ぜひ一度、読み解くことをオススメします。

もちろん私が書いたこのVagrantfileが唯一の正解では決してないので、「もっといい書き方があるよ」「こっちの方が使いやすいと思う」っていうご意見も大歓迎です！

（こちらのVagrantfileのソースコードはGithubにもあげてあります。）

4. 仮想環境構築

$ vagrant up

上記コマンドで仮想環境を構築します(PCのスペックにもよりますが、15〜30分ほどかかります)。

先ほどのVagrantfileに書かれた設定を１行ずつ実行していくことでRailsの開発環境が作られていっているということだけは抑えて頂けるといいかなと思います。

5. 仮想環境へSSH接続

$ vagrant ssh

上記コマンドで出来上がった仮想環境にSSH接続します。

SSH接続とは、ネットワークを経由して自身のPCから他のPC(今回は仮想環境)を安全に遠隔操作するための仕組みである、ということだけは抑えておいてください。

ここまでがmacOSのターミナルでの操作です。次の「6. Railsアプリケーション作成」と「7. ssh接続から抜ける」ではmacOSからssh接続をして、ゲストOSのUbuntuを操作しているということをご認識ください。

6. Railsアプリケーション作成

vagrant@vagrant:~$ cd work
vagrant@vagrant:~/work$ rails new sample-app
vagrant@vagrant:~/work$ cd sample-app
vagrant@vagrant:~/work/sample-app$ rails s -b 0.0.0.0

この状態でhttp://localhost:3000/にアクセスすると、Yay! You’re on Rails!のデフォルト画面が表示されます。

rails

立ち上げたRailsサーバーはcommand + Cで停止することができます。

7. ssh接続の終了

$ exit

上記コマンドでSSH接続を終了することができます。

8. 仮想環境のマシンをシャットダウンする

vagrant halt

上記コマンドで仮想環境上のゲストOSをシャットダウンすることができます。

再度立ち上げたい時は、vagrant upで立ち上げvagrant sshで接続します（2回目以降は数分で完了します）。

9. Railsアプリケーションの開発を進める方法

「2. 任意の場所にフォルダを作成」で作成したディレクトリ内に「6. Railsアプリケーション作成」で作成したRailsアプリと同名のファイルが作成されているはずなので、そこのコードを書き換えることで開発を進めます。

rails g controller Users や bundle install 等のコマンドはSSH接続をした状態で、作成したRailsアプリケーションのディレクトリ上で叩くことになります。

終わりに

いかがでしたでしょうか？スムーズに行けば、Yay! You’re on Rails!の表示まで１時間以内にいけるではないかなと思っております。

Rubyという言語、Railsというフレームワークは触っていると本当に面白くて飽きないものなので、この記事で環境構築をしたことをきっかけに少しでもその魅力にハマっていただければ嬉しい限りです。

本記事についての質問や改善点のご指摘等がございましたら、コメントやTwitterでのDMなどをいただければ幸いです！

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧