Rails関連のことを調べてみた2020年11月15日

HTMLからHamlに変更する方法

# Hamlに変更

Gemfileの1番したに

“`

gem “haml-rails”, “~> 2.0”
“`

を書く。
terminalで`bundle install`をする
これでHamlを使うことができる。

#全てのファイルをHamlに変更
terminalで

“`
rails haml:erb2haml
“`
を行うと既存ファイル全てがhamlに変更することができる。
その際に`（y/n）`を聞かれるので全部`y`で答えて全て変更完了。

学習のアウトプット

覚えたことやったことをノートに今まで書いてましたがこれだけでは記憶に残らないのでQiitaでも書いていきます。
本当に簡単のことしか書きません。自分用に書いていきます。

「railsでホームページを作成するには」

rails generate contoller home top

これを実行すると２つのファイルが作られる。ファイルみたいなやつ。
１つは　top.html.erb
2つめ　home_controller

1つめのtop.html.erb　の説明
・これはviewに作られる
ここに文字,htmlを入れると反映される

追加するときはファイルをhomeに作る
○○　.html.erbみたいな感じ

２つ目のhome_controllerの説明
・これはcontrollerに作られる
controllerに　def top　と書かれている
これが無いとアクセスができない。

追加するときは　def ○○○

ちなみにルーティングに get “home/top” => “home#top”と書かれていないとエラーが起きる
get URL => コントローラ名　＃　

Ralisのポートフォリオでcollection_check_boxesメソッドを使ったので復習

#はじめに
user.rb

“`
has_many :habits, dependent: :destroy
“`
habit.rb

“`
belongs_to :user
“`
userモデルがhabitモデルを複数持っている関係性
habitモデルは、taskというstring型のカラムと、completeというinteger型のカラムを持っている

#やりたい事
チェックしたhabitモデルのみ、completeカラムに+1したい
これを1つのフォームで複数一気に出来るのがcollection_check_boxes
書き方はこんな感じ

“`
<%= form_with(model: @user,url: complete_user_path, local: true) do |f|%>

<%= @user.name %>

習慣

<%= f.collection_check_boxes :habit_ids, @user.habits,:id,

Rails 6でjQueryとBootstrapを使えるようにする(Rails 6)

Ruby on Railsでアプリケーションを作る際に,jQueryとBootstrapを使えるようにしたかったので手順をメモ。(Webpackerを使用。)

__1.yarnでjQuery、Bootstrap、popper.js(Bootstrapが使う)を導入。__

アプリケーションのディレクトリ配下で以下を実行。

“`
yarn add jquery bootstrap popper.js
“`

__2.webpackの設定__
app/config/webpackのenvironment.jsの記述を追加する。
(これによりimportやrequireなしで$やBootstrapのJavascriptが使えるようにする。)

“`javascript:environment.js
const { environment } = require(‘@rails/webpacker’);

//ここから
const webpack = require(‘webpack’);

environment.plugins.prepend(
‘Provide’,
n

jQueryでタブをマウスオーバー した際に表示画面を切り替える

# はじめに
今回はjQueryを使って、tabをマウスオーバーした際にページリロードを行わずに表示を切り替える方法を記述していきます。

# 完成イメージ

# 環境
MacOS 10.15.7
ruby 2.6.5
Ruby on Rails 6.0.0
jquery 3.4.1

# 前提条件
– jQueryが導入済みであること。

# それでは作業していきます！

## ①show.html.erbとcssを作成する。

まずはhtmlから作成します。今回はshow.html.erbというファイルに記述します。

“`erb:show.html.erb

<%# tab部分 %>

HerokuをリセットしようとしたらActiveRecord::StatementInvalid: Mysql2::Error: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near が出た場合の対処法

#リセットしようとした経緯
本番環境ではあるものの、たくさんのユーザーやデータを作りすぎ、見た目が繁雑になってきたため、Herokuのデータベースをリセットして初めからやり直したいと考えた。

#背景
リセットをするために以下を実行した。

“`terminal
% heroku run rails db:reset

(中略)

rails aborted!
ActiveRecord::ProtectedEnvironmentError: You are attempting to run a destructive action against your ‘production’ database.
If you are sure you want to continue, run the same command with the environment variable:
DISABLE_DATABASE_ENVIRONMENT_CHECK=1
“`

DISABLE_DATABASE_ENVIRONMENT_CHECK=1を付けて再度実行

“`terminal
% h

RailsのAPIモードをCookie(session)認証に対応させる

onecareer内のアプリ（Vue.js + RailsのAPIモード）の認証方式をtoken認証からsession(cookie)に変更した時の変更点をまとめる

## これを始めた理由

**既存のWebアプリからシームレスにログインさせる要件が発生したため**

– 普通のwebアプリで実装された画面でログインしたユーザーを、SPAで作られた画面にシームレスにログインさせるには
– OAuthサーバーを作るか
– Cookie(Session)の認証を利用する必要がある。

今回は納期優先でsession認証に変更

## Cookie認証に必要だったもの

###　サーバー側
#### config/application.rb

“`ruby
# Only loads a smaller set of middleware suitable for API only apps.
# Middleware like session, flash, cookies can be added back manually.
# Skip v

テンプレート: Docker コンテナで Ruby / Rails の開発環境を構築する (Mac版)

手軽に Ruby / Rails の開発環境を構築したいなら Docker が最適です。
ここでは、ホストOSとしてMac OSを使用しています。
[(Ubuntuホストの場合はこちらを参照してください)](http://qiita.com/TYD/items/d35090fd7205006b3c88)

Dockerコンテナでは、ベースOSをUbuntu 20.04とし、Rails アプリケーションを実行するために必要なライブラリやRuby本体をインストールしていきます。
Railsアプリケーション本体はホストOS上のローカルディレクトリから参照できるようにします。
これはRailsアプリケーションの実行環境をDockerコンテナが担い、エディタによるRailsアプリケーションの編集やソースコード管理をホストOS上で実現するためのものです。

以下のようなメリットがあります。

1.ホストOS上にRubyやRailsを直接インストールする必要がない
2.必要に応じて異なるバージョンのRubyやRailsを別々のコンテナで実行させることも可能
3.RailsソースコードはホストOS上の

rails６　form_with（ヘルパー）のラジオボタンにCSSを装飾する方法

目的：rails6にてform_withでラジオボタンを実装、それに対してCSSで装飾を行います。

苦戦したこと：ヘルパーを使っていることにより、ラジオボタンの内部構造が見えなくなってしまった。

①他のオプションと違いラジオボタンはclassをセレクタにしてもCSSを反映する事ができない。
②label forが設定されていない事により、選択作業が反映できないバグが発生。

以下、内容を記載。

①ラジオボタンはclassセレクタではCSSが反映されない。

HTML

CSS
.second{
font-size: 14px;
font-weight: bold;
display: block; /* ブロックレベル要素化する */
float: l

テンプレート: Docker コンテナで Ruby / Rails の開発環境を構築する(Ubuntu版)

手軽に Ruby / Rails の開発環境を構築したいなら Docker が最適です。
ここでは、ホストOSとしてUbuntuを使用しています。
[(Macホストの場合はこちらを参照してください)](http://qiita.com/TYD/items/f58b6798aaf25186d2a9)

Dockerコンテナでは、ベースOSをUbuntu 20.04とし、Rails アプリケーションを実行するために必要なライブラリやRuby本体をインストールしていきます。
Railsアプリケーション本体はホストOS上のローカルディレクトリから参照できるようにします。
これはRailsアプリケーションの実行環境をDockerコンテナが担い、エディタによるRailsアプリケーションの編集やソースコード管理をホストOS上で実現するためのものです。

以下のようなメリットがあります。

1.ホストOS上にRubyやRailsを直接インストールする必要がない
2.必要に応じて異なるバージョンのRubyやRailsを別々のコンテナで実行させることも可能
3.RailsソースコードはホストOS上の好みの

プログラミングにおけるスニペットとは

プログラミングをやるために必須のツールの一つにテキストエディタがあります。

コーディングしやすいようにテキストエディタのおすすめプラグインやショートカットなど検索していると、「スニペット」という聞き慣れない単語をよく目にします。

今回はこの「スニペット」について、プログラミング初心者であるぼくが調べてまとめてみました。

あくまで初心者が調べたことなので、中級者以上の方からみると間違った認識かもしれませんが、お気づきの方はご指摘いただけると嬉しいです。

##結論：プログラミング版の辞書登録機能

PCを頻繁に使う人であれば単語の辞書登録機能って使ったことありますよね？

「あ」と打ったら「ありがとうございました。」と出るように事前に登録しておけば、

「あ」と打ってtabキーを押せば「ありがとうございました。」と出せるやつです。

スニペットは、この辞書登録機能のプログラミング版です。

スニペット（snippet）は「断片」という意味で、プログラミングではソースコードやテキストの一部を指すそうです。

下記は、RubyのフレームワークであるRuby on Railsで使うテンプ

Railsで非同期通信で実装する投稿機能

##はじめに
今回は非同期通信による投稿機能を実装していきます。
今回は非同期処理を行う事にフォーカスを当てるためすでに画面遷移ありの投稿機能が実装されている状態からのスタートとなります。
jsの理解のため、素のjsでの記述となります。
また初学者のため間違え等ありましたらご指摘頂けると幸いです。

##手順１ remote: tureを追加
入力フォームにremote: tureを追記しましょう！

“`
<%# タスク入力フォーム %>

<%= form_with model: @category, id: 'new_tasks', class: 'new_tasks' do |f| %>

<%= f.text_field :task %>

<%= f.submit "+" %>

<% end %>

whereを用いたparamsの例

こちら完全に備忘録です。。。
見苦しいですが一度投稿させてください。
後で修正いたします。

#アソシエーション

“`ruby:user.rb
has_many :hoges
has_many :hoge_events
“`

“`ruby:hoge.rb
belongs_to :user
has_many :hoge_events
“`

“`ruby:hoge_events.rb
belongs_to :user
belongs_to :hoge
“`

#ビュー
画面（ビュー）には以下の様なリンクがある。

①hoge_event
②hoge_event
③hoge_event
④hoge_event

例えば、現在操作中のユーザーが③のイベント詳細をクリックすると、③に関する情報全てが表示される様に。
①のイベント詳細をクリックすれば、①に関する情報全てが表示される様にしたい。（paramsもしっかり渡されていることとする）

#コントローラー

“`ruby
def show
@hoge_events = current_user.hoge_eve