Rails関連のことを調べてみた2022年01月17日

Rails7をちょっと試す（Bootstrap編）

## はじめに

Rails 7.0.0 では、[Bootstrap](https://getbootstrap.com/) が簡単に利用できるようになっています。
今回は、Bootstrap を試してみたいと思います。

Bootstrap を使うためには、npm と yarn が必要です。

以下のバージョンで確認しました。

– Ruby 3.0.2
– Rails 7.0.0
– npm 8.3.0
– yarn 1.22.17

## Rails プロジェクトを作る

新しくRailsプロジェクトを作ります。このとき `–css` を指定します。
(データベースオプションを指定しているのに深い意味はありません。)

“`shell
mkdir rails_sandbox
cd rails_sandbox
rails new . –database=postgresql –css=bootstrap
“`

## scaffold を実行する

scaffold を使って簡単なCRUDを作ります。 `Bootstrap` の確認をしたいだけなので適当です。

“`s

[Rails][devise]追加したカラムにストロングパラメーターを使えるようにしよう

備忘録として

ユーザー管理機能を実装できる**devise**
デフォルトとして`「Eメールアドレス」「パスワード」`のカラムがすでに存在しており、ストロングパラメーターも使用できるが、自分で追加するカラム（ユーザー名など）にはストロングパラメーターは使えない状態なので、使えるようように記述する必要がある。

### 前提
– deviseを導入済み→[deviseの導入手順](https://qiita.com/Shi-raCanth/items/ce98a39800401cc77ee0)
– マイグレーションファイルでカラムを追加している

## application_controller.rbファイル
すべてのコントローラーが継承しているファイル。
ここに処理を記述しておくことで、すべてのコントローラーで共通となる処理を作ることができる。
deviseの処理を行うコントローラーはGem内に記述されているため編集することができないので、このapplication_controller.rbを編集していく。

## devise_parameter_sanitizerメソッド
d

【Rails × AWS】本番環境のDB(MySQL)をRDSに移行し、タイムゾーンを日本時間に変更する

EC2環境にデプロイしていたRailsアプリのデータベースを後からRDSに移行したので自分自身の復習も兼ねて手順をまとめました。

#前提

“`
Rails -v 6.0.4
MySQL -v 5.7.36
サーバー： nginx
“`

#AWS側の設定

1. AWSのRDSダッシュボードを開く

2. 「データベースの作成」を選択

3. エンジンのタイプを選択
現在使用しているSQLの種類を選択。
今回はMySQLを選択します。

4.MySQlのバージョンを選択
![スクリーンショット 2022-01-16 21.26.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1640672/e7db83

Webの仕組みとHTTP通信について

##ブラウザとサーバー
ブラウザ：今表示されている画面
サーバー：様々なデータを保存している大きなPCのイメージ

ブラウザではサーバーからファイルをダウンロードしてきて表示している。ファイルの中身にはHTML、CSS、JavaScriptなどの情報が格納されている。

（ブラウザ）　←←←←←　（サーバー）
　　　　　　　ファイル
　　　　（HTML、CSS、JS）

##HTTP通信について
HTTPとはブラウザとサーバーのやりとりの方法
基本は、リクエストとレスポンス

　　　　　　リクエスト
　　　　　　→→→→→
（ブラウザ）　　　　　（サーバー）
　　　　　　←←←←←
　　　　　　レスポンス

リクエストで欲しい情報をサーバーに投げて、サーバーがその情報を返す。
このリクエストとレスポンスのやりとりのルールを作るのがサーバーサイド言語。

##HTTPの基本のメソッド４つ

###①GET　データの取得
Webページを表示するときに使う

　　　　　このページみたい
　　　　　　→→→→→
（ブラウザ）　　　　　（サーバー）
　　　　　　←←←←←
　　　　　はい、ペー

CRUD処理（rails6）エラー解決

#CRUD処理を実装中に発生したエラーについてのアウトプット。

##エラー内容
投稿した情報を削除しようとした時に発生したエラー。
削除なのにHTTPメソッドがGET、本来はDELETE.


##考えられる原因
1.ルーティングが間違っている。
2.コントローラーアクション間違い
3.ビューファイル記述間違い

##エラー解消の流れ
1~3が間違っていないか確認。

“`
ルーティング
delete ‘/users/:id’, to: ‘users#destroy’

コントローラー
def destroy
user = User.find(params[:id])
user.destroy
end

削除ボタン追加
<%= link_to '削

rails(Docker)+nginxでPermission denied @ rb_io_reopen – /myapp/log/puma.stdout.log (Errno::EACCES)が発生する

# はじめに

Rails環境をDockerを利用して環境構築していたのですが、Nginxをつないだところエラーが発生してほかの記事があまり参考にならなかったため自分なりにまとめていきます。

主にWSL2でDockerを使っている方がこのエラーの対象になるかと思います。

# 問題

DockerでRailsとNginxの環境を用意して、Railsコンテナのユーザーを`app`(rootではない)にdocker-compose.ymlで変更した状態でコンテナを起動すると以下のエラーが発生します。

“`
rails | * Listening on http://0.0.0.0:3000
rails | * Listening on unix:///myapp/tmp/sockets/puma.sock
rails | Use Ctrl-C to stop
rails | bundler: failed to load command: puma (/usr/local/bundle/bin/puma)
rails

Rails × Vue で vue Router を使用する

rails アプリの中でVueを使用する場合にVue Routerを使ったページの切り替えができるまでの過程を書いていきます。

## Vue Routerとは

Vue Routerとは、Vue.jsを使ったアプリケーションでルーティング制御をするためのプラグインのことです。これを利用することでリクエストされたURLごとに表示するページを切り替えることができるようになります。

## Vue Routerを使いページの切り替えができるようになるまで

Vue Routerでページの切り替えをするには

– Vue Routerのインストール
– Vue Routerの設定
– application.jsファイルでVue Router の設定をimportする
– 表示したいページ（コンポーネントの用意）
– rails側のルーティングの設定

が必要となるので順番に進めていきます。

## Vue routerのインストール

まずは Vue Routerをインストールしていきます。インストールの仕方は様々だと思いますが自分の環境では以下のコマンドでインストールを行いました。

`

Rails 7でTailwind CSSを使ってみた

Rails 7の新機能を触ってみたいと思い、今回はその中でもTailwind CSS for Railsというgemを使ってNode.jsやWebpack無しでモダンなフロントエンド開発環境をお試しで作ってみたいと思います。

# 脱モジュールバンドラー
Rails 7では、[cssbundling-rails](https://github.com/rails/cssbundling-rails)というGemをインストールすることで、 Tailwind CSS、 Bootstrap、 Bulma、PostCSS、 Dart Sassを使用してCSSを結合・最適化し、Railsのアセットパイプラインで配信ができるようになったそうです。Webpackerなどのバンドラーを使わなくとも良くなったということですね。
その中でも今回はTailwind CSSを使ってみました。

ちなみにバンドラーを使わないメリット等含め、Rails 7におけるフロントエンド周りの刷新についてDHH氏のブログ記事をまとめた以下記事が参考になりました。

https://www.publickey1.jp/blo

rails5.2.6で複数モデルのDM機能（ActionCable）を実装

#はじめに
DM機能でActionCableを使ってみた。
ActionCableを使えばページをリロードしなくてもメッセージがリアルタイムに表示されるのでかっこいい。

###お世話になった記事
ほとんど知識がなかったので下記のサイトを参考にさせていただきながら作成しました。

[リアルタイムチャットは誰でもつくれる~Action CableでDM機能を作ろう~](https://qiita.com/OgawaNorihiro/items/6d9f85d8e89d1def4f15)
[［Rails5.2 ActionCable］シンプルなチャットアプリを作ってみた！！](https://qiita.com/kskumgk63/items/660d76488659ee6da350)
[Rails 5 + ActionCableで作る！シンプルなチャットアプリ（DHH氏のデモ動画より）](https://qiita.com/jnchito/items/aec75fab42804287d71b)

###開発環境

ruby 2.6.3
Rails 5.2.6

#前提条件
DM機能を一

【Rails】Rails7.0でyarn build yarn build:cssが起動しない

#前提
Rails 7.0.1
Ruby 2.7.2
docker 20.10.11

###発生したエラー
rails new -j esbuild で作成した後にサーバーを起動させる際にyarn buildとyarn build:cssがエラーが出てバンドルされない状態になってしまう。

“`console:console
~/rails(master) $ bin/dev
20:59:27 web.1 | started with pid 94024
20:59:27 js.1 | started with pid 94025
20:59:27 css.1 | started with pid 94026
20:59:27 js.1 | yarn run v1.22.15
20:59:27 css.1 | yarn run v1.22.15
20:59:27 js.1 | error Command “build” not found.
20:59:27 js.1 | info Visit https://yarnpkg.com/en/docs/cli/r

Railsコマンド

#前提
**参考書籍**

– 小餅良介著『独習Ruby on Rails』SE出版

**実行環境**

– Ruby on Rails ver5.2.2

#コマンド

**`$ rails new　アプリケーション名　[オプション]`**
アプリケーションを作成

– `-O` : Active Record の生成をスキップ
– `-d` : 使用するデータベースを指定
– `-T` : 表人で用意されているテスト関連ツールのフレームセットの生成をスキップ
– `-B` : bundle install をスキップ
– `–skip-keeps` : 標準フレームのディレクトリに空のディレクトリ(concernsやimagesなど)の生成をスキップ
– `–api` : ActionController::API を継承したコントローラーを生成

—

**`$ rails generator(g) ジェネレータの種類　引数`**
新しいモデルやコントローラのひな型を生成

– `$ rails g controller コントローラ名　[アクション名[…]]

Rails ディレクトリ構成・各種ディレクトリとファイルの役割

#前置き

**参考書籍**

– 小餅良介著『独習Ruby on Rails』SE出版

**環境**

– Ruby on Rails ver.5.2.2

#ディレクトリ構成(一階層)

:file_folder:アプリケーションディレクトリ
　├ :file_folder:.git
　├ :file_folder:app
　├ :file_folder:bin
　├ :file_folder:config
　├ :file_folder:db
　├ :file_folder:lib
　├ :file_folder:log
　├ :file_folder:public
　├ :file_folder:storage
　├ :file_folder:test
　├ :file_folder:tmp
　├ :file_folder:vendor
　├ :page_facing_up:.gifitignore
　├ :page_facing_up:.ruby-version
　├ :page_facing_up:config.ru
　├ :page_facing_up:Gemfile

1回のフォーム送信で複数のモデルを保存する方法

　今回は一つのリクエストで、2つのモデルに対して保存処理を行う方法についてまとめます。例えば購入記録を保持するテーブルと、それに紐づく住所を保持するテーブルがあるとします。この時、どうすれば一回のリクエスで二つのテーブルに対しえて保存処理を行えるのでしょうか。その解決方法としてFormフォームオブジェクトパターンを新しく学んだので、備忘録としてまとめます。

#Formフォームオブジェクトパターン
　Formフォームオブジェクトパターンとは、一つのフォーム送信で複数のモデルを操作したい時に使います。一つのフォーム送信で複数のモデルを操作する時には例えば以下のような問題が発生します。
①一度で複数のモデルのバリデーションを通過させないといけない
②バリデーションで弾かれた場合、複数のモデルのエラーメッセージを表示させないといけない。

これらを実装しようとすると複雑なコードを書かなくてはなりません。
そういった問題を解決するためにFormフォームオブジェクトパターンを使います。
使い方としては

①modelsディレクトリ直下に自作ファイルを作成し、複数のモデルに関する処理をまとめて記述

[Elixir]RubyやRailsのメソッドは便利なものが多いので、それらをElixirでも使えるようにしたライブラリをリリースしました。

## 多言語を習得する際の困り事

「Rubyだと配列からnullを排除する時 `compact`で出来たけど、Elixirだとどう書くんだろう。。
あれ、`Enum.select` って無いのか `Enum.filter`を使えばいいのね！」

Elixirを学習中に、上記のような **ちょっと調べればわかるけれども、ちょっと調べないといけない**ような事が、ちょくちょく発生しました。
## RubyやRailsのEnumerable系メソッドをElixirでも使えるようにしました！

RubyやRailsはその歴史の長さや、コミュニティの厚さにより、便利なmethodや直感的なaliasが多数定義されてます。
それらの資産を有効活用できないかと思い、**REnum**という、ElixirのmoduleをRuby/Rails風に拡張したライブラリをリリースしました。

https://hexdocs.pm/r_enum/readme.html

なぜ、Enum（Enumerable）等に焦点を当てたかというと、Elixirの得意とするデータ変換にはEnum（Enumerable）等の

rails newでコケたときの備忘　m1 mac macOS 12.1

#書いた理由

備忘のため。
ググってもダイレクトに出てこなかったので、同じところで詰まっている人の参考になれば。

#起こったこと

`rails new`
を叩いたら以下のメッセージでコケた

“`
/Users/hoge/.rbenv/versions/2.7.4/lib/ruby/gems/2.7.0/gems/bootsnap-1.9.4/lib/bootsnap/load_path_cache/core_ext/kernel_require.rb:23:in `require’:
dlopen(/Users/hoge/.rbenv/versions/2.7.4/lib/ruby/gems/2.7.0/gems/bootsnap-1.9.4/lib/bootsnap/bootsnap.bundle, 0x0009):
tried: ‘/Users/hoge/.rbenv/versions/2.7.4/lib/ruby/gems/2.7.0/gems/bootsnap-1.9.4/lib/bootsnap/bootsnap.bundle’ (mach-o file, b

{Rails}uninitialized constant * (NameError)と出た場合の対処法

①やりたいこと
rails cでレコードを確認＆作成したいが、uninitialized constant User (NameError)と出てしまう。※Userはモデル名です。

②エラー内容

“`
% rails c
Running via Spring preloader in process 18643
Loading development environment (Rails 6.1.4.4)
irb(main):001:0> User.all
(irb):1:in `

‘: uninitialized constant User (NameError)
“`

③原因
uninitialized constant * (NameError)は、Rubyで「定数やclassが定義されていない」ことを意味しています。
ファイル名の記述間違いなどで、呼びたいクラス名を記述できていない場合などで発生します。
この場合はコントローラー名が間違っていたみたいです。

④解決策
ターミナルを遡ってみると、コントローラーを作成しているとこ

【個人開発】海とサーフィンが好きすぎて、海のように見え方が変わるサーフィン日記共有サービスを作ってみた。

# **はじめに**

天気が雪の日は雪が降ります。


サーフィンをしたことがありますか？

一度きりの人生、自然と一体になれるこんな素晴らしいスポーツをやってみる事もしないなんて勿体ない事です。

私は海とサーフィンを愛しています。

自身の大好きなものを題材に作品を作って誰かの心に届くものにしたい！そんな想いがあります。

初めまして。りゅうじと申します。

【Twitter】

[https://twitter.com/otokomigakimasu](https://twitter.com/otokomigakimasu)

【今回作ったサービス】

[https://www.namikki.jp](https://www.namikki.jp/)

**私はエンジニアの方は全員海の近くに住んでサーフィンをした方がいいと思っています。**

メ

railsチュートリアル第十四章 ［Follow］のWebインターフェイス 統計と［Follow］フォーム

##［Follow］のWebインターフェイス
この節では、モックアップで示したようにフォロー/フォロー解除の基本的なインターフェイスを実装します。
フォローしているユーザーと、フォロワーにそれぞれ表示用のページを作成します。
ユーザーのステータスフィードを追加して、サンプルアプリケーションを完成させます。

###フォローのサンプルデータ
####サンプルデータにfollowing/followerの関係性を追加する
db/seeds.rb

“`rb
.
.
.
# 以下のリレーションシップを作成する
users = User.all
# 全ユーザー
user = users.first
# 最初のユーザー
following = users[2..50]
# 全体の３(2+1)番目から５１(50+1)番目まで呼び出す
followers = users[3..40]
# この場合 ４番目から４１番目まで呼び出す
following.each { |followed| user.follow(followed) }
# 「each」メソッドは配列や範囲オブジェクトなどで用意されて

railsチュートリアル第十四章 ステータスフィールド サブセレクト

##ステータスフィールド
現在のユーザーにフォローされているユーザーのマイクロポストの配列を作成し、現在のユーザー自身のマイクロポストと合わせて表示します。
このセクションを通して、複雑さを増したフィードの実装に進んでいきます。
これを実現するためには、RailsとRubyの高度な機能の他に、SQLプログラミングの技術も必要です。

###動機と計画
####ステータスフィードのテスト
test/models/user_test.rb

“`rb
require ‘test_helper’
.
.
.
test “feed should have the right posts” do
michael = users(:michael)
archer = users(:archer)
lana = users(:lana)
# テストユーザー

# フォローしているユーザーの投稿を確認
lana.microposts.each do |post_following|
# フィードを作成する
assert

【共同開発】欲しいものを買う優先度をランキング形式で提示するサービス「HoshiMe」をリリースしました！

# はじめに
早速ですが質問です。衝動買いをして後悔した経験はありませんか？

私はよく後悔しています。。
ずっと欲しかったものがあったにも関わらず、違うものを衝動買いしてお金を使ってしまい、本当に欲しかったものを買うためのお金がなくなってしまったことがありました。

そんな悩みを解決するために開発したのが、欲しいものを買う優先度をランキング形式で提示するサービス **『HoshiMe』（ほしみぃ）** です。

https://hoshime.herokuapp.com

# 使用技術
**バックエンド**
– Ruby 2.6.6
– Rails 6.1.4

**フロントエンド**
– TailwindCSS
– JavaScript(jQuery)
– Chart.js

# 主なサービス内容
### 欲しいもの登録ページ
ユーザ登録なしで欲しいもの3つ登録できるように実装しました。