Torihaji's Growth Diary

Little by little, no hurry.

2025-01-01から1ヶ月間の記事一覧

Error: Objects are not valid as a React child (found: object with keys {~~~}). If you meant to render a collection of children, use an array instead.って何。

はじめに やけに長いタイトルですね。 よくあるReactのエラーです。 ネットで調べたらすぐ出てくるかと思いますが。 わざわざ記事にしなくてもいいかもと今になって思います。 結論 「あんた、Objectをレンダーしようとしてるけど、できまへんで。」 という…

Next.jsの環境変数は本当にprefixをつけるかつけないかで参照範囲が変わるのか

はじめに 公式が言っていることを検証してみようの会です。 Basic Features: 環境変数 | Next.js 検証 pages router、typescriptで Next.jsのアプリを作成してあること前提で行います。 pages配下に下記を記載 pages/hoge.tsx export default function Hoge(…

2025年1月の振り返り(実務 6ヶ月目)

はじめに みなさん、おはようございます、torihaziです 本日は1月最終週間近ということで いつも通り月の振り返り記事を書いていこうと思います 早いところもうすでに2025年の1 /12が終わろうとしています。 常に何ができるかできるようになったのか、できな…

Railsのbuildとかcreate!の引数に文字列は渡してはいけません。

はじめに しっかり理解してればつまらないこと。 これを機に理解しました。 前にもやったことがあったのでエラー文見てピンときました。 戒めのためです。 現場 tweet = current_api_v1_user.tweets.create!(tweet_params[:content]) と書いたら #<ArgumentError: When assigning attributes, you must pass a hash as an argument, String passed.> と言われ</argumenterror:>…

Railsのログにおいてあるカラムの値がFILTEREDで表示されない

はじめに 現在、フロントエンドからS3に対して presignedURLを通じた ファイルアップロードを試みています。 成功後は あらかじめ生成した s3のkeyをbackendにPostして DBにインサートしています。 そこでRailsのログを眺めていたところ 先ほどの keyはただ…

Rails の buildとnewの違い

はじめに そういえば意外にわかってなかったことを書き連ねていきます 最初は動くものを作る!というモチベで全速力で駆け抜けていたため 最近いざコードを読んでいって「おや?」と思うことが増えてきました。 そうした不足分を都度補っていこうかと。 buil…

Railsのcredentials.yml.encとmaster.keyの関係について

はじめに タイトルのことで今日、詰まりました。 なんかわかっていなかったので書き残しています。 credentials.yml.enc こいつは秘密情報で暗号化されたものである。 rails new で作成される。 暗号化されているので、githubにpushしても問題ない。 複合す…

Next.jsとRailsのアプリでdevise-token-authを使ってEメールの新規登録、ログインができるまで

はじめに 現在、HappinessChainの課題でXクローンを作ってます。 そこでdevise-token-authを使って認証周りを作っていくのですが、 毎回作っていてやり方を忘れるので、前にも書いた気がしますが書き残そうと思ってやってます。 ちなみに上からやっていけば…

パスワード可視化切り替えの作り方

はじめに 新規登録画面でパスワードのinputの左に目のアイコンがあり ボタンを押したらパスワードが黒丸になって見えなくなったり、文字として見えるようになるという よくあるUIの作り方です。 実例ではshadcn/uiを使っていますが、生のhtmlでもcssいじれば…

FramerMotionのclassNameとVariantの使い分けについて

はじめに slackのtimesに閉じておくのはもったいないと思ってこっちに書くことにした 結論 variantsで指定すべきもの: アニメーションしたい値(opacity, scale, x, y など) トランジション中に動的に変化させたい値 状態に応じて滑らかに変化させたい値 cl…

チャットアプリによくある吹き出しの作成例

はじめに 新年1発目です どういうものか LINEとかによくあるやつです。 アイコンがあって、会話の本文があって、その会話の本文からアイコンに向かって にょいっと出てるあれですね。 一例 TypeScript、tailwindcssを使っている都合上、cnとか使ってますが、…