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

AWC EC2にWebシステムのデプロイ（下書き

つらつらと仕事中の備忘録
書きながらやっているので後日清書予定
AWSEC2にDocker+Railsの環境を構築してテストしようという作業

EC2インスタンス
・最低コスト
・とにかく動け
・Ubuntu

流れ

・手始めにEC2にセキュリティグループの設定を修正
　→テラターム接続は失敗したので暫定でGit Bushで接続。上記設定に関係あるか不明

・下記URLを参考にDockerとDockerComposeをaptとcurlを使ってインストール。

・sshの設定、key登録をgithubと”EC2インスタンス”にする（Ec2側にssh-addをかまさないとダメ。また、かますときはevalでプロセス明確する）

・gitcloneをする（解決）
　→sudo chown ユーザー名:ユーザー名 /var/www # 現ユーザーに権限付与　をしてなかった

・dockerをデプロイ（権限がなくて混乱）
　→https://virment.com/how-to-fix-couldnt-connect-to-docker-daemon/　ここを参考に修正中

参考URL

Rails6にjQueryを導入する方法

Rails６から標準で導入されているWebpackerを利用することで、jQueryを簡単に実装できます。

Rails5で書かれている記事も多かったのでだいぶ混乱していました。。

# Rails5以前との違い
**1.　gemが必要ではなくなった**
以前までは“`’jquery-rails’gem“`をインストールする必要がありましたが、Rails6からはgemの追加が必要なくなり、代わりにwebpackで必要な情報をインストールしていきます。

**2.　jQuery関連ファイルの保存フォルダが違う場所にある**
かつては“`app/assets/javascripts“`フォルダに保存していましたが、Rails6以降は“`app/javascript“`フォルダに変更となります。

# jQueryのインストール
**そもそもjQueryとは**

JavaScriptをより簡単に記述するためのライブラリのひとつ。

したがって、jQuery（ライブラリ）を使うのであればJavaScript（元のプログラミング言語）にコンパイル（翻訳）する必要があります。
そのた

Railsで使用するコマンド

Railsで使用する基本的なコマンドについてまとめた記事です。

# プロジェクトの作成
“`:#プロジェクトの作成
rails new アプリケーション名 [オプション]
“`
“`:#オプション(一部)
# ファイルが存在する場合に上書き
–fまたは -–force

# データベースの種類(MySQL)
–d=mysql または -–database=mysql

# データベースの種類(PostgreSQL)
–d=postgresql または –database=postgresql

# V（ビュー）を生成しない
–api
“`
# Controllerの作成・削除
“`:#コントローラの作成
rails g controller コントローラー名 メソッド名1 メソッド名2 …
“`

“`:#コントローラの削除
rails d controller コントローラー名
“`
# Modelの作成・削除
“`:#モデルの作成
rails g model モデル名 カラム名1:カラムの型 カラム名2:カラムの型 …
“`
“`:#モデ

Rails6でシステムスペック（capybara 導入）

## はじめに
先日、Rails6 でシステムスペックのテスト実行の際に Capybara が導入されておらずエラーが発生してしまいました。
Rails6 では Capybara はデフォルトでインストールされているはずなのに何故かエラーとなってしまう…。
その原因としていくつか勘違いしていた事がありましたので、まとめたいと思います。

### 開発環境
– Rails 6.1.4
– ruby 2.7.3
– rspec-rails 5.1.2

## Capybara の設定
spec_hepler.rb に capybara の設定を追加します
“`spec_hepler.rb
# See http://rubydoc.info/gems/rspec-core/RSpec/Core/Configuration

require ‘capybara/rspec’

RSpec.configure do |config|
config.before(:each, type: :system) do
driven_by :rack_test
end

co

３カ月の学習を終えて

現職からの転職を考えて、プログラミングの学習を始めてから約３カ月。
企業提出用のポートフォリオがひと段落ついたため、こちらのQiitaのほうに今までの学習の振り返りや発生したエラーの解決方法を備忘録として投稿していこうと思います。
主に使用した言語はHTML、CSS,Ruby,Railsです。

# HTML,CSS
簡単に言えばWEBサイトを構成するための言語です。
HTMLでWEBサイトの大まかな構造を作り、CSSで外観を整えるといったイメージ。
# Ruby
WEBアプリケーションを作るために必要な言語
#### HTMLとの違い
HTMLは「WEBサイト」を作るための言語、対してRubyは「WEBアプリケーション」を作るための言語です。
「WEBサイト」は訪問者が受動的に閲覧するものです。つまり、静的なページのことです。

一方「WEBアプリケーション」は訪問者に能動的な動作を求める者です。閲覧だけでなく、情報を入力してもらい、その内容によって表示が変わります。
具体的には、ユーザー登録機能や検索機能などです。入力した内容によってマイページの表示は変化するし、検索結果も当然変わ

Railsのマイグレーション関連のコマンド（備忘録）

# はじめに
Rialsのマイグレーション関連のコマンドを備忘録としてまとめました。

# migrationとは？

【Railsガイド参照】

マイグレーションは、データベーススキーマの継続的な変更（英語）を、統一的かつ簡単に行なうための便利な手法です。マイグレーションではRubyのDSLが使われているので、生のSQLを作成する必要がなく、スキーマおよびスキーマ変更がデータベースに依存しなくなります。

個別のマイグレーションは、データベースの新しい「バージョン」とみなせます。スキーマは空の状態から始まり、マイグレーションによる変更が加わるたびにテーブル、カラム、エントリが追加または削除されます。Active Recordはマイグレーションの時系列に沿ってスキーマを更新する方法を知っているので、履歴のどの時点からでも最新バージョンのスキーマに更新できます。Active Recordはdb/schema.rbファイルを更新し、データベースの最新の構造と一致するようにします。

マイグレーション機能があることによ

Axios × Rails 複数の画像を非同期通信で楽天FTPサーバにアップロードする

# 前提
仕事で楽天FTPサーバに画像をアップロードする作業ができてしまって、毎回FTPソフト開くのが面倒だなと思い簡単なウェブアプリを作りました。

# 完成品
ファイルを選択し、アップロードボタンを押すだけ。あとはRailsくんが頑張ってFTPにあげるのを待つのみ。
画像は1枚でも複数枚でも対応できます。

# この記事で言及しないこと
* 上記の画像プレビュー機能（`new FileReader`とか`readAsDataURL`でググると良記事がたくさん出てきます）
* フロントはVue3で書いています。`@change`とか文法的なことは説明しない。
* axiosの使い方

# フロント
## html
“`html
ファイルを

星レビュー機能の実装

星レビュー機能の実装をしてみました。
ルーティングのネストを理解していれば、そこまで複雑ではありません。
ただ、form_withによるデータの流れがわからなかったので苦戦しました。

fontawsomeの導入が必要ですが、その方法は割愛します。

では、みていきましょう。今回はyoutube動画を参考にさせていただきました。

まずはルーティングです。
今回は誰かの投稿に対して、星５つで評価できるように実装しました。
“`routes.rb
resources :posts do
resource :reviews, only:%i[create]
end
“`
以下のルーティングができました。
色々な投稿の中のどの投稿にレビューするか可能になります。

“`
rails routes | grep reviews
post_reviews POST /posts/:post_id/reviews(.:format) review

Railsアプリケーション非同期通信設定（Ajax）

この記事は学習した内容をアウトプットし、更に理解を深めるための記録用投稿になります。
投稿している内容と同じ箇所で躓いている方に少しでもお力添えできれば幸いです。

非同期通信の実装をするに至った経緯はポートフォリオを制作後にメンターの方にレビューをいただきました。その際に今後のチャレンジという項目でご指摘をいただいたのでチャレンジしてみました！
わかりやすく説明をしていただいてる方にはほんと感謝です、、、

## 非同期通信とは
##### ・WEBブラウザからWEBサーバー間のリクエストしてレスポンスが行われるまでに次の処理をする事が可能。
##### ・リクエスト後画面遷移せずにデータの更新が行われる(いいね数が増えるなど)

—
## 前提条件
・gem ‘jquery-rails’は導入済

・いいね機能実装済み

・料理の内容を投稿するアプリになるのでユーザー(user)、料理(dish)とします

## 手順

① Ajax処理をするための記述を追加する(remote :true)

② ビューでのいいねボタンを部分テンプレートにするためにファイルを作成(_fa

Basic認証をRailsアプリに導入する方法

## authenticate_or_request_with_http_basicメソッド
ブロック内部でusernameとpasswordを設定し、任意の値を決めて実装します。
下記の例では、usernameに「test」、passwordに「1111」を指定しています。
“`ruby
authenticate_or_request_with_http_basic do |username, password|
username == ‘test’ && password == ‘1111’
end
“`
## Basic認証をRailsアプリに導入する
メソッドをコントローラーのprivateに定義し、before_actionで呼び出します。
“`ruby
before_action :basic_auth

private
def basic_auth
authenticate_or_request_with_http_basic do |username, password|
username == ‘test’ && password == ’11

ホーム画面とユーザーの紹介ページを作成する

# ルーティングを作成する
“`routes.rb
Rails.application.routes.draw do
get ‘user/:id’, to: ‘user#show’

end
“`

# コントローラーを設定する

“`users_controller.rb
class UsersController < ApplicationController def show end end ``` # データベースの中にuserテーブルとその中身があるのかを確認 ``` **********@mbp garden % mysql -u root Welcome to the MySQL monitor. Commands end with ; or \g. Your MySQL connection id is 9 Server version: 8.0.28 Homebrew Copyright (c) 2000, 2022, Oracle and/or its affiliates. Oracle is a registe

【Rails7】Ajaxリクエスト時にCSRF tokenを含める（おそらく）公式のやり方

巷にはX-CSRF-Tokenを手動で取得して送信するサンプルコードが溢れていますが、
一応公式で楽する方法が用意されています。

# Rails6以前

rails-ujsに含まれるRails.ajaxメソッドを使うことで、自動でCSRF tokenをサーバーに送信できます。

“`javascript
const data = new FormData();
data.append(“some_key”, “some value”);

Rails.ajax({
url: “/some_resources”,
type: “POST”,
data: data,
success: function(response) {
}
});
“`

# Rails7以降

TurboフレームワークとStimulusが標準構成になり、rails-ujsは含まれなくなりました。
その代わり、上記ajax機能のみを切り出したrequest.jsというライブラリが公式で提供されています。
（本体に含まれているわけではないので事前にimportmapでpinする必要あり）

rails5 progate 整理メモ　password_digest

# passwordカラムとpassword_digestカラム
passwordカラムを消して、password_digestを追加しても今までのコードを“`書き換える必要はない“`
“`rb
[1] pry(main)> user = User.find_by(id: 1)
User Load (0.1ms) SELECT “users”.* FROM “users” WHERE “users”.”id” = ? LIMIT ? [[“id”, 1], [“LIMIT”, 1]]
=> #

[2] p

Docker + React + Rails6 APIの環境構築メモ

## はじめに
標記の環境構築を初めて実施したので備忘録として記録します。

参考にさせていただいた記事、教材
https://qiita.com/taki_21/items/613f6a00bc432d1c221d
https://qiita.com/asami___t/items/256f76c3c8a9bd5d0732
[Dockerを利用した開発環境の構築方法を学ぼう！](https://www.techpit.jp/courses/31)
[Docker公式docs](https://docs.docker.com/)

## 環境
macOS Monterey 12.3.1
Docker version 20.10.13
docker-compose version 1.29.2

## 0. ファイル構成
以下の通りディレクトリ、ファイルを作成する。（中身はまだ空）
myapp/
┣ backend/
┃ ┣ Dockerfile
┃ ┣ entrypoint.sh
┃ ┣ Gemfile
┃ ┗ Gemfile.lock
┣ frontend/
┃ ┗ Dockerfi

error /node_modules/node-sass: Command failed.の対処法

mac OS バージョン11.6
エディタ…VScode
Rails 6.0.4

# やりたいこと
yarnコマンドがエラーなく通るようにしたい。

# エラー内容
“`
% yarn add jquery
（省略）
error /node_modules/node-sass: Command failed.
“`

yarn installや他のyarnコマンドも試しましたが、全部同じエラー。

# 原因
nodejsのバージョンもしくはnode-sassバージョンに原因があるみたい。
これからバージョンを正しく指定していきます。

# 解決策
初めに　“`% nodebrew install v14.15.0“`　を試すがエラーが出る。

まずはNodebrewをインストールする必要があるみたい。

・インストール

“`% brew install nodebrew“`

・確認
“`nodebrew -v“`
バージョンが表示されればOK。

・環境変数を追加
ターミナルで以下を実行。

“`
export PATH=$HOME/.nodebr

【30歳から目指すwebエンジニア学習録】Rails6でjQueryの導入につまずいた話

# エラーの発見
– 「いいね」ボタンをAjaxで作ろうとしていた
– jQueryを仕込んでも変化せず、、、
– ターミナルを見るとjs.erbファイルには到達している。
– ブラウザのコンソールを見ると`$ is not define`のエラーログが。

# 解決策
– `$ is not define` で検索するとrails6ではjQueryの導入方法が変わったとの記事があった。
https://qiita.com/RIN_HM/items/bdbd76f5015b3c15bfe9
– こちらの海外の記事の指示に従って直していく。

Introducing jQuery in Rails 6 Using Webpacker

# 手順1　application.jsファイルを移動する
1. assetsの`application.js`ファイルを
1. app/javascript/packsフォルダに移動する。
![image.png](https://qiita-image-store.s3.a

【Rails】ERROR: Can’t install RMagick 4.2.5. Can’t find the ImageMagick library or one of the dependent libraries.の対処法

mac OS バージョン11.6
エディタ…VScode
Rails 6.0.4

# やりたいこと
bundle installした時にエラーが出ないようにしたい

# エラー内容
“`
% bundle install
（省略）
Gem::Ext::BuildError: ERROR: Failed to build gem
native extension.

（省略)
ERROR: Can’t install RMagick 4.2.5.
Can’t find the ImageMagick library or one of the
dependent libraries.
Check the mkmf.log file for more detailed　information.

（省略)
An error occurred while installing
rmagick (4.2.5), and Bundler cannot continue.
“`

だいぶ端折りましたが、エラー文で文字が赤くなっている部分だけ抜粋しました。

# 原因
“`
Can’t i

Rails 命名規則について

# Rails 命名規則について

## コントローラを作成する（小文字で複数形）
“`ruby:controller.rb
$ rails g controller homes
“`

コントローラ名 複数形、先頭は英小文字 homes
コントローラのクラス名 複数形、先頭は英大文字 HomesController
ファイル名 複数形、先頭は英小文字 homes_controller.rb

## モデルを作成する(先頭大文字で単数形)
“`ruby:model.rb
$ rails g model List
“`
モデル名 単数形、先頭は英大文字 List
モデルのファイル名 単数形、先頭は英小文字 list.rb
テーブル名 複数形、先頭は英小文字 lists

https://www.wakuwakubank.com/posts/804-it-naming-convention/

https://designsupply-web.com/media/development/4052/

railsチュートリアルをなるべく嚙み砕く　2章

#railsチュートリアル第2章ですね
この章はscaffoldを使って簡単なアプリを作り出すようです

### 2.1.1
ユーザーのモデル設計です。ユーザーを必要な要素を簡単に書き出すと
| user | 型 |
| — | — |
|id|integer|
|name|string|
|email|string|

ユーザーを識別するための一意なidと名前、メールアドレスですね。
一意というのは他に無い、唯一ということです。

### 2.1.2
マイクロポストのモデル設計です。　マイクロポストというのはTwitterのツイートのことですね。つまりはユーザーがする投稿です。

| microposts | 型 |
| — | — |
|id|integer|
|content|string|
|user_id|integer|

マイクロポストのid これはユーザーのidと同じで一意であることを表しています。そして文章のcontentと、どの ユーザーが投稿したかを表すuser_idです

### 2.2
UsersリソースとHTTPプロトコルという言葉が出てきま

積み上げ♯2

＊＝　require treeは　コメントアウトじゃない
↑ディレクトリ

Destroyアクションについて
find(params[:id])findメソッドによってカラムのレコードを探し出す

●次の学習までの疑問点
bootstrapってどう使うんだろうか？