Madogiwa Blog

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

Vue.js: Transitionに合わせて別の要素をアニメーションで動かすMEMO

あるcomponentのTransitionに合わせて別の要素もアニメーションで動かしたい時のメモ オフセット付きのサイドメニューを作成するような際に一方のトランジションに合わせて他の要素をアニメーションを設定して動かしたいと場合には、JavaScriptフックを使う…

Vue.jsのtransitionで`.v-enter`を設定しているのにアニメーションが動かない場合の対応法MEMO📝

Vue.js v3のtransitionで.v-enterを設定し表示時にアニメーションを定義したかったけど、動かず軽くハマったので対応方法をメモ 事象 原因 対応 おわりに 事象 transitionでアニメーションを動かそうと思い以下のコンポーネントのような実装をしたが、開始ア…

GoogleFontsで一部のテキストだけロードして最適化する方法メモ📝

ブランドロゴ等で目立たせるためにWebフォントを利用する際に特定の文字列だけ取得して最適化する方法をメモ 結論 textパラメーターで利用した文字を付与してあげれば良い @import "https://fonts.googleapis.com/css2?family=Ubuntu&display=swap&text=Bra…

`Window.scrollBy()`で`scroll-behavior`を指定する方法メモ📝

スクロールしてTOPに戻るボタンを実装する際にスムーズにスクロールさせるためにcssでscroll-behaviorを指定することがよくあると思いますが、 developer.mozilla.org Window.scrollBy()の実行時にも指定できることを知らなかったのでメモ developer.mozilla…

Media Queries: Range Syntaxでいい感じに画面幅で適用するCSSを設定するメモ📝

Media Queries: Range SyntaxがSafariを含むモダンブラウザで利用できるようになったので公式ドキュメントの通りですが、書き方をメモ 簡単ですが今までmax-widthで指定していたものが不等号で直感的に書けるようになりました before @media (max-width: 30e…

eslint-plugin-securityを導入してみるメモ📝

Rubyだとbrakemanのようなライブラリがありますが、 github.com JavaScriptでもこういうセキュリティ周りの静的解析系のライブラリがあるのかなと探してみたらeslint-plugin-securityなるものを見つけて個人のサービスに導入してみたのでメモ github.com 導…

Viteでbuild結果をgzip圧縮する方法メモ📝

Viteにもwebpackでいうところのcompression-webpack-pluginみたいな成果物をgzip圧縮するツールを探してみたところ、 github.com vite-plugin-compressionというまさになツールがあり個人のWebサービスに導入してみたので使い方をメモ github.com といっても…

dependabotのgroup機能がpublic betaでリリースされたので早速設定してみた📝

待望のdependabotのgroup機能がpublic betaでリリースされたので早速設定してみたのでメモ github.blog (今まではrenoveteとかを使わないと出来なかった) github.com とりあえず以下のように.github/dependabot.ymlを設定してみました! version: 2 updates:…

`Playwright`でビジュアルリグレッションテストを追加する方法MEMO 🎭

Playwrightを使ったビジュアルリグレッションテストの追加が思った以上に簡単にできたのでやり方をメモ playwright.dev Playwrightの導入 playwrightの導入方法に関しては以下を参照してください。 playwright.dev Playwrightによるビジュアルリグレッション…

Ruby on Rails: KombuというRuby on Railsでjsのcomponentを指定してrenderできるgemをリリースしました。

タイトル通り、KombuというRuby on Railsでjavascriptで描画するcomponentを指定してrenderできるgemをリリースしました✨ (コンポーネント・レンダラブルを略してコンブ です) github.com モチベーション Ruby on Railsを利用してサービスが成長してくるとVu…

Ruby on Rails: layoutsをviews配下のディレクトリ(ex. admin, api)単位で持つ方法メモ📝

Ruby on Railsで管理画面とユーザーが閲覧する画面でlayoutを分けるようなケースが一定あると思いますが、 その際に以下のようにlayouts配下にディレクトリを切っていくとApplicationControllerとAdmin::ApplicationControllerでControllerを分けた際にRails…

ポチポチしてRails newコマンドを作れるツールをAstro on Vue.jsで作った🚃

タイトル通り、ポチポチしてRails newコマンドを作れるツールをAstro on Vue.jsで作った‍ madogiwa0124.github.io 機能的にはrails newで指定できる各optionをUI上からポチポチして以下のようなコマンドをコピーできるやつです。 $ rails new app_name --dat…

Ruby: proc(lamda)を定義時ではなく呼び出したインスタンスのコンテキストで実行する方法MEMO

Proc(lamda)を定義時ではなく実行時のコンテキスで実行する際にちょっとハマったのでメモ 結論: instance_exec(&proc)で実行すれば良かった。 以下のような外部で定義したprocを受け取って実行した際にhello! by Caller.と出ることを期待したのですが実行す…

Moment.jsからDay.jsに乗り換えるメモ📝

Moment.jsは現在メンテナンスモードに入っているため、今更ながらDay.jsに乗り換えたのでやり方とかをメモ We now generally consider Moment to be a legacy project in maintenance mode. It is not dead, but it is indeed done. Moment.js | Docs Day.js…

markuplintを個人のサービスに導入したので使い方とかをMEMO📝

markuplintとは markuplint.dev すべてのマークアップ開発者のためのHTMLリンター 適合性チェック マークアップは、有効なコードを記述する必要があります。これは、各ユーザーエージェントを介してウェブページを壊さないという標準の約束を守るために重要…

Ruby: RSpecのカスタムマッチャを作る方法MEMO📝

RSpecのカスタムマッチャの作り方をいろいろ調べたのでメモ 作り方 RSpec::Matchers.defineを使う moduleで定義する おわりに 参考 作り方 RSpec::Matchers.defineを使う カジュアルな追加方法としてRSpec::Matchers.defineで追加する方法があります。 以下…

Ruby on Rails: Gem等の外部から`config.x`を使わずにネストしたカスタム設定を追加する方法MEMO📝

Ruby on Railsを拡張するGemを作成する等、デフォルトの振る舞いといったものRails.application.configureで設定できるようにしたいなぁと思ったのですが、config.xは使わずにネストしたカスタム設定をいい感じに追加する方法をメモ🗒 Railsガイドを見ると以下…

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…

bulmaで一部の必要なmoduleだけimportして利用するMEMO📝

bulmaを利用している際に@import 'bulma/bulma'をで全部入りを利用してしまうとCSSのサイズも大きくなりbulmaに強く依存してしまって外しにくくなってしまって困ってたのですがモジュール単位で利用できることを知ったのでメモ bulma.io やり方は簡単で以下…

`ruby-openai`を使ってRubyでChat GPTのAPIを呼び出すMEMO

Ruby on Rails製の個人のWebサービスにOpen APIのChat GPTを使った機能を盛り込んだ時にruby-openaiを使うと簡単にリクエス部分を実装できたので、ほとんど公式READMEの通りですがメモ github.com API KEYの取得方法等は以下の記事を参考にしてください。 ma…

個人のWebサービスをYarnからnpmに移行したのでやったこととかをメモ📝

個人のWebサービスで利用しているpackage managerをyarnからnpmに移行したのでメモ 移行のモチベーション 移行手順 関連ライブラリを最新の状態にする npmを最新のバージョンに更新 package.jsonの書き換え yarn.lock、node_modulesを削除してnpm installす…

ChatGPTのAPIで軽く遊んだので準備とかサンプルとかをメモ📝

ChatGPTのAPIで遊んだので設定周りとかメモ 準備 OpenAIのAPI KEYの作成 以下のページの「Get started」からアカウントを作成し、 openai.com https://platform.openai.com/account/api-keys から API KEYを作成します。 私が作成したときには2023年6月1日の…

CSS グリッドレイアウトを利用時に何故か`align-self: start;`を指定しても`position: sticky`が効かなかったときの対処法メモ📝

CSS グリッドレイアウトを利用時にposition: stickyを効かせるにはstickyを指定するセレクターでalign-self: start;等を指定し高さをストレッチしないようにする必要がありますが、 coliss.com なぜかalign-self: start;を指定しても効かなかった事象があっ…

Ruby 3.2.0で導入されたYJITをHerokuで有効化する

Ruby 3.2.0で導入されたYJITをHerokuで有効化してみたのでやり方をメモ github.com HerokuでYJITを有効化する 結論だけ言うと、以下のコマンドを実行して環境変数RUBYOPTに--enable-yjitを指定してあげればです✨ heroku config:set RUBYOPT="--enable-yjit" …

Vue 3.x系で削除された`Vue.extend`の使用をESLintで検知する方法MEMO📝

Vue 3.x系ではVue.extendが削除されています。 Vue.extend Removed Global API Application Instance | Vue 3 Migration Guide そのためOptions APIでTypeScriptを利用したComponentではdefineComponentを使う等の変更が必要になります。 -- import Vue from…

ESLintのカスタムルールの作り方MEMO📝

ESLintのカスタムルールを作る機会があったので手順とかメモ 公式Doc eslint.org ESLintのカスタムルールの作り方MEMO カスタムルールを配置するディレクトリを作成する カスタムルールの雛作る カスタムルールを実行するようにconfig及び実行コマンドを修正…