TechCommitのお年玉企画で当たったTechpitの教材「Tinder風マッチングアプリを作ってみよう！」を終えて

TechpitのTinder風マッチングアプリを作ってみよう！を完了しました

Qiita初投稿です。
TechCommitのお年玉企画で当選したこちらの教材を無事終わらせることが出来たので、感想と学んだことのメモを残しておきます。

学んだこと

• content_tagは動的にHTMLを生成出来る便利なコード。erbとhtmlが混ざってしまう時にすっきり書ける。
  • content_tag(:i, "", class: "fas fa-cog fa-2x") → <i class="fas fa-cog fa-2x></i>が生成される。
    • これは自分がInstacloneを作ってた時、font-awesomeを使う際にどのようにslimを書いていいか混乱したので、これからは迷わなくてすみそう。
• & > aとかはScssじゃなくCSSの書き方で、子供セレクタのみ指定する（孫はダメ）
• transitionは変化するまでの時間や変化の度合いを指定するCSSのプロパティで、JavaScriptを使わなくても動きのある見た目の変化をつけることが出来る。
  • 【CSS3】Transition（変化）関連のまとめ - Qiita
  • transition - CSS: カスケーディングスタイルシート | MDN
• border-radiusは角（ボックスで言うところのborder）を丸めるときに使うやつ。そのまま。
• border-color: transparent transparent #fff #fff
  • この書き方は、順に上辺｜右辺｜下辺｜左辺と、それぞれの辺の色を指定している（paddingとかと同じ仕組み）
• @users = User.where.not(id: current_user.id)
  • where.notは条件に当てはまらないものだけ取得するという意味。この場合はidがcurrent_user.id以外のものだけ取得する。NOTクエリにあたる。
• find_or_initialize_byメソッドは、引数で渡したカラムでfindをかけて引っかからなかったらインスタンスを作成する便利なメソッド。データべースに保存はしない。
  • TechPitのTinder風マッチングアプリ作成教材では、update_attributesでデータベースの更新をしていた。
    • saveとupdate_attributesの違い - Qiita
• input[type="text"]:focusはinput要素のtype="text"がユーザーの操作でフォーカスされた時のスタイルを指定する。疑似要素＝:hoverと同類。
  • :focus擬似クラス－スタイルシートリファレンス

感想

• 単純にとても楽しかった。最近取り掛かっているスクール課題と違って答えのある安心感もあった。
• また最初にアプリケーションのデータベース設計について解説されていたのが良かった。
• Deviseをはじめて使ったけど簡単すぎてびっくり。
  • ただその分魔法のようなところが多くて、英語のリファレンスを読み込まないと自分の動かしたいように動かせないなとも感じた。
• CSSをきちんと書いてくださってるので、見た目が本当に綺麗なアプリが出来ていくのでテンションが上がる。
  • 学習初日はCSS手打ちせずコピペしていたが、それでは勉強にならないと思い、手打ちして1行か2行追加するごとにページを読み込み直してCSSの挙動を確認した。
• 少し複雑そうなコードに関しては説明があるので、基本的な部分で詰まるところは少なかった。
• ただし、JavaScript（jTinder関連のコード）や、Action Cableの部分は分からないところがまだまだ多く、説明もそこまで詳しくされていなかったのでもう一度見直す必要がある。
  • Action Cable の概要 - Railsガイド
  • ↑書いてることが今のレベルじゃちょっと分からない
• そんなAction Cableを使ったリアルタイムチャット機能が出来たときは今まで作ったことのないような機能だったので感動した。

終わりに

2周目はerbではなくSlimで書きながら、JavaScriptとAction Cableの理解に重点を置きつつ復習出来たらいいなと思います。
重めのスクール課題が待ち構えているので、それが終わって余裕がある時にやります。