undifind method `map` for#<ActionDispatch::Http::UplodedFile:ファイル名> Did you mean? tapエラー

82日目です。
昨日からネットでどれだけ調べても、チームメンバー、他チームに聞いても分からず、メンターに2回匙を投げられめちゃめちゃ苦しんだエラーが解決したので紹介します。

発生していたエラー

メルカリのクローンサイトで商品を出品しようとすると、下記のエラーが発生しました。
※画像の投稿機能は、「gem 'carrierwave'」を用いて実装していました。

f:id:tattaka_s:20190913223449p:plain

コントローラーやモデル、マイグレーションファイル、ビューファイル、DBとしらみつぶしに見ていったのですが、定義していないメソッド「map」についてのエラーが出てしまうのでお手上げでした。また、画像テーブルのimageカラムがストロングパラメータで許可してもらえず、商品の情報は登録されても、画像データはNULLになってしまっていました。

解決した方法

image.rb 下記の記述から

    mount_uploaders :image, ImageUploader

↓sをとる（単数形にする）

     mount_uploader :image, ImageUploader

出品機能を作っている最中にsが紛れ込んでしまったようです。

今回のエラーは、自分がスクールで一番信頼するメンターのおかげで解決できました。
他のメンターは、自分で解決できなそうと判断すると、大して頑張らずにごまかしながら通話を終了させることが多いです。
ただし、信頼できるメンターはご自身で考えられる可能性を全て試していき、何時間かかっても絶対諦めずに解決法を一緒に探してくれます。
その姿勢に感動しましたし、そのような責任感あるエンジニアにならなければいけないと実感しました。

本日やっと商品出品の大枠は完成しました。（ちょうど3週目が終わりました）
自分のせいで進んでない部分もあったので、今は久しぶりにホッとしています。
細かな修正や合体作業が残っているので、まだ気は抜けませんが、あと1週間駆け抜けます。

undifind method image_will_change!エラー

81日目です。
私もチームメンバーも初めて見るエラー（undifind method image_will_change!）に遭遇したので紹介します。

原因

image_urlカラムを消して、imageカラムを追加した際に、「Image」と先頭大文字にしてしまったために発生。
imageカラムに画像を登録しようと記述していたので、このようなエラーが発生しました。

rails "undefined method '**_image will_change!' エラーの対処 【carrierwave】 - プログラミングの詰まりどころを、懇切丁寧に

解決法

カラムの名前変更で解決しました。気づいてみると大したことないエラーですが、最近初めてみるエラーも減っていたので、中々驚きました。

rails generate migration rename_Image_column_to_image

bundle exec rails db:migrate

商品の情報はproductsテーブルに、画像はimagesテーブルに登録できるようにはなったものの、画像が表示されないという状況に詰まっています、、
毎日3歩進んで2歩下がっているような感じでキツイですが、頑張ります。

Macの動きが重い時の対処法

77日目です。
チーム開発や就活準備が始まってからタブを開いてそのままにすることが増え、PCの動作が重くなったり、熱を持つことが増えてきました。
その中で有効だった対処法を紹介します。

Google Driveを消す

職務経歴書などの編集でGoogle Driveを使うのですが、これを残しておくと固まることが多いです。
文字を入力した瞬間に自動で保存してくれる便利なアプリですが、その分処理も多くなり他の動作に干渉するのかと思います。
こまめに消しましょう。

distnotedをkillする

Chromeのキャッシュを削除し、開いているアプリを全て閉じ、デスクトップも綺麗にしたにも関わらず動作が重く熱を持っていることがありました。
アクティビティモニタ※を確認すると、「kernel_task」というプロセスが60%以上、また「distnoted」というプロセスが40%以上を占めており、これが原因かと思い調べてみました。

kernel_task

機能の1つとして、CPUを集中的に使うプロセスのCPU使用率を下げるというやり方で、温度管理を助けています。つまり、kernel_taskはMac本体の温度が高く感じられない場合でも、CPUの温度が上がりすぎる原因となる状況に対処するプロセスです。CPUの温度が下がれば、kernel_taskの活動は自動的に治ります。

kernel_task の Mac CPU の使用率が高い場合 - Apple サポート

この説明の通り、kernel_task自体が悪いことをしているわけではなさそうなので、もう一つのdistnotedを調べてみました。

distnoted
調べても何者なのかはよく分からん、、、という意見ばかり。 ちなみに直訳すると「気づいた」という意味らしいです。

linuxコマンドで、マニュアルを調べられる「man」というコマンドがあるそうなので、ターミナルに打ち込んでみました。

$ man distnoted

distnoted provides distributed notification services.

There are no configuration options to distnoted.  Users should not run

訳： distnotedは、分散通知サービスを提供します。 distnotedに設定オプションはありません。ユーザーは実行しないでください

分散通知サービスが具体的にどのようなサービスなのかは不明ですが、「disnoted」を終了する（=kill）することで直るとのことだったので、ターミナルで下記を実行しました。

$ killall distnoted

すると、kernel_taskも60%以上から10%以下に下がり、動作も軽快、熱もなくなりました。

distnotedの怪しい挙動について | Sasukeh at Microsoft

manコマンドについて詳しくまとめました 【Linuxコマンド集】

※アクティビティモニタを確認すると、CPUの中で今何が動いて占めているかを確認できます。
アクティビティモニタはファインダー/アプリケーション/ユーティリティ/アクティビティモニタで確認できます。

昨日は体調が悪く21時に寝たら、夜中台風のありえない音で起きました、、、
今週中の必須機能開発完了が目標なので、体調早く治して頑張ります。

良いね機能実装で使ったぼっち演算子（&）

75日目です。
個人アプリにいいね機能を実装したのですが、その際エラーが起きたので紹介します。

ぼっち演算子（&）とは

Ruby2.3以降で使えるようになったメソッドで、メソッドに続けて記述すると、そのメソッドがnilでなかった場合のみ右辺のメソッドが実行されるようにする。
膝を抱えて座っているように見えることから「 lonely operator（ぼっち演算子）」または「safe navigation operator」などと呼ばれる。

実装したアプリ

ログイン前
・詳細ページからいいね数を見ることはできますが、いいねボタンをクリックするとログインページに飛ばされます。

Image from Gyazo

また、マイページからその人がいいねした投稿一覧ページにも飛べるようにしました。

Image from Gyazo

ログイン後
・詳細ページからいいねを押す/取り消しができます。

Image from Gyazo

実装方法と注意点

ProgateのRails10章（いいね機能の章）をやりながら個人アプリにも同じことを実装したので、興味ある方はProgateの同じ章をやってみてください。

Ruby on Rails5 | プログラミングの入門なら基礎から学べるProgate[プロゲート]

ただ、本家と（かつ私の作ったアプリとも）一つだけ大きく異なる点があります。

本家「Twitter」
・ログインしていなくても投稿一覧やそれに紐づくいいね数は見ることができる

Progate「Tweetapp」
・投稿や投稿に紐づくいいね数さえログインしていないと見られないようになっている

そのため、全てProgate通りに実装すると、ログインしている状態では問題ありません。
ただし、ログアウトした状態で投稿詳細ページに飛ぼうとするとエラー「NoMethodError in Posts#show undefined method `id' for nil:NilClass」が出ます。
これは、Posts/show.html.erbにおいて、下記の記述をしていることが問題のため起きています。

<% if Like.find_by(user_id: current_user.id, post_id: @post.id) %>

ログインしていない状況のため、「current_user.id」の「id」が、likesテーブルのどのuser_idのレコードを参照すれば良いか判断がつかない状況になっているからです。
そこで、冒頭に出てきたぼっち演算子「&」を追記することでエラーが解決します。

<% if Like.find_by(user_id: current_user&.id, post_id: @post.id) %>

チーム開発2週目が終わりました 。
本日の2回目のスプリントレビューでは、毎日のスクラム報告フォームで下記の項目が全員100%であったことを評価してもらいました。

  1. チーム開発最初に決めたルールが守れていること。
  2. メンバーが時間通りにきていること。
  3. 心理的安全性が保たれていること。

メンター曰く、「技術力は高いけど変なプライドを持っている人がいるチームより、技術力は低いけど本質的に仲の良いメンバーが揃ったチームの方が良いプロダクトができるし、結果的に満足度も高くなる」とのことでした。

ただし、自分のタスクを抱え込んでしまっていたこと、自分のタスク（商品出品）が大きな部分なので優先度高く実装するべきだったことは課題として指摘もらったので、3週目は改善して行きます。

jQueryを食わず嫌いしていた話

73日目です。
昨日までの私はjQueryを食わず嫌いしてました。カリキュラムで少し触りましたがよく分からず、個人アプリでは記事をパク、、参考にしてモーダルを表示するのに使っていただけでした。
しかし、Progateで基礎からやり直したところ、意外なほどすんなり入ってきて簡単に個人アプリに追加できそうだったのでやってみました。

※モーダルの作り方に興味のある方は下記の記事をご覧頂ければと思います。

モーダル3分クッキング（jQuery） - tattaka_s’s blog

jQueryとは

ブラウザ用のJavaScriptコードをより容易に記述できるように設計されたJavaScriptライブラリ（便利な機能や使いやすくしたもの）の一つ

jQuery - Wikipedia

実装したアプリ

「Plolike」という文字にカーソルを乗せると消えていた文字が浮かび上がり、カーソルを退けると文字が消えるようになっています。

Image from Gyazo

実装方法

HTML

    <h1 id="app">Plolike</h1>
    <h1 class="message">Let's like Programming more!!<br>Enjoy Prolike!!!<br>プログラミングを学習する人<br>全てを応援します</h1>

jQuery

  <script>
    $('#app').hover(
      function() { //カーソルが「Plolike」に乗った時に
        $('.message').fadeIn(1000); //メッセージが1秒でフェードインする
      },
      function() { //カーソルが「Plolike」から離れた時に
        $('.message').fadeOut(); //一瞬でフェードアウトする
      }
    );
  </script>

以前も書きましたが、jQueryを読み込むためには、一つやることがあります。
application.html.erbの中の「」の中に、下記を記述します。
この時注意しなければならないのは、全てのJavaScriptの記述より上に書くことです。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

※バージョンが変わるかもしれないので、こちらのサイトの「3.x.snippet」の記述をコピーして下さい

https://developers.google.com/speed/libraries/#jquery

SCSS

.body {
  text-align: center;
  width: 100%;
  #app {
    color: #99CC00;
  }
  .message {
    display: none;
    color: black;
  }
}

ようやく自分の担当箇所のトップページ一覧表示の目処がつきそうですが、もう一つ担当している商品出品機能は苦手なJQueryやJavaScriptのオンパレードです。今基本からやり直してなんとか理解できそうなので、明日もめげずにやっていきます。

ER図をgem「rails-erd」で作成してREADMEに入れ込む方法

71日目です。
個人アプリのER図をgemで作成してREADMEに入れ込んだのですが、少し躓いた点もあったので、紹介します。

そもそもER図とは

ER（Entity Relationship）は「実体関連モデル」と呼ばれている。 主にデータベースや情報システムでデータを編成するときの設計図として使われている。

カリキュラムでメルカリのクローンサイトを作成する際にも、まずチームメンバー全員でER図を作成てデータベースの関係性を把握するのに役立てました。

参考：
【図解あり】初心者向け！ER図とEER図の基本とツールの選び方 | Cacooブログ

そもそもREADMEとは

READMEとは、アプリケーションソフトなどに添付される、そのソフトに関する使用法や注意事項などが記されたファイルの名称である。 ソフトウェアの製作者側としてはユーザーに最低限読んで欲しい内容が記されており、そのためファイル名として「読んでください」という意味の「README」が用いられることが慣わしとなっている。

未経験からの転職活動で、企業の担当者様が唯一きちんと目を通してくれる場所とも言われているので、大切にすべき部分だと思います。

参考：
Readmeとは リードミー： - IT用語辞典バイナリ

ER図の作成から保存まで

macでの流れを説明します。
ターミナル
まずはgraphviz（グラフビズ）というグラフ作成ツールをHomebrewからインストールする必要があります。

brew install graphviz

次にGemfile（development以下）に記載

group :development do
  gem 'rails-erd'
end

ターミナルで下記コマンドを実行

 bundle install
bundle exec erd

これでRailsファイル内に「erd.pdf」というファイルができます。
「erd.pdf」をテキストエディタで開くと、下記のように文字化けして表示されます。

f:id:tattaka_s:20191003091851p:plain

そのため、私は下記のようにして開き、保存しました。

  1. 「erd.pdf」を右クリック
  2. 「ファインダーで開く」を選択
  3. ファインダーにて「erd.pdf」をクリック
  4. 表示されたER図をスクリーンショット（command + シフト + 5）

上記によって、下記のようなER図を保存できました。

f:id:tattaka_s:20191003093102p:plain

参考：
【Rails入門】Rails ERDでER図を自動作成しよう！オプションも網羅 | 侍エンジニア塾ブログ（Samurai Blog） - プログラミング入門者向けサイト

READMEに添付するまでの流れ

GitHubのリポジトリから、issuesを選択し、右にある「New issue」を選択します。

f:id:tattaka_s:20191003093623p:plain

保存していたスクリーンショットをコメント欄にドラッグ&ドロップします。

f:id:tattaka_s:20191003094020p:plain

すると、URLを生成してくれるので、これをコピーしてREADMEに貼り付ければ完了です。 （同じ要領でGIFなども貼り付けられます。）

参考：
【GitHub】README.md に画像を表示させる簡単な方法 - Qiita

本日はチーム開発2週目の2日目でした。
ドラッグ&ドロップを使った画像アップロードに苦戦中です。
明日には解決したい。。

個人アプリ　学習時間削除機能を追加実装

70日目です。
9日前の個人アプリ発表時には「最低限は実装できたな〜」と感慨に浸っていたのですが、その後気づいちゃいました。 「あれ？学習時間のリセット機能ついてないから、新しく目標立てて学習記録をしたいならアカウント作り直さなきゃいけないじゃん、、、」と。

そんな不便なアプリは使えないので、追加で削除機能をつけました。

実装したアプリ

Image from Gyazo

削除するためのコード

records_controller.rbに追記

def destroy
    records = Record.where(user_id: current_user.id)
    records.destroy_all
    redirect_to action: :index
end

内容：

  1. 現在ログイン中のユーザーのデータをRecordテーブルから全て持ってきて、変数recordsに代入
  2. 「destroy_all」メソッドで変数recordsに入っているデータを全て削除
  3. records/index.html.erbにリダイレクトする

records/index.html.erbに追記

<%= link_to "学習時間リセット", "/users/#{request.url[28, 1].to_i}/records/:id", method: :delete %>

躓いた点

最初、「学習時間リセット」ボタンを押しても学習時間が削除されず、画面だけ元のページにリダイレクトする、という現象が起こっていました。
その時のdestroyアクションの記述は下記のように記述していました。

def destroy
    records = Record.where(id: current_user.id)
    records.destroy_all
    redirect_to action: :index
end

最初はよくわからず放置していたのですが、Ransackによる検索機能が実装できた後に再度取り組んでみたところ、「 binding.pryで調べればいいじゃん」と浮かび、下記で調べました。

  def destroy
    records = Record.where(user_id: current_user.id)
    binding.pry
    records.destroy_all
    redirect_to action: :index
  end

From: /Users/shimizutakaaki/projects/prolike/app/controllers/records_controller.rb @ line 24 RecordsController#destroy:

    22: def destroy
    23:   records = Record.where(id: current_user.id)
 => 24:   binding.pry
    25:   records.destroy_all
    26:   redirect_to action: :index
    27: end

[1] pry(#<RecordsController>)> records
  Record Load (0.3ms)  SELECT `records`.* FROM `records` WHERE `records`.`id` = 5
  ↳ app/controllers/records_controller.rb:24
=> []

何も取ってこれてないやないかい、、、
ここでデータベースを確認したら、原因が分かりました。

user_idが5のレコードはそのままで、record（学習時間）のidの5番が削除されていました

destroyアクションで「records = Record.where(id: current_user.id)」としていたため、user_idではなくidから取ってきてしまっていたんですね。。
idをuser_idに変更したら、無事リセットされるようになりました。

  def destroy
    records = Record.where(user_id: current_user.id)
    records.destroy_all
    redirect_to action: :index
  end

所感

やはり、調べてもよく分からなかったら一度寝かして見るというのは意外と解決に繋がると再認識しました。 またDBからデータを持ってくる際は、「このコードでどこのカラムのデータを持ってこれているか？」をしっかりと考えた上で実装することが大切だと感じたので次に活かします。

参考にしたサイト：

【Rails入門】データを削除する方法（destroy/delete）を確認しよう | 侍エンジニア塾ブログ（Samurai Blog） - プログラミング入門者向けサイト

本日はチーム開発2週目の初日で、本格的にサーバーサイドを触り始めました。
DBのimage_urlカラムに入っているデータをビューで表示できずに終わってしまったので、早めに解決できるよう動きます。