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

[axios] ファイルダウンロードができない or 空ファイルになってしまう現象の解消

フロント側はReact、サーバーサイドはRailsでファイルダウンロードが
うまくいかないケースがあり、それを解消した記事内容になります。

症状としては、axiosのissueにあったこのケースに当たります。
[Github | axios/axios | Empty response when responseType is blob or arraybuffer.](https://github.com/axios/axios/issues/1392)

サーバーサイドとフロント部分の結合部分なので、
原因の特的ができていなくて引っかかってる人が多そうですね。

私のケースの場合は、railsでheadの記述が不要だったのですが、
それだけじゃよくわからないと思います。
実装をみながら解消方法をみていきましょう。

## フロント側の記述

フロント側は以下のようなコードにしています。

“`
$ yarn add file-saver
“`

“`tsx
import { saveAs } from ‘file-saver’;
~~

export const fil

【Ruby on rails】JavaScript 非同期通信のコメント機能でエラーメッセージを出す　バリデーション

初めに

非同期通信でのコメント機能は実装ずみで、「40１字以上のコメント」はNGというバリデーションは、
かけていたものの、エラーメッセージが出るようにしていませんでした・・・。
少し実装に苦労はしたものの、非同期通信への理解が深まったのでまとめていきます！！


バリデーションをかけておく

“`perl:app/models/post_comment.rb
class PostComment < ApplicationRecord default_scope -> { order(created_at: :desc) }
# あるコメントに紐づくユーザーも記事も１
belongs_to :user
belongs_to :post

v

【個人開発】地域の魅力を発信できるデジタルパンフレットサービス「Openパンフレット」を作った

# はじめに

* デジタルパンフレット作成公開サービス **[Openパンフレット](https://open-pamphlet.com)** をリリースしました。
​
* 個人開発です。
​
* バックエンドはだいたいAWSです。
​
* Android未対応?​

https://open-pamphlet.com

​バックエンドの技術者がフロントやらインフラやらアプリやら色んな所に手を出して作ったシステムになっています。

記事本文はZennで書いているので[こちら](https://zenn.dev/ymasutani/articles/42fb40f4e00f1d)です。

# 宣伝
Android版の開発のためクラウドファンディング募集しています。
よかったら見て下さい。励みになります。

https://camp-fire.jp/projects/view/467291

【Ruby on Rails】デプロイ後、本番環境で画像が表示されない不具合を解消する方法

#対象者

* ローカル環境で表示される画像が本番環境で表示されない方

#目的

* 本番環境でも問題なく画像を表示させる

#実際の手順と実例
###1.前提

ruby 2.5.1
rails 5.2.5
AWS

* app/assets/imagesの中に画像が保存されている
* 自動デプロイできている状態

###2. 結論

変更前

““

““

↓↓↓

変更後

“`
<%= image_tag asset_path("search.png", alt: "") %>
“`

これで実装完了です！

###3.原因

本番環境では、画像もコンパイルされることが原因のようです。

※コンパイルとは、ソースコードを機械語に翻訳する作業のこと

本番環境ではパス名と画像の名前が変わっちゃうので
両方に対応できるasset_path()を使い、解決できました！

#参照

>[【ちゃんと理解してる？】コンパイル、ビルド、デプロイの違い](https://cheat.co.jp/

【Ruby on Rails】gem, bundlerって？

# この記事について

この記事は、筆者がRuby on Railsを学習・使用する中で疑問に思った`bundle` コマンドについて、どういった意味があるのかという内容をまとめていきます。

まだまだ初学者ではあるので、なにか間違った理解等ございましたらぜひご指摘いただけますと幸いです。

# bundlerとは

プロジェクト内で使用するgemのパッケージ管理ツール。

gemのバージョンやgemの依存関係を管理してくれる「gem」

## bundlerの特徴

1. bundlerを使ってgemをインストールすると、gem同士の互換性を保ってくれる。
2. Gemfileという1つのファイルにgemを書くので、gemの管理がしやすい
3. Gemfileを使ってアプリごとにgemを管理できる
4. 環境ごとにインストールするgemを管理できる
5. gemの互換性を保ってくれる。Gemfileさえ共有すれば複数人での開発でもエラーを起こさない

参考

[https://pikawaka.com/rails/bundler](https://pikawaka.com/rails

module namespaceを用ひたルーティング 　deviseの設定

コントローラー作成

ほしいコントローラごとに
admin/
member/
user/,,,
などとし、を先に指定して作成する

“`ruby:コンソール
rails g controller admin/items
rails g controller admin/genres
rails g controller admin/members
:
rails g controller member/adresses
rails g controller member/items
rails g controller member/cart_items
“`

“`
username:~/environment/naganocake $ rails g controller [namespaceのグループ名]/[コントローラー名]
“`

route.rbを編集　modlue namespace scope

“`ruby:route.rb
Rails.application.routes.draw do

namespace :[グルー

「Could not detect rake tasks！」Herokuでデプロイエラー（メモ）

#Herokuデプロイ時のエラーコード

“`
Could not detect rake tasks
ensure you can run `$ bundle exec rake -P` against your app
and using the production group of your Gemfile.
rake aborted!
NameError: uninitialized constant Dotenv
“`

#解決方法

Gemfileの開発環境のテストに`dotenv-rails`を追加

“`
group :development, :test do
gem ‘dotenv-rails’
end
“`

`config/application.rb`に以下を追記

“`
Bundler.require(*Rails.groups)
if [‘development’, ‘test’].include? ENV[‘RAILS_ENV’]
Dotenv::Railtie.load
end
“`

以上。

#2 RailsとVue.jsでモーダルウィンドウを実装

https://qiita.com/divclass123/items/71465f7a6c313a533eeb
前回の続き。
前回投稿一覧をVue.jsで記述したので、投稿一覧でなにかしらボタンを押したら、
投稿詳細ページが出てくるてきなやつをやってみたい！
動的なページがしっかりと動くのか不安。
https://github.com/euvl/vue-js-modal?ref=kabanoki.net
v-modalで簡単に実装できるからやってみよ。
フロントにvue-jsを使うといろんなライブラリで色々できるからいいね。

Vue.jsで簡単にモーダルが実装できる「vue-js-modal」

参考記事

# 下準備

“`
npm install vue-js-modal –save
“`

“`html

show!

【Rails】掲示板コメント機能実装（メモ）

#　目標
###　コメント機能の実装

[](https://gyazo.com/8b971d580120bd020f316bde87e15df4)
#　環境
* Rails: 6.1.3
* ruby: 3.0.0
* mac: os

#　前提
* 掲示板投稿機能実装済み
* 投稿テーブル名post

#　実装
##　１．モデルを作成
“`ruby:ターミナル
$ rails g model Comment comment:string post:references
“`
生成されたマイグレーションファイル。
今思えばモデル名もコメント名もcommentで紛らわしくしちゃった気がします。。

“`ruby:
class CreateComments < ActiveRecord::Migration[6.1] def change create_table :comments do |t| t.st

Time.zone.todayってTimeクラスに話しかけたのになぜDateクラスが返ってくるのか？

# たまげたこと
こんなRailsのコードがあります。

“`ruby
Time.zone.today
“`

Timeにtodayなんて名前のメソッドを使えるからなんか違和感を感じておりまして。
興味本位で、このインスタンスに「君のクラスは？」と尋ねてみたら、**Dateクラスのインスタンスが返ってきてたまげました**。


僕はTimeクラスさんに話しかけたはずなのに。。なぜなんだ！？
いつの間にDateクラスさんにすり替わってるのだ！？

順を追って整理したいと思います。

### 環境
ruby 3.0.0
Rails 6.0.3

## １、Time#zoneとは？

Time#zoneはTimeZoneクラスのインスタンスを生成するそうな。

>zone()
Returns the T

ポイント機能・レベルアップ機能　もらったいいね数をマイページで表示させたい！　非同期通信のいいね

初めに

ポイント機能というかレベルアップ機能というか・・・
Qiitaでもコントリビューションが増えるとやる気につながるので、
そういった機能を作成したいと思いました。
そんなわけで、自分の記事についたいいね数をマイページで出せるようにしていきます！！
やり方は通知機能と似ているなーと感じました。

(TEUっていうのは、コンテナの数え方です。マニアック・・・）
ついでにこんなのも作れます！

![スクリーンショット 2021-08-26 18.06.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1633266/b5b00502-fb5a-4f3f-0b75-60f50430ad70.pn

（Rails tutorial）rails server がエラーになった際の備忘録

[rails tutorial](https://railstutorial.jp/)（Rails 6.0）の内容に沿って進めていた時のメモです。

# ぶち当たった現象＆やってみたこと
`rails s` したら下記のような表示が出て、ローカルサーバーが起動せず。
（筆者は第2章にて）

“`
=> Booting Puma
=> Rails 6.0.3 application starting in development
=> Run `rails server –help` for more startup options
warning Integrity check: System parameters don’t match
error Integrity check failed
error

ReactコンポーネントのonClick内で使うループカウンタ変数は必ずlet宣言しよう

#はじめに
letではなくvarで宣言してしまったfor文中の i (ループカウンタ変数) をReact コンポーネント中のonClick内で使用したところ挙動がわからずハマったので備忘録として共有します.
そもそもループカウンタをvarで宣言するなんて危険なことするなよ, と今では思いますがハマって初めて両者のスコープの違いを骨身に染みるほど理解できました.

“`
【動作環境】
Rails 6.1.4
react-rails の gemを使用
“`

#1. varで宣言しためにうまく動作しなかったコード
propsで配列を受け取り, それを全て一覧で表示させるため以下のようなコードを書きました.
期待する動作としては, ボタンをクリックするとそのボタンの値がhookで宣言したclickedContentという変数に代入され表示されるというものです.

“`react
import React, { useState } from ‘react’;

function Example() {
const [clickedContent, setClickedC

グラフ表示　入れたgemはChartkickですが、グラフ描画はchart.jsで書いています。

初めに

今回は、こんな感じで棒グラフと、折線グラフを実装しました。


以前、以下の記事で折線グラフは作成済みではあり、
やり方はほとんど一緒です。
この記事ではグラフのコードの解説のみなので、
gemの導入、投稿数の取得方法については以下の記事をご確認ください。
ユーザーがもらったいいね数の取得方法については追って記事を作成する予定です。

https://qiita.com/ki_87/items/37e9f42c118f87416aa6

https://qiita.com/ki_87/items/c105fd2661b5f25836ea

Javascriptの記述

turbolinksを無効にしなくてもグラフは表示できました。

一応、chart

[rails]”いいね解除”が出てこないエラーのないエラー[解決！]

# はじめに
本記事は、現在悩んでいることを記述します。
（記述することで、客観視しやすいことも言い訳の一つです）
今回は１００％備忘録で申し訳ありません。
もし宜しければ、アドバイスいただけますと幸いです。

# いいね機能導入について
`いいね`をLikeテーブルという名前で作成しております。
こちらを参考に作成していますので、ご参照ください。
[Railsでいいね機能を実装しよう](https://qiita.com/nojinoji/items/2c66499848d882c31ffa#posts_controllerrb)

## エラー


## コード

“`routes.rb
Rails.application.routes.draw do

devise_for :users

Activerecordを操作するCRUD処理

#Activerecordとは
簡単に言うとデータベース(SQL)をRubyを通して人にわかりやすく伝えてくれるものです。
本来ならSQLでないとデータベース操作はできないのですがrailsで用意されている
Activerecordのおかげでデータベースの操作ができます。

#コンソールを使う。
コンソールとはざっくり言うとコンピューターとの意思疎通をするものです。
下のコマンドでデータベースを操作できるようになります。

“`
$ bundle exec rails c #cはコンソールのcです。　rails cでも　rails consoleでもokです。
“`
#CRUD処理とは何か。
データベースを操作する時に　Create(生成),Read(読み込む),Update(更新),Delete(削除)
の操作を総称してCRUD処理と言います。
下でCRUD処理の操作を見ていきましょう。

#CRUD処理　（Create)

“`

staff = Staff.create(name: “taro”, email: “taro@example.com”, job:”progr

Routing Error uninitialized constant ~~ の対処法

#背景
Railsにて ログイン機能を実装できるGem devise を実装しようとしていた中の出来事です。
ログイン画面はできたのですが、ログアウトを選択すると以下のエラーが発生しました。

“`
Routing Error
uninitialized constant Users
“`

直訳すると「初期化されていない定数」とのことです。

#原因
users コントローラがないことが原因でした。
初歩的なミスですね。作り忘れていたみたいです。。

#解決策

usersコントローラーで作成したら解決です。
ログアウトを選択してもエラーは出なくなりました。

新規登録機能の作成

# 一覧画面に新規登録のリンクを作成する
“`rb:app/viws/tasks/index.html.slim
h1 タスク一覧

# btnとbtn-primaryの２つのCSSクラスを与えることで、bootstrapがリンクをボタンにような見た目にする
= link_to ‘新規登録’, new_task_path, class: ‘btn btn-primary’
“`
* new_task_pathは、リンク先のURL

# 翻訳情報を追加する
* バラバラに記述しないでいいように一箇所にまとめる

“`rb:config/locales/ja.yml
has_many: “%{record}が存在しているので削除できません”
# ここから追加
models:
task: タスク
attributes:
task:
id: ID
name: 名称
description: 詳しい説明
created_at: 登録日時
upd

Shopify CLIでrails createしたらcannot load such file — nokogiri/nokogiriのエラーが発生したがBundlerの設定を変更して対応できた

Shopify CLIを使いたくてプロジェクトを作るほぼ最初からハマった。
Shopify CLIの問題では無いが次に同じようなことで時間を無駄にしないためにメモ。

# 環境

– MacBook Pro (16-inch, 2019)
– CPUはIntel Core i9
– macOS Big Sur (11.5.2)
– Shopify CLI 2.2.2
– Homebrewでインストールできる最新版 (2021/08/25 現在)
– Ruby 2.6.3 (OS標準)
– Bundler 1.17.2
– Node.js / Yarnは多分動けば大丈夫だと思う (が一応バージョンも記載)
– Node.js 14.17.0
– Yarn 1.22.10

普段は `rbenv` を使ってプロジェクトに応じてRubyのバージョンを切り替えているが `shopify rails create` で何かしらエラーが出ていたのでとりあえずOS標準のRubyを使うようにしています。
Shopify CLIはHomebrewでインストール済み

【インクリメンタルサーチ】Ajaxを用いたキーワード検索機能の実装

#インクリメンタルサーチとは
>キーワード検索を行う際に、利用者が文字を入力するたびに検索を実行する方式。
検索語全体を入力する前に検索を開始し、一文字進むごとに検索結果が更新し即座に候補を表示させる便利な機能。

#実装内容
今回はDBに保存してあるカラム値を対象にインクリメンタルサーチを使用して選択した値をフォームに自動入力させます。

##処理全体の流れ

1. 検索フォームに入力後、jsファイルでイベントが発火
1. jsファイルから受け取ったデータをコントローラのアクションへ返す
1. データベースからjsファイルで受け取ったデータと合致するデータを抽出し、そのデータをjbuilderへ渡す
1. jbuilderでJSON形式に変換したデータを再度jsファイルに送り、そのデータをもとに検索結果を表示

この説明では何いっているか分かりませんよね、、（自分でも分かりません笑）

#完成形はこちら
![4635318dc0d230da36ba06d6b026197b (2).gif](https://qiita-image-store.s3.ap-northeast-1.ama