git rebase の使い方 [git rebase]の存在は、知っていたが実際に使ったことがなかったので、備忘録としてこちらにまとめます。 誤ってローカルの作業ブランチをリモートのmasterブランチにpushしてしまい、且つローカルのコミットメッセージが誤っていたが、…

apiのrspecを記載する時のjsonの記載方法を備忘録としてまとめます。 rspecでapiをリクエストする際に以下の記載にするとidの数値が文字列になってしまう。 spec/requests/〇〇_spec.rb let(:headers){ { 'Authorization' => "Token token=\"#{admin.authent…

Vueで複数の要素が同時に消える時のトランジションについて備忘録として、こちらにまとめます。 以下のようなコードがある時に、[item2]と[item3]が消えてトランジションする時の動きが意図しない動き方になる。 <div id="app"> <button @click="removeItems">アイテムを削除</button> <transition-group tag="ul" class="list"> <li v-for="item in items" :key="item.id"> {{ item.name }} </li> </transition-group> </div>…

Vueのコンポーネント間での双方向データバインディングについて備忘録としてまとめます。 コンポーネント間で双方向データバインディングする際の例は、以下になります。 <div id="app"> <my-calendar v-model="date"></my-calendar> <p>選択された日付: {{ date }}</p> </div> Vue.component('my-calendar', { template: ` <div> <input type="date" @input="updateDate($event.target.value)" :value="value"> <…</div>

Vueのスロット機能について、備忘録としてこちらにまとめます。 親コンポーネント側から子コンポーネントに一部を差し込む機能がスロット 親コンポーネント側から子コンポーネントに一部を差し込む(slotタグ有り) <div id="app"> <comp-child> フォールバックコンテンツ </comp-child> </div> Vue.componen…

値渡しと参照渡しについて、備忘録としてまとめます。 [値渡し] 値渡しは、変数の値をそのままコピーして渡す方法 プリミティブ型（例えば、数値、文字列、真理値など）は、通常値渡しされる。 let a = 5; let b = a; // bにaの値がコピーされる b = 10; con…

Vueでv-on:click.nativeを使う時とnativeが不要な時を備忘録としてこちらにまとめます。 [v-on:click.native を使うケース] 子コンポーネント Vue.component('child-component', { template: '<button>クリックしてみて</button>' }); 親コンポーネント new Vue({ el: '#app',…

Vueで親コンポーネントへdataの値を渡す方法について備忘録としてこちらにまとめます。 Vueのインスタンスをグローバル登録した際にdataプロパティの値を親コンポーネントに渡す方法は、以下の2つになります。 1つ目 <div id="app"> <my-component v-bind:list="list"></my-component> </div> Vue.component('my-component', { tem…

Vue.jsのカスタムディレクティブのフックの違いについて備忘録として、こちらにまとめます。 Vue.jsのカスタムディレクティブのフックには、以下の6つがある。 bind inserted update componentUpdated unbind それぞれのフックのタイミングは、以下のように…

Vue.jsのwatchでのnewValとoldValの参照について、備忘録としてまとめます。 watchの中で、変更後の値と古い値を参照できるが、参照する際に気をつけないと、古い値と新しい値が同期してしまう。 具体的なイメージを掴むために、以下に具体的なコードを示し…

Vue.jsのimmediateオプションの挙動について、備忘録としてまとめます。 immediateオプションをtrueにすると、初期化時に呼び出される。 以下に挙動を具体的にイメージするためのコードを記載します。 <div id="app"> <button v-on:click="change">チェンジ</button> <p>{{ watchTarget }}</p> </div> [wachを定義(immediateオ…

Dockerでmysqlのイメージのバージョンを8.0から5.7.44に下げたらmysqlのコンテナが立ち上がらなくなってしまった。 Docker Desktopを確認すると以下のような状態であった。 gyazo.com Docker Desktopのmysqlコンテナのログを確認すると以下のようなエラーが…

Vueのv-bind:valueとv-bind:value.propの違いが分からず、 それを理解するのにHTML属性とDOMプロパティの違いを理解する必要があったので備忘録として、記載します。 [v-bind:value] HTML属性のバインドを行う [v-bind:value.prop] HTML属性ではなくDOMプロ…

Vueを勉強している時にライフサイクルフックの違いで少し悩んだので、調べたことを備忘録として記載します。 Vueのライフサイクルフックには、主に以下の8種類があります。 beforeCreate 説明: インスタンスの初期化直前に呼ばれます。この時点ではデータや…

正規表現の使い方 正規表現で便利なものや、使い方が複雑なものを備忘録としてまとめます。 キャプチャグループ [1] pry(main)> '123456789'.gsub(/^(\d{3}).*(\d{5})$/, '\1\2') => "12356789" # キャプチャ: ()で括るとその部分がキャプチャされ、キャプチ…

nextメソッドの使い方 nextメソッドの動作の認識が誤っていたので、こちらに備忘録としてまとめます。 next使うと、その要素のままでそれ以降の処理がスキップされて次の要素に移ると思っていたが、 その際は、nilになってしまう。。。 そして、returnのよう…

可読性の高いクリーンなコード記載方法 現場で1年弱働いて、可読性の高いクリーンなコード記載を学んだので、備忘録としてこちらにまとめます。 三項演算子を利用して変数に値を設定 food = 'fruit' food == 'fruit' ? select_food_type = 'フルーツ' : sele…

exitとdetachの違い % docker ps ①動いているプロセスを確認 CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES % docker ps -a ②止まっているプロセス含めて全て確認 CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES a390a72e29d7 ubuntu "ba…

class SearchController < ApplicationController def search if postal_code = params[:postal_code] params = URI.encode_www_form({zipcode: postal_code}) uri = URI.parse("http://zipcloud.ibsnet.co.jp/api/search?#{params}") response = Net::HTTP.…

VS Codeの拡張機能 VS Codeの拡張機能で詰まったことがあったので、備忘録としてこちらにまとめます。 普段Railsで開発をしている時にhtmlファイルだとEmmet機能が使えるが、erbファイルだとEmmet機能が使えず不便なので調べたところ、Ruby on Rails Snippet…

SendGridの導入 Railsの本番環境でメールを送信するようにする為には、一般的にSendGridorGmailを使います。 今回は、SendGridでメールを送信できるようにする為の方法を備忘録としてこちらにまとめます。 まずSendGridに登録します。 下記URLより新規登録が…

Rubyの演算でハマったこと 開発中にRubyの演算でとてもハマったことがあったので、備忘録としてこちらにまとめます。 下記のようなコードで具体例を示します。 ((count / cookware_capacity).ceil -1) * cooking_time + cooking_total_time [1] pry(#<CalculateCookingTime>)> coun</calculatecookingtime>…

herokuでのデプロイ herokuでのデプロイ時にエラーになり、つまってしまったので備忘録としてまとめます。 herokuデプロイ時のログは、以下のようになります。 -----> Building on the Heroku-22 stack -----> Determining which buildpack to use for this …

rubocopの設定 rubocopの設定方法がイマイチ分からず調べたので、こちらに備忘録として残します。 rubocopでは、最初からLintチェックのレベルが設定されているが特定のファイルだけLintチェックを行わないようにしたい場合がある。(特定のファイルのみどう…

外部キーにnullを入れる方法 1対多の関係で、通常通り外部キーを持つレコードと外部キーを持たないレコードがある時に外部キーにnullを入れる方法を 備忘録としてこちらにまとめます。 以下のようなアソシエーション関係のモデルがあります。 [app/models/co…

メーラーのRSpecテスト メーラーのRSpecテストでハマったことがあったので、備忘録としてこちらにまとめます。 コードは、以下のようになります。 [app/mailers/user_mailer.rb] class UserMailer < ApplicationMailer # Subject can be set in your I18n fi…

ビューファイル毎に読み込ませるjsファイルを変えたい ビューファイル毎に読み込ませるjsファイルを分ける方法を自分の備忘録として、こちらにまとめます。 Railsでは、アセットパイプラインによりマニフェストファイルからアセット(CSSファイルやJSファイル…

RSpecでセレクトボックスの選択文字を出力する方法 RSpecでセレクトボックスの選択文字を出力する方法を自分の備忘録としてこちらにまとめます。 以下のようなセレクトボックスがあります。 <select class="search-select-form" name="q[fish_kind_eq]" id="q_fish_kind_eq"> <option value="">魚の種類(必須)</option> <option value="アジ">アジ</option> <option value="マメアジ">マメアジ</option> <option value="イカ">イカ</option></select>

指定した時だけバリデーションを実行したい 開発をしているタイミングでバリデーションを実行したい時と、バリデーションを実行したくない時が発生したので、こちらにまとめます。 コードは、以下のようになっています。 [app/models/user.rb] class User < …

sorcerygemのパスワードリセット機能の修正 sorcerygemのパスワードリセット機能で、以下の2点の不具合がありこれを修正するのにとても手こずったので、備忘録としてこちらに残します。 ・[パスワードの欄]を空欄で[パスワード再確認の欄]のみを入力した場合…