RailsのプロジェクトでRailsとReactでWebサービスを作る場合観察する限り以下の2パターンかと思うのですがそれぞれどういった場合に選択するべきか自分なりの考えをまとめてみます。 Reactの場合で書いてますが多分Vueとかでも同じ考えになるはず。 パターン…

Reactでのページネーション実装調べてたんだけど、Railsのkaminariみたいに「これ使っとけば間違いない」的なライブラリや実装が見つからなかったのでcustom hooks作ってオレオレ実装してみた。 前提 React（Next.js）での実装 フロントエンドとバックエンド…

Reactで作ってるWebサービスにFullcalendarなどライブラリを使わずスクラッチでカレンダーを作ったので実装書いてみる。 前にVueでカレンダー作ったときみたいにフロントエンド側でゴリゴリ書いてこうと思ったんだけどちょっと今回は要件的にその実装方針だ…

配列を使ったElement生成+別のコンポーネントを同時にreturnする場合 returnを「（）」ではなく「[]」で囲んで配列で返す必要あり return [ [1, 2, 3].map((value, i) => { <div>{value}</div> }), <AnyComponent></AnyComponent> ] ネストした配列からElementを生成する場合 ネストした配列の呼び出…

Next.jsのapp.tsxのエラー対応メモ 以下のようにapp.tsxでヘッダやフッタを表示するLayoutコンポーネントを読み込む実装をしたらVSCode上でエラーが出た。 next devでは動くけど、next buildはできない状態 function MyApp({ Component, pageProps }: AppPro…

React Native触ってみたかったのでUdemyで講座買って受講してみた。 【2023年最新版】React Native入門：ニュースアプリを作りながら覚えよう | Udemy 感想 ほぼWeb開発のReactのコードと変わらなそう。Reactが書ければ割とすぐ開発できそう。 見た目の調整…

S3に保存した画像画像にいろいろ情報つけて扱う実装で考えたこと。 例えばこの画像はプロフィール画像用でこれはメモ用、とかの属性つける場合どうしたら良いんだろ。RailsとReactで作ったWebサービスで使う想定。 S3の仕組みでオブジェクトにjsonでメタデー…

Reactでビデオ要素をキャプチャしてDBに保存する実装のメモ。 サーバサイドは/api/internal/register_imageのエンドポイントを作ってbinary型のカラムに保存できるようにしておく フロント側の実装 video要素をcanvasに描画してそのままrequestで送れる。 co…

ポートフォリオとしてフロントエンドをTypescript＋Next.js、バックエンドをGolangで作っていた映画情報を取得、レビューできるWebサービスの基本機能の実装が大体できてきた。映画情報の取得にはTMDBのAPIを使用している。 基本機能はできたもののやりたい…

こういう↓星付きのレビュー機能をReactのポートフォリオに実装した時のメモ。 CSSフレームワークbulmaのモーダルで動かしている。 const [score, setScore] = useState<number>(3) const [isShowModal, setIsShowModal] = useState<boolean>(false) return ( <div className={isShowModal ? "modal is-active" : "modal"}> <div className="modal-background"></div> </div></boolean></number>

Reactでaxiosからgolang＋ginのAPIサーバにpostリクエストを送る時にこんな感じ↓でaxiosからpostされてきた値を受け取ろうとしてうまくいかなかった。 ginで作ったサーバサイド func (pc Controller) Login(c *gin.Context) { param_name := c.PostForm("nam…

useEffect、useStateでhttpリクエストを飛ばしてレスポンスの内容を元にテーブルの内容を描画する画面を書いていた。 で、レスポンスを元に表示した内容をテストしたかった。よくありそうな話だしすんなりいくだろう、、と思ったら思いの他苦戦したので作業…

スマホ、タブレットで表示を変えるときにCSSで@media指定して制御するのはよくやるけど、要素の順番とか配置等ガッツリ見た目に変更足したい時があった。 CSSだとスマホの時に要素の並び替え変えるのはflex指定すればできたりするけどどうも綺麗にいかなかっ…

Rails＋webpacker＋Reactのフロントにテストコードを導入した時のメモ。結構やることがあった。。 最近はReactのテスト環境の動向調べると、テストフレームワークjestにテストユーティリティツールのEnzymeの組み合わせがメジャーっぽいので素直に採用した。…

ビデオ通話機能を実装するためにskyway-js というライブラリをRails＋webpacker＋Reactのサービスにインストールしたときにエラーが出て軽くハマったのでメモ。 エラー内容 Rails＋webpacker＋Reactの環境でyarn add skyway-jsを実行。それをimportするとこ…

Reactのチュートリアルをやったので、次にRailsと連携させてみた。 RailsとReactの連携方法を調べるとざっくり２パターンあって Rails側でルータやビューを作ってjQueryの代わりのライブラリとしてReactを導入する。 APIモードでRailsアプリを作って、それと…

次の職場のフロントエンドがReactらしいので予習として このサイト のReactチュートリアルやってみた。 +よくわかんないとこググって調べてみた チュートリアルの内容 Reactを使って三目並べのアプリを作るチュートリアル。 Reduxとかルータの話題は出ない。…