2020-08-22

ajaxを使用する手順

-XMLHttpRequestを使用できるようにする -リクエストの指定 -レスポンスの形式を指定 -リクエストを送る -コントローラーからレスポンスを受け取る

具体例

//XMLHttpRequestを使用できるようにする
const XHR = new XMLHttpRequest();

//リクエストの指定
XHR.open('GET', `/posts/${postId}`, true);

//レスポンスの形式を指定
XHR.responseType = "json";

//リクエストを送る
XHR.send();

//コントローラーからレスポンスを受け取る
XHR.onload = () => {
  if (XHR.status != 200) {
    alert("Error ${XHR.status}: ${XHR.statusText}");
    return null;
  }
  const item = XHR.response.post;

この場合だとリクエスト送る前に要素を取得してその要素のIdを変数に代入する必要がある．また，onloadの記述ではリクエストがうまく行かなかったときの記述も必要．レスポンスを受け取った際の処理の記述も必要．

2020-08-22

setIntervalを使うときの注意点

イベントが何回も設定されないように工夫する必要がある．

setIntervalを使った事例

function check () {
  const 要素 = document.getElementById("Id名")
  要素.addEventListener("click", () => {

  });
}
setInterval(check, 1000)

setIntervalとは一定の間隔で関数を実行したいときに使う．第1引数には関数名を，第2引数には関数を実行する間隔を指定する．このとき，間隔の単位はmsであることに注意する．上記のコードでは，1秒に1回check関数が実行されることになる．この場合，1秒に1回要素にclickイベントが設定されるため，要素をクリックした際に何回も関数が実行されてしまう．このようなことを回避するには，要素に対して初めてcheck関数が実行されたときにその要素に属性を付けておく必要がある．印付けのようなもの．

function check () {
  const 要素 = document.getElementById("Id名")
  if (要素.getAttribute("属性名") != null {
    return null;
  }
  要素.setAttribute("属性名", "属性値");
  要素.addEventListener("click", () => {

  });
}
setInterval(check, 1000)

上記のようにclickイベントの前に要素に属性をセットし，それを元にif文を実行すると何回もイベントがセットされることを回避することができる．

このため，setIntervalを使うときは気をつけないといけない．

2020-08-20

pushおよびmapメソッドについて

pushメソッド

pushメソッドとは

配列の末尾に引数を要素として追加するメソッド要素は複数指定することもでき，その場合は指定した順番に要素に追加されていく． pushメソッドはレシーバーであるオブジェクトを変更してしまうため破壊的メソッドという．

pushメソッドの使い方

オブジェクト.push("要素")

a = ["hoge1", "hoge2"]
puts a.push("hoge3")

=>["hoge1", "hoge2", "hoge3"]

mapメソッド

mapメソッドとは

繰り返し処理をした結果を配列として保持することができるメソッド

mapメソッドの使い方

nums = [2, 3, 8]

result = nums.map do |num|
  num * 2
end

=>[4, 6, 16]

繰り返し処理にはeachメソッドもあるが，eachメソッドを使用した場合繰り返し処理の結果を戻り値とすることはできない．戻り値に結果を得たい場合は記述量が増えることになる．

nums = [2, 3, 8]

nums.each do |num|
  num * 2
end

=>[2, 3, 8]

nums = [2, 3, 8]
result = []

nums.each do |num|
  result << num * 2
end

=>[4, 6, 16]

繰り返し処理の結果を使うかどうかでmapメソッドとeachメソッドを使い分けていく．

techacademy.jp

qiita.com

2020-08-20

JavaScriptのセミコロンについて

##JavaScriptにおけるセミコロンとは文と文に区切りを付けるために使う ##どこでセミコロンを付けるか文の末尾に記述する ###具体例 ```JavaScript 処理する文; 処理する文; 式; ``` ここでJavaScriptにおける文とは処理する1ステップのこと，式とは値を生成し，変数に代入できるもののことを言う． ```JavaScript { 処理する文; 処理する文; } ``` { と }で囲んだ部分をブロックという．ブロック内には複数の文を記述することができる．ブロック内の文には ; が必要だが，例外としてブロックの末尾には ; はいらない． ```JavaScript function name () { } const name = function () { }; ``` 関数宣言の場合，ブロックで終わるため ; はいらない．関数式の場合，式であるため } の後に ; が必要となる．セミコロンがいるかいらないかという議論は多く行わているが，予期せぬエラーとかが起きると面倒なので，セミコロンはきっちり付けていこうと思う． > jsprimer.net > blog.tai2.net

2020-08-20

JavaScriptのセミコロンについて

JavaScriptにおけるセミコロンとは

文と文に区切りを付けるために使う

どこでセミコロンを付けるか

文の末尾に記述する

具体例

処理する文;
処理する文;
式;

ここでJavaScriptにおける文とは処理する1ステップのこと，式とは値を生成し，変数に代入できるもののことを言う．

{
  処理する文;
  処理する文;
}

{ と }で囲んだ部分をブロックという．ブロック内には複数の文を記述することができる．ブロック内の文には ; が必要だが，例外としてブロックの末尾には ; はいらない．

function name () {

}

const name = function () {

};

関数宣言の場合，ブロックで終わるため ; はいらない．関数式の場合，式であるため } の後に ; が必要となる．

セミコロンがいるかいらないかという議論は多く行わているが，予期せぬエラーとかが起きると面倒なので，セミコロンはきっちり付けていこうと思う．

jsprimer.net

blog.tai2.net

2020-08-16

条件付きバリデーション

特定の条件を満たす場合にのみバリデーションを適用したい場合に使用する．

:ifオプションや:unlessオプションを使うことで条件を指定できる．

:ifオプションは特定の条件でバリデーションを行うべきである場合に，:unlessオプションは特定の条件でバリデーションを行うべきでない場合に使用する．

使用例

Messageクラス

validates :content, presence: true, if: :image_attached?

def image_attached?
  self.image.attached?
end

画像が添付されているとき，バリデーションが行われる．

Messageクラス

validates :content, presence: true, unless: :image_attached?

def image_attached?
  self.image.attached?
end

画像が添付されているとき，バリデーションは行われない．

2020-08-12

部分テンプレートとname属性の指定方法について

部分テンプレートのcollectionについて

部分テンプレートの基本表記

<%= render partial: 'ファイル名' %>

部分テンプレートを繰り返し表示したいとき

<%= render partial: 'ファイル名', collection: @books %>

このように書くと一つの記事項目をテンプレート化し，それを繰り返し表示することで一覧ページを作成することができる． @booksの要素の分だけ繰り返される．このとき，部分テンプレート内の変数はpartialで指定したものとなる．

部分テンプレートファイル内で以下のように使う．

<%= ファイル名.title %>

別の変数名で指定したいときはasオプションを使って指定する．

name属性とparamsの対応

基本形

name属性の値がそのままキーになる．

<input type="text" name="message">

この場合のparamsの中は { message: "入力された内容" } となる．

特別ルール1

name属性に[]を含め，かつ[ ]が空ではないときはハッシュとなる．

<input type="text" name="message[m1]" >

この場合のparamsの中は message = { m1: "入力された内容" } となる．

特別ルール2

name属性に[]を含め，かつ[ ]が空のときバリューは配列になる．

<input type="text" name="message[]" >
<input type="text" name="message[]" >

この場合のparamsの中は { message: ["入力された内容", "入力された内容"] } となる．

qiita.com

teratail.com