フリーターでも分かる、jQuery基礎

どうもこんにちは、

今日はjQueryについて、

僕が学んだ基礎知識を共有していきたいと思います。

まずはじめに

簡単な公式を知らないと、

始まらないので公式から覚えましょう。

“`
＄（’HTML要素’).メソッド（引数）;

“`

です。

短っ！

と思った方もいると思いますが、

こっから色々と付け足していくのです。

もちろんコレで終わりなわけはありません。

簡単解説

HTML要素

というのは例えば、、

index.html
“`

こんにちは

“`

のところで言うh1です

あと、最後の　　;（セミコロン）　　　は忘れずにつけましょう。

コレが基本の構文ですね。

ではこの公式を使って、jQueryで何ができるのかを話していきます。

アニメーションを付けられる

はじめ見た時コレはすごいと思いました！

ほんの二行jQueryの記述を加えるだけでこんな変化を生み出せ

CircleCI config.yml ひな型 Rails 6 / PostgreSQL / Rspec（orbと最新のimageの利用）

[前回作ったCircleCIの設定](https://qiita.com/kazutosato/items/9817e746ae760fe27b6e)の続きです。orbを使ったものに書き換えました。

参照: [Language Guide: Ruby – CircleCI](https://circleci.com/docs/2.0/language-ruby/)

“`yaml
version: 2.1

orbs:
ruby: circleci/ruby@1.1.1
node: circleci/node@4.0.0
browser-tools: circleci/browser-tools@1.0.1

jobs:
build:
docker:
– image: cimg/ruby:2.6.6-node
environment:
BUNDLE_JOBS: “3”
BUNDLE_RETRY: “3”
steps:
– checkout
– ruby/install-deps:

rails5＋MysqlをDocker-composeにてherokuにデプロイする際のエラー

udemyのこちら
https://www.udemy.com/course/rails-kj/
を学習中

[SNS掲示板アプリ]
(https://github.com/kkoji/rails-lecture/tree/current_user_method)
を作らせてもらっている。

Rails 5系
Ruby 2.4.5
mysql2

最後にherokuにデプロイしようとおもって

[Rails on DockerをHerokuでDeployするまで](https://qiita.com/at-946/items/6958b1d35330c87b8e50)
[HerokuでMySQLを使おうとして詰まったところ](https://qiita.com/senou/items/108ef1d94dcb5b227b4f)
を参考にして、トライ

流れとしては、
clearDBをアドオンとして追加
configに設定(mysql2に変更)
heroku CLIログイン
heroku containerにログイン
heroku create~~
heroku container:pu

実録！SQL アンチパターン

# はじめに

[『SQL アンチパターン』](https://www.amazon.co.jp/SQL%E3%82%A2%E3%83%B3%E3%83%81%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3-Bill-Karwin/dp/4873115892)には，リレーショナル・データベースの設計・運用にあたってのよくある失敗例が25個紹介されている．本記事では，5ヶ月間の開発経験の中で，自分が実際に遭遇した事例のうち，3つを紹介する．コード例は，実際の事例を単純化して作成したものである．

環境は以下を想定する．
フレームワーク: Ruby on Rails 6.0
データベース: MySQL 8.0

# 12章 インデックスショットガン（闇雲インデックス）

エンジニアのインターンを始めてはや2ヶ月が過ぎようとしていた頃，ボスから与えられた指令は，「お前，ちょっとインデックス見てこい」というものだった．これまで複合インデックスの効果的な使用を十分に意識できていなかったからその辺りを重点的に見てほしいとのことだった．**MENTOR の原則**の出番である

これから学ぶ言語について

HTML
・ウェブページを作成するために開発されたマークアップ言語　<プログラミング言語とは違う>
＊他のマークアップ言語　SGML　XML
・基本的に、「タイトル」「見出し」「段落」などの要素から構造化
・HTMLには「HTML」「XHTML」「HTML5」など、いくつか種類があり、使えるタグに違いがある

<身近なHTMLの使用例>
　⑴ウェブサイト
　⑵電子メール（HTML形式）
　⑶スマホアプリ

CSS
・構造化された文章のデザインを変更する言語＝スタイルシート言語
・文字の太さ、色の変更、背景色の変更、余白の調整などを行う
・CSSはHTML＜＝マーク言語＞と組み合わせて使う
・HTMLとCSSで分けることでソースコードを読みやすくする仕組みになっている

Java Script
・ヴレンダン＝アイク氏によって開発された言語
・ユーザー側のWebブラウザと、Webサイトまたはウェブサービスの相互間のやりとりを、円滑にするためのプログラミング言語
・コンテンツを更新したり、

【Rails】間違えたマイグレーションファイルをdown,削除できない→rails db:migrate:resetで解決できた

前の記事である、
[【Rails】テーブルにカラムを追加する際、キャメルケース以外で記載したらどうなるの？](https://qiita.com/cherry_2020/items/ddb1107aeb8cbb5790ba)
にて、自分が感じた疑問を素直にコマンドで実行したら、（複数作成した）不要なファイルがdown・削除が出来なくなりました（汗）

今回、たくさんの気づきがありましたので、反省を込めて記事にしようと思います。

#出来ないことと、エラー内容#

**ターミナルにおいて、不要ファイルを削除したいが、削除以前に、down状態にできない（rollbackできない）**

“`ruby
#ターミナルに表示されるエラー
foo@fogefogenoMacBook-Air bar % bundle exec rake db:migrate:down VERSION=20200829125501_Nickname2.rb
rake aborted!
Invalid format of target version: `VERSION=20200829125501_Nicknam

【エラー】アソシエーション

特技はエラー生成・・・

アソシエーションの蓋を開けてみれば大したことのないエラーです。


“`
<% current_user.rooms.each do |room|>
“`

userというテーブルとroomテーブル関係のアソシエーションを組んでいた記述で、roomsがないよと言われたんですが、どこを探しても間違っていないと思いきや、アソシエーションはやっぱりアソシエーションが原因でした。

/models/room.rb

“`
has_many :room_users
has_many :users, through: :room_users
“`
/models/user.rb

“`
has_many :room_users
has_many :users, thro

【エラー】localhostに接続できなかったサーバーの重複

特技はエラー生成・・・

localhost:3000にアクセスしたら急に読み込みが止まったままになってしまい、ターミナルを確認したところ
こんなような記述が（他略）

“`
Address already in use – bind(2) for “127.0.0.1” port 3000 (Errno::EADDRINUSE)
“`
原因は、ローカルサーバー（rails s）を切らずに(control cをせずに)ターミナルのタブを消してしまっていたので接続が重複して飽和状態になっていたとのこと

lsof -i :3000
を入力してポート接続を確認→PIDの番号を確認

“`
kill -QUIT
“`
で、ポートを空けてあげると直りました。

こちらの記事を参考にしました
https://qiita.com/nagao_norihiro/items/aba40bd4e0eac9f9a92d#comments

Rails label_tag　英語が小文字表示になってしまう(humanize)

# はじめに

`label_tag`を用いてフォームを作成していた時に`ニュース ID`をnameに指定しても表示が`ニュース id`となってしまうことが起きたので、`Rails`のソースコードを読んで小文字変換されてしまう理由を調べてみました。

前提として

“`ruby

<%= label_tag 'ニュース ID' %>

> ニュース id
“`

# ソースコード
“`ruby
# File actionview/lib/action_view/helpers/form_tag_helper.rb, line 215
def label_tag(name = nil, content_or_options = nil, options = nil, &block)
if block_given? && content_or_options.is_a?(Hash)
options = content_or_options = content_or_options.stringify_keys
else
options ||= {}

rails AWSのデプロイが反映されない場合

## AWS　デプロイが反映されない場合に行うこと
環境
rails 5.2.4
unicorn
nginx
capistranoで自動デプロイした場合にすぐにAWSに反映されないことがある方向け

## 解決法
デプロイする前にローカルで
cap production unicorn:stop
この後に、
bundle exec cap production deploy
をターミナルでうちましょう。unicornがストップします。自動デプロイでも同じようにunicornはストップ
させているはずですが、すぐに反映されないことも多いです。私の環境ではこれですぐにデプロイが反映されています

[過去POST][初心者向け]ページネーションの原理がわからない。railsにて

## 過去POST
過去自分がTECH::CAMPのメンターをしていた時期にメモしていた内容を公開します。
rails でよしなにやってくれるので知らなくてもいいのですが、たまに聞かれることがあったので書きました。
初心者向けのざっくりとした解説です。

## Q.ページネーションの原理がわからない。

“`ruby

class TweetsController < ApplicationController def index @tweets = Tweet.order("created_at DESC").page(params[:page]).per(5) end def new end def create Tweet.create(tweet_params) end private def tweet_params params.permit(:name, :image, :text) end end ``` ここで `.page(params[:page]).per(5)` とありますが、こ

[過去POST][初心者向け]N+1問題が理解できない。.includesを使うとどうなるのか(Railsにて)

## 過去POST
過去自分がTECH::CAMPのメンターをしていた時期にメモしていた内容を公開します。

## N+1問題が理解できない。includes(:user)とする意味がわからない。

“`ruby

class TweetsController < ApplicationController # 中略 def show @tweet = Tweet.find(params[:id]) @comments = @tweet.comments.includes(:user) end # 中略 end ``` で使用している。 これはなにも考えなければ `@comments = @tweet.comments.includes(:user)` の部分は `@comments = @tweet.comments` でもできる。 しかしこれではN+1問題が発生してしまう。 （要は、SQLの発行回数が多くなってしまう。） ### 【問題の概要】 この文の意味は >詳細を表示したツイートについているコメントのレコードを取得
>コメントのレコー

[過去POST]TECH::CAMPのメンターをしていた時の回答メモを一部公開します

# 過去POST
過去自分がTECH::CAMPのメンターをしていた時期にメモしていた内容を公開します。
小分けにしようとしましたが小粒なものはまとめておきます。
記憶が曖昧なので間違っている箇所もあるかもしれないです…

## Q.ハッシュの中身が取り出せない

movie = {“title” => “ハリーポッター”, “genre” => “ファンタジー”, “year” => “2001年”}
から取りたい文字列を取るコードを書きましょう。
のような問題だったと思います。

### 該当コード

“`ruby

def movie_info(movie, data)
puts movie[data]
end

movie = {“title” => “ハリーポッター”, “genre” => “ファンタジー”, “year” => “2001年”}

puts “以下から一つを選んで入力してください。
・title
・genre
・year”

info = gets.chomp

movie_info(movie, info)
“`

### 解説

【自分用メモ】ポリモーフィックな関連付けをして、フォームを作成する場合の方法論

# ポリモーフィックな関連付けをした場合のフォーム

PlayerモデルとManagerモデルがあったとして、それぞれにTagモデルをポリモーフィック関連付けをしたい。
ポリモーフィック関連を扱ったアプリでフォームを作成したい場合、何がベストなのか考えている。

ActiveRecordのおかげでTagオブジェクトに紐づく親オブジェクトは、`@tag.taggable`で簡単に取得できる。

ただ、PlayerオブジェクトやManagerオブジェクトに紐づくTagオブジェクトを**新規**に作成する場合、
どのように対応するのがベストなのか色々と考えている。

ちなみに、ポリモーフィック関連でない「１対多」のアソシエーションは以下のような形になる。

“`rb
def tag_params
params.require(:tag).permit(:body).merge(player_id: params[:player_id])
end
“`

## ポリモーフィック関連の特有の問題

ここで問題なのが、merge以下の箇所。

– `params[:pl

【ruby】splitメソッドで、文字列から配列にしたい。逆も然り。

文字列を配列化させて、配列を文字列にして、、、というパターンの時に、どういう書き方が期待する値になってくれるでしょうか。

ということで、ダメなパターンも交えて、整理していきましょう！

#文字列を配列にする

`splitメソッド`を使っていきます。

**split 英訳：分断する**
つまり、まとまりのあるもの(文字列等)を分断させて、要素とさせるメソッドになります。(配列化)
引数は、*切り取る部分の境目を指定するイメージになります*

様々なまとまりのパターンから、配列化をしてみました。
させたい配列は、`[“foo”, “bar”, “baz”]`とします。

さて、どの書き方が合っているでしょうか。

“`ruby
# 配列化 # 返り値
“foo bar baz”.split [“foo”, “bar”, “baz”] # ○
“foo bar baz”.split(”) [“f”, “o”, “o”, ” “, “b”, “a”, “r”, ” “, “b”, “a”, “z”]
“fo

RailsのDeviseとセットアップ方法

# はじめに
この記事は、インターネット上の百科事典や技術情報サイト、勉強会を基に、RailsにおけるDeviseについて復習しやすいようにまとめた備忘録です。
技術的に誤っている点がございましたら、ご指摘いただけますと幸いです。

# Deviseとは？
DeviseとはRailsで作成したアプリケーションに認証機能を実装できるgemの一つです。
Deviseを利用することでログイン機能を簡単に実装することができます。

# Deviseの使い方
## Gemfileの編集とインストール
“`ruby:Gemfile
gem ‘devise’
“`
以下の記事のGetting startedを参考にインストールします。
https://github.com/heartcombo/devise#getting-started

“`
$ bundle install
“`
Gemのインストール完了です。

## Deviseのセットアップ
“`
$ rails g devise:install
“`
Deviseの設定ファイルをRailsアプリケーションにインストールするた

Railsで一つの画面に、異なる2モデルのレコードを表示させたい(検索機能付き)

## 環境
Rails 4.2
mac OS Catalina 10.15.5

## やりたいこと
– 一つの画面に、異なる2モデル(OldHistoryとNewHistory)のレコードを日付順に表示させたい
– 検索フォームを設け、一度に両方のモデルのレコードに対して検索をかけたい

この2つのモデルは扉を開けた、閉じた、というアクションの履歴を記録していくものになります。
なぜ2つあるかというと、仕様変更により別のモデルからも似たようなアクション履歴が来るようになりましたが、前のモデルとデータが微妙に異なる為、旧モデル(OldHistory)と新モデル(NewHistory)と分かれています。

## 方法
1. 検索フォームの条件で各モデルのレコードを絞り込んだオブジェクトの配列を作成、合体させて一つの配列を作りviewに渡す
2. 検索フォームの条件で各モデルのレコードを絞り込んだオブジェクトの配列を作成、それぞれをViewに渡す

1の方法は、まさに1つの画面に新旧モデルのレコードを混ぜて日付順に表示させることになります。
2の方法は、OldHistoryとNewHist

Railsで「いいね！」機能を作る – ①アソシエーションに別名をつける

### 背景
最近人にプログラミングを教える機会があるのですが、使っているテキストに、初学者さんにはまあまあ難しそうだなー。と思える記述がありました。

自信を持って教えられるか不安なところもあったので、勉強がてら、噛み砕いてまとめてみようと思います。

### データ構造
基本のデータ構造は以下の通り。
Twitterみたいなアプリで、ユーザー(`users`）はたくさんの投稿(`posts`)を持っている。そして、自分の投稿も含む全ての投稿に「いいね！」(`likes`)を付けられる。という感じです。

[](https://gyazo.com/fcef6fe2644d5ddbf2275841de1d7ca0)

シンプルな構造なのですが、後半、ちょっとひねりが必要でした。

### アソシエーションを書き起こしてみる
まずは、Railsの規則通りにシンプルに書けるところからアソシエーションを書き起こしてみます。

“`Ruby

Rails Tutorial　第12章 完了

##2020/8/22 1.5時間
12.1.2まで進めました。
##2020/8/23 2.0時間
12.3.2まで進めました。
##2020/8/24 0.5時間
リスト12.18の途中まで進めました。
##2020/8/25 0.5時間
##2020/8/26 0.5時間
リストの入力間違いでエラーになっていたのをデバッグしてやっと動きました。テキストから手打ちしていると、入力ミスで結構バグが出ることが分かります。
##2020/8/27 0.5時間
##2020/8/28 1.0時間
##2020/8/29 4.0時間
うち1.5時間はSendGridのエラー調査です。
##2020/8/30 0.5時間
Sendgridはあいからずエラーですが、先に進めることにしました。

12章を完了です。
所要時間は11.0時間です。

##digestは作るたびに違う値になる
tokenが同じ値ならdigestは何度作っても同じなのかと思ったのですが、2回実行してみたところ違う値になっていました。

“`bash
>> a.password_digest
=> “$2a$10$92Y

ActiveRecord::NotNullViolation in Deviseエラー

【概要】
—————————————-
1.結論

2.ActiveRecord::NotNullViolationtとは何か

3.なぜActiveRecord::NotNullViolation in Deviseになるのか

4.どのように解決するか

5.補足

1.結論
—————————————-
db/migrate/””””_devise_create_”””””.rbに
記載してある“t.string password(またはpassword_confirmation)”の記載を削除する！

2.ActiveRecord::NotNullViolationtとは何か
—————————————-
![スクリーンショット 2020-08-29 20.47.37.png](https://qiita-image-store