【HTTPリクエスト】fetch,jquery,axiosそれぞれの特徴
fetch
JavaScriptの機能の一つ。ajax、axiosはscriptタグなどでライブラリを読み込む必要がありますが、fetchはその必要がありません。
// 使用例 let body =`idToken=${idToken}` let request = new Request('/schedules', { headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8', 'X-CSRF-Token': token }, method: 'POST', body: body }); fetch(request) .then(response => response.json()); .then(data => { console.log(data) sub_field.append(data.sub) }); .catch(error => { console.log(error); });
1つめの.thenでpromiseを返し、2つめの.thenでJSONを取得できます(Promiseは非同期を操作するための機能らしいですが、詳しいことはまだよく分かりません)。
ajax通信やthenのなかでエラーが発生すると.catchを実行します。
jquery
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
こんな感じでスクリプトを読み込む必要があります。
//使用例 const url = 'https://jsonplaceholder.typicode.com/posts'; const params = { name: 'foo', email: 'foo@example.com', password: 'foobar' }; $.post(url, params) .done(data => { console.log(data); }) .fail(error => { console.log(error); });
通信に成功すると.doneを返し、エラーの場合は.failを返します。
axios
<script src="https://unpkg.com/axios/dist/axios.min.js"><script>
jquery同様、ライブラリを読み込む必要があります。比較的新しくできたらしく、Vue.jsなどを使うときに一緒に使用されることが多いみたいです。
//使用例 const url = 'https://jsonplaceholder.typicode.com/posts'; const params = { name: 'foo', email: 'foo@example.com', password: 'foobar' }; axios.post(url, params) .then(response => { console.log(response.data); }) .catch(error => { console.log(error); });
■参考にした記事
Ajax送信の歴史！fetch、axios、jQuery、XMLHttpRequest – console dot log
js用語集
fetch
HTTP通信を可能にする。fetch APIというらしいです。 fetchを使ってサーバーにリクエストを投げ、レスポンスからデータを取得したりするときに使う。
let request = new Request('/users', {
headers: {
'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8',
'X-CSRF-Token': token
},
method: 'POST',
body: body
}
fetch(request)
.then(response => response.json())
.then(data => console.log(data));
append
指定した要素の最後に引数を追加してくれる。
('p').append('追加する')
// pタグのテキストの最後に`追加する`というテキストが追加される
document
HTML要素を取得できる。
console.log( document.head ); //head要素の中身を出力
querySelector
HTML要素のセレクタを指定して取得できる。javascriptは元々、getElementById()(HTMLのid要素を取得)とgetElemetnsByClassName()(HTMLのclass要素を取得)があったが、querySelectorを使うとidもclassも関係なく要素を取得することができる。
const amr_field = document.querySelector("#amr")
ポートフォリオ作成でjavascriptを使う必要があるので、わからない用語について自分なりに解釈してみました。
そのため適切ではない表現もあるかもしれません。違う箇所がありましたら教えていただけると嬉しいです。
■参考にした記事
【rails】コールバックを起動する条件を設定したい
コールバックとは？
ある特定の瞬間に呼び出されるメソッドのこと。
例えば、「ユーザー登録する際、createする前にこの処理を実行したい」などという時にコールバックが使われます。
コールバック一覧
| オブジェクトの作成 | 概要 |
|---|---|
| before_validation | バリデーションが行われる直前で実行される |
| after_validation | バリデーションが行われた直後に実行される |
| before_save | バリデーションに成功し、オブジェクトがDBに保存される直前に実行される |
| around_save | バリデーションに成功し、オブジェクトがDBに保存されている最中に実行される |
| before_create | バリデーションに成功し、オブジェクトがDBに保存される直前に実行される |
| around_create | バリデーションに成功し、オブジェクトがDBに保存されている最中に実行される |
| after_create | バリデーションに成功し、オブジェクトがDBに保存された直後に実行される |
| after_save | after_create / after_update の直後、データベースへの COMMIT の直前に実行される |
| after_commit/after_rollback | after_save の後（データベースに COMMIT された後）に実行される |
| オブジェクトの更新 | 概要 |
|---|---|
| before_validation | バリデーションが行われる直前で実行される |
| after_validation | バリデーションが行われた直後に実行される |
| before_save | バリデーションに成功し、オブジェクトがDBに保存される直前に実行される |
| around_save | バリデーションに成功し、オブジェクトがDBに保存されている最中に実行される |
| before_update | DBが更新される直前に実行される |
| around_update | DBが更新されている最中に実行される |
| after_update | DBが更新された直後に実行される |
| after_save | after_create / after_update の直後、データベースへの COMMIT の直前に実行される |
| after_commit/after_rollback | after_save の後（データベースに COMMIT された後）に実行される |
| オブジェクトのdestroy | 概要 |
|---|---|
| before_destroy | DBのデータがdestroyされる直前に実行される |
| around_destroy | DBのデータがdestroyされている最中に実行される |
| after_destroy | DBのデータがdestroyされた直後に実行される |
| after_commit/after_rollback | after_save の後（データベースに COMMIT された後）に実行される |
コールバックを起動する際、条件を付けたいときは？
:ifもしくは:unlessオプションをつけることで条件を指定することができます。
class User < ApplicationRecord before_save :downcase_email, if: :email_upcase? end #シンボルを使って実装すると上記のようになる
■参考にした記事
Active Record コールバック - Railsガイド
【rails】has_secure_password
has_secure_passwordとは
railsに標準でついている機能で、パスワードをそのままデータベースに保存するのではなく、元に戻すことのできない値にハッシュ化して保存してくれます。
使いたいモデル内にhas_secure_passwordと記述するだけで簡単に使うことができますが、
・使用するモデルのカラムにpassword_digestというカラムがある
・bcryptというgem(ハッシュ関数を提供するgem)が必要
という二つの条件があります。
使い方
①bcryptをGemfileに記述し、
bcrypt
インストールする
$ bundle install
②モデルを作成する
$ rails g model user name:string email:string password_digest:string # ここで必ず`password_digest`カラムを作成すること
③データベースにusersテーブルを追加する
$ rails db:migrate # 必要があれば、`rails db:migrate`の前にマイグレーションファイルにNOT NULL制約等を追加する
④userモデル内にhas_secure_passwordを記述する
class User < ApplicationRecord has_secure_password end
補足
has_secure_passwordを記述すると、データベースのカラムには対応しないpasswordとpassword_confirmationという2つの属性が追加されます。
password属性
→ユーザーが入力したパスワードを一時的に格納しておく場所
password_confirmation属性
→パスワード確認用にもう一度入力してもらった値を格納する場所
この二つの値が一致していないときは検証に失敗し、間違ったパスワードで登録してしまうことを防ぐことができます。
■参考にした記事
現場で使える Ruby on Rails 5速習実践ガイド | 大場寧子, 松本拓也, 櫻井達生, 小田井優, 大塚隆弘, 依光奏江, 銭神裕宜, 小芝美由紀 |本 | 通販 | Amazon
【rails】マイグレーションファイルを作成してNOT NULL制約を追加する
NOT NULL制約とは？
データベースの値にNULL(railsでいうnil)を格納したくない時、NOT NULL制約をつけておくと、NULLを保存できないようにしてくれます。
使い方
※既にデータベースが作成済みの場合のやり方です。
①rails g migration <ファイル名>でマイグレーションファイルを作成する。
$ rails g migration AddCommentsNotNull
②db/migrate/xxxxxxxxxxxxxx_add_comments_not_nullというファイルが作成されている。こんな感じ↓
class AddCommntsNotNull < ActiveRecord::Migration[5.2] def change end end
③db/migrate/xxxxxxxxxxxxxx_add_comments_not_nullこのファイルにNOT NULL制約を追加する
class AddCommntsNotNull < ActiveRecord::Migration[5.2] def change change_column_null :board, :comment, false # change_column_null :テーブル名, :カラム名, false end end
change_column_nullはActive Recordが提供しているメソッドの一つで、上記のようにマイグレーションファイルの中で使用することができます。
■参考にした記事
Active Record マイグレーション - Railsガイド
現場で使える Ruby on Rails 5速習実践ガイド | 大場寧子, 松本拓也, 櫻井達生, 小田井優, 大塚隆弘, 依光奏江, 銭神裕宜, 小芝美由紀 |本 | 通販 | Amazon
