Rails6でJavaScriptの動的読み込み

## 実現したいこと
JavaScript内からDB内のデータを動的に読み込みたい✅

## 開発環境
Rails６系
Ruby３系

アプリ：[Muscle Beat](https://www.muscle-beat.com)（スマホ専用筋トレ系音ゲー）
[GitHub](https://github.com/jibiking/muscle_beat)
テーブル（例）↓
[](https://gyazo.com/a0eef96b76e54d3df43a1c5255f5566e)

## 結論
view内の“`scriptタグ“`に“`erbタグ“`を用いて動的に読み込ませたいJSを記載します！

たしかにRails６系のJavaScriptの記述は“`app/javascript/packs“`以下にするのが通常です。
しかし上記pack

Railsでphina.jsの動的読み込み

## 実現したいこと
バックエンド（Rails)から保存したDB内のデータを呼び出して、動的にフロント（phina.js）に入れて、ゲームをプレイできるようにする✅

[phina.jsとは](https://phinajs.com/)：ゲームを簡単に作ることのできるJavaScriptのライブラリ

## 開発環境
Rails６系
Ruby３系
phina.js 0.2.3（CDN）
アプリ：[Muscle Beat](https://www.muscle-beat.com)（スマホ専用筋トレ系音ゲー）
[GitHub](https://github.com/jibiking/muscle_beat)
テーブル（例）↓
[](https://gyazo.com/a0eef96b76e54d3df43a1c5255f5566e)

## 1. viewでphina.jsの環境構築
ゲームプレイ画面を作成するvi

Next.jsについてRailsと比較しながら少し調べた

# 0. はじめに

使ったことはないが気になったので調べてまとめた。

# 1. RailsとNext.jsの比較

|| Rails | Next.js |
|:-:|:-:|:-:|
|雛形作成 | `rails new` | `create-next-app` |
|ルーティング| routes.rb | File-system Routing |
| クライアントサイドルーティング| turbolinks | next/link |
| Static Site Generation| ○
（ActiveRecordが不要なのでRailsを使う必要はない。） | ◎ |
| Server Side Rendering| ◎
(Server Side Templatingとも呼ばれる。) | ○ |
| Client Side Rendering |△
(フレームワークのような規約がないJavaScriptでAjaxを実行する必要がある。)| ○
(File-system RoutingやSEO/OGPの最適化が不要になるため、Reactを使った方

「Rails」urlとpathの違いを初心者向けに解説

# _urlと_pathの違いについて

簡単に申し上げるとurlは絶対パスでpathは相対パスである。

### urlについて解説

_urlの形は絶対パスである。例えば、　
“`new_user_url“`という書き方は “`http://localhost:3000/users/new“`と書くのと同意である。
リダイレクトではHTTPの性質上、完全なURLが求められるのでredirect_toメソッドの引数はURLで指定するべきである。
逆に言えばredirect_toメソッドの引数でしか_urlという書き方は使われない。
### pathについて解説

_pathの形は相対パスである。
“`new_user_path“` という書き方は “`/users/new“`と書くのと同意である。
_pathという形は基本的にredirect_to以外で使うと覚えておけば良い。
例えばform_withやlink_toなど。

## 「“`redirect_to @post“`」という書き方（上級者向け）

“`redirect_to　post_url(@p

Git,Githubを使用してherokuへデプロイ

初めての投稿になります。
こちらは、私の備忘録として残しておきます。

# 前提
デプロイしたいアプリが作成済み、GitHubにアカウント登録済み、GitHubにリポジトリを作成済みで、ブランチを切っている状態で、今回はrailsで作成したアプリをデプロイしていきます。

# 実行の流れ
“`!!!
まず、ステージングエリアにカレントディレクトリ以下のファイルをまとめて追加します
git add .

次に自分が変更したファイルをローカルリポジトリに保存します。
git commit -m “コミット名”

Githubにプッシュします。
git push –set-upstream origin ブランチ名

こちらでmasterブランチに変更します。
git checkout master

Githubにプッシュしたブランチ名を使用してマージを行います。
git merge ブランチ名

最後にherokuにデプロイします。
git push heroku
“`
これでherokuへのデプロイが完了です。

# まとめ
初めての投稿なので、誤字脱字やご指摘等ありましたらコメ

エラーメッセージの日本語化

オリジナルアプリを開発する過程で、ユーザー登録時に入力に誤りがあった場合に表示されるエラーメッセージを日本語化に。

備忘録のため手順を記載する。

まずはapplication.rbを編集。

“`ruby:config/application.rb
module Grucale
class Application < Rails::Application version. config.load_defaults 6.0 config.i18n.default_locale = :ja #追記 end end ``` ※``:ja``は日本語設定を意味する 次にGemfileの記述 ```rubu:Gemfile #最下部に追記 gem 'rails-i18n' ``` 追記したら``bundle install``を実行。 ここまでで挙動を確認すると、``Passwordを入力してください``のように一部しか日本語化されていない。 それを解消するために英語から日本に翻訳してくれるファイルを作成する。 config/localesディレ

Railsの3つの環境【Ruby on Rails】

Railsには以下の3つの環境がある
* テスト環境（test)
* 開発環境（development)
* 本番環境（production)

Railsの`Rails`オブジェクトには`env`属性があり、開発環境において、`Rails.env.development`を実行すると、`true`が返ってくる。

Rails consoleやRails serverはデフォルトでは開発環境だが、`$ rails console test`、`$ rails server –environment production`など環境をパラメータとして渡すと、その環境で実行することができる。

また、アプリケーションを本番環境で実行する場合は、`rails db:migrate`を本番環境で実行してデータベースを作成する必要があり、`$ rails db:migrate RAILS_ENV=production`を実行する。

注意としては、上記のように、console、sever、migrateで環境の指定の仕方が違う。

Herokuは本番サイト用のプラットフォームのため、デフォルトで

【個人note】Ruby on Rails

## 慣習・常識

#### Rubyでは真偽値(true, false)を返すメソッド名は慣習的に’?’をつけることが多い。
参考：[Array#include?](https://docs.ruby-lang.org/ja/3.0/class/Array.html#I_INCLUDE–3F)

—
#### 可読性を考え、一つのメソッドが10行くらいに収まるよう心がける。

—
#### “（ダブルクォーテーション）は入れ子にする事はできない。
“（ダブルクォーテーション）は入れ子にすることはできないので、外側は’（シングルクォーテーション）に変えると良い。

“`:悪い例
“>
“`

“`:良い例

Ruby

Rails

RubyonRails6.0

元記事を表示

VScodeでerbファイルをEmmet有効にする際に気づいたこと

VScodeのEmmet補完の設定

erbファイルでもEmmetを有効にするには、VScodeのsettingにある **Emmet:include Languages** を設定します。ググって調べると以下の画像のように設定で完了したらいいらしい。
[](https://gyazo.com/df3d872e452cad2660d33c138628da31)
ただ私の場合はこれだけでは機能しませんでした。少し時間をかけて調べてみると以下の画像のように設定を加えたら解決しました。
[](https://gyazo.com/3abf751346c6b0f43940df644fbbff8b)
ちなみに**setting.json**へ直接記述しても設定は変更できます。
“`

Rspecでのdevise_token_authの認証テストがうまくいかなかった

こんばんは

QiitaでRspec/devise_token_authで[調べて出てきたの](https://qiita.com/mtoyopet/items/ed1bd4b9c1544d401880)を参考に認証が通った状態でpostができるかのテストをしてみたところ、詰まったのでここに書き残しておきます
# 認証エラーの起きたテストコード
“`Ruby:authorization_spec_helper.rb
module AuthorizationSpecHelper
def sign_in(user)
post api_v1_user_session_path,
params: { email: user[:email], password: user[:password] },
as: :json

response.headers.slice(‘client’, ‘access-token’, ‘uid’)
end
end

“`
まずQiitaの記事を参考に、サインインしたときにレスポンスのclient,access-

RailsでREST API設計するときに知っておきたい集

## RESTについて

– RESTとは
– Representational State Transfer。WebAPIの共通仕様、アーキテクチャスタイル。またはそれを用いたシステム。
– RESTfulとは
– RESTの設計原則に従ったシステムのこと。

[Representational State Transfer – Wikipedia](https://ja.wikipedia.org/wiki/Representational_State_Transfer)

### RESTの設計原則

#### 1. ステートレス(Stateless)

– サーバ側で状態の管理を行わない。
– クライアントが送信するHTTPリクエストには、サーバがそのリクエストを処理するために必要な情報が全て含まれており、以前のリクエスト情報にも依存しない。
– セッション情報を保持しない。
– だが、クッキー等によるセッション状態の管理を行なっているシステムもRESTfulと呼ばれる。

#### 2. 統一インターフェース(Uniform Interface)

–

Rubyのぼっち演算子について

# ぼっち演算子`&.`

「レシーバがnilのときに起こるエラーを回避するため」に`.`の代わりに` &.`を使います。
レシーバがnilでもエラーにならず、nilを返してくれます。

“`ruby
user = User.new
user.name # => “ユーザー名”

object = nil
object.name # => NoMethodError
object&.name # => nil
“`

ifや三項演算子でも書くことができます。

“`ruby
# ifを使った書き方
name = if object
object.name
else
nil
end

# 三項演算子を使った書き方
name = object ? object.name :nil
“`

【Rails 6】片方の選択によってもう片方のオプションの値が変化する動的なセレクトボックスを作る

## 概要

タイトル通りのものを作ります。文字だけだとわかりにくかったら、次の完成イメージを見てください。

## 完成イメージ


## 仕様

– Ruby 3
– Rails 6
– MySQL 5.7
– Bootstrap 5
– Docker

※ Bootstrap はバージョン5から JQuery が不要になり導入方法が少し変わったのでご注意ください。

## 下準備

まず最初に下準備から始めていきます。

### 各種ディレクトリ & ファイルを作成

“`
$ mkdir rails-dynamic-selectbox && cd rails-dynamic-selectbox
$ touch Dockerfile docker-compose.yml entrypoint.sh Gemfile Gemfile.loc