スプレット演算子 新しいオブジェクトや配列を複製するときや、更新する時に便利 ## 更新 const params = { complete_date: { start: 'aa', end: 'bb'}, due_date: { start: 'aa', end: 'bb'} } const newParams = {...params, complete_date: { start: 'cc'…

setSateの理解の重要性 stateを更新すると再レンダリングが走る 再レンダリングが走ると、マウント、update（ライフサイクル）が走る useEffect内の処理が走るためその中にデータ取得の処理があればロジックの理解に大切 setState 丁寧な書き方 setStateは s…

Extractとは？ リテラル型で一部だけ利用したい場合に利用できるみたい 下記の様なリテラル型があったとする type KeySelect = 'user_type' | 'user_id' | 'start_date' | 'end_date'; どの中で、user_typeとuser_idだけ利用したい場合下記で型づけが可能 Ex…

Rrdisの状態確認を確認する方法を学ぶ 以前別の記事を作成して、Redisでバックグランド処理を実行する流れを検証していたけど、 実際に動いているのか確認したかったの方法を調べた blog.hatena.ne.jp 結論 cliコマンドを利用して確認する cliコマンド qiita…

内容 clearIntervalが何をしているのかわからなかった 結論 別画面に行く時にsetIntervalをクリアしてくれる コード これは6秒ごとに triggerGetData関数を実行していて、 別画面に行く時、つまりコンポーネントがアンマウントされた時に、 clearIntervalし…

知りたかったこと Redisを活用したバックグラウンド処理の管理 結論 下記のフローを理解してると良さそう キューにタスクを追加 (lpush): バックグラウンドプロセスでタスクをポーリング: タスクを処理する関数を呼び出す また、Redisの基本的な特徴も把握し…

sessionに何がはいいているのか確認したい時 to_hashメソッドで行ける session.to_hash => {"session_id"=>"id id id id id id id id id"} 参考記事 qiita.com

事象 秒まで選択しなくてはいけなくなる やりたいこと 秒を消す 解決策 valueに分までの初期値を渡して上げる <%= form.datetime_field :record_at, value: Time.zone.now.strftime('%Y-%m-%dT') %> 参考記事 blog.aiandrox.com

datetime 初期値方法 下記のどちらかで行けるみたい t.datetime :created_at, default: DateTime.now t.datetime :created_at, default: -> { 'NOW()' } 注意点 確かpostgresじゃないと上手く行かないなどのDBに依存する様な気がしました。 参考記事 qiita.c…

やりたいこと テキストエリアにカーソル位置で文字を挿入する 実装に関しては参考記事とてもわかり易いので参考にしてください ポイント 下記の2つのメソッドの使い方を理解する必要がある - selectionStartメソッド - substrメソッド selectionStartメソッ…

Rails 時間の扱いについて 対象の読者 時間を扱うときに、毎回時間に時間に関して調べてしまう人向け 要点 下記の2点だけ理解しておけば今後は迷わなくなる 時間に関するデータ型は2つ、datetime（年日時間） date型（年日） 月日はDateクラスだけ 年月日時…

form_forのパスの予測変換 仕組み form_for model の modelが、persisted?かどうかで patchにするか postにするかを判定している様子 挙動を確認 formタグの method="post" の箇所がputなどになるのかと思ったら、 <input type="hidden" name="_method" value="patch"> のhiddenフィールドが入っていた。

時間表示を確認する zoneをつけると、現地の現在時刻を表示する ## 8時間ずれる [27] pry(main)> Time.now.to_s => "2021-03-22 02:26:49 +0000" ## 現在時刻 [28] pry(main)> Time.zone.now.to_s => "2021-03-22 11:26:53 +0900"

react hookの理解 正直、新しい書き方が多くてしんどい カウンターアプリを作成 createSlice 一括で、reducer、actionなどを作成できるらしい ## 定義 const counter = createSlice({ name: 'counter', initialState: 0, reducers: { incrementCount (state,…

参考記事 medium.com 導入 近年ではフロントエンドエンジニアが扱う技術が複雑になっているのでロードマップを書いたよ 学ぶべき事1 webがどう動いているのか？ インターネットってなにか？ インターネットはどうやって動いているか？ ブラウザーはどうやっ…

現象 yarn startをすると、jsxをreact-jsxに変換してしまう 立ち上げると下記のメッセージがでて、tsconfigを修正しても、ovverrideしてしまう The following changes are being made to your tsconfig.json file: - compilerOptions.jsx must be react-jsx …

要約対象記事 byrayray.dev 1 なぜから始めよう このプロジェクトの目的を明確に。 練習で作成なのか？なにかの課題を解決したいのかなど。 この記事では「天気のアプリ」を想定していました サンプルとして、 雨の日を予測したい、天気を知りたいなどの課題…

ポイント canvasタグはcontextオブジェクトを持っていてそれらを操作する イベント canvasのオブジェクトを操作するメソッドを覚える サンプル これは、canvasタグを使ってつくりました。 実装の内容は、画面をクリックしたら図形がでてくると言う仕様です。…

なんでBEMにするひつようがあるのだろうか？ htmlをこんな漢字に書く。 これだと冗長に見えるけどcssを書くときにネストしてあげる .notification-modal .notification-modal__header 通知一覧 .notification-modal__content アンパサンドで書くと結構わかり…

ポイント fontawsome css 疑似要素 実装 html css html %i.far.fa-bell.have-notification css .have-notification:after { content: "●"; font-size: 10px; position: absolute; right: 11px; top: 26px; color: red; } 疑似要素でまるを作って、positionで…

ポイント fontawsome css 疑似要素 実装 html css html %i.far.fa-bell.have-notification css .have-notification:after { content: "●"; font-size: 10px; position: absolute; right: 11px; top: 26px; color: red; } 疑似要素でまるを作って、positionで…

環境 aws docker rails rds（postgres） dropを実行したらエラーが RAILS_ENV=production bundle exec rake db:drop rake aborted! ActiveRecord::ProtectedEnvironmentError: You are attempting to run a destructive action against your 'production' da…

エラーの内容 `resolve_symbol_connection': 'development' database is not configured. Available: ["default", "database", "password", "host"] (ActiveRecord::AdapterNotSpecified) 背景 dockerでrails mysqlで構築していた際に、このエラー 原因 <

挙動確認 メソッドに、{}か do endが渡されていれば block_given?はtrueになる def check if block_given? puts "Block is given." else puts "Block isn't given." end end check{} #=> Block is given. check #=> Block isn't given. サンプル 渡されたブ…

link_toの引数に値を渡すだけ <%= link_to "登録", new_company_registration_path(ref: "root")%> こんな感じでリクエストを送ってくれる http://localhost:3000/company_registration?ref=root コントローラー側でパラメーターを受け取れる [1] pry(#<Companies::RegistrationsController>)> pa</companies::registrationscontroller>…

link_toの引数に値を渡すだけ <%= link_to "登録", new_company_registration_path(ref: "root")%> こんな感じでリクエストを送ってくれる http://localhost:3000/company_registration?ref=root コントローラー側でパラメーターを受け取れる [1] pry(#<Companies::RegistrationsController>)> pa</companies::registrationscontroller>…

link_toの引数に値を渡すだけ <%= link_to "登録", new_company_registration_path(ref: "root")%> こんな感じでリクエストを送ってくれる http://localhost:3000/company_registration?ref=root コントローラー側でパラメーターを受け取れる [1] pry(#<Companies::RegistrationsController>)> pa</companies::registrationscontroller>…

こんな感じに 前提情報 Productモデルにname, email, ageカラムを作成 presece: trueのバリデーションを設定 修正内容 1.エラーを表示するパーシャルを作成 2.パーシャルに引数を渡す。（attributeは :nameなどの項目の情報が入っています。modelには produc…

仕組み webhookとは？ qiita.com この記事を参考にすると、外部のサービスを、指定のエンドポイント（url）を叩くと利用できると言う事らしい（さらっと読んでるので、違うかも） 通常外部のサービスをAPI利用する場合、tokenやkeyを取得してできるけど、 ur…

イベントに監視を渡すとき 式展開で渡すと.setStateするときに、thisがundefinedになりエラーになる handleLogin() { this.setState({loggedIn: !this.state.loggedIn}) } <Botton onClick={this.handleLogin}}>ログイン</Botton> 対処方法 対処方1 thisをbindする <Botton onClick={this.handleLogin.bind(this)}>ログイン</Botton> 対処方法2 即時関数で実行する <Botton onClick={() =></botton>…