Webpackerのversion5.1からts-loaderではなく、@babel/preset-typescriptを使うようになりました✨ github.com これによりwebapckのbuild実行時の型チェックをfork-ts-checker-webpack-pluginを使うように変更になりました github.com しかし、デフォルトだと…

今更ながらcircleciのVer 2.1の新機能であるexecutorとcommandsを使ってcircleciのconfigファイルをスッキリさせてWorkflowもいい感じに見直したので、そのへんをメモしておきます circleci ver2.1新機能executorとcommandsとは？ executor commands 見直し…

特定のブランチ以外でGitHub Actionsを実行する方法をちょっと迷ったのでMEMO 結論からいうと下記です！ on: push: branches: - '**' # matches every branch - '!master' # excludes master まずはすべてマッチするようにして、その後に!ブランチ名で特定の…

RuboCopは、Rubocop::Cop::Copを継承することで独自のルールを追加することできるようで、 レビューでよくコメントもらう内容等、RuboCopで検知できるようになったら便利だなと思い、 ルールを作成してみたので、そのへんの手順等をMEMOしておきます✍ 公式の…

最近Webpackで管理してるフロントエンドアプリをPWA対応してAndroid環境でホームに追加して起動できるようにしたので、そのへんの対応まわりをメモしておく✍ コードだけみたい人はこちら github.com PWA(プログレッシブウェブアプリ)とは サービスワーカー用…

第2、第4火曜日だけなんかしらの処理を実行したいとき等、指定日が第何火曜日を知りたいケースの場合に、RubyとかActiveSupportにこういう系のメソッドが無いかなと思ったんですが、 曜日判定は出来ても第何曜日の判定を行うようなメソッドは見当たらず、ち…

自分でwebpack + TypeScript + Vue.jsの環境を作ったので、勉強がてらYouTube Data APIを使ってTikTokぽく見れるViewerを作ってみました 動作はこんな感じです(デザインはいまいちですが・・・) 触ってみたい人はこちらから(YouTube Data APIのAPI KEYが必要…

下記のような設定ファイルで動かしていたTravis CI上でheadless chrome使うようなgemのテストが急に落ち始めて、テスト通るところまで直したので色々メモして残しておきます✍ --- dist: trusty language: ruby cache: bundler rvm: @@ -8,13 +7,6 @@ rvm: - …

はじめに 下記のような形でActiveRecordが発行するSQLからWHERE句の部分のSQLだけを取得したいケースがあり、色々やり方とか調べたのでMEMO✍ はじめに やりたかったこと where部分だけのSQLを取得する方法 参考 やりたかったこと 今回やりたかったのは、下記…

JavaScriptでクリップボードにコピーさせる方法として、select()して、document.execCommand("copy")を呼び出すことで、要素を選択してクリップボードへのコピーコマンドを呼び出す方法を採用することが多いと思うのですが、 async function clipboardCopy(s…

Webpackを使って複数entryを指定して、それらを読み込むhtmlをhtml-webpack-pluginを使って用意すると下記のような感じの設定になるかと思うのですが、 これだとfileが増えるたびにwebpack.config.jsを変更しないといけないので不便です。。。 module.export…

Vue.jsをTypeScriptで書くときには、vue-class-componentやvue-propaty-decoratorを使うような情報ふが多いですが、Vue.extendを使うとそれらを使わないピュアなVue.jsでもTypeScriptを使って書くことが出来ます。 jp.vuejs.org そのへんの書き方とかを、あ…

事象 WebpackでTypeScript + Vue.jsの環境構築時にlang=tsを指定したComponentを.tsファイルでimportしたときに下記のエラーが発生し、コンポーネントを読み込むことが出来なかった componentNormalizer.js:26 Uncaught TypeError: Cannot set property 'ren…

RailsにはWebpackerとか設定をいい感じにやってくれるものがありますが、 最近脱WebpackerしてWebpackをそのまま使ったり、Simpackerを導入したりするような話を耳にすることが多くなってきました。 inside.pixiv.blog github.com そんな中で、Webpackが何も…

JavaScriptの処理で時間に依存してたりする実装を行っているとE2Eのときに時間を固定したいときが稀によくあるのですが、 travel_toを使っても結局はサーバーサイド上の時刻しか固定出来ません というわけでJavaScript上の時刻を固定するtravel_to_javascrip…

前に下記の記事で紹介したActiveRecord::Relation#explainでJSON形式を取得出来るモンキーパッチを紹介したのですが、 今回はそれをGemとして公開したのでそれについて書きます✨ madogiwa0124.hatenablog.com Gemはactive_record_json_explainとしてRubyGems…

ActiveRecord::Relation#explainを使うと、実行するSQLのEXPLAINの結果を取得出来ます。ActiveRecord::Relation#explainではデフォルト設定でしか結果を取得出来なのですが、EXPLAINにはオプションが設定できます。 特にMySQLではオプティマイザが評価したSQ…

最近Sidekiqを扱うことが割とあり、ActiveJob経由で使ったときの挙動をいまいち把握出来てなかったのでコードを読んでみて、内容とかをざっくりメモしておきます ちなみに読んだのはrailsの6-stableブランチのコードです。 rails/activejob at 6-0-stable · …

今までCIといえばCircleCIかTravis CIを使うことが多くGitHub Actionsを使ったことがなかったので、 今回はGitHub Pagesで運用している自分のポートフォリオサイトをGiHub ActionでCIを回して 自動的にデプロイ(gh-pagesブランチにpush)するワークフローを作…

最近、IDの可逆な方式で難読化したいけどfriendly_idみたいなmigrationが伴うものは、ちょっと避けたかったので色々と方法を考えたり人に教えてもらったりしたので、いろいろ方法とかをメモしておきます。 github.com やりたいこと ActiveRecordでUUIDを使う…

github.com /hoge/1/fuga/2にGETでアクセスしたときに下記のロジックを実行させたいときにどうするかちょっと悩んだので考えたこととかメモしておく。 router.get '/hoge/:hoge_id/fuga/:fuga_id' do request.params['id'] end 今までは完全一致でパスの検証…

最近Rubyのメタプロ本を再読して、method_missingを使った実装を試してみたので使い方とかメモしておきます method_missingとは？ method_missingを使ってみる method_missingを使ってもrespond_to?をtrueにしたい おわりに method_missingとは？ 呼びだされ…

オレオレWebフレームワークのv0.1.2をリリースしました github.com 今回のアップデートで、unicornやpumaといったRack::Handlerに対応したアプリケーションサーバーであれば好きなものを使えるようになりました 変更方法は簡単でGemfileにアプリケーションサ…

最近、Nuxt.jsとRailsでSPAのアプリケーションを作っていて、schema管理をOpenAPIで行ってみているのですが、 せっかくなのでCommitteeを使ってCIで検証するようしてみたので導入方法とかをメモしておきます Committeeとは？ Committeeの使い方 Committeeを…

最近Nuxt.jsで作成しているアプリケーションに後からjestを導入したので、その辺の手順をメモしておきます Jestとは？ Nuxt.jsにJestを導入する 前提 依存ライブラリのインストール Jestの設定 Jestの実行コマンドを追加 テスト用のファイル.spec.jsを追加 …

最近Nuxt.jsで作ったプロジェクトを作成後に後からTypeScriptを導入したときに色々とハマりどころがあったのでメモしておく。 前提 今回のNuxt.jsとTypeScriptのバージョン情報は下記のとおりです。 nuxt: 2.10.2 typescript: 3.7.4 また私が最初にNuxt.jsの…

railsでbulk insertするときには今まではactiverecord-importが使うことが多かったと思いますが、 rails 6からはActiveRecord::Persistence#insert_allが追加されたので標準機能を使ってbulk insertを行うことができるようになりました。 github.com 実際に…

先日下記のイベントでLT登壇してきました。 (LTでイベント登壇するのは初めてだったので実績解除した) connpass.com 資料はこちら speakerdeck.com 内容は、bundle gemでGemを作ったときに依存するgemをGemfileとgemspecどっちに書くか的な話でした。 最終的…

最近、バックエンドはRails(APIモード)、フロントはNuxt.jsといったフロントエンドとバックエンドが別々で、APIでやり取りさせるような構成が多くなってきました。 そういう場合にバックエンドとフロントエンドのIF(スキーマ)を管理するのにOpenAPIというの…

SQLでなんかしらの条件でレコードを絞り込むときのやり方には、複数のやり方がありますが、どれが一番効率が良いのか調べてみました 前提条件 実行計画を見てみる IN EXISTS INNER JOIN 結果 参考 前提条件 今回はpostgresqlで調べていますバージョン等の情…