201020アウトプット 16日目
TECHCAMP16日目
【目標】
学ぶことは自分のためでもあるが、このプログラミングは結果的に
誰かに与えるものと考える。その先にあるまだ見ぬ人に与えるための技術。
誰かのためにしている行為ととらえる。
丁寧な見やすいコード、視認性のいい書き方をする。
【復習事項】
◯ 中間テーブル
中間テーブルは各モデル間のデータをやり取りする際に、多対多になる際に使用します。両者間に生じるやりとりだけをするテーブルとなります。
## room_users テーブル
| Column | Type | Options |
| ------ | ---------- | ------------------------------ |
| user | references | null: false, foreign_key: true |
| room | references | null: false, foreign_key: true |
### Association
- belongs_to :room
- belongs_to :user
◯ README
READMEはアプリの仕様についての説明するものです、レールズでアプリを作る際に自動で生成され、記述にはマークダウンを使用します。
# README
◯ Dependeabot
DependeabotはGitで脆弱性があった場合更新されるものをさします。
◯ YUI3 Yahoo! User Interface Library
リセットCSSを設定するために使用します。
CSSに書き込むことで使用する事ができます。
◯ box-sizing
boxの大きさを指定する任意の大きさでワイド寸法を固定できます。
％とvhに関しては、％は親要素に対しての基準となるので横の寸法を決めるときに使用されやすいです。vhは表示画面いっぱいなどで考えるので、高さに使用されやすいです
.rooms {
background-color: #2F3E51;
height: calc(100vh - 100px);
padding: 0 20px;
overflow: scroll;
}
◯ text-decoration: none;
text-decorationは文字の装飾がデフォルトであるものを消すためのものです。
aタグでリンクをビューに表示させるため、下線がデフォルトで設定されているので、それを表示がから消すために利用しています。
.user-name a{
color: #fafafa;
font-size: 16px;
text-decoration: none;
}
◯ label要素
フォームの中で、親要素と子要素を関連づけるためのものです。
関連付けにより、親要素をクリックすることで連動して子要素もクリックされたことになります
<div class="form-input">
<input class="form-message" placeholder= "type a message">
<label class="form-image">
<span class="image-file">画像</span>
<input type="file" class="hidden">
</label>
</div>
◯ overflow: scroll;
スクロールが必要になるだろうという想定から、オーバーフローを導入しました。子要素が重なり視認性が悪くなることを防ぐためなので、記述はその親要素に行います
.rooms {
background-color: #2F3E51;
height: calc(100vh - 100px);
padding: 0 20px;
overflow: scroll;}
【今日の振り返り】
本当に何かを変えたいと思って挑戦をしているか？
ここで自分を変えることにチャレンジしなかったら、必ず後悔する。
本当に挑戦をする。
自分が主人公の脚本は、自分にしか書けない。書け。
絶対に”やりぬく” もっともっと挑戦する。
