今回はアプリ開発の上で頻繁に使うであろうログイン機能を作ってみました。意外と苦戦することも多かったのでその備忘録です。 主に参考にしたサイトは下のやつです。 qiita.com作ったアプリはGithubに公開しています。 https://github.com/trmti/FileSharin…

Rails db:migrateを実行すると以下のようなエラーが起きた。 aborted! ActiveRecord::NoEnvironmentInSchemaError: Environment data not found in the schema. To resolve this issue, run: bin/rails db:environment:set RAILS_ENV=development /usr/local…

Reactで環境変数を扱いたいときには、ルートディレクトリに「.env」ファイルを作成し、その中にREACT_APP_という名前に続く変数名をつけた変数を定義することで扱えるようになる。 # develop REACT_APP_API_HOST=localhost:3000 <|| こんな感じ。変数名の先…

Reactで独自コンポーネントを作成するときに、引数を一つだけ取り出しもとの引数から取り出した一つを削除したい。 例えば{hoge, fuga, hogefuga}という引数をhogefugaと{hoge, fuga}に分けたいときには const Button = props => { {hogefuga, ...other} = p…

Using the Public Folder | Create React App これが参考になった。create-react-appを実行すると、ルートディレクトリにpublicという名前のフォルダが作られる。 このフォルダにはアプリの中で使う画像など外に公開したいデータが入っている。 ここにsample…

How to extend an Ant Design component - DEV Community ↑これが参考 typescriptのantdで独自コンポーネントを作るときにantdのpropsはそのまま受け継いで、他に自分が定義したpropsも受け取りたいんだけどどうしたらいいんだろうとちょっと詰まったのでメ…

antdを使ってreactアプリを開発しようと意気込みいざ使ってみると、全然おしゃれじゃない画面が出てきた。 どうやらcssが動いていないようだ。調べてみるとindex.js(index.tsx)などのファイルに以下のコードを記述しなければいけないらしい。 import 'antd/d…

こんなふうなDockerfileを作って実行してたらさっきまで動いてたのに急に動かなくなった。 FROM node:17-alpine3.14 WORKDIR /usr/src/app/rails-react-app COPY ./rails-react-app/package*.json /usr/src/app/rails-react-app/ 私の場合はDockerDesktopをR…

AtomicデザインとはUIを効率的に作るために作られたUI構成のパターン。 Atomicデザインでは画面上のにある部品をコンポーネントとして分割し、小さなコンポーネントを組み合わせてより大きなコンポーネントを作っていく。 Atomicデザインの概要 Atom(原子) …

before_actionとは？ before_actionを使うことでコントローラのアクションが実行される前に別のメソッドを実行できる。 before_action :hoge def index ... end def hoge ... endこのようなコードがあったとき、indexアクションが実行される前に先にhogeが実…

エラーの内容は以下のようなものだ /usr/local/bundle/gems/activesupport-5.2.6.2/lib/active_support/messages/metadata.rb:17:in `wrap': wrong number of arguments (given 2, expected 1) (ArgumentError) from /usr/local/bundle/gems/activesupport-5…