yikegaya’s blog

yikegayaのブログ

React

S3に保存した画像のサービス内での扱い

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

Reactで動画をキャプチャしてDBに保存する

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

Typescript+Next.js+Goで作ったサービスが大体できてきた

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

reactでレビュー機能を実装する

こういう↓星付きのレビュー機能を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>

axiosのpostリクエストをginで受け取る

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

useEffect、useStateでhttpリクエストを飛ばしてrenderする時のテスト

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

js側でPCとスマホ、タブレットの表示分ける

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

TypeScript+jest+enzymeでのテスト環境構築

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

Rails+webpacker環境で「default is not a constructor」のエラーが出た時の対応

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

Rails APIモード + Reactに入門してみる

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

Reactに入門してみる

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