プログラミング学習者のアウトプット 拾弐

今週の学習まとめ

学んだこと

・(JavaScript)イベントでCSSを変える

・(JavaScript)対象箇所の親要素を取得する

(JavaScript)イベントでCSSを変える

　JavaScriptのイベントで対象のCSSを変えるには、.css で指定できる。

　例）$(.aaa).css({"background-color" : "red"});

　　→クラス名aaaの背景を赤に変える

(JavaScript)対象箇所の親要素を取得する

　.parent()を付けると、その対象の親要素を指定できる。.parent().parent()とすればさらにその親要素を取得することもできる。

プログラミング学習者のアウトプット 拾壱

自作アプリを継続で改良中。

やったこと

・表の改良

表の改良

　表のセルを、クリックする毎に□と■が切り替わるだけだったのを、セルの背景も白から赤に変わるよう改良した。後々は日付毎に表の状態を保存して、日付を選択することでその日の表を表示させたいが、やり方の目処が立っていないため今はここまで。

プログラミング学習者のアウトプット 拾

　昨日から引き続き自作アプリの個人ページを編集できるように改良中。

やったこと

・個人ページ編集

個人ページ編集

　createアクション内でbinging.pryをかけてparams内を確認したところ、入力したデータは入っていることが確認できた。後はこれを取り出せるようにすればいいはずなため、明日はここを改良する。

　個人ページの改良が終了次第、表の改良に移行する。

プログラミング学習者のアウトプット 玖

自作アプリの改良中。

やったこと

・個人ページ編集

個人ページ編集

　自作アプリの個人ページ編集用画面は作成したため、送信して編集が適応されるかの作動確認をしたところ、Routing Errorが発生。

　Ownpagesコントローラー内のnewアクション中で@ownpage = Ownpage.newを記述し、form_with中にmodel: @ownpageとしたところ、[POST]アクションとURIが一致しないとエラーが出た。form_withにurlで直接パスを指定したところ送信できるようになったため、ひとまずこれで進める。

　明日変更箇所を反映させられるようにする。

プログラミング学習者のアウトプット 捌

無事フリマアプリ作成が終了したため、自作アプリ作成を再開。

やったこと

・個人ページへのリンク貼り直し

・個人ページの編集画面作成

 個人ページのリンク

　個人ページをユーザーにネストさせていなかったため、ネストさせてリンクを貼り直し。

個人ページ編集画面

　個人ページについては、もともと個人ページを開いた状態で編集するつもりでいたが、編集時は専用のページに移動した方がいいかと思い、編集用のページを新規で作成した。今日はマークアップのみで、サーバーサイドは明日以降行う。

プログラミング学習者のアウトプット 漆

約1ヶ月かけて、チーム開発でフリーマーケットアプリを作成したため、アプリの概要と担当箇所について紹介する。

アプリ概要

fig.1   メイン画面

作成したのはメルカリを参考とした、フリーマーケットの模擬アプリ。ユーザー登録をした後に右下にある「出品する」ボタンを押すと、商品出品画面に移動する。商品情報を入力すると出品ができ、メインページの新規投稿商品欄に追加される。出品したユーザーであれば、商品の画像をクリックすると情報の編集ができ、別のユーザーであれば商品の購入ができる。私が担当したのは商品出品画面のフロントサイドとサーバーサイド、商品情報編集画面のフロントサイドとサーバーサイドの実装を行った。

fig.2   商品出品画面

fig.3   商品出品画面２

商品の画像は10枚まで投稿することができ、プレビュー表示、それぞれの画像の変更、削除ができるようにした。これは主にJavaScriptを用いて実装したが、画像それぞれに番号を振って管理するのに苦戦し、時間がかかった。

fig.4    出品後

fig.5   商品情報編集画面

商品編集時には出品時に入力した情報が予め入力されているため、変えたい項目のみ編集できる。画像は変更、削除以外にも追加することができる。

プログラミング学習者のアウトプット 陸

今週から勉強のために、メルカリを参考にしたフリマアプリを作成開始。

今回は今週使用したものを書いていく。

・JavaScriptのイベントでCSSを変更

　$(this).css({"background-color": red});　とすると、イベント発火箇所の背景を赤に変更できる。

・dependent: :destroy

　これを記述したモデルを削除した時に、これを付与したリレーション先も同時に削除できるようになる。

　例）

　　class User << ApplicationRecord

         has_many :images, dependent: :destroy

       end

　→Userを削除したと同時にimageも削除される。

・自己結合

　データベースで自分自身に関連付けたい場合に使用する。これを使うと、全従業員を格納したデータベース内でさらに、上司と部下のような関連性も持たせることができる。今回は商品データベース内に販売者(seller)と購入者(buyer)を作るために使用した。

　例）itemデータベース内にseller(ユーザーの内の一人)を作成する

　userモデル：

　　has_many:seller_item, foreign_key:"seller_id", class_name:"Item"

　　を記述。

　itemデータベース：

　　t.references :seller, foreign_key: {to_table: :users}

　　を記述する。sellerテーブルは存在しないため、foreign_key: trueとして

　　しまうとエラーになる。よって手動で設定する必要がある。

　itemモデル：

　　belongs_to seller, class_name: "User", foreign_key: "seller_id"

　　を記述。

　これでsellerが使える。