Rails6 × Vue3 アプリ立ち上げ手順

# 記事作成意図
ネット上にRails×Vue3の情報が少ない(Vue2ばっかり)のでまとめておきました。

### Railsアプリを新規作成
“`
rails new -d mysql アプリ名
“`
### Vue用インストール
“`
yarn add vue@next
yarn add –dev vue-loader@next @vue/compiler-sfc
“`
### DB作成
“`
rails db:create
“`
### サーバが起動することを確認
“`
rails s
“`
### environment.jsを編集
“`config/webpack/environment.js
const { environment } = require(‘@rails/webpacker’)
const { VueLoaderPlugin } = require(‘vue-loader’)
const { DefinePlugin } = require(‘webpack’)

environment.plugins.prepend(
‘Vu

100日後くらいに個人開発するぞ！day001

# まずはこれをやってみる！


https://prog-8.com/paths/rails

# 今日はHTMLに触れてみた！

“`

* 開始タグと終了タグ
* 開始タグ
* 終了タグ
* 見出しをつける
* 見出し
* hはheadingの頭文字
*

,

,

,,,

,,,と数字が大きくなるについれて見出しは小さくなる
* 段落をつける
*

タイトル

Enumが定義されたインスタンス変数を更新する

仕事のコードを読んでいたところ次の記述に遭遇しました。

“`ruby:sample.rb
(~)? (モデル).accept! : (モデル).refuse!
“`
(~)が真ならば(モデル).accept!、偽ならば(モデル).refuse!を実行するという記述です。

「ほう、`accept!`なんてメソッドがあるのか」と思い調べましたが、何も出てきません。
そこでコードに戻ったところ次の記述がありました。
“`ruby:models/sample.rb
enum status: { refuse: 0, accept: 1 }
“`
「`enum`は属性に対応する値をDBに保存するんだったよな…」

Railsガイドには次の記述がありました。

https://railsguides.jp/active_record_querying.html#enum

> 以下の!付きインスタンスメソッドは自動で作成されます。最初にstatusの値を更新し、次にstatusがその値に設定されたかどうかをtrue/falseで返します。
“`ruby:railsguide.rb

【初学者】ログイン機構のまとめ【Webアプリ開発の道~その3~】

# はじめに
こんにちは。しばらく投稿の間が空いてしまいました…。
言い訳をしておきますと、（また後で記事にできたらいいなと思っているのですが…）「要件定義」や「基本設計」について、深掘りして勉強しながら、実際にオリジナルアプリの設計をしていたからです。
暫定的な成果物はできたのですが、おそらく、アプリ開発の中で、見直しされていくと思いますので、最終的にアプリが形になってから、記事にしたいと思います。

今回は、どのWebアプリでも必ず実装するであろう「ログイン機構」について、学んだことをまとめていきたいと思います。

# 何を書いたか
Ruby on rails チュートリアルの第８章、第９章の内容をベースに、自分なりに咀嚼したものを描いていきます。

# なぜ書いたか
学習記録です。特に自分が理解しにくかった部分は、自分なりの解釈を加えています。（間違っている部分はご指摘いただけると幸いです。）

# 本題

## 基本的なログイン機構
### ログインの基本的な仕組み
→ブラウザがログインしている状態を保持し、ユーザーによってブラウザが閉じられたら状態を破棄するといった仕組み

Rails 6/7にjQueryとBootstrap 5を入れる（その1）

RailsにjQueryとBootstrap 5を入れる方法を調べながら、Rails 7のCSSとJavaScriptの新機能を調べてみました。次のようなコードを動かすのが目標です。BootstrapのjQueryプラグインを使うものです。

“`javascript
$(‘[data-bs-toggle=”tooltip”]’).tooltip()
“`

あるいは、次のようにjQueryプラグインを使わない方法でもよしとします。

“`javascript
$(‘[data-bs-toggle=”tooltip”]’).each((idx, elm) => {
new bootstrap.Tooltip(elm)
})
“`

## Webpacker（Rails 6.1）

まず、Rails 7の新機能を使わず、Rails 6にWebpackerで導入する方法です。yarnでBootstrap 5、Popper 2、jQueryを入れます。

“`
% yarn add bootstrap @popperjs/core jquery
“`

Bootstrap

カラムの合計値を出す方法

カラムの合計値を出す方法

controller↓
@任意の変数名 = テーブル名.all.sum(:合計を出したいカラム名)

JavaScript BundlingとCSS Bundlingのしくみ

Rails 5-6時代に使われた[Webpacker](https://github.com/rails/webpacker)は、公式に「has been retired」とされ、Rails 7では[importmap](https://github.com/rails/importmap-rails/)が標準となりました。

Rails7はimportmapとは別に、JavaScriptのバンドラやCSSのフレームワークを導入するしくみを用意しています。2つのgem、 [JavaScript Bundling（jsbundling-rails）](https://github.com/rails/jsbundling-rails) と [CSS Bundling（cssbundling-rails）](https://github.com/rails/cssbundling-rails) です。この2つは、Rails 6に入れることもできます。

## 概要

JavaScript Bundling は、JavaScriptのバンドラ（esbuildやwebpack）を使い、JSファ

【Rails】Slimでのifを利用する方法

# 初めに

Rails でポートフォリオを作成中に、条件によってクラスをつける方法を忘れてしまっていたので忘備録として残しておきます。

## 環境

Rails 7.0.2
Ruby 3.1.1
Slim 4.1.0

# 本文

erb での後置 if の書き方は多くありましたが slim でのやり方が少なかったので記事にしておきます。

こちらは erb での書き方です。

“`erb: if.html.erb

<% if @result == true %>
<%= link_to "Topへ", words_path,{class:'btn-bule'} %>
<% end %>

【Ruby】初心者がRuby on Railsをやる！

# :star:概要:star:

`Ruby`初心者の僕が`Ruby on Rails`までやってみた！

# :star:初期セットアップ的な:star:

“`shell
rails new
cd
bundle install
bundle update
“`

`bundle install`をする場所は1つ下の階層でやらなきゃいけない！
エラーが出た際の対処法は、下に掲載しています。

# :star:サーバーの起動:star:

“`shell
ubuntu@ubuntuv:~/デスクトップ/projectX/sample$ rails s
“`

ブラウザの`127.0.0.1:3000`に行って、これが出ればおっけ。


コンソールで`Ctrl + c`を押して、サーバーを終了

Railsでエラーメッセージ表示されない時の対処法

mac OS バージョン11.6
Rails 6.0.4

# やりたいこと
ユーザー登録に失敗した場合、エラーメッセージが出るようにする

# エラー内容
どこか1つを空欄で登録しようとした場合、本来ならエラーメッセージが出るはずだが出ない。


# 原因
form_withがajax通信になっていたので、画面が更新されていなかった。

Rails 5.1〜6.0 の form_with ではデフォルトでajax通信が行われる仕様になっていて、非同期通信になってしまうのです。
ここにlocal: trueと引数を渡す事で、HTMLをレンダリングできるようになります。（Railsの6.1からはデフォルトでajaxではなくなったのでlocal: trueは不要です）

# 解決策
local

GemfileでグローバルインストールするGemを管理する

普段プロジェクトごとにGemfileを管理していますが、システム全体で使うGemもGemfileで管理したいと思い方法を調べました。

## 環境
Mac OS Big Sur 11.6
Bundler 2.2.32
Ruby 3.0.2
Gem 3.2.22

## 結論

好きな場所にGemfileを作成して

“`ruby
bundle install –system
“`

これだけでシステム全体でGemが使えるようになります。

## 保存場所

自分の場合は[rbenv](https://github.com/rbenv/rbenv)を使いバージョン管理をしています。

そこで、 `Gemfiles` というフォルダを作り、その下でバージョンごとに管理することにしました。

“`ruby: 好きな場所
Gemfiles
├── 2.6.3
│   └── Gemfile
│   └── Gemfile.lock
├── 2.6.6
│   └── Gemfile
│   └── Gemfile.lock
└── 3.0.2
└── Gemfile
 

?CircleCiで、Rails6のRspecのSYSTEMテストを実行する方法【Docker】

# ✅当方の環境
– 開発環境 : Docker
– ruby 2.7.5
– rails 6.1.5
– Circle Ci

# ✅前提条件
:::note warn
「selenium-webdriver」をアプリ（WEB）のコンテナに導入したのではなく、アプリ（WEB）のコンテナとは別の「selenium-webdriver」のDockerコンテナを新しく作成・起動させて、SYSTEMテストを実行した場合に、本記事が有効である
– アプリ（WEB）のコンテナに、直接「Chome-driver」を導入した場合などは、本記事は対象外
– [こちらの記事](https://qiita.com/felmy/items/d4b1334a6adee071ef46)で「selenium-webdriver」を導入した場合は、以降の内容を試してみてください
:::

# ✅概要
:::note alert
Circle Ciで使用する「自分で設定したイメージファイル」と、「自分で設定したDockerのイメージファイル」は、別々でお互いに共有されないため、Circle Ciの環境をDockerの

DockerでRuby on Railsの環境を構築する際のentrypoint.shのコマンド及びコード理解

## なぜ記事を書こうと思ったか
前回の記事のRails用のDockerfileを作成する際にentrypoint.shを指定していますが、今回そのentrypoint.shのコマンド及びコードの理解を備忘録として残すため。

– [DockerでRuby on Railsの環境を構築する際のDockerfileのコマンド及びコード理解](https://qiita.com/zakino123/items/5e7ddf96096156ef814f)

## entrypoint.shのコマンド説明
entrypoint.sh
“`
#!/bin/bash
set -e

# Remove a potentially pre-existing server.pid for Rails.
rm -f /app/tmp/pids/server.pid

# Then exec the container’s main process (what’s set as CMD in the Dockerfile).
exec “$@”
“`

以下にコマンド及びコードの解説を致しま

【備忘録・Rails】devise導入で使えるメソッド

## はじめに

こんにちは、だいごです。
今回は、deviseを導入することで使えるようになるメソッドをまとめていきます。
よかったらご覧ください。

## ヘルパーメソッド一覧

– **before_action :authenticate_user!**
– **user_signed_in?**
– **current_user**
– **user_session**

※モデル名がuserの場合を想定しています。　

ここからは一つ一つを詳しく解説します。

### before_action :authenticate_user!

ログイン状態によって表示するページを切り替えるdeviseのメソッド。
処理が呼ばれた段階で、ユーザーがログインしていなければ、そのユーザーをログイン画面に遷移させます。

“`rb:messages_controller.rb
class MessagesController < ApplicationController before_action :authenticate_user! def index end

pagyを日本語化してみる

# はじめに
railsにページネーションを導入するにあたり、
kaminariより新しく諸々いい感じらしい評判を聞いたので
pagyを導入してみた。

https://github.com/ddnexus/pagy

# 実装について
初学者故、相当つまづいたがどうにか導入。

参考にした記事

https://qiita.com/white0221/items/d5a0386882943131df77

https://qiita.com/yama_diary/items/8eabcdad3bb88a8eae60

で、表示を日本語化したいものの導入記事が見つからなかったので
備忘録的に記事化したという流れです。

# pagy日本語化
下記内容順で書けばできる、はずです。。。
（自分は時間表示を既に日本語化していたので後半だけやりました）

“`ruby:config/application.rb
module Hoge #ちょっと前まではこのhogeすら何やら分かりませんでしたが。。。
class Application < Rails::Application

Rails　お気に入りランキング実装

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

## 実装した内容
今回はユーザーが投稿した内容に複数のユーザーがお気に入り（いいね）をし、そのいいね数の多い順番にランキング形式で表示する内容になります。

## 前提条件
・投稿した記事のテーブル名はdishesとします。
・いいね機能のテーブル名はfavoritsとします。
・いいね機能を実装済み

## モデル
コントローラで使用するためのメソッドをモデルに記述します。
コントローラの記述を長くしないようにするためのようです。モデルの使い方を再確認！

＊/app/models/dish.rb
“`ruby
def self.create_all_ranks
Dish.find(Favorit.group(:dish_id).where(created_at: Time.current.all_week).order(‘count(dish_id) desc’).limit(10).pluck(:di

今日からWEB開発　１日目

はじめまして。エンジニアを目指しているPIROSHKIです。

今日からWEB開発ということで、勉強しながら１つWEBアプリの開発を目指していきます。
超初心者なので長い道のりですが、皆さんの記事を見ながら頑張ります。

少し前に学校で学んだRubu　Railsを使って開発をしようと思っています。

早速RubyとRailsのインストールから

①Rubyのインストール
https://www.ruby-lang.org/ja/downloads/
色々なバージョンがあってよくわからないので最新の3.1.1-1をダウンロード

②Rlaisのインストール
　 コマンドプロンプトで
　 gem install rails　
　 を実行。

③作成するアプリ名のフォルダを作成
　rails new アプリ名

　・・・・
　とここで、

　

Rails×Nuxtで初期プロジェクトを作成しgitサブモジュールで管理する手順

## はじめに

Docker環境下のフロントエンド（Nuxt.js)とバックエンド(Rails API）を別々のリポジトリとして切り分けてみたい。となった際に、サブモジュール化する手順を学びました。

本記事では、「Rails×Nuxtで初期プロジェクト作成し、サブモジュール化するまでの流れ」を備忘録的にまとめています。

#### 実行環境
– macOS Catalina: 10.15.4
– docker version: 19.03.13

### 目次

– git submodulesの概要
– docker環境構築
– APIモードでrails×mysqlの初期プロジェクトを作成
– nuxt初期プロジェクトを作成
– サブモジュール化

### 最終的なディレクトリ構造

“`
./
├── .gitmodules
├── docker-compose.yml
├── api/
│   ├── Gemfile
│   ├── Gemfile.lock
│   ├── Dockerfile
│   ├── environments
│   | ├── db.en

fileterメソッドを使用してN+1問題を解決した

次の状況でN+1問題が発生しておりました。その解決方法になります。

“`ruby:model/model1.rb
class:Model1
has_many :model3s,
has_many :model2s, through: :model3s
“`

“`ruby:model/model2.rb
class:Model2
has_many :model3s,
has_many :model1s, through: :model3s
“`

“`ruby:model/model3.rb
class:Model3(Modle1とModle2の中間テーブル)
belongs :model1
belongs :model2
“`

“`ruby:controllers/sample_controller.rb
@model1 = Model1.eager_load(:model3s)
“`

“`ruby:views/sample.html.erb
# model2_idはループで回される値
　　　@model1.where(model3s: { [

【Rails】cocoonを用いたデータを表示する方法

# cocoonとは？
cocoonとはフォームの追加や削除の実装を行う時とても便利なgemです。
個人的には以下の記事が大変参考になったのでこちらをご参照していただければと思います。

https://qiita.com/kmjooh/items/a1613531873a22fa7862

# cocoonで保存したデータをどうやって表示するのか?
ここからはオリジナルアプリの制作時に実装した方法を紹介します。オリジナルアプリは筋トレ日記です。

## ゴールは？
ゴールとしては以下のような表示です
[](https://gyazo.com/7a0c1f8fbfaa0a9bbd415f3201442012)
これはオリジナルアプリの一覧表示の一部ですが、種目・重量・回数・セット数はcocoonを用いてフォームを追加・削除したりして複数のデータを保存できるようにしています。

## まず日記の一覧表示はどのように実装されているのか？