「DIVE INTO CODE」学習記録 15日目
こんにちは。
15日目。Googleトップページを真似して作る。
学習内容
【アソシエーション】
- アソシエーションとは
- 外部キー
- 子テーブルに「t.references」記載
- アソシエーション設定方法
- 「１対多」のアソシエーション
- has_manyとbelongs_to
- 「多対多」のアソシエーション
- throughオプションとsourceオプション
- お気に入り機能の実装
【スタートダッシュ勉強会（HTML/CSS基礎）】
- Googleのトップページを真似して作る
感想
今回はアソシエーションについて午前中テキストで勉強して、午後はスタートダッシュの勉強会に参加しました。
まず、アソシエーション。テキスト間違いなく難しくなってきてます。
全てテキストには載せず、一部一切ヒントなしで課題を攻略しないといけなくなってきました。
今回はアソシエーションを使い、ブログに「お気に入り機能」を実装するというもの。
まずは「１対多」のアソシエーションから理解。
テーブルとテーブルを外部キーを使って結びつけるのか、
なんか基本情報技術者の勉強したときにDB関係で勉強したな、
とか思いつつ。
DBに関する設定なので、モデルとマグレーションファイルを使って行きます。
親と子の関係を意識し、「親」にはhas_many （複数形）、「子」にはbelongs_to （単数形）をモデルに追加。
あとは子テーブルのマイグレーションファイルにt.referencesをかき、マイグレーション。
次は「多対多」のアソシエーション。
中間テーブルを真ん中に置いて１：多を２つ作るイメージ。（中間テーブルがそれぞれのテーブルの「子」テーブルとなる。）
あとは、
has_many （コマンド）through （中間テーブル名）source （取得したい情報があるテーブル名）
っていうのを親テーブルに書くことで、中間テーブルを経由してさらに向こうのテーブルの情報が取得多能になり、実質「多対多」を実装するというもの。
外部キーのところがまだ理解不足でお気に入り機能が実装できませんでした。
午後からはHTMLとCSSの勉強会でした。13時〜19時までぶっ続けでひたすらcss考えました。
テキストの進捗具合で２つに分かれ、HTMLの課題が終わってない人はテキストの課題学習。
もうすでにテキスト課題終わっている人は、
「Googleのトップページを作ってみよう。（見た目だけ）」
という課題を与えられました。
私はすでに終わっていたので、Googleのページを真似して作りました。
講義のスタイルではなく、最初説明を15分くらいしたのち、自習。
DICはとにかく、
「考える力、問題解決能力をつける」
に徹底しており、
今回の勉強会もまさにそれに沿ったカリキュラムでした。
参加者の三分の二くらいはもうすでに課題終わらせてる組だったので、
その中でもさらに2グループに分かれて、（1グループ5〜6人程）
グループごとに適宜進捗報告しながら作成。
今回の勉強会で感じたメリットとデメリットを書きます。
【メリット】
- 他の受講生と交流ができる。
- 受講生間で情報共有ができ、詰まってる所で教えてもらえる。
- 他の受講生ごとに解決方法が違い、知識の幅が広がる。
【デメリット】
- 全く講義がないため、感覚としては普段自分一人でやってる自習と同じ。
- グループに分かれてはいたが、グループで一つのものを作るわけではないので結局おのおの自習になる。
勉強会は、
「他の受講生との交流できる機会を与えてくれる」
という点が一番のメリットだと思いました。
プログラミング学習は基本大前提で自分一人でゴリゴリ進めるものだとは思うんですが、
他の人との情報共有っていうのがすごい大事だと、ここ最近感じはじめてます。
言われてる通りだなと。
そういう点で勉強会は大事なのかもしれません。
いちお今回作ったGoogleの真似したデザイン載せます。
右端に自分の名前入ってたんで若干切りました、すみません。
画像ではわかりませんがちゃんと:hoverとかつけてます。
カーソル合わせると、ヘッダーとかフッターはアンダーラインが出るように。
ロゴとか検索ボタンはオパシティで色が少し薄くなるようにしてます。
マイクとかアイコンは全てスクショで乗っけただけですが。
見た目だけなら意外と作れるんだなって思いました。
次回はテキスト進めます。
以上ありがとうございました。