今年も一年が終わるということで今年も振り返ってみる。 今年の振り返り アウトプット BLOG BLOGは、今年1年で59記事書いてました 1週間に1.2記事ぐらい書いてるので、そこそこ書いてた✍ また月間PV数は4000弱くらいでした、別にPVは気にしてないですが、ほ…

Vue.jsの単一ファイルコンポーネントの型チェックを行う場合、webpackでts-loaderを用いて、 build時に型チェックを走らせるやり方があると思うのですが、その場合ts-loaderのtranspileOnlyを有効に出来ないので、build時間がネックになったりします。。。 C…

Bulmaのcolumns内にSwiperの要素を配置すると以下のような感じで盛大にレイアウトが崩れる。。。 Bulmaのissueも上がっているが特にいい感じの回答も無くCloseされている github.com なので色々調べてみたところ、display: -webkit-box;がswiperのcssで上書…

以下のような感じでSwiper.jsを使って、pagenationの中にnavigationを入れて前後のスライドに移動できるようにするようなデザインを作りたいときにデモやネット上にもあまり情報が無く、結構悩んだのですが一定出来たのでやり方をメモしておきます ※CSS等を…

開発環境でWebpackerのbuildが遅くてちょっと開発効率が落ちるみたいなことって、あると思うのですが、その際にSourceMapの生成をやめると割と早くなりそうだったので、そのへんをメモしておきます WebpackerでSourceMapの生成をやめる どれくらいビルド時間…

今回は以下で作成したCircleCI上で実行するRuby on Rails × LighthouseをGithub Actionsに移行したので、その辺のハマったところとかのポイントをメモしておきます madogiwa0124.hatenablog.com 移行する際のポイント デフォルトでinstallされているもの 使…

WebpackerでRailsアプリケーションでエラー管理にRollbarを使用しているときに、デフォルトだとエラーが発生してもminify等がされたjsにリンクされてしまい何が起きているのか、よくわかりません。。。 そんなときにSourceMapをRollbarにアップロードすると…

2020/11/3にrails 6.1.rc1がリリースされました github.com ほぼピュアなRailsアプリケーションなので、あんまり実務的にはそこまで参考にならないですが個人で運用しているアプリケーションを6.1.rc1にアップグレードしたので手順とかをMEMO ちなみに6.0か…

フロントエンドでJavaScriptを採用してバックエンドをRubyで書いていると、snake_caseとcamelCaseを行ったり来たりして、混乱したりするのでRubyでcamelCaseで書けたりしないのか、ちょっと試してみたのでMEMO やりたいこと method_missingを使って無理やり…

国が公開している資料が割とPDFで公開されていることが多く、このようなデータをアプリケーション内で使いたいと思ったときにPDFを頑張ってゴニョゴニョする必要があると思うのですが。。。 そういうときにpdf-readergemがシンプルにつかえて便利だったので…

ActionCableと前に作ったMarkdown形式のテキストをRSpec形式のテキストに変換するgemを使ってリアルタイムに変換できるWebエディタを作りました https://markdown-to-rspec-web.herokuapp.com/ ↓Markdown形式のテキストをRSpec形式のテキストに変換するgemに…

個人アプリの開発ではHerokuを使うことが多いのですが、最近webpack + Railsの環境を使っていてデプロイまわりで少しハマったので、デプロイ方法をメモしておきます Herokuのデプロイついて Herokuによる標準のRailsデプロイ WeboackなRailsをHerokuにデプロ…

スクロールやテキストエリアの入力等、比較的大量になりやすいイベントをJavaScriptを使ってハンドリングして、さらにサーバーサイドにリクエストを投げたりしているとクライアントサイドだけでなくバックエンドの負荷が高まるのでイベント発火の頻度を抑制…

ライブラリのバージョンアップ等で親クラスが子クラスが持つ特定の定数に依存するようになりエラーが発生することがあり。。。 特定のクラスを継承したクラスの中で特定の定数を持たないクラスを探すコードを書いたのメモしておきます サンプルコード 任意の…

以下のような親子関係のような仕様を持つCheckBoxの機能を作りたいときに、 全選択のCheckBoxをチェックすると、各要素のCheckBoxをすべてON/OFFにする 各要素のCheckBoxがすべてONの時は全選択のCheckBoxはON、それ以外の場合はOFFになる イメージ 各レコー…

CircleCIのorbsをあまり使ってことなかったのですが、使ってみるとだいぶ便利だったので使い方をMEMOしておきます CircleCI orbsとは？ CircleCI Orbs は、ジョブ、コマンド、Executor などの構成要素をまとめた共有可能なパッケージです。 CircleCI では承…

JavaScriptを使った非同期処理を実装するときに、 try-catchで囲うとか、isLoadingやsuccessといったstateを用意して、 状態を管理すようなロジックが個人的にそれぞれのメソッドに書きがちになっていて、 毎回実装するのが手間、また実行漏れがあったりと共…

最近個人のRailsアプリケーションをWebpackerからSimpackerを使ったピュアなWebpack環境に切り替えたので、その手順をメモしておきます 今回はWebpackerを導入しときのデフォルトなjs/scssなbuild環境を削除して、Webpackで置き換えていきます。 Webpackerを…

最近deviseをちょっと触ってて自分が特に何も考えずに使っていくとUserモデルがどんどん肥大化していってしまうなぁと思い、、、 deviseのために追加する項目(email, encrypted_password等)とプロフィール的な項目(nickname, birthday等)でモデルを分けると…

テキスト内のリンクを検出して自動的にリンク用のコンポーネントをレンダリングするみたいなことをするときにどうするのが良いのかよくわかってなかったので調べて、ちょっと実装してみた内容をメモしておきます(もっといいいやり方があるかも知れないです) …

Composition APIを色々触ってみたので使い方等をメモしておきます Composition APIとは 簡単な使い方 install 有効化 Componentの定義 data computed methods props emit Options APIからComposition APIへの書き換え Options API Composition API おわりに …

classに定義したstaticメソッドをinterfaceで型定義しようとして下記のように書いたらエラーになってしまったのでどうすればいいのか調べたのでMEMO interface MyClassInterface { id: number, name: string, method(): void, static staticMethod(): void /…

下記のような場合に<T extends unknown>(arg: T[]) => T[]と定義した場合だけ、TypeScriptのコンパイル時にエラーが発生して🤔となったけど納得したのでMEMOしておきます📝 type TypeA = <T extends unknown>(arg: T[]) => T[] type TypeB = <T extends unknown[]>(arg: T) => T const funcA: a = (...args) => args const fu</t></t></t>…

画面仕様書等、Markdownで整理していたものからRSpecを書き直すのが意外と手間と思うことがあったのでMarkdownで書いたものをRSpec形式のテキストに変換するGemを作りました。 github.com 使い方 個人的な技術Topic RDoc::Markdownを使ってマークダウンから…

先日、ほぼピュアなRubyで書いているオレオレフレームワークmakanaiをv0.1.6にバージョンアップしました github.com アップデートの主な内容は下記の通りです。 ✨ enabled to switch template engine Haml and ERB. github.com テンプレートエンジンが今まで…

フロントエンドまわりの改善の指標としてLighthouseを使ってパフォーマンス等のスコアを参考にすることがあるかと思うのですが、 なかなかchromeで開いて手動で測定するのは手間だったのでCircle CIで実行して結果をArtifactsで確認できるようしたら結構良か…

Ruby on Railsでエンドポイントを変えずにformatで実行するControllerを分ける方法でちょっと悩んだので解決方法をメモしておきます。 やりたかったこと 解決方法 おわりに 参考 やりたかったこと 個人のサービスでRSS用のXMLを表示するのと普通にHTMLを返却…

rubyを使ったアプリケーションのテストコードのカバレッジ測定にはSimpleCovを使うことが多いと思いますが、CircleCIのArtifactsを使うと簡単にCircleCIの管理画面上でSimpleCovの結果を確認できたので、そのへんの手順をメモしておきます github.com Codeco…

個人のアプリケーションを今まではデフォルトのアセットまわり(CSS等)をSprockets、JavaScriptをWebpackerでビルドするような形にしてたのですが、 今回はstylesheetをWebpackerで管理するようにしたので、そのへんの手順をメモしておきます 対応したアプリ…

ピュアなJavaScriptで日時の操作をするのつらすぎると思っていたのですが、ECMAScript proposalsのTemporalという日時を扱うためのAPIがあるようで、ちょっと触ってみたのでメモしておきます 公式のドキュメントはこちら tc39.es Temporalを使ってみる ⚠Temp…