もふもふ技術部

IT技術系mofmofメディア

dockerのRuby環境をHerokuと同じUbuntuで動くものにする

Dockerの公式が出しているRubyのdocker imageではdebianやapline linuxが使用されています。mofmofではHerokuで本番環境を作っているアプリも多いのですが、HerokuではUbuntuが使われています。 そのため、ローカルで使用しているdockerでもUbuntuを使ってHe…

【Rails7】JS不要!Hotwireで無限スクロールを実装する

Hotwireを使ってみる第三弾です! 今回はJSを使わずに、Hotwireで無限スクロールを実装してみます。 下準備 1. Gemをインストールする gem "kaminari" 2. モデルを作る $ rails g model post 20240813000000_posts.rb class CreatePosts < ActiveRecord::Mig…

【Rails7】Hotwireで検索を実装する

Hotwireを使ってみる第二弾です! 今回は、検索結果をHotwireで表示するようにしてみます。 画面の全てを再描画する必要がないので、速度が上がるかもしれませんね! 下準備 1. モデルを作る $ rails g model post 20240813000000_posts.rb class CreatePost…

【Rails7】JS不要!Hotwireで「もっと見る」を実装する

Rails6までは「もっと見る」などの動的な機能を実装する場合はJSが必須でした。 しかし、Rails7から標準搭載されたHotwire(Turbo)を使用すると、JSを使わずに「もっと見る」を実装することができます。 今回はHotwireを使った「もっと見る」の実装方法を紹…

【Rails】deviseを使わない自前のユーザー認証 -パスワードリセット編

deviseを使わない自前のユーザー認証 の続きで、今回はパスワードリセット機能を実装します。 下準備 1. カラムを追加します $ rails g migration add_password_reset_to_users 20240726000000_add_password_reset_to_users.rb class CreateUsers < ActiveRe…

【Rails】deviseを使わない自前のユーザー認証

deviseを使ったユーザー認証はとても便利ですが、カスタマイズをしたいときや、APIモードで使う時には不便なことがあります。 そこで今回は、deviseを使わない自前のユーザー認証を実装します。 下準備 1. Gemfileに使用するGemを追加します (Gemfileの中で…

AWS Cloud Practitioner を取得してみた話

目標・目的 インフラ(今回はAWS)について学ぶことで今後の開発での視野を広げることが今回の目的です。 まずはその第一歩としてCloud Practitionerの取得を目標としました。 学習方法 主にAWS Skill Builderでの学習を主体とし、試験対策として無料の過去…

Expoでブランクアプリケーションを生成してEASビルドを試す

個人開発しているアプリのExpoバージョンを上げていったらビルドが通らなくなった。そこで、比較的新しいバージョンのExpoではビルドがどういう感じになっているのかキャッチアップしたい。 ひとまずブランクアプリケーションが起動するまで まずはブランク…

【Rails】validationのエラーメッセージをカラムごとに抜き出す

バリデーションでエラーになった際に、エラーメッセージを各テキストフィールド等の下部に表示したい時があると思います。 今回はそんな時に便利な各attributeごとにエラーメッセージを抜き出す方法を紹介します。 手順 例えば User の email のエラーは以下…

PostgreSQLでクエリの実行計画を見る

こんにちは。豊泉です。 データベースはPostgreSQLを使うことが多いのですが、最近実行計画をあまり見ていないなと思ったので、PostgreSQLでいくつかクエリを試しながら実行計画を見てみようと思います。 検証環境 検証データ クエリを試してみる Accountテ…

既存プロジェクトでPrettier・ESLintをBiomeに移行してみた

Biome v1.7からPrettierとESLintから移行するためのコマンドが追加されたので、既存のNext.jsプロジェクトで試しに移行コマンドを叩いてみました。 biomejs.dev Biomeのインストールと初期設定 ESLintからの移行コマンド Prettierからの移行コマンド package…

【Rails7】特定のviewsで部分的にReactを使う

「ここのページだけReact使いたいんだよな〜」とか「ページのここの部分にReact入れ込みたいんだよな〜」ということはありませんか? 今回はそんなあなたにReactを部分的に使用する方法を紹介します。 こちらの記事を応用していきます。↓ www.mof-mof.co.jp …

FlutterでiOSアプリのビルドとデプロイを自動化した話

こんにちは。豊泉です。 少し前に良い個人開発のアイデアが浮かんだので開発していたのですが、アプリのビルドやアップロードなどは少しややこしく以前から面倒に感じていたので、せっかくならビルドとアップロードを自動化しようと思いGithub Actionsを使っ…

【Rails7】任意のviewsからJSファイルを個別に読み込む

このviewsだけにこのJSを読み込みたい・・・! という時があると思います。 今回はそんな時のためにJSファイルを個別に読み込む方法を紹介します。 (esbuildを使用している前提で進めていきます) 手順 1. package.json に記載されているビルドスクリプトの…

Rails7 に React + TypeScript を導入する

Rails7のアプリでJSのビルドツールはesbuildを使用します。 環境構築の方法はこちらを参照ください↓↓ www.mof-mof.co.jp ReactとTypeScriptをインストールする 1. 以下のコマンドで必要なパッケージをインストール yarn add typescript react react-dom reac…