Railsチュートリアルを完成SPA化してみた

# Railsチュートリアルを完成SPA化してみた
今回は、自分なりに**Rails tutorial**を`Rails API`と`next`を用いて**SPA化**してみたので、それを振り返って見ようと思います。

基本的に**バックエンド**側の内容は、**Rails tutorial**の`render`を`jbuilder`や`json:`に変更してる程度なので、詳しくは**Rails tutorial**をご購入ください。
ですので今回の記事では、**フロントエンド**の内容をメインに振り返りたいと思います。

## サイト概要
**Rails Tutorial**(rails ver 6.0)用のアプリケーションを`Rails API`と`next –typescript`を用いて完全SPA化しました。

[プロダクトページはこちら](https://rails-tutorial.vercel.app/)
自分が見本としたチュートリアルである、[Rails tutorialのページはこちら](https://railstutorial.jp/chapters/begin

rails scaffoldで最速サイト作成

#scaffold（スキャフォールド）コードを自動生成する
RubyのフレームワークのRuby on Railsには、コードを自動生成する便利なものが多く存在し、今回はその一つであるscaffold（スキャフォールド）を紹介します。

“`
rails g scaffold モデル名 カラム名1:データ型1 カラム名2:データ型 2
“`

“`
rails generate scaffold Vegetable name:string image:string body:text weight:integer memo:string
“`

そしてマイグレーションを行う

“`
rails db:migrate
“`

一連の流れを汲んだサイトが完成する

PWAとは、railsにPWA導入、vuejsにPWA導入

# PWAとは
– Progressive Web Apps
– モバイル端末でウェブサイトを表示するときに、まるでネイティブアプリのような動作を可能にする仕組み

—

# PWAとネイティブアプリとウェブサイトの違い
## ウェブサイト
– ブラウザーでURLアクセス出来る
– HTML/CSS/WEB Frameworkで開発する
– どの端末でもブラウザーがあれば、アクセス出来る
– OSの深い機能触れません

—

##　アプリ
– OSにサポートしているSDKを使って、アプリを開発する
– OSによって、アプリが違う（Android, IOS, Mac Os, Windows）
– アプリ使えるため、アプリをダウンロードして、インストールして、開けます。　（OSのデフォルトアプリがあります、そのアプリはインストール不要です）
– OSの深い機能触れます
– オフラインモード
– I/Oアクセス
– Push Notification
– セキュリティー

—

## PWA
– ウェブサイトとアプリの真ん中
– HTML/CSS

DockerComposeをdevelopmentで実行する

これまで、production環境で開発をしてきた。
Dockerを導入し、AWSでのデプロイを試みている。

しかしそれは、他の記事を参考に作っていた為、
意味もわからず、本番環境でやってきただけで、
必要な構成も理解していないので上手く進まなかった。

そこで、development環境に戻し、
まずはDockerの導入にフォーカスして理解度を高めていく。

***

#### 各ファイルの修正

“`ruby:docker-compose.yml
services:
local-redis:
image: redis
container_name:
rails-redis
container_name: rails-redis

local-rails:
build: .
@@ -15,9 +14,31 @@ services:
– local-redis
env_file:
– env_file.env
container_name:
rails-rails
con

Dockerを導入したRailsをAWSでデプロイ

#### 接続状態の確認

“`
$ docker ps
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
6896cfc00d7f redis “docker-entrypoint.s…” 2 months ago Up 4 days 6379/tcp rails-redis
“`

“`
$ curl -G ‘http://localhost:3000’
curl: (7) Failed to connect to localhost port 3000: 接続を拒否されました
“`

“`
$ netstat -na | grep -i 3000
“`
何も表示されなかった。

– Railsの起動がうまくいっていない。
– 原因はcredentials周り

rails5アプリのローカル開発環境メモb

#ローカル開発環境をスムーズに行うために簡素版

ローカルの開発の時に急に詰まることありませんか？
僕は、ちょいちょいエラーが起きてしまうことがあるので、
備忘録としてこのメモを残します。
注意としては、Rails6には慣れていないので、Rails5を選んでいます。

##開発環境

macOS Bigsur 11.3.1
Ruby 2.7.2
Rails 5.2.6
Bootstrap 4.5.0
Devise

– – –

##準備開始

“`ruby:初期処理
#最初に行うのはinit
bundle init

#このオプションを入れることで、プロジェクトのvendor/bundle以下にgemが格納される
bundle install –path vendor/bundle

#ここで、いよいよrailsをインストール
bundle exec rails new . -B –skip-turbolinks
#herokuへデプロイするならpostgrsqlを選択
bundle exec rails new . -B -d postgresql

#今回はこれ
bundl

Invalid nextでハマった

### 概要

– ループ内にあったnextをインスタンスメソッドとして切り出したら構文エラーとなりハマった
– nextはブロックのコンテキスト外では使用できないよという当たり前な話

### 経緯
外部から受け取ったCSVファイルを一行ずつ読み取り、各行から所定のデータを作成するメソッドがrubocopにてMetrics/Abcsizeオーバーの疑いにより逮捕されたので、脱獄のためしこしことリファクタリングをしている最中、それは起こった。

該当のメソッドは下記のような内容となっており、CSVを一行ごとeachで回して各行に不正な値が紛れ込んでいた場合エラーログをスラック通知してnextするというもの。

実際のコードではあと二つ別のモデルに対して似たような処理を行なっていたため、それらをモデルへの処理単位でインスタンスメソッドとして切り出そうという方針を立てた。

“`ruby
CODE = 0
departments = Department.all.map { |d| [d.code.to_i, { id: d.id }] }.to_h

CSV.parse(str.enc

API モードの Rails でファイルをアップロード & ダウンロードするサンプル

API モードの Rails でファイルをアップロードするためのサンプルです。
バージョンは以下のとおりです。

– Ruby 3.0.1
– Rails 6.1.3

Carrierwave を使うパターンと、 Active Storage を使うパターンを紹介します。

### Carrierwave をインストール

Carrierwave はファイルのアップロード機能を簡単に追加できるようにするための gem です。

Gemfile に `gem ‘carrierwave’` を追記して、 `bundle install` を実行します。

### User モデルを作成

“`console
# rails g scaffold User name:string email:string
# rails db:migrate
“`

### ファイルアップロード用のモデルを作成する

“`console
# rails g uploader user_image
“`

`app/uploaders/user_image_uploader.rb`が作られます。

RailsでhelperをView以外で使いたいとき

使い方
“`ApplicationController.helpers.<メソッド名>
“`

例
“`ApplicationController.helpers.user_path
“`

databaseにシードファイルのデータを取り込む

このコマンド
rails db:seed
–

Ruby on Jets で詰まったこと

# はじめに

エンジニアとして就職して約1年、 久しぶりにRuby を書いてみたいなぁ、とふと思う。

最近流行りで弊社でもガンガン採用しているサーバーレスで実装しようということに。

「サーバーレス Ruby」 で検索すると一番最初にヒットした Ruby on Jets

https://rubyonjets.com/

https://dev.classmethod.jp/articles/ruby-jets-serverless/

https://qiita.com/kskinaba/items/9c570093ed912f8f1681

すごい使いやすそう。。ほぼrails と使い方も同じだし。。

と思ったがいろいろとハマって腹がたったので記事にしましたww

# 腹立ちポイント

## （その1） ruby 2.6 だけサポートされてない。

Ruby on Jets がサポートしている ruby のバージョンは 2.5 と 2.7 らしいです。

2.6 でもアプリの作成はできますが、デプロイでこけます。

## （その2） jets deploy でハマった

アソシエーションの順番あり

Aテーブル
Bテーブル
C中間テーブルを作りました

““rb:Aテーブル
class A < ApplicationRecord has_many :Cテーブル has_many :Bテーブル, through: :Cテーブル validates :name, uniqueness: true end ``` ````rb:Bテーブル class B < ApplicationRecord has_many :Aテーブル, through: :Cテーブル has_many :Cテーブル end ``` Bのテーブルで問題発生しています  雰囲気の訳）先にCテーブルとのアソシエーションを書いて、次に中間テーブルを設定しないと順番が変なのでCテーブルを通してAテーブルとなんていう記述はできませ

【Rails】ER図の作成

# 目的
Railsで作成したアプリ内にER図を作成する。

# 開発環境
macOS: *Big Sur*
Rubyバージョン: *2.6.5*
Railsバージョン: *6.0.0*

# 前提
– アプリが作成されている。
– アプリ名は`test-app`とする。

# 手順

1. [前置き](#前置き)
1. [ツールのインストール](#ツールのインストール)
1. [ER図の作成](#er図の作成)

# 前置き

ER図の作成ですが、ツールを用いるとスムーズに作成することができます。
今回はVSCodeの拡張機能` Draw.io Integration `を使用していきます！

# ツールのインストール

VSCodeの拡張機能で` Draw.io Integration` と検索し、インストールしてください！

# ER図の作成

`test-app`を開き、拡張子を`「.dio」`にして新規ファイルを作成します。

あとは使用するテーブル図をドラック＆ドロップで設置するのみなので簡単です！

# 最後に

以上でER図作成ができました。
ちなみに作成した図は[Fi

【routing】collectionとmember

collectionとmember
–
collectionとmemberは、ルーティングを設定する際に使用できます。
これを使用すると、生成されるルーティングのURLと実行されるコントローラーを任意にカスタマイズできます。

|collection|ルーティングに:idがつかない|１つのidに特定|
|–|–|–|
|member|ルーティングにidがつく|不特定|

“`rb:【例】collectionで定義した場合
Rails.application.routes.draw do
resources :tweets do
collection do
get ‘search’
end
end
end
“`

“`rb:【例】collectionのルーティング
Prefix Verb URI Pattern
search_tweets GET /tweets/search(.:format) tweets#s

[Ruby]クラスについて

#はじめに
Rubyのクラスについて改めて理解を深めるために、こちらの記事でまとめます。

#クラスとインスタンス

Rubyではデータの元となる設計図を作り、その設計図を元に実体となるデータを作ります。
その設計図のことをクラスといい、データをインスタンスといいます。

このクラスは親子関係を作ることができ、既存のクラスの情報を元に新しいクラスを作れます。
いわゆる「クラスの継承」です

#クラスの継承

クラスの継承とは既存のクラスを元に新しいクラスを作ることです。
このとき、新しいクラスを子クラスまたはサブクラス、元になったクラスを親クラスまたはスーパークラスと呼びます。

このクラスの継承という概念があることで、共通部分がまとめられるため非常に便利になります。
例えば、新幹線、地下鉄、汽車のクラスを作成するならば、3つに共通する情報をまとめた電車クラスを作成し、その電車クラスを継承したクラスを作成したほうが効率的なわけです。

各クラスは、電車クラスをもとに各々の機能を付け加えていけばいいわけです。
例えば、電車に共通する走る、止まるといった機能に加えて、新幹線では車内販売、地

【Rails】iQueryの導入

# 目的
Railsで作成したアプリに`jQuery`を導入する。

# 開発環境
macOS: *Big Sur*
Rubyバージョン: *2.6.5*
Railsバージョン: *6.0.0*

# 前提
– アプリが作成されている。
– アプリ名は`test-app`とする。

# 手順

1. [前置き](#前置き)
1. [jQueryのインストール](#jqueryのインストール)
1. [Webpackの設定](#webpackの設定)
1. [application.jsの設定](#applicationjsの設定)
1. [テスト用ファイルの作成](#テスト用ファイルの作成)
1. [ファイルの読み込み](#ファイルの読み込み)
1. [最終確認](#最終確認)

# 前置き

Rails６から標準装備されている`Webpacker`を利用することでGem無しでインストール可能です。

# jQueryのインストール

それでは早速始めていきます！
まず`jQuery`をインストールしましょう！

“`:ターミナル
% yarn add jquery
“`

# W

Rspecテストでredirect_backの挙動をテストする

Rspecテストでredirect_back(fallback_location: root_path)のコードのRspecでのテスト方法で躓いてしまったので、解決法をシェアしたいと思います。

前提条件としてUserとWalkcourseが１対多の関係を持っている状態となっており、Walkcourse Controllerのdestoryアクションで、walkcourseを削除した場合、リファラー(直前のページ）にリダイレクトするという挙動になるよう規定しています。

“`
def destroy
@walkcourse = Walkcourse.find(params[:id])
@walkcourse.destroy
flash[:success] = ‘メッセージを削除しました。’
redirect_back(fallback_location: root_path)
end
“`

以下にはRspecテストの該当部分に関して記述しています。
loginuserがwalkcourseを削除した場合の挙動に関するテストで、before以下にリファラー

Ruby on Rails 命名規則 【初心者向け】

モデルクラス名の命名規則って単数形？それとも・・・

###### 毎回検索しては忘れる命名規則・・・
###Ruby on Railsでアプリを作成する際、命名規則がややこしかったのでまとめてみました。

## モデルクラス名は単数形
　そもそもModelとは、データベースにデータを格納・更新したり、格納したデータを検索したりする役割を持っています。モデルクラスとは、つまりデータベースとやりとりをするクラスのこと。
ちなみにクラスはオブジェクト指向言語における__設計図__と言われています。
例として、`User`という設計図に、`name`、`age`という項目を作成しましょう。
設計図に基づいて`user`というインスタンスを作成します。
このとき、`user`インスタンスをいくつ作成しても`User`という設計図は1つなので、モデルクラス名は__単数形__で表します。

これだけなら覚えられる！
ややこしくなるのは、他にも同じ単語で命名するものがあるからですよね・・・

### テーブル名は複数形
設計書を元に作成した`user`の情報を保存しているのが、`

google api ruby client の service account の auth で任意の認証情報を指定する方法

# 概要
google api を ruby から service account を使って実行するときは認証情報の入った json を指定するか

“`ruby
scope = ‘https://www.googleapis.com/auth/androidpublisher’

authorizer = Google::Auth::ServiceAccountCredentials.make_creds(
json_key_io: File.open(‘/path/to/service_account_json_key.json’),
scope: scope)

authorizer.fetch_access_token!
“`
抜粋: https://github.com/googleapis/google-auth-library-ruby#example-service-account

ライブラリ側で指定されている特定の環境変数に値を設定する方法があります。

“`ruby
require ‘googleauth’
require ‘google/apis/

【Rails】Bootstrap5の導入

# 目的
Railsで作成したアプリに`Bootstrap5`を導入する。

# 開発環境
macOS: *Big Sur*
Rubyバージョン: *2.6.5*
Railsバージョン: *6.0.0*

# 前提
– アプリが作成されている。
– アプリ名は`test-app`とする。

# 手順

1. [前置き](#前置き)
1. [Bootstrapのインストール](#bootstrapのインストール)
1. [application.jsの設定](#applicationjsの設定)
1. [application.scssの設定](#applicationscssの設定)
1. [application.html.erbの設定](#applicationhtmlerbの設定)
1. [最終確認](#最終確認)

# 前置き

今回、Railsに`Bootstrap5`を導入しますが、
`Bootstrap5`から`jQuery`が不要になったようですのでインストールは不要です。

# Bootstrapのインストール

では早速始めていきます！
まず、YarnでBootst