Madogiwa Blog

主に技術系の学習メモに使っていきます。

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

Vue.js: `@rails/ujs`を利用した`link_to`の`method`属性によるhttp method指定を再現してみたのでメモ📝

Ruby on Railsのlink_toには、methodを指定してGET以外のリクエストを送信する機能があります。Viewを含めてフロント周りをVue.jsに置き換えるときに、この辺りの再現がネックになったのでVue.jsでの再現方法をメモ You can bind to the same Ajax events as…

Ruby on Rails: Viewを作らずにControllerからVue.jsのSFCを指定してrenderできないか試したMEMO

はじめに 基本方針 実装したコード 利用例 おわりに はじめに RailsでVue.jsを採用している場合、Vue SFCのscoped cssを利用してCSS周りの統制と取りたくなりますが、RailsのView層に色々要素を書いてしまうとそれも難しくなってきます。 vue-loader-v14.vue…

Vue.js: CSRFTokenの設定やmethodを仕込むRailsの`form_with`っぽいComponentを作るメモ📝

Ruby on Railsで実装していたViewをVue.jsのComponentに置き換える場合に、form_withはよしなに行ってくれていたCSRF Tokenの設定やPATCH等のGET、POST以外のmethodをRailsに認識させるためにhiddenで送信したりする処理を独自に実装する必要があります。 fo…

Vue.js: Vue Final Modalでモーダルを実装するメモ🗒

Vue.jsを使っていてモーダルを実装する際にアクセシビリティ等々考慮したりすると実装が難しかったりするので何かしらライブラリを利用したいと思ったときにVue Final ModalがVue3にも対応していてサクッと実装できて便利だったのでメモ vue-final-modal.org…

CSS: 擬似クラス`:not`と`:last-child`を使って最後以外の要素にstyleを設定する方法メモ📝

以下のようなメニューを作るときに最後の要素以外にboarderを入れて区切り線をいれたいときに:notと:last-childを使うと簡単にできたのでメモ See the Pen menu-sample by madogiwa (@madogiwa0124) on CodePen. やり方は簡単で以下のような:not(:last-child…