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

Rails関連のことを調べてみた2021年09月21日
目次

100日後にエンジニア就職するカエル

はじめまして!カエルと言います?

現在就職活動を終えて広告系のベンチャー企業に内定を貰ったのですが、内定者アルバイトとして仕事をしてみるとこれがなんだか自分には合ってないのではないかと思ってしまいました。

そんな中プログラミングに興味を持ちはじめて学習を開始しました。これはそんな僕の学習記録です。

初回ということで
①自分の最終目標とは
②現在はどんな勉強を行なっているのか。
③今後どのように行動していくのか
④今日行った勉強記録
について書いていこうと思います。

まずは①自分の最終目標について
 僕がプログラミングに興味を持ち始めたきっかけは自分の思いを形にできることが面白いと感じたからです!
なので最終目標としてはwebサービスを開発する企業にエンジニアとして就職することです!これを100日後の目標とします!

②現在行なっている勉強について
 これに関しては今は某大学生プログラミングコミュニティに所属してruby on railsを使って擬似Twitterアプリを作っています。

③今後について
 まずは今所属しているコミュニティで作成中のアプリ完成させたいと考えてます。

元記事を表示

[未解決]コード変更していないのに、エラーがないエラーに変わっている(304)

# はじめに
本記事は、現在私が戦っているエラーのないエラーの備忘録です。

## 内容
ユーザーの編集ができなくなってしまった。
1週間前は、普通に編集ができました。
また、特にコードいじってないはずなのに。

[![Image from Gyazo](https://i.gyazo.com/5c59312126510ca9cbb77c3ab1a97586.gif)](https://gyazo.com/5c59312126510ca9cbb77c3ab1a97586)

# コード
コントローラー

“`users_controller.rb
class UsersController < ApplicationController before_action :authenticate_user! def show @user = User.find(params[:id]) @foods = @user.foods.order("created_at DESC") end def followings user = User.fin

元記事を表示

Rails×Reactでユーザー画面の色をアカウントごとに切り替える

#はじめに
SaaS型プロダクトで、管理画面側(Shop)とエンドユーザー側(User)との2つがあるプロダクトを開発しています。管理画面側(Shop)は、Shopアカウントごとにログインを行います。
Ruby on RailsとReact(TypeScript)、Material-UIで開発しています。

#やりたいこと
アカウントごとにそれぞれ別の色を設定し、それが各アカウントごとのエンドユーザー側の画面のマスター色に反映されるようにしたい。
例: アカウントA(ShopA)の色は赤色、アカウントB(ShopB)の色は青色。ユーザーはShopAのエンドユーザー画面に入ると赤色がマスター色(ヘッダーやボタンなど)、ShopBのエンドユーザー画面は青色がマスター色。

#方針
1. Shop_colorテーブルを追加、ShopテーブルがShop_colorテーブルを1つ持つ(has_one)
2. カラーコード(例:#FFFFFF)を一旦追加。
3. RailsControllerで、ShopのShop_colorを取得しReact側に送信、Shop_colorがnullであればデ

元記事を表示

【AWS】 S3アップロード Rails CarrierWave

#目標
s3に画像をアップロードする

#前提
* 画像投稿機能実装済
* AWSアカウント作成済
* CarrierWave使用

# やりた方
####AWSでIAMユーザを作成していきます
①IAMにアクセス→ユーザー追加するを選択
②ユーザー名をきめる
③AWS認証情報タイプの選択で、アクセスキー−プログラムによるアクセスにチェックを入れる→次へ
④既存のポリシーにアッタチを選択
⑤ポリシー検索でS3を入力→ AmazonS3FullAccessを選択
⑥キーとタグは作成せず→次のスッテプ:確認
⑦管理ポリシーがAmazonS3FullAccessになっていることを確認して→ユーザーの作成
⑧アクセスキーIDとシークレットアクセスキーが出てくるので必ずメモするか、csvのダウンロードをしておく→閉じる
これでIAMユーザーが作成できたので、次にS3を作成

####S3バケットの作成

①S3にアクセス S3を選択→バッケット作成選択
②バケット名を選択→他と被らない名前を記入してください
③リージョンはそのままの(東京)ap-northeast-1で
④パブリックアクセスの全

元記事を表示

railsチュートリアル第五章 ルートurl

###RailsのルートURL
名前付きルートをサンプルアプリケーションの静的ページで使うために、ルーティング用のファイル(config/routes.rb)を編集していきます
静的ページについても同様にルーティングを設定

私たちはこれまでに、ルートURLを定義するコードを3回見てきました。
Helloアプリケーションのコード

“`rb
root ‘application#hello’
“`
Toyアプリケーションのコード

“`rb
root ‘users#index’
“`
Sampleアプリケーションのコード

“`rb
root ‘static_pages#home’
“`
いずれの場合においても、rootメソッドを使ってルートURL “/” をコントローラーのアクションに紐付けていました。
ルートURLのようなルーティングを定義することの効果は、“`ブラウザからアクセスしやすくすることだけではありません“`。
それ以外にも、“`生のURLではなく、名前付きルートを使ってURLを参照することができる“`ようになります。
例えばルートURLを定義すると、r

元記事を表示

【Rails/PAYJP】ユーザーとクレジットカード情報を紐付ける方法

プログラミングスクールの最終課題でオリジナルアプリを作成するにあたり、
ユーザーとクレジットカード情報を紐付ける方法を学習したので、アウトプットしていきます。
Qiitaへの投稿に不慣れなため、稚拙な部分もありますがご容赦ください。

前提条件
・Rubyバージョン2.6.5
・Railsバージョン6.0.0
・`gem ‘devise’`によるユーザー管理機能を作成済み。
・公開鍵と秘密鍵の環境変数を設定済み。

# ユーザーとカード情報を紐付ける流れ

①環境変数の確認
②PAY.JPを使えるように設定
③カード登録画面の実装
④jsファイルの実装
⑤cardsコントローラーの実装とバリデーションの設定
⑥登録しているカード情報の詳細ページを作成

# ①環境変数が設定されているか確認する

セキュリティ上、公開鍵・秘密鍵の情報をコードに直接記述できないため、環境変数に設定する必要があります。
ターミナルで環境変数が設定されているか確認します。

“`
% env | grep PAYJP
PAYJP_PUBLIC_KEY=”設定した公開鍵の値”
PAYJP_SECRET_KEY

元記事を表示

妊娠/出産を経て独学から個人でプロダクトを作るまでにやったこと

この度、[iitoko](https://iitoko.online/)という、地方移住のマッチングサイトを開発しました。
(どうしてこのサイトを作ろうと思ったのか、どんなサイトになっているのか、ということはまた別の機会に書こうと思います。)

今回は、独学からこのサイトを開発するに至るまで、
どんな風に勉強してきたのかを備忘録として残しておこうと思います。

#ざっくり系譜
| | 出来事と勉強法 |
|:-|:-|
|2019.4〜| お腹に長女を授かる|
||Progate・ドットインストールで色々とやってみる→日本語のドキュメントが豊富ということでRubyを勉強することにする|
|2019.10〜|産休に入ったことで勉強に本腰。Rubyをチェリー本で勉強。|
|2019.11|出産 〜3ヶ月間は産後の回復と育児で精一杯(チェリー本終わらず)|
|2020.02〜04|少しリズムが掴めてきたので、勉強再開。記憶がなくなったので再びprogate(ruby)から。アプリ版終わったあとWeb版でもう一周。その後チェリー本再開 ~4月にかけて2周やった。|
|2020.04~05|p

元記事を表示

axiosを使った簡単な実装

# axios get postメソッドについて

開発環境
windows10 home
Ruby 2.6.3
Ruby on Rails 5.2.6
vue.js 2.6.14

## axiosとは
ブラウザや node.js で動く Promise ベースの HTTP クライアントである。

インストール

“`
yarn add axios
“`

Vueファイルにインポート

“`
import axios from ‘axios’;
“`
## getメソッド
“`js
import axios from ‘axios’;

methods: {
setMemo: function () {
// axios.HTTP動詞(‘url’)
axios.get(‘/api/memos’)
// .then()で通信が成功した際の処理を書く。
.then(response => (
// Axiosで呼び出したAPIの情報をmemosに代入
this.memos = response.

元記事を表示

Cloud9へTalend API Testerを使ってPOSTしてみた

Cloud9を使ってRailsのアプリ開発をしていた際、APIの動作検証でTalend API Testerを使ってみたので必要な設定等をまとめておく。

## Talend API Testerをインストール
まずはChromeの拡張機能でTalend API Testerをインストールしておきます。
https://chrome.google.com/webstore/detail/talend-api-tester-free-ed/aejoelaoggembcahagimdiliamlcdmfm?hl=ja

Chromeのアドレスバーの右側の拡張機能に**Talend API Tester**が表示されていればインストール成功!

## 使い方
Chromeの右上にある拡張機能でTalend API Testerをクリックすると別タブで開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/849412/71c0aa9d-0667-1534-9804-c5b89cf9aab1.

元記事を表示

部分テンプレートを理解する!

# 結論!

部分テンプレートとは、ビューファイルにおいて繰り返し使用するコードを切り出し、再利用する仕組みのことです!

複数の箇所で使用されている部分に変更があった時でも、1つのファイルの編集だけで済むメリットがあります!

簡単に言うと、共通の部分を利用して、HTML構造の部分を一括にしていると言うこうとですね!

# 1.ファイルの作成!

Railsでは、繰り返し使用されている部分を_○○.html.erbというファイル名で切り出します!

使用するファイルで割り当てることにより、管理しやすいコードに出来るみたいです!

下記の記述は、部分テンプレートとして切り出すときに作成するファイルです!

“`
_○○.html.erb
“`

テンプレート自体のファイル名は、命名規則として、アンダースコア_を先頭に記述します!

# 2.使用方法!

下記の例を見ながら説明していきます!

“`php:index.html.erb

<% @eats.each do |eat| %>

WindowsのWSL2環境にRailsをローカルインストールする

# 概要

WSL2に構築したCentOS環境上に、Railsをインストールする。
環境を汚したくないので、グローバルのgemではなくローカルにインストールする。

# 前提

* WSL2にLinux環境を構築している
* rbenvでrubyを管理している

# 環境

* OSはCentOS 7.9
* ruby versionは2.7.4
* bundler versionは2.1.4(rubyに内包のバージョン)

# やりたいこと

* Railsをローカルにインストールしてアプリケーションのベースを作る

# 手順

### 事前準備

root権限(またはsudo)で `g++`と`MySQL` をインストールしておく。

“`
# yum install gcc-c++
# yum install mysql-devel
“`

### ディレクトリ作成

ディレクトリを作成し、その中で作業する。

“`
$ mkdir rails_application
$ cd rails_application
“`

### Gemfileの作成

下記コマンドを実

元記事を表示

Dockerで動くRailsアプリの展開とテストを試してみた

#目次
[1.はじめに](#はじめに)
[2.dockerで動くrailsアプリの展開](#dockerで動くrailsアプリの展開)
[3.docker上でのrspecテスト](#docker上でのrspecテスト)
[4.まとめ](#まとめ)

#はじめに
前回の記事[「開発環境のRailsアプリをDockerコンテナで起動してみた」](https://qiita.com/Unimaru/items/55115408f7d161fd32a7)では、既存のRailsアプリをDockerコンテナで動かしてみました。せっかく、Docker上で動くことが確認できましたので、今回はアプリを他の端末に配布して起動してみたり、Rspecのテストが問題なくできるかを試してみました。

#dockerで動くrailsアプリの展開
今回実施したアプリの展開フローは以下の通りです。
※端末AはMacBook Pro、端末BはMacBook Airであり、共にDocker Desctop for Macをインストール済
![スクリーンショット 2021-09-20 11.10.16.png](https:

元記事を表示

redmineのアップデート3.1から4.2

ダメ元でやってみようと思ってやってみたらできた。笑

# 環境(移行元、移行先)

| # | 移行元 | 移行先 |
|:-|:-|:-|
| Redmine | 3.1.0 | 4.2.2 |
| Ruby | 2.0.0 | 2.7.4 |
| Rails | 4.2.3 | 5.2.6 |
| Webサーバ | Apache2.4 | Apache2.4 |
| Appサーバ | passenger 5.0.30 | Unicorn 6.0.0 |
| OS | Amazon Linux2(x86_64) | Amazon Linux2(ARM64) |
| DB | RDS/MySQL8.0 | RDS/MySQL8.0 |

※プラグインは、[view_customize](https://github.com/onozaty/redmine-view-customize)のみ
※Themeは、[bleuclair](https://github.com/farend/redmine_theme_farend_bleuclair/blob/ma

元記事を表示

IntelliJ+docker-compose+railsでブレイクポイントでのデバッグ環境を構築する

# Gemfileにruby-debug-ideとdebaseを追加
Gemfileにruby-debug-ideとdebaseを追加してインストールしておきます。
**もし追加しなかった場合は、SDK構成からやり直す必要があります。**

# SDK構成

1. File → Project StructureからProject Structure 構成画面を開きます

2. Ruby SDKを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/659469/3fa4118e-8dc9-48d5-763b-61ee87d4c688.png)

3. New remoteを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/659469/3088b1c1-4c3d-7bc6-8ddd-f626525eac1c.png)

4. docker-compose.ymlからサービスを選択します

元記事を表示

Rails form_select が急にsyntax error になった時のデバッグ

こんにちは。
今まで普通に動いていたform_selectが急にシンタックスエラーを吐いたのでデバッグしました。

![エラー画面](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1430116/171ace52-d203-01b0-449b-c51f80eff0a4.jpeg)

原因は直前までdeviseの日本語化のため、i18Nの設定をいじっていたことらしいです。
ということで config/locals/ja.yml に日付も対応させてあげようということで…

“`yml:config/locals/ja.yml
ja:
date:
formats:
default: “%Y/%m/%d”
short: “%m/%d”
long: “%Y年%m月%d日(%a)”

day_names: [日曜日, 月曜日, 火曜日, 水曜日, 木曜日, 金曜日, 土曜日]
abbr_day_names: [日, 月, 火, 水, 木, 金, 土]

元記事を表示

railsチュートリアル第五章 スタイルシート

####素晴らしい構文を備えたスタイルシート
この節では、Sassが提供する2つの重要な機能
“`ネスト“`と“`変数“`について説明
SCSSはCSSに新しい機能を追加しただけ
Railsのアセットパイプラインは、.scssという拡張子を持つファイルをSassを使って自動的に処理してくれます
custom.scssファイルはSassプリプロセッサによって前処理され、その後ブラウザへの配信に備えてパッケージ化される

#####ネスト
タイルシート内に共通のパターンがある場合は、要素をネストさせることができます

“`css
.center {
text-align: center;
}

.center h1 {
margin-bottom: 10px;
}
“`
Sassを使って次のように書き換える

“`scss
.center {
text-align: center;
h1 {
margin-bottom: 10px;
}
}
“`
ネストの内側にあるh1というルールは、“`.centerのルールを継承“`

少し異なるルールに

元記事を表示

9.19振返) 要確認#テストのエラーの読み方、探し方(デバッグしてログを見る)

教えてもらったこと

“`
– テスト(今回の場合controller_spec)に問題があるのではないか?
– Factoryに問題がないか?
– pathに問題がないか?
– paramsに問題がないか?

– 実装(今回の場合controller.rb)に問題があるのではないか?
– ストロングパラメータに問題がないか?
– インスタンスは作成されるか?
– インスタンスは保存されるか?(=バリデーションに引っかからないか?)
→ binding.irbをぶちこんで見る

共通:
ログは読む。
– デバッグしながらログの流れを「ちゃんと」見る「ちゃんと!」
“`

同じテストコードの記述を2回かましてエラーになった

“`
今回の流れ:
今回の場合、両方(テスト&実装)を確認して特に問題がない

リクエストが2回発生しているのを発見

テストで2回リクエストしている
(テストの書き方の修正が必要)
“`

ActiveSupport::MessageVerifier::InvalidSignature: また頭

元記事を表示

ec2簡単にログインできるようにしよう(メモ)

##簡単なメモです

毎回EC2にログインの際`-i ssh 秘密鍵名.pem ec2-user@IPアドレス`を打ち込むのは面倒なのでショートカットできるようにします。
`config`に`Vim`で書き込みします。
下記をターミナルで入力。

“`
% cd ~/.ssh
% vi config
“`
INSERTモードにして書き込んでいきます。
接続先名は簡単なものが楽でいいと思います。

“`
Host 接続先名
HostName Elastic IPアドレス
User ec2-user
IdentityFile ~/.ssh/プライベートキーの名前.pem
“`

もう一度yesと答えたらOKです。

“`
% ssh 接続先名
“`
これで簡単にログインできるようになります。

元記事を表示

ユーザー登録(devise)と同時に別モデルにデータを同時保存したい場合の話。

# はじめに
オンラインスクールにてRuby on Railsの学習をはじめ5ヶ月が経ちました。
リリースを前提に現在開発予定のアプリに実装した機能のアウトプットになります。
「Deviseのユーザー登録と同時に別モデルにデータを保存する方法」です。

具体的なユースケースの例は、下記のような場合です。
・ユーザー登録と同時に銀行口座が開設される。
・ユーザーは1つの銀行口座しか持つことができない。
・銀行口座IDとユーザーIDは紐付く。
・登録時の口座残高の初期値はnullではなく0円。

ユーザー登録と同時に何か一つ、自動で生成されるモノ。を実装する際はお役に立てるかと思います。

:::note warn
※今回は、バリデーションについては触れません。
※今回は、アプリ作成・Devise導入・基本的なユーザー管理機能の説明は省きます。
:::

# 導入
ユーザー管理機能の実装が終わっている前提。
最低限、ユーザー新規登録とログインはできる状態でこちらをお読み下さい。

まず前提として、deviseは基本的にGemで動くものなので、通常のMVCの流れとは違います。
”ユーザー登録

元記事を表示

RSpecで普段は隠れている要素(プルダウンの中身など)の存在をテストする

# やりたいこと
「ログアウトボタン」があるかどうかをテストする
 

# 結論
検証したい要素のテストの後ろに`visible: false` を追加
※これで非表示の要素にも対応可能になります

~~~spec/systems/users_spec.rb
expect(page).to have_link ‘ログアウト’, href: logout_path, visible: false
~~~

# できるまでにやったこと
以下のテストコード追加

~~~spec/systems/users_spec.rb
e

元記事を表示

OTHERカテゴリの最新記事