herokuにデプロイ時のエラー

Tube Benderのアプリを開発環境(ローカル)で作成し、本番環境にデプロイしようとしたところエラーが連発した。

 

rubyrailsのバージョンがherokuの対応しているものと一致していない

→作成アプリとherokuの各々のバージョンを調べ、一致させたところ解決!

※ポイント:rubyrailsのバージョンを変更するのはアプリを格納しているディレクトリのみで行う。PC内全体で変更すると、過去のアプリが影響を受けてしまうので。

Rubyのバージョンアップの方法 (Rubyのバージョンを切り替える方法) | TechAcademyマガジン

 

②bundlerのバージョンがherokuの対応しているものと一致していない

→bundlerのバージョンダウン(herokuと一致)を試みるも上手くいかず、、、

→以下のサイトの以下のコマンドを入力したところ解決!

f:id:Fujisan3776:20210525135512p:plain

HerokuへPushする際に「Failed to install gems via Bundler.」が出た時の対処法 | ゆみしん夫婦のブログ

 

URI(≒URL)がinvalidという旨のエラー

→これは恐らくですが、cleardbへのアクセスの為のURLの設定コマンド(以下の一番上のコマンド)が間違っていた。「`」ではなく、「'」と打ち込んでいたのが原因

→正しく打ち直したところ解決!

f:id:Fujisan3776:20210525135908p:plain

 

エラーメッセージを装飾する

【共有】
エラーメッセージの装飾に関して
モデルにデータを保存する際、カラムに対してバリデーションを掛ける事があると思います。
その時、表示させるエラーメッセージが編集出来る事が分かったので共有します。

①エラーメッセージ
 エラーが発生すると、html.erb内に<li calss=“error-message”>〜が出現するので、これに対してcssを適用させる。


②バリデーションに引っかかってる箇所
 エラーが発生すると、html.erb内に<div class=“field_with_errors”>〜が出現するので、これに対してcssを適用させる。これらを考慮して、エラーメッセージを赤字に、バリデーションに引っかかってる箇所を赤枠で囲うと見やすくなりました!

f:id:Fujisan3776:20201120150913p:plain

 

※参考サイト

エラー表示で意図しない改行を解消する−fieldWithErrors、ActionView::Base、field_err | DoRuby

エラーメッセージ設定時のエラー

・エラー内容

 オリジナルアプリでモデルへのデータ登録時、登録するカラム(プルダウン形式で、id番号が0のままだと登録出来ないバリデーションを設定)に対して、部分テンプレートのエラーメッセージを設定したところ、以下のエラーが出た。

f:id:Fujisan3776:20201120115136p:plain

 

・原因

 コントローラーのcreateアクションにおいて、保存処理後はshowアクションでシミュレーション結果を確認する画面に遷移する設定になっていた為。この状態ではバリデーションに反していても(データがテーブルに保存されていなくても)showアクションに飛ばされてしまい、レコードが存在しないのでid=nilとなりエラーとなってしまった。

f:id:Fujisan3776:20201120115151p:plain

 

・対処法

 保存されない=バリデーションが機能(ActiveHashのidが0では保存出来ない)した場合は、newアクション(シミュレーション作成ページ)に戻すようにcreateアクションのコードを変更した。これによりシミュレーション作成ページで「○○ must be blank」と言ったエラーメッセージで入力の不備を指摘出来るようになる。

f:id:Fujisan3776:20201120115201p:plain

 

CSSのみで動きのあるボタンを実装する

【共有】
このサイト参考になりそうなので共有します!
コードをコピペすればCSSだけで動きのあるボタンを簡単に実装出来ます!

https://www.torat.jp/css-hover-design/

【総括】10週間で600時間の学習目標は未達となりました。

テックキャンプでの10週間の活動を振り返ります。

1.概要
(1)期間

  2020年09月07日(月)〜2020年11月15日(日)の10週間


(2)実施事項

  カリキュラム履修(基礎、応用、発展、最終課題)、及びオリジナルアプリ開発

  →オリジナルアプリURL:https://education-cost-simulator.herokuapp.com/


(3)学習時間

  合計:583時間 ※平均:8.5時間/日

  →未達の要因分析は3項で行います。


(4)チーム内共有数(〜11/15)

  合計:39項目 ※自力で調べた内容を積極的にチームのslackで共有しました。

  

(5)学んだプログラミングスキル

   HTML、CSSJavaScriptRubyRuby on RailsGitHub 、heroku

  
   <アプリ開発実績>

  ・カリキュラム準拠:5つ

    「first_app」「pictweet」「chat-app」「protospace」「furima」

  ・オリジナル(完全自作):1つ

   「education_cost_simulator」 ※詳細は別記事で紹介します。


(6)その他取り組み

  ・Twitter・・・9/28〜毎日更新(その日の学習状況のアウトプット)

         →リンクはこのブログのサイドバーにあります。

  ・ブログ・・・9/27〜毎週日曜更新(一週間の振り返り、エラーの対処方法等)

         →こちらのはてなブログの事です。

  ・日記・・・9/8〜毎日更新(明日の目標とその日の振り返り)

         →https://docs.google.com/spreadsheets/d/1qwWhm4VI2zXtFqvF34V7YzqCH981Qrjj4GLPfRmFpfE/edit?usp=sharing

 

2.経験できた事

(1)プログラミングの基礎知識の習得

 フロント側とサーバーサイド側の言語、及びその周辺知識を学習し、webアプリケーションの企画から開発までの最低限の流れを一通り行うことが出来るようになりました。

 

(2)挫折

 自分の今までの学習に対する信念は「じっくり時間を掛けて理解する」でした。この信念が「スピード重視で進める」プログラミング学習においては歯が立たちませんでした。プログラミング学習は「分からなくても都度調べることが出来るから半分程度の理解で良い」と何度も心に言い聞かせても、「しっかりと理解していないと将来困るのではないか」という固定概念に囚われてしまい、心の中のギャップが徐々に広がっていきました。学習の半ば(第5周目)にはその乖離が最大となり、3日ほど放心状態になりました。

 そんな時、教室でチームメイトに心境を聞いてもらい「そう言う時は無心にサインペンで紙に今思ってることを書き出してみると心境を整理できるよ」や「この記事はプログラミング学習の参考になるよ」といったアドバイスや、「自分も少し前に同じことで悩んでいたよ」といった経験談など、色々な話を聞句ことが出来ました。チームメイトの言葉に勇気付けられたことで立ち直ることが出来ました。

 

(3)平均8時間の学習習慣

 久しぶりに学習が主体となる生活を送ることが出来ました。ここまで勉強に打ち込んだのは大学受験で浪人した時以来だったと思います。自分の性格上、一人だとすぐにサボってしまいます。テックキャンプのプログラムでは1時間に1度チームメイトとzoomでお互いの進捗を共有する機会があったのが自分には合っていたと思います。また、slackも利用していたので、チームメイトの誰がオンライン状態かも分かり、学習意欲を刺激するものとなりました。卒業後はこれらの縛りは無くなりますが、平均5時間を目標に学習時間の確保に努めたいと思います。

 

(4)チームで協力しあって物事を進めることの楽しさ

 チームメイト同士で学習して気付いた点を共有し合ったり、落ち込んだり悩んだ時に助け合ったり、時には他愛ない会話で盛り上がったり。これらは決して一人の学習では得られなかった経験です。私の所属していたテックキャンプのチームAメンバーは協調性のある方が多く、充実した時間を過ごすことが出来ました。お陰で自分も積極的に情報共有をしたり、発表会後にチーム内での発表会や打ち上げを呼びかけることが出来ました。任意にも関わらず、どちらも半分以上のメンバーに集まってもらえて嬉しかったです。

 

(5)アウトプットをすることの重要性

 テックキャンプには定期的に学習内容をアウトプットする機会がある事を上述しましたが、それとは別に個人的に新しい発見があった時は積極的にslackのチームチャンネルで共有する事を心掛けました。この実体験から感じたことは次の3点です。

①言葉にすることで、自分の頭の中が整理できる

②客観的に見て貰えることでフィードバックを貰える

③自分の考えを知ってもらえることでチームメイトと仲良くなれる

 

(6)計画を立案し、PDCAを回しながら適宜調整を加えながら運用すること

 カリキュラムの履修やアプリ開発の実施にあたり、実施事項と必要工数を考慮してガントチャートで計画を立てる事を実践しました。これにより、今自分が余裕があるのか否かが分かりやすくなり、学習以外のプライベートの計画も立てやすくなります。余裕が出来た時はマッサージを受けに行ったり、家族と過ごす時間を増やしたりする事で精神的にも落ち着いて行動することが出来たと実感しています。

 

3.目標未達の要因分析

 第8週の半ばに長男が生まれたことです(予定日より2週間ほど早く生まれてきてくれました)。学習と育児との両立の為に、学習時間を減らした形になります。

ただ、ここで主張したいのは、学習時間は減ったが学習内容に遅延は出なかったということです。この時期はオリジナルアプリの開発に入る頃でしたが、事前にアプリ開発計画を立てていました。毎日その日の実施目標を達成していれば学習は早めに終わらせても問題ないという判断をして、育児との両立を図ることで、テックキャンプ最終日の最終課題発表会までにアプリ開発と必要な資料作りを遅滞なく終えることが出来ました。目標を達成することが第一優先ですが、何か不可抗力等が生じた場合は、臨機応変にその目標を変更していく(=PDCAを回していく)ことも大事であることを実感しました。

 

4.今後について

 オリジナルアプリが最低要件しか実装できていないので、まずは完成を目指します。

その後転職活動関連資料の準びを追えたら、①転職活動、②CAD試験対策、③他のプログラミング言語の学習を並行して行う予定です。 f:id:Fujisan3776:20201122090428p:plain

①転職活動について

 どこでもいいから早く就職したいとは考えていません。まずは駆け出しエンジニア、そして駆け出しの父親として仕事と育児の両立が出来る会社への就職を目指します。

 

②CADを学習する理由

 CADは前職で実務経験があります。理系の分野ではこのスキルは汎用性が高いと考えています。ここまで自発的に動いて習得してきたスキルなので、その経験を形として残す為に12月の試験に向けて学習を頑張ります。

 

Pythonを学習する理由

 今までrubyを学習していたので、同じスクリプト言語なら互換性があり、pythonを学習することでrubyの理解も深めることが出来ると考えたからです。
 また、前職では開発部門におり、膨大な量の製品評価結果を表計算ソフトの関数を用いてグラフ化等の処理をしていました。この時の「ネット上の必要な数値の収集・グラフ化・他のファイルへの出力」を行う作業はどの分野に行っても必要になる作業と考えています。これを関数ではなくpythonを用いる事で一括で処理が出来るようになるので、今後の業務効率化の一助として身に付けたいと考えたからです。