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

【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' #一番下に追記する ``` ターミナルで以下のコマンドを実行し、ローカルサーバーの再起動まで行う。 ``` %

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


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

## 開発環境
`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リクエストが飛ぶ

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

[](https://gyazo.com/4e0faf910c1d0cb9689115aa2f2ade67)

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

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

## なにが悪かったか

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

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

これは

[](
://gyazo.com/7af18686c0d97863694595baab3cd1ab)

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

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

良いメソッドを見つけた

[](https://gyazo.com/48790baf519c482f486bc797f4b682b5)

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

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

これを使えば

[](https://gyazo.com/6ea818f187f21f68b74969dbfae37334)

こうなる

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

[](https://gyazo.com/e273a1e767e73bc02153365a55fc2875)

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

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

で画像をいれると

[](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 の違いを１つ発見した

## 前提

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

[](https://gyazo.com/d2644224e7c7cbf37fcd2fffdbe87c83)

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

これは

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

こういうコード

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

これを

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

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

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

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

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

## 本題

[](https://gyazo.com/b074a0b62e7b3c828f13e3bbdb4e7f04)

こんかんじのを

[](https://gyazo.com/42cee93ded5cad3d572150b8a67c4530)

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

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

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

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

https:

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

[](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 と文字を入れる

[](https://gyazo.com/91c3b22f02459928ba55dfe6d5bc6a3a)

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

[](https://gyazo.com/696fa7fc7db66720fdc32d8361bdfa61)

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

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

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

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

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

“`
= li

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

[](https://gyazo.com/36a185541b98e476e1db33f33078de7b)

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

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

[](https://gyazo.com/98c7c46601fc898a1057f53aa1f1e01a)

でっか

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

エラー時を検証ツールでみてみると
[](

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

[](https://gyazo.com/49b2a2288c7a33a01ed7a373d432fead)

こんなかんじで住所の部分に郵便番号が入るんだけど
[](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

【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

【Rails】whereに配列を指定できる話

“`
where(number: [配列])
“`

発行されるSQLは「WHERE IN」の形になる。

“`ruby
User.where(number: [1, 2])
=> User Load (0.9ms) SELECT `users`.* FROM `users` WHERE `users`.`number` IN (1, 2)
[#,
#]
“`

ActiveRecord::DengerousAttributeError in ~~に困ったお話…(model_name is defined by Active Record. Check to make sure that you don’t have an attribute or method with the same name.)

# ActiveRecordのエラーにつまづいた

エラーのスクショはこちらです！


“model_name is defined by Active Record. Check to make sure that you don’t have an attribute or method with the same name.“

これを解決すれば良さそうです。

##　何をしていたか
見ての通りですが、新規投稿関係の実装中です。そして“http://localhost:3000/posts/new“でこの画面の登場です。

##　どんなエラーか

“model_name is defined by Active Record. Check to make sure that you

【Ruby】pluckメソッド

引数に指定したカラムの値を配列で返してくれるメソッド

“`
pluck(:hogehoge)
“`

“`ruby
User.pluck(:firstname)

User.all.map(&:firstname) # 上記と同じ

# => [“太郎”, “二郎”, “新一”, “平次”]
“`

結果は同じだが、発行されるSQLが異なる。
pluckメソッドは、SQLの段階から取得するカラムのデータを絞り込んでいる
mapメソッドは、全てのデータを取得した後そのデータから特定のカラムのデータを取得している

“`ruby
User.pluck(:firstname)
SELECT `users`.`firstname` FROM `users`

User.all.map(&:firstname)
SELECT `users`.* FROM `users`
“`

引数2つ指定もできる。

“`ruby
Employee.pluck(:firstname, :lastname)

# => [[“太郎”, “山田”], [“二郎”, “安倍”], [“新一”

devise_token_authを導入してみる

# deviseとは
Ruby on Railsで簡単に認証機能を実装することができるgem。
deviseを利用することで、ログイン、サインアップなどの認証を簡単に行うことができる。

# devise_token_authとは
トークン認証機能を実装するためのgem。
認証が必要な操作を行う際に、HTTPリクエストのheader情報にユーザーの認証情報であるトークンを付与し、バックエンド側（Ruby on RailsのAPI）に送ります。
基本的にはサーバーで認証の状態管理はせず、送られて来たTokenを検証することで処理を安全に行うことができる。

参考 : https://magazine.techcareer.jp/technology/skill/11273/
公式Docs https://devise-token-auth.gitbook.io/devise-token-auth/

# devise_token_authのセットアップ

devise_token_authを使うときは、deviseも一緒にインストールしないと、
`rails s` 時にエラーが出るので

文字列と数値②

#①.数値で計算

前回数値は文字列とは異なることを学びました！

数値は計算できることが特徴です！

ここからは、メソッドと同じくプログラムでよく使われる演算子について学びます！

#演算子

プログラミングにおける値の計算や比較などに使用する記号のことです!

計算における代表的な演算子は+や-、比較における代表的な演算子は>や<があります! この簡単な記号である演算子を用いることで、計算や比較処理を瞬時に行ってくれます! #代数演算子 演算子の中でも計算を行うものは、代数演算子と呼ばれます! Rubyで一般的な計算をする場合、以下の様な演算子が使えます! ```php 代数演算子 説明 + 足し算 - 引き算 * かけ算 / 割り算 % 剰余(割ったあまり) ``` 使い方は、普通の算数の計算と同じです! ただし、剰余の計算は馴染みがないので注意が必要です! 例えば、「17を5で割ったときの余り」を求めることが