背景 個人 PF でニュースフィードみたいな機能を作りたい。そのフィードで表示する情報は複数のモデルから獲得して、時間順や人気順で表示する。 たとえば、Facebook のタイムラインように、友達の投稿だけでなく、誕生日の通知やアクティビティ更新、イベント情報などいろんな情報を表示する。 PF ではまだ二つ種類だけの投稿を表示する予定なので、一番簡単なのは、その二つ種類の投稿モデルを一...

問題背景 Mac でデフォルトブラウザを Google Chrome に設定している。 Chrome 自体はいつも普通に使えるけど、最近は、Docker や Discord など第三者アプリ内のリンクをクリックしたら、chrome が反応しないことに気がついた。 デフォルトブラウザを Safari に変更したら、リンクは問題なく Safari から開けた。 ##　原因 調べたら、Ch...

VSCode で React の JSX コードを書いている時、HTML タグの自動補完機能が効かなくなっているので、 設定方法を調べてみた。 方法 1：VSCode の Emmet 設定でInclude Lanuguagesを追加する VSCode の設定(setting)を開き、Include Lanuguagesで検索したら、 設定画面が出てくる。 Add Itemで Item ...

UdemyでReactコースを勉強し始めて、最初からReactでよく使うJavascriptの新機能について紹介があったので、Javascriptの復習としてメモする。 変数宣言 var / const / let 結論：基本的にconstを使う。varを使わない。 一度宣言した変数を後から再代入する必要がある場合は、letを使う。 例： const name = 'Mike'; n...

読みやすさの基本定理とは コードは他の人が最短時間で理解できるように書かなければいけない。 第二章：名前に情報を詰め込む 1. 明確な単語を選ぶ メソッド名や変数名は曖昧な単語を使うより、類語辞典を使って、カラフルな単語を選んだ方良い。 例： GetPage -> FetchPage, DownloadPage Stop() -> Kill(), Res...

背景 RSpec でシステムテストする時、ログインボタンが見つからないエラーが報告された。 chrome を下記のように headless に設定している。 RSpec.configure do |config| config.before(:each, type: :system) { driven_by :selenium_chrome_headless } end エラー...

背景 RSpec でメール送信をテストする時、メールを確認できなかった。 色々検索したら、deliver_laterの影響だと気づいた。 解決案 いろいろ試して、上手く行けたのは下記の二つ方法 1. have_enqueued_mail　 matcher を使う 一番簡単な方法はhave_enqueued_mail　 matcher を使って、メールが実行待ち行列に入っていることを...

背景 仮にブログ対してのブックマーク機能をテストする。 ブックマーク関係の erb ファイル内容は下記で <div id="js-blog-bookmark-<%= blog.id %>"> <% if current_user.bookmarked?(blog) %> <%= render 'blogs/bookmarks/unb...

今回のエラーはGithub Actionsを使ったCI環境で出たエラー。 背景には、Tailwindとsassの非互換問題(incompatible)があることがわかった。 背景 Tailwindcss-railsの公式説明によると、TailwindがモダンなCSS構文を使っているけど、Sassが最新のCSS構文をまだ理解できていないため、アセットパイプラインでtailwindのcss構文...

状況 ローカルや本番で問題なく動いているけど、RSpec テストが通ったり、通れなかったりする状況があった。 test log を確認したところ、個別 example の動きがおかしくなったりしている。 Started POST "/questions/1/answer?result=good" for 127.0.0.1 at 2022-09-02 23:25:25 +0900 Pr...