Transcript より速い WEB を目指す Next.js 【Next.js Update!】 v12リリースを踏まえ、Next.jsの採用を考える 吉井 健文 / Takepepe 株式会社リクルート APソリューショングループ フロントエンドエンジニア・アーキテクト Agenda ▪ 前半：Next.js Conf 2021 おさらい ／ ▪ 後半：Next.js 12 発表をうけて ▪ Static x…
ReactベースのあたらしいフレームワークRemixをためしてみた
はじめに こんにちは、CX事業本部MAD事業部の森茂です。 re:Inventを前にAWSの情報も気になるところですが、フロントエンド界隈もReact Conf 2021を前にReact v18 betaをはじめ、Nex […]
MUI TextField のテストを鳥渡だけ書く
Material UI の TextField と React Hook Form (RHF) を組み合わせて利用しているのですが, invalidな入力に対して正しいエラーメッセージを出せてるのか私は常に心配です. 一 […]
【TypeScript】Next.js + Tailwind CSSを使用してさくっとSPAを作る方法
Next.js で簡単な SPA の雛形をつくる際の手順です。 ホームページを Flutter Web から Next.js に移行した際に少し躓いたので整理して記録します。 環境 執筆時点での各種バージョンです。 Node: 14.17 Next.js: 12.0.4 Tailwind CSS: 2.2.19 TypeScript: 4.5.2 Next.js プロジェクトの作成 下記コマンドで Next.js プ…
【React × Cypress】長文の入力をテストするうまい方法
こんにちは、 Gaji-Labo フロントエンドエンジニアの茶木です。 cypress に最近ガッツリと挑戦しています。新しいことがわかると楽しいですね。 inputへの長文の入力テストを書くときのちょっとしたテクニック […]
How to make a simple Web Application using React and Contentful
I am writing this blog for people who have basic knowledge about Contentful and React. I will put more focus o […]
【React】コンポーネントの出し分けを読みやすく書く
こんにちは、 Gaji-Labo フロントエンドエンジニアの茶木です。 普段、頭の中で完結している作業を文章に落とし込むことで発見があると思い、コンポーネントの出し分けを読みやすく書く方法をまとめました。 流れを重視して […]
ReactにCognitoでサインイン機能をつける
Cognitoで認証認可を実装する方法の整理 Cognitoを使用して認証認可をフロントエンドで実装する方法はいくつかあります。 自分はCognitoを使用するなら以下の3つが思いつきます。 AmplifyのAuthモジ […]…
企業ページリプレイス ~OpenAPIの活用~ – PR TIMES 開発者ブログ
こんにちは、21新卒エンジニアの柳です。 先日、PR TIMESの企業ページをSmartyというテンプレートエンジンからReactへリプレイスを行いました。その際にOpenAPIを社内のプロジェクトで初めて導入したので、OpenAPIのメリットや活用方法について書きたいと思います。 プロジェクトの背景 OpenAPIの説明に行く前に、企業ペ…
React上のSVGで円形のゲージを作る
SVG で円形のゲージを作ってみます。 デモ あまり使いやすくはないのですが、簡単にデモサイトもつくってあります。コードは GitHub で公開しています。 デモ hbsnow-sandbox/component-cir […]