概要 友達の設計事務所のHP作成をすることになりました。 コンテンツは非エンジニアでも更新できるようにCMSで作成しました。 NewtというヘッドレスCMSを初めて使ったのですが、Vercelでデプロイするまで、簡単に作れたので内容をまとめます CMSの選定 WordP…

概要 StorybookをStorybook 6.x から 7.0へアップグレードしたときに、公式のMigrationガイドを元に進めたものの、テストがFlakyになってしまったり、落ちてしまったり、修正に苦労したのでまとめます。 アップグレード方法はざっとだけ触れます 全体のおお…

概要 日付を登録するフォームで、有効日付(うるう年など)かどうかを判定したい。 年月日が分かれている選択フォームの場合、日付のバリデーションで迷ったのでメモ 環境 react 18.2.0 date-fns 2.29.3 react-hook-form 7.43.9 zod 3.21.4 簡易なフォームをつ…

概要 AndroidでWebViewを利用している箇所のデバッグする方法が全くわからなかったので、調べながらまとめてみました Android StudioでWebViewを確認できるだけの簡易的なアプリをつくっていきます Android Studioをダウンロードする Download Android Studi…

概要 aria-labelledby属性が???だったので調べていたところ、そもそもアクセシビリティについて無知だったので、WAIのことから動作確認も含めて試してみた アクセシビリティとは？ What is accessibility? - Learn web development | MDN Accessibility is t…

概要 スクロールアップ時に表示され、スクロールダウン時に非表示になるButtonコンポーネントをつくりたい スクロールボタン 要件・流れ スクロールアップ ---ボタン表示 スクロールダウン ---ボタン非表示 以前のスクロール位置をuseStateで保持する ボタン…

概要 BIツール上でデータの更新・削除が行われることを防ぐために、MySQLでREADONLY権限のUserを作成したい。 前提 AWS踏み台サーバ経由でRDSに接続している 流れ ## EC2インスタンスへsshログインする ~/.ssh ❯ ssh -i ~/.ssh/id_rsa(秘密鍵) ec2-user@xxxx…

OverView descriptionカラムを追加したい。 created_at, updated_atの前に追加したい MySQL使用 import { Column, CreateDateColumn, Entity, PrimaryGeneratedColumn, UpdateDateColumn, } from 'typeorm' @Entity() export class Users{ @PrimaryGenerated…

OverView NestJS * TypeORM Adding table columns using CLI ts-node and typeorm are already installed How to (1. Create an entity) 2. Adding table columns 3. Create a new migration 4. Run migrations Adding table columns / Edit entity file imp…

概要 「問い合わせ」ボタンをクリックすると、ページ最下部の問い合わせフォームまで自動スクロールする useRefでDOMノードにアクセスし、scrollIntoViewでスクロールする export function Contact(): JSX.Element { const ref = useRef < HTMLDivElement > …

エラー Frontend: Next.js Backend: NestJS で開発中にエラーが error Access to XMLHttpRequest at 'http://localhost:3001/tasks' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is pre…

puzzles-engineer.github.io 今更ながら、下位10％のダメなエンジニアにだけ解けないパズルを解いてみました。 curlは普段使わないので練習になりました Puzzle for Software Engineer 2 Hack Me If You Can このとおりに叩く ❯ curl http://challenge-your-…

typeカラムを追加したらエラーが 実務で既存のテーブルに新たに「種別」を示すカラムを追加したく、typeというカラムを追加しました。 ※参考コードは実務のではなく適当なサンプルです。 class AddTypeToPayment < ActiveRecord::Migration[5.1] def change …

CI上のパスワードは空でOK, 開発環境上はcredentialでパスワードを設定しています。 以前は開発環境だけで読み込めるようにgem 'dotenv-rails'を使用してパスワードを設定し、Github上にはそのパスワード環境変数をpushしないことでCI上にはパスワードが空に…

簡単に管理画面をつくりたい ユーザー情報を一覧で見られる単純な管理画面があればいいので、一番簡単に管理画面ができそうなrails-adminを使いました。 rails-admin × sorceryの参考記事が見つからなかったのでブログに残しておきます。 環境 Rails 6.0.3 r…

エラー ローカルではRSpecが通るのに、CircleCI上で落ちてしまう。 環境 Rails 6.0.3 Dockerのimageは以下のとおり jobs: build: docker: - image: circleci/ruby:2.7.2-node-browsers-legacy エラー内容 [BUG] Segmentation fault 今まで遭遇したことのない…

実装したいこと ドーナツグラフの真ん中に合計額 ラベルはグラフ上に表示 ラベルが細かくて重なってしまう場合は非表示 凡例を非表示 chartkickを使用したら、簡単に実装できました。 ただ、chartkick × Highchartsについての日本語記事がほぼない＆各オプシ…

ちょっと詰まったのでメモ フォーム入力画面でplaceholderを表示させたいけど、デフォルト値を設定していたため、表示できない 良し悪しは置いといて、default値を削除したい。 DBはMySQL Rails 6.0.3.4 試したけど、できなかったmigrationスクリプト class …

モデルスペックは通るのに、システムスペックを追加したら、ローカルではパスするのにCircleCI上で落ちるようになった。 半日苦しんだので、メモ ローカルでjobを実行できない ❯ circleci local execute --job build Docker image digest: sha256:ed0cf0f38d…

アソシエーションは以下のとおりで、1対1の関係 class User < ApplicationRecord has_one :user_profile, dependent: :destroy end class UserProfile < ApplicationRecord belongs_to :user end class UserProfilesController < ApplicationController # 略…

半日以上かかってしまったので、エラー部分について自分用に反省メモφ(･･ 127.0.0.1:3000 に飛びたいのに何故か/loginに遷移する Twitterログインボタンを設置しているTOPページに遷移するためのstatic_pages_controller.rbでskip_before_action :require_lo…

CircleCI githubにpushすると同時にCircleCIが起動し、RSpecテストやrubocopのLintチェックを自動で走らせてくれます。 私はズボラでpush前にrubocopやRSpecを実行するのを忘れがちなので、正しいコードをmergeできるようにCircleCIを導入しました。 詰まり…

rails new そもそも、railsコマンドを使ったら、command not foundのエラーが出たので、gem install rails install実行してインストール。 rails new オプションいろいろ rails newコマンドを実行するにあたり、オプションを指定しておきます。 ~/workspace/…

Rubyのversion指定で詰まったのでメモ rbenvはインストール済みです。 Rubyインストール ❯ rbenv install 2.7.2 Rubyバージョンを指定 システム全体で使用するRubyのバージョンを指定するために、rbenv globalコマンドを実行。(そもそも、globalは強引でよく…

設計の段階で何を使っていいか戸惑うことがあったのでメモφ(･･ 使ったツールなど、適宜更新していく。 画面遷移図 adobeXDを使用。 画面遷移の順番を指定できる。 リンクも作成できるので、READMEに貼り付けられる。 画面遷移の順番がうまく指定できず悩んだ…

エラーを出しまくったので、繰り返さないようにメモ。 wrong number of arguments Postmanを使って、articleの更新と削除を試していたのに、できない。 新規作成のPOSTと一覧取得のGETは問題なし。 コードは基礎的なものだしパッと見間違っていなそう… error…

response.headers HTTPheaderのAccessTokenにtokenをセットしたいとき Provides access to the request's HTTP headers, for example: response.headers['AccessToken'] = token Action Controller の概要 - Railsガイド ActionDispatch::Request class Net:…

知らないメソッドといくつか出会ったので、メモ SecureRandom.uuid UUID (Universally Unique IDentifier) を生成して返します。 SecureRandom.uuid (Ruby 2.7.0 リファレンスマニュアル) 例えば、ログイン認証で使うaccess_tokenを安全な乱数にするときに使…

少し詰まったのでメモ コントローラーとかルーティング部分は省略。 右の入力方式をJSONにしてなくて、送信できてなかった… PostmanPostman

fast_jsonapiとは Netflixが提供しているgemで、JSONのserializerです。 This project is no longer maintained!!!! ⚠️ってなってるけど使っていいのかな…？ 公式に沿って進めていきます。 GitHub - Netflix/fast_jsonapi: No Longer Maintained - A lightni…