- 1. [Rails + jQuery]初学者向けAjaxを取り敢えず飛ばしてみたい
- 2. (備忘録)Everyday Rails 第2章「RSpecのセットアップ」
- 3. Ruby on Railsでアプリを作ってみよう④
- 4. Rails deviseの使い方
- 5. ActiveRecordのwhere notの挙動について
- 6. 【Rails】ルーティングの基礎的な書き方【Ruby】
- 7. bundle installしてもエラーが続き沼にハマる。(備忘録として)
- 8. パーシャルで繰り返し処理
- 9. RSpecでJavaScript等で挿入されるiframe内のコンテンツを確認する
- 10. Railsのマイグレーション関連のコマンドをまとめてみた
- 11. findメソッドとfind_byメソッドはどう違うのか
- 12. Railsアプリのための環境構築
- 13. rails 検索機能の実装
- 14. $ rails db:seedを用いて初期データを格納
- 15. Ruby on RailsでWebpackerのエイリアスを設定する方法
- 16. オリアプの要件定義
- 17. 【画像付き】RailsでDeviseを利用してLINEログイン機能を実装
- 18. Ubuntu Rails Widowsで環境構築をしたよ(2021年版)
- 19. 【Railsチュートリアル】第2章 Toyアプリケーション 演習と回答
- 20. railsでbootstrapを使う
[Rails + jQuery]初学者向けAjaxを取り敢えず飛ばしてみたい
#課題
初学者が感覚掴むために取り敢えずAjax飛ばしてみたい。例として以下フォームで入力された文字をサーバに送ってみる。
“`erb:form.erb
<%= text_field_tag :myname %>
“`
“`html:output
“`![スクリーンショット 2021-01-24 11.18.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239796/d2176686-3110-7b82-179c-2612146cd13a.png)
#結論
以下コードで取り敢えず飛ぶ。“`javascript:ajax.js
$(“#myname”).change(function(){
let name = $(this).val();
$.ajax({
type: ‘GET’,
url: “/api/v1/users”,
data: { nam
(備忘録)Everyday Rails 第2章「RSpecのセットアップ」
#「Everyday Rails – RSpecによるRailsテスト入門」
Railsを使用したアプリケーションを作成したものの、テストの記述が全然分からない、という状態になったので、RSpecの勉強をできる教材を探していたところ、なんと[プロを目指す人のためのRuby入門](https://www.amazon.co.jp/dp/B077Q8BXHC/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1) (チェリー本)の著者が翻訳を手がけた本を発見しました。
[こちらのサイト](https://leanpub.com/everydayrailsrspec-jp)から購入できます!
販売方法はなんと、購入金額を自由に設定できるという、画期的なシステムでした(最低購入価格は$19からですが)。
先日、なんとか1周は終わらせたのですが、全然理解できていない部分が多いので、復習がてらアウトプットしていきたいと思います!
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.
Ruby on Railsでアプリを作ってみよう④
##ビュー
MVCの役割の一つでブラウザにレスポンスとして見た目を返す役割を持っています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1008745/3f2d10cb-a51d-c41f-ebd9-cd174e5a7427.png)ブラウザに表示するのはHTMLで書かれた物ですが、Rubyの記述も使って表現したい物です。
しかしそのままHTMLの文法で書いてしまうと問題があるので特別な書き方をします。##ERB(Embedded Ruby)
テンプレートエンジンと呼ばれる仕組みを持った物で
HTMLの中にRubyを埋め込むことができます。
ERBファイルは“`
ファイル名.html.erb
“`
とhtmlの拡張子に追加してerbを記入することで作れます。中身の記述をする時に
<%= %>というタグでRubyのコードを挟むことで埋め込んで表示することができます。
埋め込んだコードをブラウザに表示する必要のない場合(条件式など)は<% %> のタグを使います。コ
Rails deviseの使い方
#devise(超初心者の備忘録)
どうも、はじめまして!yukkyです。今回が初投稿でQiitaの書き方もよくわかっていないですが記録を残さないとすぐ忘れてしまうため、頑張って書いていきたいと思います。題名にも書きましたが自分は**超**がつくレベルの初心者ですので間違えがあったら(多分いっぱいあります。。)コメントで教えてくれると嬉しいです。さっき調べてみたら初めてvisual studioを入れた日(=初めてプログラムに触れた日)が2020/9/9でした(-_-;)まだ4.5か月ほどしかしてないですね。。
##deviseでできること
ログイン機能が使えるようになる##使い方
まず練習用アプリとしてlogin_appを作る
“`
rails new login_app
“`gemにdeviseを追加
“`ruby:Gemfile
gem ‘devise’
“`“`
bandle install
rails g devise:install
“`
すると以下の画面が出てくれば成功“`
Depending on your applicati
ActiveRecordのwhere notの挙動について
#はじめに
普段、RailsはActiveRecord使っているんですが、条件を複数書いたときに、
where.not()の挙動が直感と反しており、なかなかバグに気づかなかったので、共有します。
#環境
Ruby : 2.7.1
Rails : 6.0.2
Posgresql : 13.1
#where.notの挙動
まず、where.not()の単数条件で名字が山田以外のuserを取得したい時を考えてみます。
発行されるSQLは以下のようになります。“`rb
User.where.not(last_name: ‘山田’)
=> SELECT “users”.* FROM “users” WHERE “users”.”last_name” != $1
[[“last_name”, “山田”]]
“`
これは期待通りに`last name`が**山田でない**userを取得してくれます。では次に**「名字が山田」かつ「名前が太郎」以外**のuserを取得するとしましょう。
僕の直感では以下のような記述で取得できると思ってましたが…“`rb
User.where.
【Rails】ルーティングの基礎的な書き方【Ruby】
# ルーティングの役割
railsガイド( https://railsguides.jp/routing.html )によると
> Railsのルーターは受け取ったURLを認識し、適切なコントローラ内アクションやRackアプリケーションに割り当てます。とのこと。
「route」を直訳すると「経路」ですから、リクエストの道案内役といったところでしょうか。
基礎的な書き方について記してみたいと思います。
***
[基本の書き方](#基本の書き方)
[rootの指定](#rootの指定)
[resourcesを用いた書き方](#resourcesを用いた書き方)***
# 基本の書き方
`HTTPリクエスト ‘URIパターン’, to: ‘コントローラー名#アクション名’`
もしくは
`HTTPリクエスト ‘URIパターン’, controller: ‘コントローラ名’, action: ‘アクション名’`“`
Rails.application.routes.draw do
get ‘profile’, to: ‘users#show’
post ‘twe
bundle installしてもエラーが続き沼にハマる。(備忘録として)
### bundle installしてもエラーが続き沼にハマる。(備忘録として)
rails newしてbundle installすると
“`
Make sure that `gem install #### -v ‘”#.#.#’ –source https:・・・・`
“`のようなエラーが延々と続く。
gemを指定してinstallしてもエラーは解消されず。
ググった情報を頼りにカタカタするも、エラーは解消されず。結局解決方法は以下でした。
>1rbenvでrubyを管理する
2xcodeのupdateをする###1rbenvでrubyを管理する。
デフォルトのrubyを使っていたが、toolのアップデートかなにかで齟齬が出てしまった?のかもしれない。
標準rubyは一つしか入っていないためrbenvでrubyのバージョンを管理する。
基本的に開発ではrbenvを用いてrubyを管理する。
参考:https://qiita.com/hujuu/items/3d600f2b2384c145ad12###2xcodeのupdateをする。
これが今
パーシャルで繰り返し処理
教えていただいたことの備忘録として残します。
“`ruby:bar.html.erb
<%= render partial: 'foo', hoges: @hoges %>
“`“`ruby:_foo.html.erb
<% hoges.each do |hoge| %>
<% hoge.name %>
<% hoge.price %>
<% end %>
“`これでも動作確認はできましたが、以下のようにします。
“`ruby:bar.html.erb
<%= render partial: 'foo', collection: @hoges, as: 'hoge' %>
“`“`ruby:_foo.html.erb
<% hoge.name %>
<% hoge.price %>
“`こうすることで読み込み速度が向上します。
collectionオプションを使うと1回しか読み込まれないみたいです。
RSpecでJavaScript等で挿入されるiframe内のコンテンツを確認する
# 概要
RSpecでテストを書いている時に、Twitter、Youtube等のリンクを貼り付けた時に、JavaScript等で時間差で挿入されるiframe内のコンテンツを確認する際に詰まったのでメモ。# 方法
以下の通り。
“`ruby
# iframeがあるか確認。この場合、挿入されるまでデフォルトのwait timeだけ待ってくれる
expect(page).to have_selector ‘iframe’
# iframe内のコンテンツを確認
within_frame find(‘iframe’) do
expect(page).to have_content ‘コンテンツ’
end
“`デフォルトのwait time内で挿入されない場合は以下の様に待ち時間を指定する。
“`ruby
expect(page).to have_selector ‘iframe’, wait: 5
“`1行目はチェックする必要がなければ`until`でJavaScriptでiframeが挿入されるまで待ってもいい。
Railsのマイグレーション関連のコマンドをまとめてみた
#開発環境
・Rails6.0.0#マイグレーションファイルの生成とテーブル作成
###マイグレーションファイルの生成は次の2パターン
#####①モデルを生成して自動で作られる場合
【コマンド】rails generate model モデル名
これにより、「db/migrate」の中に自動的にマイグレーションファイルが生成される。#####②自分で作る
既存のテーブルにカラムを追加したい場合など。
(例)usersテーブルにnameカラム(型:string)を追加したい場合
【コマンド】rails generate migration add_name_to_users name:string###テーブルの作成
【コマンド】rails db:migrate
これでマイグレーションファイルの内容がテーブルに反映される。
結果はSequel Proなどでデータベースを更新して確認できる。ちなみにターミナル上でマイグレーションファイルがテーブルに反映されているか確認することもできる。
【コマンド】rails db:migrate:status
![実行結果](https
findメソッドとfind_byメソッドはどう違うのか
プログラミングスクールの課題アプリ開発の過程で、findメソッドとfind_byメソッドを勘違いしてまる1日エラーに悩まされた経験から、findメソッドとfind_byメソッドについて整理します。
## findメソッド
IDを指定してレコードを取得します。“`rb
Fruit.find(1)
# 複数のIDを指定して、該当するレコードを取得できる
Fruit.find(1,4,6)
# 配列でも指定できる
Fruit.find([1,4,6])
# 同一ファイル内にidの情報を含むインスタンスがあれば、以下のような書き方ができる
Fruit.find(@fruit.id)
“`## find_byメソッド
条件を指定してヒットした最初の1件を取得します。IDも条件に指定できます。“`rb
Fruit.find_by(name: “strawberry”)
“`Fruitsテーブルに以下のようにデータが入っているとします。
“`md
Fruitsテーブル
| id | name | color |
| 1 | apple | re
Railsアプリのための環境構築
#構築済の環境
+ Homebrewのインストール
+ rbnevのインストール
+ Rubyのインストール(2.7.2)
+ node.jsのインストール#RubyGemsのアップデート
Rubyのサードパーティライブラリの利用で、プログラミングが楽になるようです。
これらは「gem」という形式で配布されています。
「RubyGems」というパッケージ管理ツールはRubyインストール時に同梱されるようです。最新版へのアップデートは以下のコマンド。
“`
$ gem update –system
“`#Bundlerのインストール
開発現場では、gemの管理が重要になってきます。
そこで登場するのが「Bundler」プロジェクトで用いるgemをまとめ、互換性を保ちながらパッケージの種類やバージョンを管理してくれます。
プロジェクトのディレクトリに「Gemfile」というファイルを作成し,gemの名前を記載しておくと、うまくやってくれます。以下のコマンドでインストール
“`
$gem install bundler
“`今後はBundler経由でgem
rails 検索機能の実装
# 1.ルーティングの指定
ルーティングの中に検索したいテーブルの中にserchを記述します。以下を例とします。collectionを使うことによって生成されるルーティングのURLと実行されるコントローラーを任意でカスタムできます。
“`ruby:config/routes.rb
resources :posts do
collection do
get ‘search’
end
end
“`
# 2.モデルの指定
モデルを指定します。以下のようにwhereメソッドとLIKE句を使い、検索をかけたいカラムを記述します。“`ruby:post.rb
def self.search(search)
if search != “”
Post.where(‘text LIKE(?)’, “%#{search}%” )
else
Post.all
end
end
“`
# 3.この他に検索のカラムを追加したいとき
もしいくつかのカラムを
$ rails db:seedを用いて初期データを格納
#この記事/メモについて(はじめに)
Twitterの呟きやそれに対するリプライ・コメントは、「ユーザーが送信した情報」をデータとしてデータベースに保存する、と言った仕組みのものです。
しかし、データベースへ格納するデータは必ずしもユーザーや第三者が投稿・送信してきたものだけとは限りません。例えば、自分が行ったことのあるおすすめの国について紹介するWebサイトを制作しようとした時。
このサイトでは、ユーザーが「ここの国はおすすめだよ!」「この地域の料理、とても美味しかった!」と呟いたものではなく、開発者のみなさんが現地で感じた思いやおすすめのポイントなどを掲載したいですよね。本記事では、そんな方々のために、開発者が裏側からデータを格納する方法についてご紹介しようと思います。
##手順 (2Stepで簡単にできます!)
裏側からのデータの格納は、①seedファイルに保存したい初期データを記述
②「$ rails db:seed」というコマンドを入力するという実に簡単な方法で行うことができます。
①番の記述の仕方を抑えてしまえば、特に難しい内容はありません。以下で詳し
Ruby on RailsでWebpackerのエイリアスを設定する方法
“`javascript:config/webpack/environment.js
const { resolve } = require(‘path’)environment.config.merge({
resolve: {
alias: {
‘vue$’: ‘vue/dist/vue.esm.js’,
‘@’: resolve(‘app/javascript/packs’),
‘&’: resolve(‘app/javascript/packs/components’),
},
},
})
“`サーバーの再起動が必要です。
オリアプの要件定義
# 要件定義
前回は、オリアプの企画を考えてました。
今回からは、実際にアプリケーションの仕様や要件を洗い出して行きます。ここで要件定義の説明です。↓
要件定義とは、開発者などがアプリケーションの仕様を把握するために、詳細まで言語化することです。
ユーザーストーリーの段階では、人によってそれぞれの機能の「完成形のイメージ」が異なります。
このままでは、数人で開発する場合に上手くいきません。したがって、開発に関わる人全員で共通認識を持つために、要件を定義していく必要があります。
↑
私はアプリケーションの詳細を言語化することは容易ではないと思い、画面遷移図を書き出してみました。
![オリアプ遷移図.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1043361/a8e987df-0916-34cd-4e8d-f16a8dc25782.png)
多分ツッコミどころ万歳な遷移図ですが、ひとまずこれで、
これを元に言語化していこうと思います。・ログイン、サインイン
・ログインする入力フォーム
【画像付き】RailsでDeviseを利用してLINEログイン機能を実装
## はじめに
自作アプリでLINEBotを作成する際にLINEログイン機能を実装しました。
実装するに当たって様々な記事を参考にさせて頂きましたが, 記事によって記述が異なったり, ここはもう少し簡潔に書けるのでは?と思ったり, 記事通りに書いてもエラーが出たり, そもそも記事が古かったりで苦労しました。。
今後また実装する時に自分の記事さえ見れば導入できるように画像付きでまとめていきたいと思います!
基本的にRailsを想定していますが, LINE Developersの登録などはRails以外の言語でも参考になる部分があるかと思いますので, 少しでも参考になれば幸いです?
## 0.導入方法
導入方法はおおまかに以下の4つです。順を追って説明します。
##### 1.Railsアプリを作成
##### 2.Deviseを導入
##### 3.LINE Developersに登録
##### 4.LINEログイン機能を導入
##### 5.LINEログイン詳細設定## 1. Railsアプリを作成
– 以下の前提で進めていきます。(アプリやコントローラー名は任意の名
Ubuntu Rails Widowsで環境構築をしたよ(2021年版)
#経緯
DockerやCloud9での環境構築しかしてこなかったためUbuntuでも作りたいなと思い
この記事を書くことを決めました。【環境】
・Windows10 home
・Ruby 2.5.1
・Rails 5.2.1
・PostgeSQL#WSLの有効とUbuntuのインストール
1 WindowsでLinux環境を利用するためにWSLを有効
設定>「Windowsの機能の有効化または無効化」を入力>Windows Subsystem for Linux に☑2 Ubuntuのインストール
「Microsoft Store」を開いて「Ubuntu」を検索 > インストールをし起動起動時には「Installing,this may take a few minutes…」と表示されるのでしばらく待ちます。
その後、ログインユーザの作成のためにユーザ名とパスワードを求められるので入力しましょう!
入力を終えたら最新の状態にするために以下のコマンドを入力します。“`ターミナル:ターミナル
sudo apt update
sudo apt upgrade –
【Railsチュートリアル】第2章 Toyアプリケーション 演習と回答
#演習と回答
## 2.2.1 ユーザーページを探検する
###2.2.1 – 1
CSSを知っている読者へ: 新しいユーザーを作成し、ブラウザのHTMLインスペクター機能を使って「User was successfully created.」の箇所を調べてみてください。ブラウザをリロードすると、その箇所はどうなるでしょうか?“`html
User was successfully created.
“`
リロード前は上のようになっていて
“`html
“`
リロードしたあとは`User was successfully created.`が消えて空白になっていた。###2.2.1 – 2
emailを入力せず、名前だけを入力しようとした場合、どうなるでしょうか?名前だけでも登録ができる。
###2.2.1 – 3
「@example.com」のような間違ったメールアドレスを入力して更新しようとした場合、どうなるでしょうか?更新できる。
###2.2.1 – 4
上記の演習
railsでbootstrapを使う
#bootstrapとは
洗練されたWebデザインとユーザーインターフェイス要素を簡単に導入できるCSSのフレームワーク。
最大の特徴はアプリケーションをレスポンシブデザインにできること。[公式サイト](https://getbootstrap.jp/)
#導入
##①gemファイルを記入“`ruby:Gemfile
source ‘https://rubygems.org’gem ‘bootstrap’, ‘~> 4.5.0’
.
.
.
“`![スクリーンショット 2021-01-23 17.22.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/879803/72d3bdec-a77c-704f-aeee-1a13861455c5.png)
##②ターミナルでbundleをインストールする
“`
$ bundle install
“`##③scssファイル作成
/app/assets/stylesheets/application.scss のファイルを作成