HTTPメソッドの種類とその役割

１．HTTPとは何ぞや？
２．HTTPメソッドの種類とその役割

REST APIを叩いて、自社システム外部システムとの連携をとってカスタマイズしていくために先ずはREST APIを勉強しています。そこでクライアントとサーバーとの間でどんな処理が行われているかをざっくりと復習がてら記事にします chu☆

　HTTPとは？

HTTP（Hypertext Transfer Protocol)とはHTMLなどで書かれたファイルをクライアントとサーバー間でやり取りする決まり事（規約）

要はHTTPによってクライアントとサーバー間に円滑な意思疎通が生まれているということ。

例えばhttp:/www.yahoo.co.jpのように入力するとyahoo japanのトップページをこちら側がリクエストしたことになる。宣言文？のようなものかという認識。

　HTTPメソッドの種類とその役割

REST APIを使っていく中で登場するメソッドは主に４つ

メソッド	意味
GET	リソース情報の取得
POST	リソース新規作成
PUT	リソース変更・更新
DELETE	リソース削除

同じURLにアクセスしたとしてもHTTPメソッドによって操作を変えることができる！

　リソース(資源)＝作成したり変更したりするモノ。user item など

HTML

<form method="POST" action="http:/www.test.co.jp">
    <p>お名前：<input type="text" name="NAME"></p>
    <p>メールアドレス：<input type="text" name="email"></p>
    <p><input type="submit" value="送信する"></p>
    <p><input type="reset" value="取消する"></p>
</form>

例えば↑だとformタグの中のメソッドがPOSTになっている。

ここのフォームを入力して送信するとPOSTをリクエストすることになる。
GETなどに置き換えていくことでサーバーが受け取る仕組みが変わっていく。

ざっくりとこんな感じですかね。。
誤った認識等があればご教授願います。

以上備忘録でした。ぐっない。

参考記事の数

　Qiitaには魅力的な記事が数多くあるため、多くの記事を参考にしがちである。しかし、記事によって書き方は様々であるため、その内容を理解しないまま複数の記事を参考にすると、エラーの原因となりがちである。
そのため、一つの機能を実装する際には、一つの記事のみを参考にすべきである。

複数の記事を参照すると・・・

たとえば、DM機能を作りたいとして
https://qiita.com/tenitiumai/items/3d9466d7a24197f690bb　
を参考にしたとしよう。

model/message.rb

class Message < ApplicationRecord
  belongs_to :user
  belongs_to :room
end

上記の記事のuser.rbにはこのようなコードが記述されていたとしよう。
しかし、別の記事も参考にしたために、実際には

model/message.rb

class User < ApplicationRecord
  validate :messages, presence: true
  has_many :messages, dependent: :destroy
  has_many :entries, dependent: :destroy
end

と記述されていたとしよう。

　これ一つでは何ともなくても、複数の不要なコードを書き続けていると、予期せぬエラーの原因となる。なお、ここではmessagesをvalidateで縛る必要はない。なぜなら、messageのモデルなのに、必ずmessageを要求するというコードを書くのはおかしいからである。

models/user.rb

  has_many :comments, dependent: :destroy 
  has_many :entries, dependent: :destroy
  has_many :messages, dependent: :destroy
  has_many :rooms, dependent: :destroy

これも不要な部分がある。DM機能において、userは中間テーブルであるentriesを経由してroomに到達するため、has_many :roomsと書く必要はない。
上記のように、不必要がコードが積み重なると、
このようなエラーが出ることになる。特に、model部分はcontrollerやacitonを作成する際の基盤となるので、modelページで不必要なコードを書くのはできるだけ控えた方が無難である。

まとめ

　今回のエラーは基本をきちんと理解していないために引き起こされたエラーである。初心者のうちはやりがちであるので、記事を参考にする際はできるだけ一つに留めておくのが無難である（基本が理解できるのであれば複数を参照しても問題ないが・・・）。

どうも7noteです。HTMLソースをそのまま表示させる方法です。超簡単。

他の人にHTMLソースを使ってもらったり、HTMLソースを公開する時にHTMLタグのままテキストとして表示させる方法です。

やり方は超簡単

タグ（< >）を実体参照に置き換えるだけ。

• 「<」 ⇒ <
• 「>」 ⇒ >

実体参照とは？

<a href="hogehoge.com">ほげほげへリンク</a>

↓実体参照で置き換えると・・・

&lt;a href="hogehoge.com"&gt;ほげほげへリンク&lt;/a&gt;

結果
<a href="hogehoge.com">ほげほげへリンク</a>

これだけ。超簡単。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ

概要

Bootstrap3では使えて、Bootstrap4では使えない機能は結構あります。
その時に参考するのがこちらのサイト。めちゃくちゃお世話になっています。

Bootstrap4移行ガイド

ですが、そこに書かれている記述のまま転記しても同等に利用できない事例もあったりするため、
そのようなものが発生した場合の解決をメモ代わりに利用しています。

なおscssで編集を行っています。

対象のクラス

btn-xs

Bootstrap4では消えました。
ですが、どうしても使いたいことは結構あります。
ほら、テーブルのボタンとか……ヘッダー右揃えで目立たないコンフィグボタンとか……。

そんなわけで、作ってしまいます

app.scss

$btn-padding-x-xs: .20rem !default;
$btn-padding-y-xs: .12rem !default;
$input-btn-line-height-xs: 1.1 !default;

.btn.btn-xs {
  @include button-size($btn-padding-y-xs, $btn-padding-x-xs, $font-size-sm, $input-btn-line-height-xs, $btn-border-radius-sm);
}

index.html

<button type="button" class="btn btn-xs btn-primary">めっちゃ小さいボタン</button>

なお.btn-xsのサイズはBootstrap3のマイナーバージョンの番号によって地味にサイズが異なるので、入れてみてから「なんか違うな」となったら変数を変更しましょう。

well

Bootstrap4ではこいつも消えました。
具体的には.card系と統合になったとのこと。
では.cardで統合してしまいましょう。

index.html

<div class="card card-body bg-light mb-3">
    wellの中身
</div>

と書きたいところですが、ちょっと待った！
実はこのように記述すると、ボタンやバッジを以下のように記述したとき、同等に表示されなくなります。

index.html

<div class="card card-body mb-3">
    <button type="button" class="btn btn-danger mb-3">なぜかブロックになってるボタン</button>
    <span class="badge badge-danger">なぜかめちゃくちゃ長いバッジ</span>
</div>

こんな感じになります↓

その理由としては、cardにはdisplay: flexが指定されており、card-body側でそれを打ち消す処理は特に入れていないから。
クラスの中身を編集しても構いませんが、面倒なのでdivの階層構造だけで対応してしまいましょう。

index.html

<div class="card bg-light mb-3">
    <div class="card-body">
        wellの中身
    </div>
</div>

なんか釈然としませんが、だいたい解決します。
ちなみにちょっとだけ色合いが違いますが、以下のように解決してもいいと思います。

index.html

<div class="alert alert-secondary">
    アラート<br>
    <button type="button" class="btn btn-primary">アラート内ボタン</button>
</div>

ボタンなども問題なく描画されます。

bs-callout

これはbootstrap3にも4にもそもそも収録されていないやつですが、
Bootstrap公式サイトでtipsなどに利用されているクラスの再現です。

app.scss

.bd-callout {
  padding: $card-spacer-x;
  margin-top: $card-spacer-x;
  margin-bottom: $card-spacer-x;
  border: $card-border-width solid $card-border-color;
  border-left-width: .25rem;
  border-radius: $card-border-radius;
  background-color: $white;
  h2,h3,h4,h5 {
    margin-top: 0;
    margin-bottom: .25rem
  }
  p:last-child {
    margin-bottom: 0
  }
  code {
    border-radius: $border-radius;
  }
}

.bd-callout-primary{
  border-left-color: $primary;
  h2,h3,h4,h5 {
    color: $primary
  }
}

.bd-callout-secondary{
  border-left-color: $secondary;
  h2,h3,h4,h5 {
    color: $secondary
  }
}
.bd-callout-success {
  border-left-color: $success;
  h2,h3,h4,h5 {
    color: $success
  }
}
.bd-callout-info {
  border-left-color: $info;
  h2,h3,h4,h5 {
    color: $info
  }
}
.bd-callout-warning {
  border-left-color: $warning;
  h2,h3,h4,h5 {
    color: $warning
  }
}
.bd-callout-danger {
  border-left-color:$danger;
  h2,h3,h4,h5 {
    color: $danger
  }
}
.bd-callout-light {
  border-left-color: $light;
  h2,h3,h4,h5 {
    color: $light
  }
}
.bd-callout-dark {
  border-left-color: $dark;
  h2,h3,h4,h5 {
    color: $dark
  }
}

$whiteは公式の変数宣言ではなく自分で必要に迫られて書いた気がしますが、覚えてないのでこのまま。
エラーが出たら宣言してあげてください。

なにか発生するたびに増える予定...

環境

Rails 6.0.3.2
ruby 2.6.5p114 (2019-10-01 revision 67812)
vscode

本稿の趣旨

https://qiita.com/tenitiumai/items/3d9466d7a24197f690bb　
を参考にしてDM機能を作成することを目標とする。

　しかし、本稿は、エラーの解決方法を紹介するため、
具体的なDM機能の作成手順については割愛する（上記の参考記事を参照していただきたい）。

該当のエラー

エラーの原因

参考記事　https://qiita.com/krppppp/items/0db4184e9df553f05048
これは、　Cannot have a has_many:through association 'User#followers' which goes through 'User#follower_relationships' before the through associations is defined. に注目する。
どうやら、モデルの配置順序が間違っていることが原因である。
具体的には、follower_relationshipｓが読み込まれる前にfollowersが読み込まれているため、エラーが生じていると推測できる。

解決方法

コードを見ると、

app/models/user.rb

  has_many :followers, through: :follower_relationships

  has_many :follower_relationships, foreign_key: "following_id", class_name: 
  "Relationship", dependent: :destroy

  has_many :followings, through: :following_relationships

となっており、followersが、follower_relationshipsより上にある。これを

app/models/user.rb

  has_many :followings, through: :following_relationships

  has_many :follower_relationships, foreign_key: "following_id", class_name: 
  "Relationship", dependent: :destroy

  has_many :followers, through: :follower_relationships

とすれば、解決するのではないか。
DMボタンを配置したユーザー詳細ページにアクセスすると、

無事解決しました。

おわりに

モデルの順序でエラーが生じることになるとは思わなかった。
これからはその点も意識していこうと思いました。

フォーム画面を作成中にはまったところを記録しておく。

問題の状況

日記アプリを作成中に、formタグ中で<textarea>を使用した。
色々いじっていたら、いつの間にか、テキストエリアをクリックすると、下の画像のように先頭に空きスペースが追加されるようになってしまった。

問題となったソースコードは以下。

example.html

<form action="hoge" method="post">
<div class="form-group">
     <label for="body">本文：</label>
     <textarea class="form-control" name="body" id="body" rows="20">
     {{ $diary->body ?? old('body') }}
     </textarea>
</div>

原因と解決策

原因は、<textarea></textarea>を改行して使っていたこと。
なので、一行で書けば問題なく、先頭の空白はなくなった。

直したソースコードは以下。

example.html

<form action="hoge" method="post">
<div class="form-group">
     <label for="body">本文：</label>
     <textarea class="form-control" name="body" id="body" rows="20">{{ $diary->body ?? old('body') }}</textarea>
</div>

以上！