【rails × vue】 ライブラリでフラッシュメッセージを表示する

rails×vueでポートフォリオ作成中の初学者の備忘録です。
vue上でフラッシュメッセージを表示できるライブラリの紹介です。

#vue-flash-messageのインストール

https://www.npmjs.com/package/@smartweb/vue-flash-message/v/next
こちらのサイトからインストールできます。

“`
npm i @smartweb/vue-flash-message@next
“`
もしくは

“`
yarn add @smartweb/vue-flash-message@next
“`

エントリーファイルは下記の通りです。

“`application.js
import FlashMessage from ‘@smartweb/vue-flash-message’;
const app = createApp(App);
app.use(FlashMessage);
“`

#使い方

ユーザー登録フォームを送信し、成功ならルートURLにアクセス、成功メッセージの挿入、失敗ならページ遷移はせずに失敗メッ

booleanをランダムで返す

#booleanの真偽値をランダムで返す方法

これでtrueかfalseがランダムに帰ってくる
rails c で確認できます。

“`rb
hoge = [true, false].sample
“`

アソシエーションについて！

#①.結論！

アソシエーションとは、モデルを利用したテーブル同士の関連付けのことです！

アソシエーションをモデルに定義することで、そのモデルに紐づく別のモデルの情報へアクセスできるようになります！

それでは、どのように定義するかを見ていきます！

#②.has_manyメソッド

例えばTwitterに考えてみます！

Userモデルの視点で考えると、あるユーザーの作成した投稿は「複数個」ある状態です！

1人のユーザーは複数の投稿を所有しています！

この状態のことをhas manyの関係といい、今回の場合は「User has many Twitters」の状態であると言えます！

この関連付けをするため、userと他のモデルとの間に「1対多」のつながりがあることを示すのがhas_manyメソッドです！

つまり、１人のユーザーは何個も投稿できるので、has_manyという事です！

下記が記述例となります！

“`php:app/models/user.rb
class User < ApplicationRecord devise :database_authenti

VS Code x Rails7 x Tailwind CSS IntelliSense

以下が前提

– Rails7でtailwindcss-railsを使って開発をしている
– エディタとしてVS Codeを使っている
– Tailwind CSS IntelliSenseを使いたい

試したバージョン

– Rails 7.0.0.alpha2
– tailwindcss 2.2.17

# tailwindcss自体のインストール

tailwindcss-railsを使う場合、gemとしてtailwindcssが提供されるが、IntelliSenseを有効にするためにはtailwindcssのインストールが必要

https://tailwindcss.com/docs/installation

Railsのルートディレクトリで以下を実行

“`
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
“`

# tailwind.config.jsを作成

以下に記載がある通り、tailwind.config.jsが必要
https://marketplace.visual

初めてのオリジナルアプリ【My内閣】

こんにちは！テックアカデミーのWebアプリコースを受講している駆け出し高校生エンジニアの安田駿介です。

本日、テックアカデミーの受講最終日です。

ギリギリでオリジナルアプリを完成し、合格することができました。

今回は、そのオリジナルアプリを公開していきたいと思います。

なお、このアプリは僕がプログラミングを始めて、一番最初のオリジナルアプリとなっています。

#アプリURLとGitHubのリポジトリ
https://my-naikaku.herokuapp.com

https://github.com/yasshun1229/my-naikaku.git

#内容

アプリ名は「My内閣」です。

My内閣は、自分だけの内閣を作れるというアプリです。

具体的には、ログインして、内閣作成ページに行き、各閣僚の入力フォームに自分が指定したい人の名前を書くことです。

#開発環境
・AWS
・Cloud9
・Ruby 3.0.0
・Rails 6.1.3.1
・Bootstrap

#感想
正直に言うと、このアプリは全て自分で作ったわけではなく、メンターさんから分からないところの

1対多の要素を1つのviewで登録する/個人開発のつづき

# はじめに
　ずっとコードを書いていたが、それだけではだいじなことを忘れそうな気がしたので、ここに記録しておこう。今、個人開発で日報アプリをつくろうとしている。ユーザーは日々の記録を書ける。各作業のジャンル、作業名、何時間したかさいごにその日のコメントをつける。

　ログインした後、reportを登録する。reportひとつに対してreport_itemを複数登録できる。以下のようにしたい。

“`
例：
ユーザー名：satou
登録日: 2021/10/21
report_item 1
ジャンル: Ruby
やったこと： メソッド復習
　　　　作業時間: 1時間

report_item 2
ジャンル: 英語
やったこと： TOEIC対策
　　　　作業時間: 2時間

report_item 3
ジャンル: 筋トレ
やったこと： ランニング
　　　　作業時間: 0.5時間

全体のコメント：
　　よくできた。

“`

これを実現するにはどうすればいいのだろう。ひとつずつやっていくことにした。

# モデルを考える
まずはモデルとその関係性を考えない

【備忘録】【Rails】PostgreSQLインストールからデータベース作成までの流れ

今までMySQLを使用していましたが業務でPostgreSQLを使用することとなり、ローカルにインストールするも、データベース作成時点で何度もエラーになり苦労したので成功したときの流れを備忘録に残しておきます。

# 事前準備

#### ①config/database.yml の編集
database.ymlのdevelopmentを以下のように編集しておきます。

“`ruby:database.yml
(省略)

development:
<<: *default database: データベース名 host: localhost port: 5432 (省略) ``` ▼参考にさせていただいた記事▼ https://qiita.com/right1121/items/e247c7a52a000ff593d6 #### ②.env の編集 筆者の場合は仕事のプロジェクトでdatabase.ymlのdefault環境のusername、passwordに対して、環境変数を使用しています。 そのため.envファイルを作成し、これから作りたいデータベースの

ユーザーのURLをmyapp.com/usernameとかmyapp.com/settingsみたいなナウい感じにしたい（Rails）

## やりたいこと
ユーザーのマイページやアカウント設定ページのルーティングをしたいです。
普通にRailsの`resources`メソッドに任せてしまうと、`my_app.com/users/:id`てな具合になってしまいます。

でも、ナウいQiitaとかnoteとかだとこんな感じになっています。

“`
https://qiita.com/kakudaisuke
https://qiita.com/settings/account

https://note.com/kakudaisuke
https://note.com/settings/account
“`

シンプルでかっこいいじゃないですか！
僕のアプリもこうしたい！

実装してみて、簡単にできたものの、細かいところの調整がやや面倒だったのでメモを。

### 環境
ruby 2.7.2
Rails 6.1.4.1

## 実装！
### routes

“`ruby:config/routes.rb
Rails.application.routes.draw do
root ‘posts#index’
#

rails本番環境（EC2）でWe’re sorry, but something went wrong.

#はじめに
現在プログラミング学習を始めて３ヶ月目の初学者です。
学んだことをqiitaに投稿という形でアウトプットするため、また備忘録として記事を作成しました。

開発環境では何も問題なく動いていたのですが、本番環境では
We’re sorry, but something went wrong.
と出てしまいました。なのでエラーログの確認からして行きます

##エラーログの確認
参考記事
https://qiita.com/ug23/items/308182bf4e60bc81f04e
https://qiita.com/nkekisasa222/items/d4ef64a5e6b539ed3c37

AWS EC2を使いデプロイしていて、そもそもエラーログの見方から分からなかったので上記の記事を参考にしました。

1.EC2サーバにログイン後、対象アプリのリポジトリに移動。

“`
[ec2-user@******]$ cd 対象のリポジトリ
“`

2.直下のlogに移動

“`
[ec2-user@****** 対象のリポジトリ]$ cd log
“`

3.log

Heroku Railsアプリデプロイ時にrake assets:precompileでNoMethodError: undefined method `[]’ for nil:NilClass

久しぶりに `rails new` して Herokuにデプロイした時にエラー

“`bash
—–> Preparing app for Rails asset pipeline
Running: rake assets:precompile
rake aborted!
NoMethodError: undefined method `[]’ for nil:NilClass
“`

# master.keyをHeroku環境変数に設定する

master.keyが登録されていないことが原因でした。
以下のコマンドで解決

“`bash
$ heroku config:set RAILS_MASTER_KEY=`cat config/master.key`
“`

herokuを使ってデプロイしているアプリのデータベースをSequelProで可視化する！

作ったアプリをherokuを使ってデプロイしたはいいけど、データベースが…となったので、SequelProで可視化するためのメモを書いていきます。

#開発環境
* M1 Mac
* vscode
* ruby 3.0
* rails 6.1
* herokuにデプロイ済み

# いざデータベースの可視化

## step1
1. ターミナルより対象アプリのディレクトリに移動
1. “heroku config“を実行

CLEADB_DATABASE_URLに注目です！

## step2
SequelProに必要情報を記述していきます。
先ほど確認したCLEADB_DATABASE_URLは以下のような構造になっています。

“`
CLEARDB_DATABASE_URL: mysql:

【Rails】「教材シェア」アプリを作成しました②

## 1.はじめに
閲覧していただきありがとうございます。
前回作成したアプリをさらに改善、機能を追加しました。
そのときの開発の苦悩などをまとめました。
よろしければ、ご覧ください。
## 2.関連URL
アプリ：https://teaching-materials-app.herokuapp.com/
Github：https://github.com/suugakusan/teaching_materials_app
前回のQiita：https://qiita.com/suugakusan/items/15b5b6e9b81726344342
## 3.機能一覧
| |機能 |gem |
|:—: |:—: |:—: |
|1 |ログイン・ログアウト |× |
|2 |アカウント登録 |× |
|3 |教材検索 |× |
|4 |教材投稿 |carrierwave |
|5 |ページネーション |pagy |
|6 |レスポンシブ |Bootstrap |
|7 |ゲストログイン |× |
|8 |記事投稿機能(CRUD

Rails Cloud9からローカル環境へ（備忘録）

##初めて投稿！

AWSの無料期間がもうそろそろ終わるので、
Cloud9にあったプロジェクトをローカル環境に移管した。

まだまだ初心者のためいろいろと苦労したので、備忘録として記録。

——

##環境

・macOS BigSur 11.6
・Ruby 2.5.3
・Rails 5.2.6
・Homebrew 3.2.16

—–

##rbenvのインストール
Rubyのバージョン管理はrbenvとrvmがあるらしい。
色々調べてrvmは面倒そうだったので、rbenvをインストール

“`
% brew install rbenv ruby-build
“`

設定ファイルの記載方法を確認

“`
% rbenv init
# Load rbenv automatically by appending
# the following to ~/.zshrc:

eval “$(rbenv init – zsh)”
“`
設定ファイルに書き込み（PASSを通すっていうのか？）

“`
% echo ‘eval “$(rbenv init -)”‘ >>

railsのstringとtextの違い

データベース設計に関してStringとtextの違い

string
入力できる文字が２５５字以内。
主な用途は、一言情報を入力したいとき使う。(名前、電話番号、住所など）
Twitterなどの文字数制限があるのは多分これ？

text
入力できる文字は無制限。
長文投稿したいときなどに使う。(ブログ本文、コメント入力フォームなどに）

railsチュートリアル第八章 フラッシュメッセージを表示させる

###フラッシュメッセージを表示させる

####ログイン失敗時の処理を扱う
app/controllers/sessions_controller.rb

“`rb
class SessionsController < ApplicationController def new end def create user = User.find_by(email: params[:session][:email].downcase) # 送信されたメアドを使ってデータベースから取り出す。 #emailを小文字にする if user && user.authenticate(params[:session][:password]) # user 取得したユーザーが有効かどうか？ # その後にデータベース上にパスワードがあるか？ # ユーザーログイン後にユーザー情報のページにリダイレクトする else flash[:danger] = 'Invalid email/password com

railsチュートリアル第八章

###ユーザーの検索と認証
####Sessionsコントローラのcreateアクション
app/controllers/sessions_controller.rb

“`rb
class SessionsController < ApplicationController def new end def create # 新規ユーザー作成 render 'new' # newアクションのビューを表示させる end def destroy # ユーザー削除 end end ``` デバッグ情報 paramsハッシュでは、次のようにsessionキーの下にメールアドレスとパスワード ``` --- !ruby/object:ActionController::Parameters parameters: !ruby/hash:ActiveSupport::HashWithIndifferentAccess authenticity_token: s9oeKxILHYOKGNouY+o5HHYogso0J+Rba3Nuss

railsチュートリアル第八章 ログインフォーム

###ログインフォーム
ログインフォームのビューを整える。

“`html
<% provide(:title, "Log in") %>

Log in

<%= form_with(url: login_path, scope: :session, local: true) do |f| %>

<%= f.label :email %>
<%= f.email_field :email, class: 'form-control' %>

<%= f.label :password %>
<%= f.password_field :password, class: 'form-control' %>

<%= f.submit "Log in", class: "btn btn-

Ruby特有のif文

Rubyを勉強し始めて1日目
初心者として気になったこと・躓いたことを備忘録として残していこうと思います。

#構文

“`ruby:if文
if 条件A
# 条件Aが真だった場合の処理
elsif 条件B
# 条件Bが真だった場合の処理
elsif 条件C
# 条件Cが真だった場合の処理
else
# どの条件に対しても真にならなかった場合の処理
end
“`
:::note warn
複数条件の場合は、else ifではなくelsifです。
:::
JavaScriptなどの言語から勉強している方は注意が必要です。（私も間違えやすい…）

##便利な性質
###戻り値を返す
Rubyのif文は戻り値を返すため、変数に戻り値を代入することができます。
以下は時間帯によって表示する挨拶を変更するコード例です。

“`ruby:戻り値を変数に代入する
time_zone = ‘夜’

greeting =
if time_zone == ‘朝’
‘おはよう’
elsif time_zone == ‘昼’
‘こんにちは’
elsif

テストコードについて！

#①.結論！

テストコードとは、アプリケーション内に記述する、そのアプリケーションの挙動を確認するためのコードのことです！

Ruby on Rails内にも、アプリケーションのテストコードを記述する機能を設けることが出来ます！

その機能は「RSpec」というGemを使うことで便利に実装できます！

#②.なぜテストコードを書くのか？

テストコードを書く意義は大きく分けて2つあります！

１・クオリティの担保ができる！

ブラウザデアピリケーションの挙動を確認するのは、デメリットの方が多いです！

主な理由は3つです！

・人為的なミスが生じるかもしれない！
・仕様が変更した際に、もう１度全部やらないといけない！
・どのように確認したか、記録が残らない！

このようなことがあります！

２・仕様を見極めることが出来る！
テストコード書くことが出来れば、アプリケーションの仕様を理解していることになる！

主な理由は２つです！

・テストすべき項目を洗い出すときに使用を見極めることが出来る！
・テストコードを書ける人は、仕様を理解している人！

以上が、テストコードを書くための理由

[Rails]パーシャル内パーシャルのrender繰り返しを防ぐには

# ハマった点

投稿一覧ページに「いいねボタン」を設置する際、各投稿のパーシャルをrenderする際の繰り返しは、collectionオプションにて解決できた。

しかし、各投稿のパーシャルの中でrenderしているパーシャルにおいては、投稿の分だけrenderの繰り返しが発生してしまう。

　↓実際のログ

このrenderのせいで、たった25件の投稿表示に1800ms以上の時間がかかってしまう。しかも、Ajaxによる非同期処理でいいねボタンの切り替えを実装しているため(DRYの観点でも)、いいねボタンをパーシャル化しなければならない。(他に方法があれば知りたいです！) 同じ状況の方も多いのでは？

# 解決策
renderの**layoutオプション**と**yieldメソッド**を使うことで解決した。

# E