はじめに これはスキルアップ？のための記録です。 今はこの程度しかできない。という意味を込めて…。 内容はめちゃくちゃなので参考にはならないと思います！ １．Controllerを作成する まずはページを表示するためにコントローラーを作成します。 Railsのアプリケーションフォルダまで移動してコントローラーを作成します。 $cd [アプリケーションフォルダ] $rails g controller login_controller そうするとこのようにコントローラーの中に新しいrbファイルが生成されます。 生成されたコントローラーにアクションメソッドを追加します。 login_controller.rb class LoginController < ApplicationController def login end end これで最低限画面を移すためのコントローラーが完成しました ２．Viewを作成する 続いて、Controllerから呼び出されるViewのファイルを生成します。 次のようなファイルを作成します。 [app>config>>コントローラー名>アクション名.html.erb] このとき、ファイルの拡張子は[.html.erb]を利用します。（そういうルールらしいです。） 中身はログイン画面とフォームとボタンだけ入力しておきます。 login.html.erb <h1>Login画面</h1> <%= form_with url: "login" , method: "get" do |form| %> <div> <%= form.label :ID %><br> <%= form.text_field :id %><br> <%= form.label :PASSWORD %><br> <%= form.text_field :password %><br> <%= form.submit :Login, name: nil %> </div> <% end %> ３．ルーティングを設定する 次はルーティングを設定します。 指定のURLを踏んだ時に、このコントローラーに対応する画面を表示してね！というもの。 場所は[app>config>routes.rb]です。 get "URL名" => "コントローラー名#アクション名" という行を１行追加します。 routes.rb Rails.application.routes.draw do get "login" => "login#login" end これで http://localhost:3000/login にアクセスできるようになりました。 ４．正常に画面表示されるか確認 ここまで来たら一度作成した画面が見れるかサーバーを起動してhttp://localhost:3000/loginにアクセスしてみます。 こんな画面が出てくれば成功です。 今のところはログインボタンを押しても同じ画面に遷移します。 ５．TOP画面の追加 続いてログインが成功したときの画面を設定します。 まずはログイン画面の次に遷移する画面を作成しましょう。 新しくログインコントローラーにアクションを追加します。 login_controller.rb class LoginController < ApplicationController def login end def top end end 次に表示する画面を作ります。 top.html.erb <h1>Top画面</h1> <%= form_with url: "login" , method: "get" do |form| %> <div> ログイン成功！<br> LoginID:<%= @id %><br> Password:<%= @password %> </div> <% end %> そしてルーティングを設定します。 routes.rb Rails.application.routes.draw do get "login" => "login#login" get "top" => "login#top" end これで http://localhost:3000/top にアクセスできるようになりました。 ６．フォームから値を受け取る ログイン機能を実装するには、フォームに入力されたIDとパスワードをコントローラー側で受け取る必要があります。 コントローラーにパラメーターを受け取るように記述します。 railsではparamsで値を受け取り、型は無条件に文字型になるようです。 login_controller.rb class LoginController < ApplicationController def login @id = params[:id] @password = params[:password] end def top end end 続いてこの値を用いて指定のユーザーかどうかを検証します。 今回は適当に作ってるのでユーザーIDとパスワードを固定にしてコントローラーで判定します。 id user password p@ssword IDとパスワードが一致すれば、top画面を表示する　というものです login_controller.rb class LoginController < ApplicationController def login @id = params[:id] @password = params[:password] if @id == "user" && @password == "p@ssword" then render template: "login/top" end end def top end end ７．ログインする IDとパスワードを入力してログインボタンを押下！ ↓ ログインができました！ IDもしくはパスワードを間違えるとLogin画面に戻ってくるはずです！ 最後に 前回の環境構築に続き、とりあえず適当に簡単なログイン画面でも作ろう！と思って完成したのがこれでした。 正直めちゃくちゃだなーと思いながらやけくそで書いた感じはあります・・・笑 今後はセキュリティ面やパラメーターの種類、データベースの連携等を勉強してちゃんとしたログイン画面を作れたらいいなーと思っています。 最後までつまらない記事にお付き合いいただきありがとうございました。 今後も少しずつレベルを上げて投稿頑張ろうと思いますのでよろしくお願い致します。

はじめに Railsでの環境構築中に起きたエラーを備忘録として残します。 解決方法 サーバーを立ち上げるとyarnがインストールされていないですのような以下のエラーが発生 ターミナル $ rails s => Booting Puma => Rails 6.0.3.2 application starting in development => Run `rails server --help` for more startup options error Couldn't find an integrity file error Found 1 errors. ======================================== Your Yarn packages are out of date! Please run `yarn install --check-files` to update. ======================================== To disable this check, please change `check_yarn_integrity` to `false` in your webpacker config file (config/webpacker.yml). yarn check v1.22.4 info Visit https://yarnpkg.com/en/docs/cli/check for documentation about this command. Exiting あれ？インストールしているはずだけど！と思いながら エラー通りにひとまず以下のコマンドを実行 ターミナル $ yarn install --check-files しかし、解決できず。。。 そこで以下のコマンドで、yarnのインストールではなく アップグレードしてあげることで解消することができました！ ターミナル $ yarn upgrade 同じ境遇の方はぜひ試してみてください。

CarrierWaveとは?? CarrierWaveは、画像をアップロードできるgemの一つです。 非常に簡単に扱えるので、初学者の方でも躓かずに導入することができると思います。 この記事はrailsプロジェクトが作成してあることを前提に書いています。 前提 ・開発環境：cloud9 ・OS:ubuntu ・railsのバージョン:5.2.5 CarrierWaveをインストール まずgemファイルに以下のようにコードを記入します。 Gemfile gem 'carrierwave', '~> 2.0' そして、バンドルインストールします。 $ bundle install これでCarrierWaveのインストールは完了です! アップローダークラスの作成 以下のコードでアップローダークラスを作成します。 $ rails g uploader (アップローダー名) アップローダー名は任意です。自分は「アップローダー名＝image」としました。 $ rails g uploader image すると、app/uploaders/image_uploader.rbが生成されます。 このファイルについて簡単に説明します。 rmagickというgemをインストールし、画像アップロードの設定に関するコードを記入すると、 色々な機能をつけることができたりします。 ただし、この記事では触れませんが、以下の参考記事ではCarrierWaveとrmagickの導入から使い方まで 書かれていますので参考にしてみてください。 参考：【Rails】CarrierWaveとrmagickで画像アップロード機能を作る アップロードする画像のカラムを追加 アップロードする画像を保存するためのカラムを作成していない場合は、以下のようにカラムを追加してください。 以下はユーザーのプロフィール画像をアップロードできるようにするため、usersテーブルにimageカラムを追加しています。 $ rails g migration add_image_to_users image:string $ rails migrate:db 画像を保存するためのカラムimageは、なんで文字列（string)なの??と疑問に思うかもしれません。 じつは、imageカラムはアップロードした画像のファイル名を保存するためのカラムなのです。 データベースに画像データという重いデータを保存していては、データベースサーバを圧迫してしまいますからね。 また、セキュリティ対策として以下のように、取得できるパラメータを制限している場合は、imageカラムにアップロードした画像ファイル名を保存できるようにしましょう。 app/controllers/users_controller private def user_params params.require(:user).permit(:name, :email, :password, :password_confirmation, :introduce_comment, :image) end アップローダークラスとimageカラムの結び付け アップローダークラスとimageカラムを結びつけるためにapp/models/user.rbに以下のコードを追記します。 class モデル名 < ActiveRecord mount_uploader [:カラム名], [アップローダークラス] end 例えば、imageカラムとImageUploaderクラスを結びつけるには class User < ApplicationRecord mount_uploader :image, ImageUploader end を追記します。 これで完了です。 画像がアップロードできる編集フォームを作成する。 では、実際に画像をアップロードできるようにフォームの作成 edit.html.erb <%= form_with(model: @user, local: true) do |f| %> <div class="form"> <%= f.label :image, '画像' %> <%= f.file_field :image, class: 'form-control image-form' %> </div> <div class="form"> <%= f.label :name, '名前' %> <%= f.text_field :name, class: 'form-control' %> </div> <div class="form"> <%= f.label :introduce_comment, '自己紹介文' %> <%= f.text_area :introduce_comment, class: 'introduce-form-control' %> </div> <%= f.submit '更新する', class: 'edit-btn' %> <% end %> 画像のアップロードフォームはfile_fieldでファイル選択ボックスを実装することができます。 これで画像をアップロードすることができるようになります。 アップロードした画像の表示方法 show.html.erb <% if @user.image? %> <p> <%= image_tag @user.image.url %> </p> <% end %> このようにimage_tagで画像を表示します。また、urlメソッドにより画像データの保存場所のpathを取得しています。 アップロードした画像の保存場所 実際の画像データの保存場所はpublic/uploads/user/画像ファイル名に保存されます。 画像をアップロードしたら、確認してみましょう。 最後に CarrierWaveの実装方法については、多くの記事が出ていますので プログラミング初学者にとっても簡単に実装できました。 【Rails】 CarrierWaveチュートリアルの記事が非常に参考になりましたので こちらを参照することをお勧めします。

共通点 レシーバがnilの場合は、nilを返す foo = nil foo.try(:bar) #=> nil foo&.bar #=> nil 相違点 レシーバがnilで無く、レシーバが呼び出せないメソッドを呼び出してしまった場合 ぼっち演算子: NoMethodErrorを返す tryメソッド: nilを返す # レシーバが呼び出すこの出来ないbarメソッドを呼び出した場合 foo&.bar #=> NoMethodError foo.try(:bar) #=> nil まとめ 必ずしも、似てはいるけど同じでは無いってことですね。

テキストボックスまたはテキストエリアに文字を入力する <label for="blog_title">タイトル</label> <input type="text" value="" name="blog[title]" id="blog_title"> fill_in 'タイトル', with: 'あけましておめでとうございます。' セレクトボックスを選択する <label for="japanese_calendar">和暦</label> <select name="japanese_calendar" id="japanese_calendar"> <option value="0">明治</option> <option value="1">大正</option> <option value="2">昭和</option> <option value="3">平成</option> </select> select '平成', from: '和暦' https://qiita.com/jnchito/items/607f956263c38a5fec24 https://qiita.com/Hiroaki_Sameshima/items/f1f568fd65d80fe9d433

Gemfileに追記 gem 'devise' いつも通りの bundle install ※ターミナルに Using devise 4.8.0 が出力されればOK ローカルサーバーの再起動 rails g devise:install これを実行して Running via Spring preloader in process 78357 create config/initializers/devise.rb create config/locales/devise.en.yml =============================================================================== Depending on your application's configuration some manual setup may be required: 1. Ensure you have defined default url options in your environments files. Here is an example of default_url_options appropriate for a development environment in config/environments/development.rb: config.action_mailer.default_url_options = { host: 'localhost', port: 3000 } In production, :host should be set to the actual host of your application. * Required for all applications. * 2. Ensure you have defined root_url to *something* in your config/routes.rb. For example: root to: "home#index" * Not required for API-only Applications * 3. Ensure you have flash messages in app/views/layouts/application.html.erb. For example: <p class="notice"><%= notice %></p> <p class="alert"><%= alert %></p> * Not required for API-only Applications * 4. You can copy Devise views (for customization) to your app by running: rails g devise:views * Not required * =============================================================================== これが出力されればOK モデルの作成 rails g devise user config/routes.rb Rails.application.routes.draw do devise_for :users devise_forの記述が自動で追加されていたらOK。 マイグレーションファイルの作成。 db/migrate/20XXXXXXXXX_devise_create_users.rb class DeviseCreateUsers < ActiveRecord::Migration[6.0] def change create_table :users do |t| ## Database authenticatable t.string :email, null: false, default: "" t.string :encrypted_password, null: false, default: "" ## Recoverable t.string :reset_password_token t.datetime :reset_password_sent_at ## Rememberable t.datetime :remember_created_at # 省略 t.timestamps null: false end add_index :users, :email, unique: true add_index :users, :reset_password_token, unique: true # add_index :users, :confirmation_token, unique: true # add_index :users, :unlock_token, unique: true end end 他のモデルの作成と同じく、マイグレーションファイルを作成して、Usersテーブルに欲しいカラムと型を追記。 追記は ## Database authenticatable この下に記述。 emailとpasswordはデフォルトで設定されているので、その前後に欲しいカラムを追加。 マイグレーション実行 rails db:migrate これでテーブルの作成が完了。 ※Sequel Proなどで視覚的にも確認しましょう。 ビューの作成。 注意点はdeviseを使用する場合は、専用のコマンドで作成しなければ、意味がないということ。 ※モデルやコントローラーでも同じだが。 rails g devise:views ここまで出来たら、あとはビューを調整するだけ。 デフォルトでビューが作成されているので、 http://localhost:3000/users/sign_up で新規登録画面 http://localhost:3000/users/sign_in でログイン画面が確認できます。 新規登録のビューは app/views/devise/registrations のnew.html/erb ログイン画面のビューは app/views/devise/sessions のnew.html.erb に格納されています。 ビューを調整しても、追加したカラムがある場合は登録ボタンを押したらエラーが出ます。 app/controllers/application_controller.rb class ApplicationController < ActionController::Base before_action :configure_permitted_parameters, if: :devise_controller? private def configure_permitted_parameters devise_parameter_sanitizer.permit(:sign_up, keys: [:追加したカラム,:追加したカラム2]) end end

はじめに Ransackを使ってソート機能を実装する際にうまく行かず、検索してもあまり出てこなかったのでまとめておきます。 Ransackとは RansackはRuby on Railsの検索機能を実装する際のGem（ライブラリ）です。 Railsで検索機能をつけるとしたらまず候補に上がるGemのRansack。 検索機能を簡単に実装できますが、テーブルのソート機能も簡単に実装できます。 ransackのインストール gem 'ransack' # Gemfileに追加して $ bundle install # bundle installしたら使えます。 Ransackの検索機能についてはこちらをみるとわかりやすいです。 Pikawaka【Rails】 ransackを使って検索機能がついたアプリを作ろう！ Ransackでソート機能を実装する。 Ransackでソート機能を実装するにはsort_linkを使うと簡単に実装できます。 基本的なソート機能の実装はこう記述します。 ソートの構文 <th><%= sort_link(@q, :ソートしたいカラム名, "表示させたい名前" )%></th> 今回はこんなテーブル（表のこと）を例にしてみます。 index.html.erb <table> <thead> <tr> <th>ID</th> <th>名前</th> <th>本の名前</th> </tr> </thead> <tbody> <% @results.each do |user|%> <tr> <td><%= user.id %> <td><%= user.name %> <td><%= user.book.book_name%></td> </tr> <% end %> </tbody> </table> Usersテーブル カラム名 id name book_id Booksテーブル カラム名 id book_name 単純なソート機能 ソート機能実装① <thead> <tr> <th><%= sort_link(@q, :id, "ID" )%></th> <th><%= sort_link(@q, :name, "名前")%></th> </tr> </thead> これだけでidとnameでソート機能が実装できます。 それではUsersテーブルとアソシエーションを組んでいるbooksテーブルがあるとして、booksテーブルのbook_nameカラムをテーブル（表のこと）に表示させていた場合に、ソートするにはどうしたらいいでしょうか？ アソシエーションを組んでいる別テーブルのカラムのソート 最初に単純にbook_nameと入れてみます。 ソート機能実装② <thead> <tr> <th><%= sort_link(@q, :id, "ID" )%></th> <th><%= sort_link(@q, :name, "名前")%></th> 　　　　　　<th><%= sort_link(@q, :book_name, "本の名前")%></th> </tr> </thead> しかし、これではソートの矢印は表示されますがソートされません。 アソシエーションを組んでいるテーブルでソートするにはこうします。 アソシエーション組んだカラムのソート構文 <th><%= sort_link(@q, :子テーブル名_カラム名, "表示させたい名前")%></th> アソシエーションを組んでいるテーブルの名前（単数）に"_"アンダーバーを入れて記述します。 この場合テーブル名にアンダーバーが入ったり、カラム名にアンダーバーが入ったりすることもあると思いますが大丈夫です。 先程のコードを修正してみます。 ソート機能実装② <thead> <tr> <th><%= sort_link(@q, :id, "ID" )%></th> <th><%= sort_link(@q, :name, "名前")%></th> 　　　　　　<th><%= sort_link(@q, :book_book_name, "本の名前")%></th> </tr> </thead> これでbook_nameもソートできるようになりました。 中間テーブルを挟んだ際のソート 中間テーブルを挟んだ孫テーブルのカラムをテーブル（表のこと）に表示させていて、それをソートしたいということがあると思います。 その際はこのように記述すればソートすることができます。 中間テーブルを使った時のソート構文 <th><%= sort_link(@q, :子テーブル名_孫テーブル名_カラム名, "表示させたい名前")%></th> 終わりに 管理画面などで一覧表示させてソートさせて、検索したいということは多々あると思います。 その際に参考になれれば嬉しいです。 参考サイト -Qiita Ransackのsort_linkで孫テーブルの値でソートする

Basic認証とは、HTTP通信の規格に備え付けられている、ユーザー認証の仕組み。 ブラウザ開いたらidとパスワードが求められるやつですね。 これはもう単純なんでコードをバシバシ記述していきます。 基本コピペで大丈夫 app/controllers/application_controller.rb class ApplicationController < ActionController::Base before_action :basic_auth private def basic_auth authenticate_or_request_with_http_basic do |username, password| username == '自分の好きな名前' && password == '自分の好きなpass' end end end これで導入自体は出来てますが、しかしながらこれではあまりBasic認証を導入するメリットがありませんね？ 何故ならコードを見れば、丸わかりだから。 Basic認証なんてセキュリティ上の問題で設定するのであって、これではまるで意味ないですね。 ということで、環境変数を使用しましょう。 app/controllers/application_controller.rb class ApplicationController < ActionController::Base before_action :basic_auth private def basic_auth authenticate_or_request_with_http_basic do |username, password| username == ENV["BASIC_AUTH_USER"] && password == ENV["BASIC_AUTH_PASSWORD"] end end end これで、環境変数を読み込む記述になりました。 では環境変数を設定しましょう。 vim ~/.zshrc ターミナルで上記キーを実行して、「iキー」を押して、インサートモードに移行 export BASIC_AUTH_USER='ユーザー名' export BASIC_AUTH_PASSWORD='パスワード' 記述を追加したら「escキー」を押して、 「:wq」と入力 エンターを押す source ~/.zshrc Herokuにデプロイしている場合は heroku config:set BASIC_AUTH_USER="ユーザー名" heroku config:set BASIC_AUTH_PASSWORD="パスワード" git add . git commit -m "自分で決めてください。" git push heroku master これで完了です。

1.gemに記入 gem 'bootstrap', '~> 4.1.1' gem 'jquery-rails','~>4.3.1' ↓ 2.ターミナルでコマンド入力 bundle install ↓ 3.ターミナルでコマンド入力（cssをscssに変更） mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss ↓ 4.application.scssの中に下記を記入 @import "bootstrap"; ↓ 5.assets/javascripts/application.jsの中の //= require_treeの前に下記記入 //= require jquery3 //= require popper //= require bootstrap-sprockets

config/environment.rb にて以下を記述する。 require_relative 'application' Rails.application.initialize! class Logger class Formatter def call(severity, time, progname, msg) if msg.include?("No route matches") severity = "ERROR" end msg = msg.gsub(/^\n/, "") end end end 解説 ここで出てきた引数の msgは logメッセージ serverity はログレベル したがって上記の場合、「"No route matches" がメッセージに含まれるlogはERROR」 に変更される。

サービス概要 コンビニ商品や外食店の料理を使用したアレンジ飯を共有するサービスです。 URL: https://arrangy.jp/ Github: https://github.com/kazu-2020/arrangy サービスを制作した背景 　一人暮らしをしていた際、食事を外食店やスーパー、コンビニの惣菜で済ませることが多くありました。そのため、次第に同じ物を食べてばかりの食生活になり、結果、好きで食べていた物を「食べ飽きてしまった」という経験がありました。また、昨今のコロナによって外食が難しくなり、「食の選択肢」そのものが少なくなっているという印象を受けていました。 　そこで、これらの問題を解決する手段として私がサービスを通じて提案したのが「アレンジ飯」という選択肢です。アレンジ飯とは既に出来上がっている料理に一手間加えることで別の料理に変えることを言います。アレンジ飯の良さを一人でも多くの方に知ってもらいたいと思い、Arrangy(アレンジー)を制作しました。 サービスの使い方 注: タブレットサイズではデザインが崩れます! まずはトップページです。 ログインしなくても、投稿されたアレンジ飯を確認することができ、ページ上部には新しく投稿されたアレンジ飯をカールセルを用いて表示しています。 また、ページをスクロールして頂くとアレンジ飯の一覧が表示され、「いいね数」の多い順に表示されるようになっています。 ログイン後は「新規投稿、コメント機能、いいね機能」を使用することができます。 新規投稿する際は、下記の項目を設定してもらうようになっています。 ・　画像投稿　・・・　アレンジ前の写真とアレンジ後の写真を１枚ずつ選択する。 ・　タイトル ・　投稿内容・・・　材料や作り方を記入する ・　アレンジ度　・・・　アレンジの度合いを「ちょい足し」「激変」の2択から選択する。 ・　おすすめ度　・・・　5段階で設定する。 いいねボタンは各投稿ページで選択することができます。 いいねした投稿はお気に入り一覧に追加されます。 苦労したこと ①RailsからVueに画像ファイルどうやって渡すの問題 Railsのみ使用していた時は、form_withがよしなにやってくれていたので、何も意識せずに画像ファイルを扱うことができました。しかし、フロントにVueを使用した場合はよしなにやってくれていた箇所を自分で実装しなければなりません。 そこで今回はVueからRailsへエンコードしたデータURLを渡し、Rails側でデコードを行うことでこの問題を解決しました。しかし、この実装は次の問題で泣く泣く変更することになりました(笑)。 ②本番環境で投稿にめちゃくちゃ時間かかる問題 　①ではgem carrierwaveを使用し、画像ファイル自体はs3に保存する形にしていました。開発環境で確認した際は問題なかったのですが、本番環境で投稿時間を測定すると画像１枚を含めて投稿するのに4sもかかっていました... 　色々調べた結果、herokuを使用する際はブラウザからs3に直接アップロードする方法が推奨されていました。この方法を採用したところ、画像2枚を含めて投稿するのにかかる時間を1sまで抑えることができました。 ③TwitterのOGPが動的に変更されない問題 フィードバックを元に各投稿をtwitterでシェアできる機能を実装する際に発生した問題です。これはVue側でmetaタグが動的に変更されるようにしていても、twitterのクローラーがJavaScriptを実行してくれないのが原因でした。この問題を解決するためにNuxtを使用するといる案もありましたが、既にサービスがほとんど完成していた状態でしたので別の案を採用しました。 それがtwitterクローラーがアクセスしてきた場合のみ、静的なHTMLを返すという手法です。 まず判別方法ですが、twitterクローラーの場合は、Twitterbot/1.0という情報がユーザーエージェントに含まれます。そのため、routingのオプションにあるconstraintsを使用して下記のようなルーティングを設定してあげることで実現しました。 get '/arrangements/:id', to: 'crawlers#show', constraints: { user_agent: /Twitterbot\/1.0/ } 後は、gem metatagsを使用してmetaタグを動的に変更してあげることで解決しました。 工夫した点 ①画像をアップロードする際、トリミングを行えるようにする サイトに表示される際にアスペクト比1:1で表示されるのですが、cssのcontainやcoverでは不自然な画像に整形されることがあったので、ユーザーにアスペクト比1:1でトリミングした画像を投稿してもらうようにしました。 ②各投稿にアレンジ前の写真を載せるようにする 投稿一覧を閲覧する際、使用した商品が一目で分かるようにしました。 ER図 インフラ構成 さいごに 今回初めてのサービスを無事にリリースすることができました。 個人的にはサービスのアイディア出しに非常に苦労したので、就活用の１ポートフォリオではなく、大変思い入れのあるサービスになりました。 今後も引き続き、改善していきたいと思っているのでフィードバックなど貰えると幸いです。 是非、ご家族やご友人にアレンジ飯を振る舞ってみてください！

個人的メモ。 アプリケーション開発の際に作成したテーブルのカラム型が間違っており、少々手間取ったので、 ここにまとめておきます。（char型を使おうとしていた） データ型 　　　　　　意味 string 文字列(1〜255文字) text 長い文字列(1〜4294967296文字) integer 整数（4バイト） bigint 整数(8バイト) float 浮動小数 decimal 精度の高い小数 numeric 数値 datetime 日時 timestamp タイムスタンプ time 時間 date 日付 binary バイナリデータ boolean 真偽値型 参考 Railsドキュメント - マイグレーションとは ~テーブルを作成 Ruby on Rail API - ActiveRecord::ConnectionAdapters::SchemaStatements

はじめに これは私が ActiveRecord::Relation に対して present? や blank? メソッドを使用したら API サーバが機嫌を悪くしてレスポンスを返してくれなくなったので、なんで機嫌を損ねたのかを共有するための記事です。 なんで機嫌を損ねたの？ さていきなり本題です。なぜ API サーバが機嫌を悪くしたのか？それを解き明かすために、まずは ActiveRecord::Relation に対して present? や blank? メソッドを使用するとどのような流れで ActiveRecord::Relation が存在しているかを評価するのか確認しましょう。評価の流れは大まかに以下の流れで実行されます。 格納している条件を元にクエリを発行 クエリ実行結果をメモリにロード 存在チェック はい、ここで感の良い皆様なら既にお気づきでしょう。問題なのは「2. クエリ実行結果をメモリにロード 」の部分です。結果が何百万レコードもあるクエリを発行すると「2. クエリ実行結果をメモリにロード 」で API サーバーがお腹いっぱいにも関わらず、更にデータをお腹に詰め込もうとします。鬼畜ですね。私も同じことされたら機嫌を悪くするどころじゃ済まないです。 ということでデータ件数が膨大になりそうな ActiveRecord::Relation に present? や blank? を使用するのはやめて API サーバーと仲良くしていきましょうというお話でした。 参考

はじめに 今回はRuby on RailsでBootstampを使用する方法について書かせていただきます。 BootstampやRuby on Railsについては下記のHPをご覧いただければと思います！ （こちらの記事ではrailsのインストール方法などは割愛させていただきます） ・Bootstampについて https://getbootstrap.jp/docs/5.0/getting-started/introduction/ ・Ruby on Railsについて https://railsguides.jp/ 開発環境 Bootstamp バージョン５ Ruby on Rails バージョン2.6.5 使用するための準備 ①Railsをインストール後、テキストエディタを開き下記のファイルを開く app / views / layouts / application.html.erb ②application.html.erbを開くと元から下記のように記述があるのを確認する application.html.erb <!DOCTYPE html> <html> <head> <title>アプリ名</title> <%= csrf_meta_tags %> <%= csp_meta_tag %> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> </head> <body> <%= yield %> </body> </html> ③Bootstampを使用するために下記の二つの記述を追加する ⑴ headタグの中にBootstampのためのCSSの記述 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous"> ⑵bodyタグ内にBootstampのJavaScriptを読み込むための記述 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script> ※こちらは <%= yield %> の下に記述をする 完成形 application.html.erb <!DOCTYPE html> <html> <head> <title>アプリ名</title> <%= csrf_meta_tags %> <%= csp_meta_tag %> ※追加 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous"> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> </head> <body> <%= yield %> 　　※追加 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script> </body> </html> これで問題なく、Bootstampが動きます！

背景 コンテナを起動し、入るところまでを振り返りました。 手順 １　以下のファイルを作成する Dockerfile docker-compose.yml Gemfile ２　新規アプリ作成する docker-compose run web rails new . --force --database=mysql ３　Gemfile が新しく作成されるので新規にイメージをビルドする docker-compose build ビルドには時間かかりました。 ４　DBの作成 docker-compose run web rails db:create ５　rails を起動する docker-compose up これでlocalhost:3000 にアクセスすればデフォルト画面が表示されます。 補足 docker-compose up -d　でバックグラウンドで起動。別のタブを開かずにそのタブで作業可能です。 なお、シャットダウンはdocker-compose down でできます。 ６　コンテナに入る docker-compose exec web /bin/bash

原因 どうやらlisten gemがBigSurをサポートしていないというバグが原因らしい。 Pegging CPU core on Apple M1 processor #636 解決策 Gemfileのlisten gemのバージョンを3.3.0以降のものに指定すればよい。 Gemfile group :development do gem 'web-console', '4.0.1' gem 'listen', '>=3.0.5', '<4.0' gem 'spring', '2.1.0' gem 'spring-watcher-listen', '2.0.1' end

曖昧な理解を正せるようにまとめてみました。 この記事は基礎中の基礎なので、詳細はこちらの記事が分かりやすかったです！ 【Rails】find・find_by・whereについてまとめてみた ①結論 主キー(id)のレコード（データ）を取得したい→find id以外のカラムを検索条件としてレコードを取得したい→find_by id以外のカラムを検索条件として、複数のレコードを取得したい場合→where ②findメソッド 主キー(id)のレコード（データ）を取得 > Quiz.find(37) => #<Quiz:0x00007fb1deaf03d8 id: 37, question: "destroy", correct: "破壊", incorrect1: "消去", incorrect2: "怪獣", answer_description: "壊す・破壊です。", user_id: 2, created_at: Tue, 01 Jun 2021 09:14:50 UTC +00:00, updated_at: Tue, 01 Jun 2021 09:14:50 UTC +00:00, category_id: 5> 条件に当てはまるデータが無ければArgumentError（例外）が投げられる > Quiz.find(132) ActiveRecord::RecordNotFound: Couldn't find Quiz with 'id'=132 ③find_byメソッド 主キー以外を検索条件としてレコードを取得(主キーでも可) ただし返ってくる結果は、最初にヒットした１件のみ > Quiz.find_by(question: "margin") => #<Quiz:0x00007fb1dd10eb90 id: 47, question: "margin", correct: "余白", incorrect1: "マジ", incorrect2: "白", answer_description: "マージンは外側の余白です。paddingは？", user_id: 1, created_at: Thu, 03 Jun 2021 03:03:42 UTC +00:00, updated_at: Thu, 03 Jun 2021 03:03:42 UTC +00:00, category_id: 3> 複数の検索条件を指定可 > Quiz.find_by(category_id: 3, user_id: 1) => #<Quiz:0x00007fb1dd1f68f0 id: 45, question: "background", correct: "背景", incorrect1: "後退", incorrect2: "地面", answer_description: "バックグラウンドです", user_id: 1, created_at: Thu, 03 Jun 2021 03:01:47 UTC +00:00, updated_at: Thu, 03 Jun 2021 03:01:47 UTC +00:00, category_id: 3> 条件に当てはまるデータが無ければnilが返ってくる > Quiz.find_by(correct:"時計") => nil ④whereメソッド 主キー以外を検索条件として該当するレコードを全て取得 ただし配列で返ってくる点に注意 > Quiz.where(category_id: 3) => [#<Quiz:0x00007fb1ab4ca630 id: 45, question: "background", correct: "背景", incorrect1: "後退", incorrect2: "地面", answer_description: "バックグラウンドです", user_id: 1, created_at: Thu, 03 Jun 2021 03:01:47 UTC +00:00, updated_at: Thu, 03 Jun 2021 03:01:47 UTC +00:00, category_id: 3>, #<Quiz:0x00007fb1ab4ca4a0 id: 46, question: "border", correct: "境目", incorrect1: "ボード", incorrect2: "線", answer_description: "ボーダーの服は、境目だらけの服ですね", user_id: 1, created_at: Thu, 03 Jun 2021 03:02:42 UTC +00:00, updated_at: Thu, 03 Jun 2021 03:02:42 UTC +00:00, category_id: 3>] 条件に当てはまるデータが無ければQuiz::ActiveRecord_Relation が返ってくる（空の配列ではない） > Quiz.where(user_id: 15) => [] > Quiz.where(user_id: 15).class => Quiz::ActiveRecord_Relation ⑤おわりに Quiz::ActiveRecord_Relationについての理解が0でした。 普通に空の配列だと思ってた...要勉強！

目的 Railsでいいね機能を導入したアプリに、いいねした投稿一覧を表示する、 開発環境 macOS: Big Sur Rubyバージョン: 2.6.5 Railsバージョン: 6.0.0 前提 いいね機能が作成されている。 【Rails】いいね機能の実装（非同期） 手順 はじめに ルーティングの設定 アクションの定義 一覧ページの作成 はじめに 今回は一覧表示させるために、 ユーザー詳細ページから、いいねした投稿一覧ページへ飛ぶようにします。 ルーティングの設定 まずはルーティングの設定です！ config/routes #省略 resources :users do member do get :likes end end idが必要なため、memberを使用しています。 アクションの定義 アクションの定義です。 usersコントローラーに新たに設定していきます。 class UsersController < ApplicationController before_action :set_user, only: [:likes] #省略 def likes likes = Like.where(user_id: @user.id).pluck(:post_id) @like_posts = Post.find(likes) end private def set_user @user = User.find(params[:id]) end end いいねした投稿を探し、@like_postsに格納しています。 一覧ページの作成 ユーザー詳細ページにリンクボタンを設置し、一覧表示をさせます。 app/views/users/show.html.erb <%= link_to "いいねした投稿", likes_user_path(@user) %> 続いて部分テンプレートを呼びます。 collectionを使用することでeachの記載が不要になります。 app/views/users/followers.html.erb <p>いいねした投稿一覧</p> <%= render partial: "posts/post", collection: @like_posts %> 部分テンプレートとして切り出したビューファイルです。 app/views/posts/_post.html.erb <%= link_to image_tag( post.image.variant(resize: '100x100') ), post_path(post.id) %> <%= link_to post.user.name, user_path(post.user.id) %> <i class="fa fa-heart unlike-btn"></i> <%= post.likes.length %> <%= link_to post.title, post_path(post.id) %> 投稿された画像、ユーザー名、いいねアイコン、タイトルを表示しています。 最後に 以上で、一覧表示の実装は完了です。 CSSは実装していないため、簡素な見た目となっています。 必要に応じて各自編集をお願いします。 では。

はじめに RailsでCRUD処理を実装している時のことです。 いざコードを書きrails sでサーバーを開こうとした時、いきなりエラーが発生。 初めて見たエラーコードで何故なったのか悩みましたが無事解決できたので記事にしていきます。 　原因はかなり単純なことでした。 エラーコード Sprockets::DoubleLinkError in Users#new Sprockets::DoubleLinkError in Users#new Showing /Users/motoki/Desktop/crud_sample/app/views/layouts/application.html.erb where line # raised: Multiple files with the same output path cannot be linked ("users.css") In "/Users/motoki/Desktop/crud_sample/app/assets/config/manifest.js" these files were linked: - /Users/motoki/Desktop/crud_sample/app/assets/stylesheets/users.css - /Users/motoki/Desktop/crud_sample/app/assets/stylesheets/users.scss DoubleLinkErrorと出ています。エラーコードを見ると５、６行目で確かにパスが被っています。 ですが何故こうなったのでしょうか。ターミナルのログを見てみるとrails g controller users実行の際に /Users/motoki/Desktop/crud_sample/app/assets/stylesheets/users.scssは作成されていました。こちらは普段から自動で作成されているので、必要ない方は/Users/motoki/Desktop/crud_sample/app/assets/stylesheets/users.cssと分かりました。 こちらファイルを削除してサーバーを立ち上げると無事アクセスできました。 解決策 /Users/motoki/Desktop/crud_sample/app/assets/stylesheets/users.css 重複してしまっていたこちらのパスのファイルを削除するだけです。 なぜこうなったのか 初めはstylesheetsなんか触った覚えはないのに何故なったのか全然分かりませんでした。 色々と調べていくうちに、VScode に watch sass という機能があるらしいことを知り、色々と見ていると VScode を開くと下にある青色のバーのところに watch sass と書いてあるところが！！ そこを押すとwatching...となりcssファイルが作成されました。 いつインストールした機能なのか覚えておらず、普段使わないので知らない間に押していたみたいです。 まとめ 　Rails アプリでは使用しないそうなので皆さんもご注意ください。