20210129_アウトプット（オリジナルアプリ「セルフコンパッション」のページ/「習慣カウント」のページ）

アウトプット画像

1/29行ったこと　9時間20分

セルフコンパッションのページ…3時間25分
👉ついに機能が出来た！✨
習慣カウント（イフゼンルール）のページ…5時間55分
👉カレントユーザーの、カテゴリー別にカウントして表示する部分まで出来た！

新しい発見

「悩み」と「励まし」をつぶやく機能

つぶやけるようになった

ついに朝できた！！！（嬉しかったー）

（１）クエリセレクターで選択するIDにタイポがあった。
（２）下記の記事を見て、checkedはやっぱり必要なのかと思い行ってみたところ成功した。

stackoverflow.com

これで出来た♪.checkedを付け加えることによって、選択している状態を条件分岐にできると理解。

（省略）
if(document.querySelector("#trouble_message_type_trouble").checked) {
（省略）
} else (document.querySelector("#trouble_message_type_encouragement").checked)
（省略）

日本時刻に直す

まず

（１）application.rbの編集
（２）ja.ymlファイルを作成
（３）l（エル）メソッドをビューにいれる

を行った。

（１）`application.rb`の編集

【config/application.rb】
module ActionApp
  class Application < Rails::Application
    # Initialize configuration defaults for originally generated Rails version.
    config.load_defaults 6.0
    config.i18n.default_locale = :ja　←⭐️追記
    config.time_zone = 'Tokyo'　　←⭐️追記

（２）`ja.yml`ファイルを作成

config/localesディレクトリに「ja.yml」というファイルを作成する。
下記を追記する。サーバーを再起動する。

【config/locales/ja.yml】
ja:
  time:
    formats:
      default: "%Y/%m/%d %H:%M:%S"

（３）l（エル）メソッドをビューにいれる

l（エル）メソッドは、日付や時刻を表示するRailsのメソッド。
国や地域によって時刻は異なるが、lメソッドを使えば指定した現地時間に対応できる。

  <div class="post-date">
   投稿日時：<%= l trouble.created_at %>  ←⭐️「l（エル）」を追記
  </div>

JavaScriptの実装どうしよう

ここまではよかった。
苦労したのは、JavaScriptでinsertAdjacentHTMLで挿入している投稿の部分。「l（エル）メソッド」使おうするとエラーでる（html.erbではないから仕方ないか）
結局「T」が気になるけど、sliceメソッドを使って19文字だけ表示させることにした。

        <div class="post-date">
          投稿日時：${item.created_at.slice(0,19)} 　←⭐️追加した部分
        </div>

スライスメソッド

デプロイ時した後、日本語対応について追記が必要と学ぶ

日本語対応にするja.ymlを作成したことによって、新規登録時の生年月日date_selectのテンプレートエラーになってしまうことがわかった。
下記の記事を参考に、ja.ymlへ追記したらエラーは解消した。

qiita.com

習慣カウントのページについて

カテゴリー別のビューを先に作った。
Neumorphism可愛いなと思ったので、取り入れてみた。
その丸みと合わせて、統一感を出せるよう「セルフコンパッション」のページも同じ丸みにした。

neumorphism.io

どうやってカウントしたものを表示させたらいいか？

チェックボックスは出来たものの、「カレントユーザー」かつ「チェックしたもの」のデータを取り出す方法で時間がかかった。
なるべくN＋1問題を解消するためにincludesを使いたいが、カレントユーザーと絞ろうとすると上手くいかない。
色々悩んだ結果、

【ビューに書いたこと】
（省略）
<%= "通算#{Habit.where(user_id: current_user.id).where(count_1: 1).count}回" %>
（省略）

上記にて、まず数字が取れるようになった！！！

その上で、カテゴリー別に５個ずつ書いてあったので、もっとリファクタリング出来ないだろうか？と考えたところ、

【コントローラーに書いたこと】
（省略）
def index
　@user = Habit.where(user_id: current_user.id)
end
（省略）

【ビューに書いたこと】
（省略）
<%= "通算#{@user.where(count_1: 1).count}回" %>
（省略）

少しだけごちゃごちゃしていたのがスマートになった。

習慣カウントページ

良い継続をカウントする機能の他に、良い継続が切れてしまったけれど再開できた回数もカウントしたいと思っていた。（そうすれば、ちょっと途切れてしまって残念な気持ちのまま諦めてしまうのではなく、また継続を再開しようと前向きな気持ちになれると思ったため）
後、どうやったらユーザーの入力の手間を省けるか？？というのを考えた。（ユーザーインタビューの時に、習慣が途切れてしまう理由の一つに「手間がかかる」があったため。「手間」減らしたい・・。）
習慣をカウントする方は、予め「✅」をつけておく設定にして、習慣が途切れてしまったけれど再開する方は「デフォルトの✅なし」にして、「SAVE」というサブミットボタンを押せば、カウントを記録できるようにした。

感想

オリジナルアプリを作っていて、データベースからのデータの取り出し方に関する知識がまだまだ足りないと思っている。
ログをみて、もうちょっとデータベースへのアクセス回数減らして、時間を短くできないだろうか？と思うものの、メソッド等を使いこなせておらずエラーになってしまう。
アットコーダーなどのもっとRuby本体の仕組みをいろんなパターンで学べるものや、SQLの知識も今後深めていきたいなと感じた。
嬉しかったことは、苦しいなと当時は分からず悩んでいたけれど実装できるようになったことがその後の実装でもいきたこと。具体的に言うと、セルフコンパッションのページで学んだradioのenumを学んだことによって、「習慣カウント」のform_with型をどうしようか（ラジオボタンか、チェックボックスか）考え直すことが出来た。こういう経験値で選択肢を増やせることをもっと増やしていきたいな。

覚書（12/29計画の見直し）

（１）やるべきこと（２）やりたいこと（３）やれること

（１）やるべきこと

卒業要件の完成

（２）やりたいこと

追加実装を学ぶためのミニアプリ作成
オリジナルアプリの作成
PHPの勉強
面白そうだから参加したい・見たい（済：やめ太郎さんのキータ表彰・yahooイベント）
読書

（３）やれること

メンタル：楽しみながら、ゲーム感覚でいく🎮😎

時間で区切り（達成すればよし）

1日　15分以上勉強する

追加実装のミニアプリを作り、引き出しを増やす

優先順位	内容（機能）	締め切り	達成度
1	AWS S3	12/18	完了(フリマアプリ)に実装)
2	AWS EC2	12/24	完了(フリマアプリに実装)
3	ウィザード形式	12/27	完了
4	SNS認証	12/28	完了
5	複数条件検索	12/29	完了
6	タグ付	12/31	完了
7	画像プレビュー	1/2	完了※フォーク
8	複数枚写真OK	1/4	完了※7に追加実装
9	コメント機能(即時更新)	1/8	完了
10	クレカ登録	1/10
11	パンくず	1/14	完了
12	日本語エラー	1/18

身に付ける力（直近）

PHP7
Docker

身に付ける力（ゆくゆく・覚書）

ドメイン駆動開発
環境構築
環境変数などのOS知識
バージョン対応力
データベースをインポートする力・エクスポートする
GitHubActions×OpenAPIGenerator（APICilent）

1/29行ったこと 9時間20分