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

コマンド1つで、erbファイルをhamlファイルに変えちゃうよ

すべてのerbファイルをhamlファイルに変換する便利なコマンドを紹介します。

#gemを追加

“`ruby
gem ‘haml-rails’
gem ‘erb2haml’
“`

を追加

bundle installもお忘れなく。

#魔法のコマンド

“`
rails haml:replace_erbs
“`

これでいけると思います。
僕がはじめて成功した時は小躍りしました。

ではまた！

Ruby on Rails　パラメータ付き遷移処理の方法

概要

遷移元のテキストボックスに入力した内容を、遷移先の画面に表示します。

画面イメージ

遷移元

遷移先

プログラム：共通

ルーティングを設定します。
moveアクションが遷移するアクションです。
indexアクションで遷移元で入力された値を受け取ります。
:nameがパラメーターで、入力され

rails javascript/jqueryの実装　メソッドその2

# jbuilder:array! メソッド

JSON形式で配列の形式で返したい場合はarray!を使用します。

jbuilderという拡張子を持つテンプレートでは
JSONという名前のJbuilderオブジェクトが自動的に利用できるようになります。

Jbuilderオブジェクトは、JSON形式に返すための便利なメソッドがたくさん用意されており
jbuilder:array!もその一つです。

“`javascript:app/views/comments/sample.json.jbuilder
json.array! @comments do |comment|
json.id comment.id
json.text comment.text
json.image comment.image
json.user_id comment.user_id
json.nickname comment.user.nickname
json.user_sign_in current_user
end
“`

# empty メソッド
指定したDOM要素の子

activerecord-importで複数モデルをupsertする処理を少しでもすっきり書くためのクラス

# 概要
* Rails で upsertを行うためクラス `BulkUpsert` をかきました。
* [activerecord-import](https://github.com/zdennis/activerecord-import) [on_duplicate_key_update](https://github.com/zdennis/activerecord-import#options) （いわゆるupsert）の処理をラップしたものです。
* 関連するモデルを同時にupsertしたい場合ときに煩雑になりがちなコードを、DRYにかけます。
* __mysqlのみ__ で使えます（mysql以外だとエラーが出ます。）

# 背景
個人で運営している https://www.dokode.work/ のデータを更新のために作りました。
データ更新時、activerecord-import を利用した bulk insertもしくはbulk upsertをよく行います。ただ、その時の記述方法が煩雑で少しでもすっきりさせたいなーと思ったのがきっかけです。

# 所感
10行か

応用カリキュラム 08 データベース設計 02

## 中間テーブル

データベース設計においては、
エンティティ同士のリレーションをER図に表すが
中には、“`多対多“`のリレーションになるエンティティが出てくる。

そういったリレーションをデータベースで表現する場合は、“`中間テーブル“`というものを用いる。
エンティティ同士の組み合わせを記録するテーブルを作り
一対多の関係を経由することで、多対多のエンティティを繋げることができる。

—

railsにおいてA-B(多対多)のテーブルの間に中間テーブルを設ける場合は、

As_Bsテーブルとして、
その中間テーブルのアソシエーションは、
belongs_to :A
belongs_to :B
となって、

A,Bテーブルのアソシエーションは、
has_many :As_Bs
has_many :B, through: :As_Bs
となるみたい。

テーブル名は必須ではなく、適切な名前がなかった場合の慣例？っぽい。

—

テーブル定義を行う際は、“`制約“`と“`インデックス“`を想定しておくのを忘れずに！

Rails6でBootstrapVueの導入

rails6でyarnを使用してプロジェクトを作ります。

### この記事の特徴

– rails6
– vue.js
– slim
– BootstrapVue

まずはプロジェクトを作成します。

“`
mkdir [プロジェクト名] && cd $_
“`

railsとvue.jsとBootstrapVueとslimをインストールします。

“`
rails new . -d postgresql –skip-turbolinks
rails db:create
echo ‘gem “slim-rails”‘ >> Gemfile
echo ‘gem “html2slim”‘ >> Gemfile
bundle
bundle exec erb2slim app/views/layouts/ –delete
rails webpacker:install:vue
yarn add jquery popper.js vue bootstrap-vue bootstrap
mkdir app/javascript/src
touch app/javascript/src/

【Rspec】モックとスタブの違い

モック(mock)とスタブ(stub)の違いが分からないままなんとなく使っていたので、調べてみました。

## 先にざっくり結論
対象の処理をテストしたい場合はモック。テストしたいのは別の部分で、とりあえず値を返してくれればOKであればスタブを利用する。

## そもそもなぜ使うのか
Rspecなどを用いてテストを書く場合、APIなどを用いたHTTP通信をそのまま利用してしまうと、APIのタイムアウトなどが原因でテストが失敗になってしまう恐れがあります。これを防ぐために、APIなどの代わりに決まった結果を返すのがスタブやモックの役割です。

## 共通している部分
代わりに処理を返すことに関しては同じです。
– messageを受け取ったら、valueを返す処理

“`ruby
# create a double
obj = double()
# specify a return value
obj.should_receive(:message).and_return(:value)
“`
## モックとスタブの違い
違いは対象の処理をテストできるかどうかです。
モックの場合は対

Railsでポートフォリオ作成のロードマップ – 初心者向け①

実際にRailsを使用されている方に、手取足取り教えていただきながらポートフォリオを作成しました。

備忘録として書き残します。

*この記事をお読みの皆様、特に初心者の方に少しでもお役に立てれば、という思いでこちらに書き残しております。
しかし、当方初心者であること、この記事が完璧ではないことを前提にお読みいただければと存じますm(_ _)m

0.ポートフォリオの構想

google driveを使用して、どんなポートフォリオを作りたいか、ざっくり言語化しました。

https://www.google.com/drive/

![スクリーンショット 2019-11-23 18.34.31.png](https://qiita-image-store.s3.ap-northeast-1.ama

Riailsをherokuにdeployするときに詰まった事

#概要
友達にポートフォリを見せようと思ったとと時にherokuにアプリのdeployとその後動作が上手くいかなかったのでその時のまとめを乗っける

##エラー0
herokuにアプリをデプロイするときに詰まった
herokuとgithubは連携しなければならない
###手順
1. git init
2. heroku create [アプリ名]
※これによリモートレポジトリ「heroku」が作成される。
3. git remote heroku [アプリのURL]
4. git add *
5. git commit -m “My first commit”
6. git push heroku master
7.
※masterブランチをremoteレポジトリ「heroku」にデプロイ

##エラー１
herokuにdeploy時にAWSのアクセスキー、シークレットキーを指定しろと言われた。

##解決方法
$S3_BUCKET
$S3_ACCESS_KEY
$S3_SECRET_KEY
$S3_REGION
を指定

“`command
heroku config:set

Rails サーバーを同時に立ち上げる方法　プログラミング学習45日目

##Rails sをしたらエラーが、、、
めちゃめちゃ長いエラーが出た後最後にこのようなメッセージが書かれていました。

“`
Address already in use – bind(2) for “127.0.0.1” port 3000 (Errno::EADDRINUSE)
“`

**すでにport 3000を使っていると言うことですね**

多分この解決方法はいくつかあって
1.現在起動しているサーバーを消す
2.port 3000ではないサーバーを立ち上げる

今回は2をやってみたいと思います！

下記のようにrails sの後に-pをつけてport番号を指定すれば開くことができます！

“`
bundle exec rails s -p 3001
“`

bundle installの際に『An error occurred while installing nokogiri』エラーが発生した時の対処法【 Homebrew】

bundle installを行った際に、以下のエラーが発生したので、解決法を備忘録として残します。

“`
Gem::Ext::BuildError: ERROR: Failed to build gem native extension.
An error occurred while installing nokogiri
“`

##環境

Rails 5.2.3
ruby 2.5.1
MacOS Catalina 10.15.1

##brew doctorでHomebrewの状況を確認

原因を調べたところ、Homebrewに問題がありそうでした。
なのでまずはHomebrewの状況を確認。

参考：https://qiita.com/SonoT/items/060c21e9866d5d9603e3

“`
$ brew doctor
“`

すると以下のWarningが返ってきました。

“`
Warning: No developer tools installed.
Install the Command Line Tools:
xcode-select

Rails+Webpacker環境にfont-awesomeを導入する方法

## 前提条件
Railsのwebpackerでvueが使えるようになっている

## 環境
Rails: 6.0.1
Ruby: 2.6.2
yarn: 1.19.1
webpacker: 4.2.0

## やり方
yarnでインストールするのが楽。
ググってgemで追加したり、色んなコマンドを試しましたが、最終的にかなりシンプルに導入できることが判明しました。
### yarnでインストールする
“`:terminal
$ yarn add @fortawesome/fontawesome-free
“`
###一番最初に読み込まれるjsファイルでインポートする
※ファイル名はプロジェクトにより異なる場合あり

“`app/javascript/main.js
import Vue from ‘vue’
import App from ‘../app.vue’
/* 省略 */
import ‘@fortawesome/fontawesome-free/js/all’　// この文を追加
/* 省略 */
“`

### コンポーネントで使ってみる(一部抜粋)
“`ho

Railsに関しての知見をためておく

Rails(Ruby on Rails)とはRubyのフレームワーク。
MVCの設計思想に基づいている。

##MVCについて
MVCとは「Model-View-Controller」の略。ものすごく簡単に説明したものが以下の感じ。

“`md
Model: データベースとやりくりする
View: Modelの情報をうまく表示する
Controller: ModelとViewの中間地点でViewからの情報とModelからの情報をうまく結合する
“`

###例えば予約管理のサイトなら…

MVCの設計思想を採用した場合は

=> **model**に予約情報があり
=> それを**view**が表示し
=> ユーザーからの入力があったら(viewから情報が渡ってきたら)**controller**がその情報を加工してviewやmodelに渡す

という流れになる。

参照: https://qiita.com/tshinsay/items/5b1724baf32b8b5113c2

##使い方
ターミナルで `$ rails new [ディレクトリ名]` コマンドを使うことでプ

【未経験】Railsチュートリアルを終えた独学者のための、Railsオリジナルアプリの作り方

#はじめに

この記事は

『**Railsチュートリアルを７割程度理解できたが、オリジナルアプリの作り方がわからない**』

という方を対象にしています。

特に、**スクールに通わずに独学している方**の助けになれば幸いです。
（あくまでも個人の意見ですので必要な部分だけ抜き取ってください）

##自己紹介
– 年齢：２４歳
– 学歴：文系大学卒
– 職歴：専門商社営業（１年で退職）
– プログラミング経験：約7ヶ月（独学）
– ポートフォリオ：[Elily(イラスト投稿アプリ)](https://elily.herokuapp.com/)
– GitHub：[ここ](https://github.com/neneti/Elily)

現在web系自社サービスを展開している企業を中心に転職活動中。
面接時にポートフォリオを評価されることが多かったです。

それでは本題へいきましょう。

#Railsチュートリアルを終えてからオリジナルアプリが作れない理由

それは、**どこから手をつければいいのかわからない**からです。

私自身オリジナルアプリを作ろうとしたと

#Rails で development など特定環境でだけ使える rake を追加する

全体を env? で囲っておけば、そもそもその環境でしか task一覧に出てこないで良さげ
task の 中で raise させたりするより良さそう
ただもっと良い書き方があるのかもしれないが

“`rb
if Rails.env.development?
namespace :development do
namespace :some do
task run: :environment do
end
end
end
“`

# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/2754

【Guard】自動生成されるGuardfileで監視・実行されるファイルは結局どこなのか、ソースコードから読み解いてみた

## はじめに
RailsアプリでRSpecを自動で走らせるためにGuardを導入したのですが、その設定ファイルである`Guardfile`について理解を深めたかったのでまとめてみました。

踏み込んでいくうちにソースコードまで読むことになり、メタプログラミングの勉強にもなりました。

この理解で`guard-rspec`や`guard-rubocop`で自動生成される内容にアレンジが加えられるようになったので、生産性が上がりそうです:point_up:

ベースとして、こちらの記事を参考にさせて頂きました。
[rubyのGuardとRSpecをRailsを使わない環境でつかう | 大石制作ブログ](https://blog.s0014.com/posts/2017-05-24-guard/)

## この記事が役に立つ方
– 自動生成されるGuardfileを自分ではアレンジ出来ない方

## この記事のメリット
– 自動生成されるGuardfileではどういう設定がされているのかが分かる
– Guardfileを自分用にアレンジ出来るようになる。

## 環境
– macOS Mo

【Rails】パーシャルを使う

# パーシャルのメリット
あちこちで使う部品を定義しておけば、
その部品を呼び出すだけで同じViewを出力できるようになる。

## パーシャルファイルの作成
viewディレクトリに作成
`_任意の名前.htil.erb` <=`_`先頭にアンダースコアをつける。 #### 繰り返し使用する部分テンプレート作成 ```form.html.erb <%= form_for @board do |f| %>

<%= f.label :name, '名前' %>
<%= f.text_field :name, class: 'form-control' %>

<%= f.label :title, 'タイトル' %>
<%= f.text_field :title, class: 'form-control' %>

Railsでvuetifyを使えるようにする初期設定

## 前提条件
railsアプリケーションで、ブラウザ上にvueコンポーネントの表示が出来ている状態。
[こちら](https://qiita.com/cohki0305/items/582c0f5ed0750e60c951)の記事を参考に環境構築するといいかも

### まずはもろもろインストール
“`:terminal
$ yarn add vuetify
$ yarn add material-design-icons-iconfont
$ yarn add @mdi/font
“`

### ルートのテンプレート
“`app/views/root/index.html.slim
= javascript_pack_tag ‘main’
= stylesheet_pack_tag ‘main’
“`

### jsファイルにインポートさせる
“`app/javascript/packs/main.js
import Vuetify from ‘vuetify’
import ‘material-design-icons-iconfont/dist/material-de

Rails 6,Ruby 2.6.2のローカルアプリ作成方法(mac)

**ローカル環境にrubyやmysqlがインストールしてあることが前提です。**

“`
$ mkdir sample-app
$ cd sample-app
$ bundle init
“`

“`:Gemfile
# frozen_string_literal: true
source “https://rubygems.org”

git_source(:github) {|repo_name| “https://github.com/#{repo_name}” }

gem “rails”, “~>6”
“`

“`
bundle install –path vendor/bundle
“`

“`
bundle exec rails new . -B -d mysql –skip-turbolinks
“`
– -Bはbundle installを行わないようにする
– -dはデータベースの指定(今回はmysql)

必要なgemをgemfileに追記
“`
$ bundle install
“`

## このエラーが発生した場合
![https___

rails javascript/jqueryの実装　メソッド　gem

覚えることが多いので覚えた内容の備忘録を書こうを思います。

# rails-ujs

基本rails5.1以降にかかれている記述ですがその意味は

Ajax の送受信の “送” の部分を JavaScript で実装せずにやってくれるライブラリです。

Rails 5.1 から導入された form_with を使ってフォームを構築し
form でデータを送った後のレスポンスだけを JavaScript で書けば良くなります。

“`js:application.js
//= require rails-ujs
“`

# FormData
formタグ内の要素のデータをオブジェクトにしたもの
inputに入力された情報が、javascriptのオブジェクトとしてキーバリュー形式で表される。

new FormData(フォーム要素)とすることでFormDataを作成できます。

“`js
$(function(){
$(‘#new_comment’).on(‘submit’, function(e){
e.preventDefault();
var fo