Ruby関連のことを調べてみた2021年11月13日

Ruby関連のことを調べてみた2021年11月13日

データベースをロールバックできなくなった件

## 開発環境

言語:Ruby (2.7.2)
フレームワーク:Ruby on Rails (6.1.3.2)
フロントエンド:HTML&CSS/Bootstrap/JavaScript/jQuey
DB:PostgreSQL

## 背景
新規でマイグレーションファイルを作成し、データベースにテンプレート文を入れる方法がわかりました。
テスト的に作ったマイグレーションファイルが不要担ったため、ロールバックしたところできなくなったため共有します。

## 解決方法
ロールバック実施

“`ruby
$ rails db:rollback
“`

エラー発生!!

“`ruby
% rails db:rollback
== 20210917010552 ChangeColumnDefaultSolutionOfIncidents3: reverting ==========
rails aborted!
StandardError: An error has occurred, this and all later migrat

元記事を表示

テキストフィールドに予め値を入れておく方法

## 開発環境

言語:Ruby (2.7.2)
フレームワーク:Ruby on Rails (6.1.3.2)
フロントエンド:HTML&CSS/Bootstrap/JavaScript/jQuey
DB:PostgreSQL
テスト:Rspec
インフラ:EC2 RDS 
ソースコード管理:GitHub(issueで、タスク管理する)

## データベースに予め値を入れておく方法
テキストフィールドに初期値を入れておく方法はマイグレーションファイルに`default: “初期値”`に記載することでで可能なことがわかった。

“`ruby
class ChangeColumnDefaultSolutionOfIncidents < ActiveRecord::Migration[6.1] def change change_column :incidents, :solution, :text, null: false, default: "解決方法" end end ``` ### データベースに初期値を入れる方法 1. マイグレーションファイルを作成

元記事を表示

インシデントアプリを作成しました

# インシデントアプリ
![ホーム画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529959/1aa13308-b93a-c451-16d1-00ba769d4520.png)

## 目的

1. 学習中に発生した事象を記録しておき、同じような事象が起きた際に参考にする。
2. 質問する際に記録した内容を共有することで、教育者と、生徒との齟齬をなくす。
3. 過去事象を参考にすることで調査時間の短縮

## アプリ概要

インシデントを共有し、他ユーザが事象解決を迅速化するためのアプリです。

1. スクール
– 先生
生徒から質問を受けたときに、時系列がわかるので対応しやすい
フォーマットが決めることで必要情報が揃いやすい
– 生徒
フォーマットに従い事象を記載することで質問が具体的になる
過去事象を探すことで、インシデント解決につながる
2. 個人利用
– 過去事象を探すことで、インシデント解決につながる
– 自身が以前遭遇した

元記事を表示

【Rails】ラベル名を日本語にする。

#概要
ユーザーの登録画面や投稿画面で表示されるラベル名と入力エラーメッセージを日本語にしてみました。

:::note info
macOS Monterey
Ruby 2.6.5
:::

#deviseの場合

devise用のビューファイルを作成

“`
% rails g devise:views
“`

“`ruby:config/application.rb
module TravelClip0406
class Application < Rails::Application # Initialize configuration defaults for originally generated Rails version. config.load_defaults 6.0 config.i18n.default_locale = :ja #追記する ``` ```ruby:Gemfile gem 'rails-i18n' #一番下に追記する ``` ターミナルで以下のコマンドを実行し、ローカルサーバーの再起動まで行う。 ``` %

元記事を表示

アイコンをランダムにしゃべらせる

![スクリーンショット 2021-11-13 0.11.31.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2245182/1a88cc01-e42e-7d37-3de1-3d0bc48d4e32.jpeg)

こんなかんじでロゴをホバーしたらランダムに喋らせる試み
ホバーするたびに内容が変わるようになっている

## 開発環境
`ruby 2.6.5`
`Ruby on Rails 5.2.5`

## 前提
`jQuery` を導入している
喋らせたいロゴをつくってある

## 本題

吹き出しは以下を参考にした

https://blog.raizzenet.com/balloon-on-image-on-mouse-hover/

ランダムに喋らせる `JS` のスクリプトは以下

“`:js
document.addEventListener(“turbolinks:load”, function(){
$(‘.sample’).hover(function() {

let

元記事を表示

rspec に css を反映するにはプリコンパイルが必要

テストを書いていて謎のエラー
エラー内容は

“`
1) User 認証機能 ユーザー登録したときに ホームに遷移すること
Failure/Error: raise ActionController::RoutingError, “No route matches [#{env[‘REQUEST_METHOD’]}] #{env[‘PATH_INFO’].inspect}”

ActionController::RoutingError:
No route matches [GET] “/%E5%90%8D%E7%A7%B0%E6%9C%AA%E8%A8%AD%E5%AE%9A%E3%81%AE%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3.png”
“`

こんな感じ
`UTF-8` でデコードして要約すると
`名称未設定のデザイン.png` っていうルーティングがありません
っていう意味。謎

## 開発環境
`ruby 2.6.5`
`Ruby on Rails 5.2.5`

## 前提
rspec でテストを

元記事を表示

img タグの src のパスの頭に / を忘れるとHTTPリクエストが飛ぶ

エラーは起きないんだけどターミナル上で謎のルーティングエラーが出る

[![Image from Gyazo](https://i.gyazo.com/4e0faf910c1d0cb9689115aa2f2ade67.png)](https://gyazo.com/4e0faf910c1d0cb9689115aa2f2ade67)

こんなふうにちゃんとしたリクエストは流れてて
画面遷移した後に謎のリクエストが発生していた

## 開発環境
`ruby 2.6.5`
`Ruby on Rails 5.2.5`

## なにが悪かったか

これの何が悪かったのかというと

“`
img src=”signin.png” class=”topimg”
“`
これ

これは

[![Image from Gyazo](https://i.gyazo.com/7af18686c0d97863694595baab3cd1ab.png)](
://gyazo.com/7af18686c0d97863694595baab3cd1ab)

上の画像の `img` なんだけど
`src` の中の

元記事を表示

一定の文字数以上を … にするメソッド

良いメソッドを見つけた

[![Image from Gyazo](https://i.gyazo.com/48790baf519c482f486bc797f4b682b5.png)](https://gyazo.com/48790baf519c482f486bc797f4b682b5)

こんな風にユーザーから受け取った文字数によってはUI が崩れてしまう箇所で

https://qiita.com/ishidamakot/items/2e74d980b3a338e4c784

これを使えば

[![Image from Gyazo](https://i.gyazo.com/6ea818f187f21f68b74969dbfae37334.png)](https://gyazo.com/6ea818f187f21f68b74969dbfae37334)

こうなる

元記事を表示

画像のプレビュー機能とドラッグアンドドロップ

[![Image from Gyazo](https://i.gyazo.com/e273a1e767e73bc02153365a55fc2875.png)](https://gyazo.com/e273a1e767e73bc02153365a55fc2875)

こんなかんじの UI の画像フォームをつくった

ドラッグアンドドロップで画像を認識もする

で画像をいれると

[![Image from Gyazo](https://i.gyazo.com/99746e8f31bf17afd2f7e11f36412373.png)](https://gyazo.com/99746e8f31bf17afd2f7e11f36412373)

非同期で変化する

## 開発環境
`ruby 2.6.5`
`Ruby on Rails 5.2.5`

## 前提
`jQuery` を導入している
`bootstrap` を導入している
`noimage.png` というファイルが最初の画像

## ドラッグアンドドロップ

以下を参考にした

https://blog1.mammb.com/e

元記事を表示

form.submit と form.button の違いを1つ発見した

## 前提

`rails` でビューを書いている
`bootstrap` を導入している

[![Image from Gyazo](https://i.gyazo.com/d2644224e7c7cbf37fcd2fffdbe87c83.png)](https://gyazo.com/d2644224e7c7cbf37fcd2fffdbe87c83)

こんな感じのフォームがある

これは

“`
.actions
= form.button “送信する”, class: “btn btn-primary”
“`

こういうコード

`remote: true` だから `ajax` で更新する形にしてるんだけど

これを

“`
.actions
= form.submit value: “送信する”, class: “btn btn-primary”
“`

ってすると更新のタイミングで一瞬登録するっていうボタンに変わる
`ajax` の場合は `button` のほうがいいかもって思った

元記事を表示

jQuery DOM に対して forEach は使えない

`jQuery` を使っていて所得した `DOM` に対して繰り返し処理をしたかった

で、以下みたいなコードを書いてみる

“`
  let item_id = $(“.edit_worship_stars”)
item_id.forEach((item) => {
“`

しかしなぜか動かない
`debugger` で止めてコンソールで見てみる

ここで `item_id[0]`とか打つとちゃんと出力される

しかし `item.id.forEach` をうつと `undefined`

なぜ
___

`DOM` に対して `forEach` は使えないらしい
なので `jQuery` 特有のメソッドとして `DOM` に対しては `each()` メソッドを使うらしい

https://api.jquery.com/each/

上を参考にして

“`
let stars = $(“.edit_worship_stars”)
stars.each(function(index, item) {
“`

としてみる。

すると無事発火

元記事を表示

bootstrap ちょこっと隙間をあけたいときの css

## 開発環境
`ruby 2.6.5`
`Ruby on Rails 5.2.5`

## 前提
bootstrap を導入している

## 本題

[![Image from Gyazo](https://i.gyazo.com/b074a0b62e7b3c828f13e3bbdb4e7f04.png)](https://gyazo.com/b074a0b62e7b3c828f13e3bbdb4e7f04)

こんかんじのを

[![Image from Gyazo](https://i.gyazo.com/42cee93ded5cad3d572150b8a67c4530.png)](https://gyazo.com/42cee93ded5cad3d572150b8a67c4530)

こんなかんじでちょこっと隙間をあけるためには

“`
.card-header.mb-2.mt-2
“`

こうやってそのブロック要素にクラスをつけてやるだけでいい
`mt` が上のマージン `mb` が下のマージン

いままで律儀にセレクターで指定していた自分を殴りたい

https:

元記事を表示

geochart 日本地図に色分けしながらマッピング

[![Image from Gyazo](https://i.gyazo.com/af18b42b21b09f01f1364033b3cecab8.png)](https://gyazo.com/af18b42b21b09f01f1364033b3cecab8)

こんなかんじで `DB` と連携して
特定の要素が多いほど日本地図に色濃くマッピングする機能をつくった。

また `gem` の `chartkick` だと世界地図しかフォローしてないので
今回はオリジナルの `js` で書く

## 開発環境
`ruby 2.6.5`
`Ruby on Rails 5.2.5`

## 前提
`DB` 内に住所のカラムを持つモデルがある
上記のモデルに `CRUD` 機能があり、その数を集計できるようにしたい

## 手順

① `geochart` を読み込むスクリプトを書く
② `DB` からの情報を加工するロジックを書く
③ `ruby` の変数を `js` にわたす
④ 地図を描画する

基本的に日本語の詳しい記事はないので
ドキュメントですすめる形になる

## 具体的なフ

元記事を表示

form_with を使いながら bootstrap のボタンの中に fontawesome と文字を入れる

[![Image from Gyazo](https://i.gyazo.com/91c3b22f02459928ba55dfe6d5bc6a3a.png)](https://gyazo.com/91c3b22f02459928ba55dfe6d5bc6a3a)

上の画像の右のボタンの中に

[![Image from Gyazo](https://i.gyazo.com/696fa7fc7db66720fdc32d8361bdfa61.png)](https://gyazo.com/696fa7fc7db66720fdc32d8361bdfa61)

こうやってアイコンを入れる試み

左のメッセージは `link_to` のタグを使っているので簡単にアイコンを入れられるんだけど
右のフォローするのボタンは `form_with` をつかっているのでどうしても入れられなかった

## 開発環境
`ruby 2.6.5`
`Ruby on Rails 5.2.5`

## 前提
fontawesome を導入している

ちなみに左のボタンのコードは以下

“`
= li

元記事を表示

バリデーションで Fontawesome が巨大化

[![Image from Gyazo](https://i.gyazo.com/36a185541b98e476e1db33f33078de7b.png)](https://gyazo.com/36a185541b98e476e1db33f33078de7b)

こんなふうににカレンダーの `Fontawesome` をフォームタグにいれる

これがバリデーションにひっかかると

[![Image from Gyazo](https://i.gyazo.com/98c7c46601fc898a1057f53aa1f1e01a.png)](https://gyazo.com/98c7c46601fc898a1057f53aa1f1e01a)

でっか

## 開発環境
`ruby 2.6.5`
`Ruby on Rails 5.2.5`
`font-awesome-sass`
## 本題

エラー時を検証ツールでみてみると
[![Image from Gyazo](https://i.gyazo.com/90bc3f0496df3f74c1a297115f576b05.png)](

元記事を表示

正規表現 後方参照をするメソッド

[![Image from Gyazo](https://i.gyazo.com/49b2a2288c7a33a01ed7a373d432fead.png)](https://gyazo.com/49b2a2288c7a33a01ed7a373d432fead)

こんなかんじで住所の部分に郵便番号が入るんだけど
[![Image from Gyazo](https://i.gyazo.com/31ee10b9782996acd66c9c6155208e6f.png)](https://gyazo.com/31ee10b9782996acd66c9c6155208e6f)

こんなかんじにしたかった。

## 開発環境
`ruby 2.6.5`
`Ruby on Rails 5.2.5`

## 本題

正規表現の後方参照をするメソッドが使える

https://rubytips86.hatenablog.com/entry/2014/03/28/132953

これを参考にして

“`
li.list-group-item = worship.shinto.address.mat

元記事を表示

英数字を漢数字にするメソッド

英数字を漢数字に変換するメソッドの自作

例えば `2021年9月11日` にこのメソッドを使うと
`ニ〇ニ一年九月一一日` になる

## 開発環境
`ruby 2.6.5`
`Ruby on Rails 5.2.5`

## 本題

ヘルパーメソッド内に

“`
def convert_kansuji(text)
text.tr(‘0123456789’, ‘〇一二三四五六七八九’)
end
“`

こんなふうに定義してやる

`View` の中で

“`
convert_kansuji(@worship.worship_day.strftime(“%Y年%m月%d日”))
“`

こんなふうにしてやると変換される

元記事を表示

【個人開発】ラーメン二郎に特化した口コミ・情報アプリ

# はじめに
ラーメン二郎に特化した口コミ・情報アプリとして『__ラーメン二郎 information__』を開発しました!

– ラーメン二郎に行ってみたいけどルールが複雑そうで不安…
– 量が多くて食べ切れるか分からない…
– 店によって味が様々で好みなので,好みの店を探したい…

このような不安を解消し,気軽にラーメン二郎を楽しんでもらいたいと考え,『__ラーメン二郎 information__』を開発しました!
https://ra-men-jiro-information.herokuapp.com/

# サービス概要
ユーザーからの口コミをもとにデータを集計し,様々な機能を展開しています。主な機能は以下の通りです。
1. 口コミ投稿
2. おすすめ店舗診断
3. ランキング
4. 訪問履歴

### 1.口コミ投稿
こちらはラーメン二郎に行った方が,そのラーメンの感想をレビューするというお馴染みの機能です。
特徴としては,「”文章を必要としない”口コミ」を行うことが可能である,ということです。
以下は実際のレビュー画面です。
![スクリーンショット 2021-10-1

元記事を表示

+ – * / は代数演算子,じゃない

Ruby の初心者向け記事で `+`,`-`,`*`,`/` を「代数演算子」と書いているものをときどき目にしますが,これらは正しくは「算術演算子」です。英語だと arithmetic operators ですね。

なぜ「代数演算子」という誤った用語が広がっているのか分かりませんが,PHP のリファレンスマニュアルでなぜか「代数演算子」となっているので,PHP 界から Ruby 界に入ってきたのかもしれません:
[PHP: 代数演算子 – Manual](https://www.php.net/manual/ja/language.operators.arithmetic.php)

上記ページでは冒頭に

> 学校で習った基礎代数を憶えていますか?

とも書かれています。

この英語版は,タイトルが

> Arithmetic Operators ¶

となっており,冒頭の文も

> Remember basic arithmetic from school?

です。

単なる誤訳ではないでしょうか。arithmetic と algebraic を混同しているような気がします:

元記事を表示

【Rails】try / try! / &.ぼっち演算子

##try

定義してないメソッドに対してnilを返す

“`ruby
User.first.try(:email)
# => “abc@gmail.com”
User.first.try(:aaa)
# => nil
nil.try(:email)
# => nil
“`

##try!

定義してないメソッドに対してNoMethodErrorを返す

“`ruby
User.first.try!(:email)
# => “abc@gmail.com”
User.first.try!(:aaa)
# NoMethodError: undefined method `aaa’ for #
nil.try!(:email)
# => nil
“`

##&.

基本的にtry!と同じ挙動

“`ruby
Employee.find_by(firstname: ‘コナン’)&.email || ‘コナンというユーザーは存在しません’
# => “conan@gmail.com”
Employee.find_by(firstnam

元記事を表示

OTHERカテゴリの最新記事