- 1. ~part4~【FC版】React + Rails API + axios + react-router-domでCRUDを実装する
- 2. 【Ruby on Rails】Topに戻るボタンの作成方法
- 3. トップへ戻るボタンを作る方法(JQuery ー＞ Vue.js)
- 4. [個人開発]Discordの使用時間を計測するアプリ 「Discord-Log」を作りました
- 5. RailsでDockerfile設定しながら、コマンド一つひとつ丁寧に読んでみた
- 6. #6 Rails × Vue.jsで動的なページをSPA化させる【いいね機能】
- 7. ActiveRecord のクエリ(group, having, select, count) まとめ
- 8. 個人開発で『TATEKAE』アプリ開発。過去の反省を踏まえながら取り組んでみた。
- 9. PG::ConnectionBad (could not translate host name “db” to address: Name or service not knownが出た際の対処
- 10. 【就活】階層分析で最高の就職先を算出するアプリをつくりました【転職】
- 11. 満経過月数を計算するロジック(Ruby)
- 12. has_one型のデータを表示させたくて
- 13. 【Ruby on Rails】Time.currentメソッドを使って簡単に時間表示をする方法
- 14. [Rails]redirect_toとrenderの違いについて
- 15. ◤画像アップロード◢ CarrierWaveとMiniMagickで画像アップロード機能を実装（具体例付き）
- 16. rubyをバージョンアップしてrailsコマンドが使えなくなった時の対処法
- 17. 【個人開発】家の中にときどき出る不快な虫を検索するサービス「むしめがね」をリリースしました。
- 18. ~part3~【FC版】React + Rails API + axios + react-router-domでCRUDを実装する
- 19. 【Rails】コメント機能に星評価機能を導入する
- 20. ゲストログイン機能
~part4~【FC版】React + Rails API + axios + react-router-domでCRUDを実装する
こんにちは！スージです。
[こちら](https://qiita.com/suzy1031/items/ab1186dc3ae48be27e5a)の記事の続きです### やりたい事
– `Userモデル`と`Postモデル`を1対多で関連付け
– ユーザーが登録した投稿を一覧画面に表示
– 新規登録した時に`user_id`を保存
– ログイン中のユーザーは自分が投稿したデータのみ`更新`・`削除`ができる### 開発環境
Ruby 2.7.2
Rails 6.1.4
MySQL
node.js 16.6.2
React 17.0.2### 参考
[Rails deviseで使えるようになるヘルパーメソッド一覧](https://qiita.com/tobita0000/items/866de191635e6d74e392)### Rails側から実装開始
まず、postテーブルに外部キー`user_id`を追加します
“`terminal
backend $ rails g migration AddColumnsToPosts
“`“`ruby
#
【Ruby on Rails】Topに戻るボタンの作成方法
#対象者
* 画面にTopに移動するボタンを作成したい方
#目的
* 下にスクロールしてもすぐに画面の一番上に移動できるようにする
#実際の手順と実例
###1.画像の用意まず画像を準備します。
何でも大丈夫ですが、下記のファイルを使用して頂いて大丈夫です。
こちらの画像を
app/assets/imagesに格納します。###2.Viewの設定
今回はすべてのページで表示したいので
application.html.erbへ記載します。“`app/views/layout/application.html.erb
<%= yield %>
<%= image_tag asset_path('arrow.png
トップへ戻るボタンを作る方法(JQuery ー＞ Vue.js)
はじめに
—
今回は既存のRailsアプリBlogのjQueryを利用して実装していたところを、Vue.jsで実装していきます。jQuery
—“`app/javascript/post/page_top.js
// jQuery$(document).on(“ready turbolinks:load”, function() {
const pagetop = $(“#page_icon”);pagetop.hide();
$(window).on(“scroll”, function(){
if ($(this).scrollTop() > 100){
pagetop.fadeIn();
}else{
pagetop.fadeOut();
}
});pagetop.on(“click”, function(){
$(“body, html”).animate({scrollTop: 0}, 30);
return false;});
});
`
[個人開発]Discordの使用時間を計測するアプリ 「Discord-Log」を作りました
## はじめに
この度、Discordのボイスチャンネルの使用時間を自動で計測するアプリ**「Discord-Log」**をリリースしました。
このアプリは、[RUNTEQ](https://runteq.jp/)というプログラミングスクール内限定でリリースしているアプリになりますので、サービスリンクは載せていません。
ご了承ください。
####Discord-Log####
## このサービスを作った背景
結論からお伝えすると、私がDiscordの**ボイスチャンネルにいる時間=学習時間**であったため、簡単にその時間を計測できるサービスが欲しいなと感じたからです。
私自身、学習時間を計測する習慣はありませんでしたが、学習するときはDiscordを使うようにしていました。
そのため、**Discordのボイスチャンネルを使用した時間を計測できれ
RailsでDockerfile設定しながら、コマンド一つひとつ丁寧に読んでみた
## この記事の内容
Railsで新規プロジェクトを立ち上げることになりました。
`Docker`周りも一から設定するのは初めてだったため、[公式のRailsの設定ガイド](https://docs.docker.com/samples/rails/)を参考にしつつ、バージョン等を最新版（2021年8月時点）にアップデートして作成しました。その際に、不具合があるといけないので、下記ガイドのコマンドも一つ一つ丁寧に読んでみることにしました。
– [Quickstart: Compose and Rails](https://docs.docker.com/samples/rails/)
以下は、その時のノートです。
## Define the project （プロジェクトの定義）
### 序盤
下記のコードは、公式の[Define the project](https://docs.docker.com/samples/rails/#define-the-project)の最初の部分を最新版にアレンジしたものです。（以下、同じ）“`dockerfile
# syntax
#6 Rails × Vue.jsで動的なページをSPA化させる【いいね機能】
[前回](https://qiita.com/divclass123/items/3c3725018f8dd3fd3762)の続き。
railsのデータをjson形式でvueに受け渡すことができたので、vueの方の記述をやっていこうというフェーズです。投稿の詳細ページをvueで実装しようとしてるのですが、以前railsで実装したいいね機能や、コメント機能などをvueで新たに書き直す必要があるので、vueに疎い自分にとってはまぁまぁ難関ポイントですが
しっかり頑張っていきたいと思います。# まずはVueでいいね機能を実装
drink(投稿)テーブルの方にlikes_countといったカラムがあり、
何個いいねがついてるかといったデータはそこのカラムに格納されます。
そのデータは既にjson形式でvueの方に受け渡しています。
なので、その投稿に何個いいねがついたか表示するといった機能は簡単にできそう。問題は、どうやっていいねをつけるか。
**app.vue**
“`vue
import axios from ‘axios’;
“`と非同期通信を可能にしてくれるモ
ActiveRecord のクエリ(group, having, select, count) まとめ
# はじめに
データ取得の際に、クエリ周りで悩むことが多かったのでこの際まとめて自分の思考を整理しようと思い記事を書くことにしました。初心者なので、間違えているとこなどあるかもしれません、その点ご留意ください。# この記事で扱う内容
タイトル通り、ActiveRecord のクエリ (group, having, select, count) についてまとめます。# ActiveRecord とは
– DB とアプリケーションをつなぐもの。SQLを意識せずにデータ取得が行えるという利点がある。一方で、意識していないと N+1問題のような、無駄にSQLを発行してしまう事態になることもあるので注意が必要。（こういうのをORマッパーというらしい）# クエリとは
– DBにデータをとってきてください、とお願いする命令文のこと。基本的にDBは検索に最適化されているので、データの取得などはクエリに任せる方が高速化しやすい。
– 今回記事にまとめようと思ったのも、モデルをインスタンス化してからrubyの構文で検索を行なってしまっていたところを、「ActiveRecord で取得した方が早
個人開発で『TATEKAE』アプリ開発。過去の反省を踏まえながら取り組んでみた。
# はじめに
#### 自己紹介
私は関西で主にフロントエンド開発に携わっておりますオオツカと申します。
最近はリモートワークが増えて自宅で一人寂しく仕事をしているので、もっと人と関わりたいと思いながらの毎日を送っている次第でございます。
WEBに関わるキャリアとしてはweb制作会社で1年弱、現在の開発会社で1年と少しになります。
現在のプロジェクトではNuxt.js（vue.js）で主にフロントエンドのUI周りの調整を行っています。
まだまだ得意とまでは言えるレベルではありませんが、JavaScript、Reactあたりはプロジェクトとしていくつか経験をさせていただきましたので他の技術よりかは分かるかな?というレベル感です。最近はコロナの影響や、子供と遊んだりであまり外のイベントには出れていないのですが、少し前までは[もくもくエキスパート](https://mokumoku-expert.connpass.com/)というもくもく会を開催しておりました。コロナがもう少し落ち着いたらまた開催をしたいと思いますので、その際は皆様是非ご参加くださいませ?
#### 今回の記事につい
PG::ConnectionBad (could not translate host name “db” to address: Name or service not knownが出た際の対処
# 事象
“`
PG::ConnectionBad (could not translate host name “db” to address: Name or service not known
“``docker-compose build`時に上記エラー
# 対処
dockerのimageがたくさん立ち上がったままでデバイスの容量を圧迫していたのが原因っぽい。
https://docs.docker.jp/config/pruning.html
上記の
“`
$ docker image prune
“`でbuildし直したら治った
【就活】階層分析で最高の就職先を算出するアプリをつくりました【転職】
# はじめに
複数の就職先で悩んでいる就活生・転職希望者の方、たくさんいらっしゃると思います。
そうした方々に向けて、選択肢の中から最高の就職先を算出するアプリをつくりました。後悔なく意思決定するための少しでも足しになればと。
**JobHunter’s Choice**（ジョブハンターズチョイス）
https://jobhunters-choice.com# サービス概要
**AHP（階層分析法）**という分析法を用いて複数の就職先の選択肢の中からベストなものを算出する、という手法を採用しました。
## 階層分析とは
複数ある選択肢のうちから最良のものを選択するための意思決定法です。
### 概要
例えばお部屋探しという目標に対して、**評価基準**（どの条件で選ぶか）と**代替案**（候補物件）があるとします。それらについて、
満経過月数を計算するロジック(Ruby)
経過月数(満月)を計算するロジックについて解説します。(あまり記事がなかった)
具体的に言うと以下のようなロジック。start：2021年01月15日
end：2021年02月14日
→経過月数0を返すstart：2021年01月15日
end：2021年02月15日
→経過月数1を返すstart：2021年01月15日
end：2022年03月15日
→経過月数14を返す## コード
IN：開始日(start),終了日(end) ：data型
OUT：満経過月数“`ruby
def calculation_diff_months(start,end)
(end.year – start.year) * 12 + end.month – start.month – (end.day >= start.day ? 0 : 1)
end
“`## コードの解説
■年の計算
(end.year – start.year) * 12
→ 年の差分を求めて月変換■月の計算
end.month – start.month
→ そのまま月の差分を求める
ここ
has_one型のデータを表示させたくて
こんにちは！！
ユーザー登録が完了したら、ライブ情報を
投稿できるアプリを作成中です。
今回はhas_one型のデータの表示方法について
自分のメモ用としてアウトプットしていきたいです。# アソシエーション
作成中のアプリには3つのエンティティが存在します。
deviseを使って実装したユーザー登録をするadmin_usersテーブル、
ユーザーの詳細なプロフィールを保存するadmin_profilesテーブル、
ライブ情報を投稿できるeventsテーブルが存在します。3つのテーブルのアソシエーションは以下の通りです。
Admin_user has_one admin_profiles.
Admin_user has_many events.
Admin_profile belongs_to admin_user.
Event belongs_to admin_user.ユーザー登録はウィザード形式で保存する為、
AdminProfileモデルに“`rb
belongs_to :admin_user, optional: true
has_one_attached
【Ruby on Rails】Time.currentメソッドを使って簡単に時間表示をする方法
#対象者
* 時間の表示方法を知りたい方
#目的
* Time.currentメソッドを使って時間を表示する
#実際の手順と実例
###1.結論**Time.current**メソッドを使えば簡単に時間が表示できます。
rails cで確認すると““
$ rails c
Running via Spring preloader in process 6425
Loading development environment (Rails 5.2.6)
[1] pry(main)> Time.current
=> Sat, 14 Aug 2021 23:20:51 UTC +00:00
[2] pry(main)>
““上記のように今日の時間が取得できます。
###2.応用編
“`
Time.current.all_month #今月
Time.current.all_week #今週
Time.current.all_day #今日
“`#参照
>[時刻や日付を扱うメソッドの基本情報まとめ【Ruby】【Rails】](https:
[Rails]redirect_toとrenderの違いについて
# はじめに
本記事では、redirectとrenderの違いについて記述しています。
私自身何気なく、コントローラーなどに記述しておりましたが、
改めて振り返りアウトプットしたいと思います。# redirectとrenderの違い
“`
redirect_to
↓
ルーティング
↓
コントローラー
↓
ビュー“`
“`
render
↓
ビュー
“`随分あっさり書きましたが、このような違いです。
### redirect_to
redirect_toは新しくリクエストが送られてきた時と同じ流れになります。
そのため、同様に`ルーティング→コントローラー→ビュー`の流れになります。### render
renderは、特にリクエストをされることがなく、そのまま直接ビューにいきます。`redirect_toはコントローラーへ！` `renderはビューへ！`ということですね。
## 例え
“`ruby
class MessagesController < ApplicationController . . 省略 . . def creat
◤画像アップロード◢ CarrierWaveとMiniMagickで画像アップロード機能を実装（具体例付き）
# 0. はじめに
Railsで画像アップロードといえば`CarrierWave`と`MiniMagick`が鉄板ですね。
数年前、プログラミングスクールに通っていた際にはあまり理解していなかった画像アップロード機能。
超久々に触ったので備忘録として残します?`ActiveStorage`という選択肢もありますが、あまり優位性がなさそうだったので採用を見送りました。
*参考: [ActiveStorage vs CarrierWave](https://qiita.com/w5966qzh/items/510d4c2a3829524b2e64)*# 1. 作業環境
“`yaml
OS: macOS Big Sur 11.5.1
Ruby: 3.0.2
Rails: 6.1.4
rubyをバージョンアップしてrailsコマンドが使えなくなった時の対処法
rubyをバージョンアップしてrailsコマンドが使えなくなった時の対処法
railsコマンドを実行して
can’t find gem railties (>= 0.a) with executable rails (Gem::GemNotFoundException)
上のエラーが出る時gem install rails
を実行すると解決する。
【個人開発】家の中にときどき出る不快な虫を検索するサービス「むしめがね」をリリースしました。
### はじめに
はじめまして。森と申します。この度、個人サービス「むしめがね」をリリースしました！
サービスに関して記事にしましたので、ぜひご一読いただけたら嬉しいです！アプリのURL：[https://mushimegane.fun/](https://mushimegane.fun/)
※記事内でゴキブリの画像がでてきます。
### サービス概要
「むしめがね」は、家の中にときどき出て来る不快な虫を検索できるサービスです。全体を通してシンプルなデザインにしています。
トップページには興味をそそる一文を入れました。[](https://gyazo.com/c26f6f97c70920898bc80fa758839c93)
検索するにはワード検索と画像検索があります。
ヘッダーのドロップダウンから「画像検索」ボタンをクリックするとモーダルがでてきます。
そして検索したい虫の画像を入れて検索します。
[です### やりたい事
– `devise_auth_token`を使った認証
– `Material-UI`を使ったスタイル修正### 開発環境
Ruby ~~2.7.1~~ => 2.7.2
Rails ~~6.0.4~~ => 6.1.4
MySQL
node.js ~~14.8.0~~ => 16.6.2
React 17.0.2***※開発環境を変更したため、各バージョンが変更になりました。part1から通して作り直してみましたが、新旧バージョンで動作に影響はありません***
### 参考
– [Rails API + React + devise_token_authでログイン機能を実装する](https://qiita.com/kazama1209/items/caa387bb857194759dc5)
– [Rails API + React でマッチングアプリを作ってみた](Rails
【Rails】コメント機能に星評価機能を導入する
#はじめに
Raty.jsというものを使い、コメント形式で投稿を星評価できるようにします。
また、多数のユーザーからの星評価の平均を出力することもできたので、そちらも合わせて紹介します。
#使用環境
Ruby on Rails 6
#前提
・CRUD機能を実装している事
・deviseを導入している事
・コメント機能を実装している事
#モデルの設計
・Userモデル(deviseで作成)
・Tweetモデル
・Commentモデル
#Commentモデルにrateカラムを設置
“`java:ターミナル/コマンドプロンプト
rails g migration AddRateToComments rate:float
“`
Raty.jsを用いる際にはrateカラムが大切になってきます。今回は「星1.5」などにも対応するため、float型を用
ゲストログイン機能
##環境
Rails 6.1.3
MySQL
##ゲストログイン機能の設定
“`routes.rb
get ‘/guest_session’ => ‘guest_sessions#new_guest’
“`
“`guests_essions_controller.rb
class GuestSessionsController < ApplicationController def new_guest user = User.find_or_create_by(email: 'guest@exapmle.com') do |user| user.password = SecureRandom.urlsafe_base64 user.name = 'ゲストユーザー' end session[:user_id] = user.id flash[:notice] = 'ゲストユーザーとしてログインしました' redirect_to('/posts/index') end end ``` ##解説 ####・fin
