ソースコード：Backend: Rails API、Frontend: Next.js デモページ：next-firebase-auth-sample-app 利用技術 フロントエンド Next.js TypeScript Tailwind CSS バックエンド Rails 7.0.4(API モード) 認証部分 Firebase Authent...

今朝 medium でStop Using “&&” for Conditional Rendering in Reactという記事を見かけた。 &&演算子を使った条件付きレンダーはちょうど昨日の動画教材で勉強したけど、この記事はそれを使わない方が良い理由を紹介したので、補充説明としてまた勉強になった。 &&演算子の注意点について、Reac...

Rail 7 API + React で PF を作りたいけど、関連チュートリアを探してたとき、やり方が複数あるようで、一時迷っていた。 Rails 7 で react を使う方法まとめ Rails で React を使う方法は、下記にまとめてみた。 Rails 7 デフォルトの import-map を使って React を Rails に組み込む。 ...

背景 個人 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 を使って、メールが実行待ち行列に入っていることを...