「React」に関連する技術ブログ

企業やコミュニティが発信する「React」に関連する技術ブログの一覧です。

【Recoil】Reactの状態管理ライブラリ基礎学習 ~第三部~

こんにちは! ラク ス入社1年目の koki _matsuraです。 本日は、 Recoilの基本的な状態管理や仕組み をTodoアプリ作成を通して、ご紹介させていただきます。 こちらの記事は 「Reactの状態管理ライブラリ基礎学習」の3部目 です。 「Redux編」「Redux-Toolkit編」もあるので、下記のリンクから読んでいただけると嬉しいです。 tech-blog.rakus.co.jp tech-blog.rakus.co.jp Reactの状態管理ライブ

AWS Amplify + Next.js + TypeScript で作るCognitoユーザープールのアカウント管理アプリケーション

はじめに 旅行プラットフォーム部の武田です。 最近、AWS Amplifyを利用してNext.jsのアプリケーションをホスティングする機会があり、実際にアプリケーションを作りながら開発の流れについて紹介します。 Amplifyで楽をしつつ一部のAPIはNext.jsのAPI Routesを利用する、というやり方が比較的シンプルで良いと感じました。 AmplifyでAPIを構築する場合、Next.jsのAPI Routesを利用する

ミイダスのフロントエンドをNext.jsに移行した背景と課題

ミイダスのフロントエンド開発では、これまでReactとReduxを中心に、プロダクトや開発組織フェーズとその変化に対応するため技術選定を進めてきました。 そして2021年からスタートしたNext.jsへの移行計画「ミイダス2.0」プロジェクトの全貌について、フロントエンド開発を担当した後藤と松村、李に話を聞きました。 移行した背景や課題、今後の展望についてご紹介しま

【Redux-Toolkit】Reactの状態管理ライブラリ基礎学習 ~第二部~

こんにちは! ラク ス入社1年目の koki _matsuraです。 本日は、 Redux-Toolkitの基本的な状態管理や仕組み をTodoアプリ作成を通して、ご紹介させていただきます。 こちらの記事は 「Reactの状態管理ライブラリ基礎学習」の2部目 です。 前回の「Redux編」を読んでいない方は下記のリンクからお読みいただけると嬉しいです。 Reduxの仕組みを知ることでよりRedux-Toolkitの使いやすさ

【Redux】Reactの状態管理ライブラリ基礎学習 ~第一部~

こんにちは! ラク ス入社1年目の koki _matsuraです。 本日は、Reduxの基本的な状態管理や仕組みをTodoアプリ作成を通して、ご紹介させていただきます。 この記事は 「Reactの状態管理ライブラリ基礎学習」全3部作の1部目 です。 Reactの状態管理ライブラリを勉強している方、状態管理ライブラリについて簡単に知りたい方などのお役に立てればなと書かせていただきました。

Next.js + TypeScript + Docker + GitHub Actions の環境構築

こんにちは。X イノベーション 本部ソフトウェアデザインセンターの陳です。 この記事では Next.js + TypeScript + Docker + GitHub Actionsの環境構築の方法をまとめます。 セットアップ手順 以下のセットアップを行います。 1. create-next-appでNext.jsのプロジェクトを作成 2. 静的分析ツールESLintの設定 3. コードフォーマッターPrettierの設定 4. テスト フレームワーク のJest、React Testing Lib

Next.js + TypeScript + Docker + GitHub Actions の環境構築

こんにちは。X イノベーション 本部ソフトウェアデザインセンターの陳です。 この記事では Next.js + TypeScript + Docker + GitHub Actionsの環境構築の方法をまとめます。 セットアップ手順 以下のセットアップを行います。 1. create-next-appでNext.jsのプロジェクトを作成 2. 静的分析ツールESLintの設定 3. コードフォーマッターPrettierの設定 4. テスト フレームワーク のJest、React Testing Lib

Reactのフレームワーク”Next.js”を触ってみた「動的ルート / APIルート」

こんにちは、エンジニアのみーや( @miiya387 )です。 Reactのフレームワーク「Next.js」への入門として、公式チュートリアルを何回かに分けてまとめていきます。 今回は、5. Dynamic Routes と 6. API Routesについてまとめていきます。 それ以前の章を知りたい方は各章に過去記事のリンクを付けておりますのでそちらからご覧ください。 Create a Next.js App Navigate Between Pages Assets, Metad

AWS Amplifyで入稿ツールをつくる

こんにちは。 Photorait エンジニアのヒエイです。 先日開催したWP HACK DAYにてAWS Amplifyを使ったサイトツールを作りました。 (HACK DAYの様子はこちら→ WP HACK DAY#3 ) AWS Amplifyでの開発環境作成からデプロイまでのフローを紹介します。 AWS Amplify AWS Amplify(以下Amplify)はAWS社が提供するウェブアプリケーション作成・公開できるサービスです。 https://aws.amazon.com/jp/amplify/ HACK DAY

Amplify Studioでチームポータルページを作ってみた

はじめに こんにちは、LINE上で動くおくすり連絡帳 Pocket Musubi というサービスを開発している種岡です 早いもので入社してから3年が経ちました 会社の成長と共に取り扱うサービスも増え、今では12以上の開発グループが存在しています 誰がどのチームなのかを把握するのが非常に難しい、また、どのチームがどのサービスを担当するのか把握できないという声が寄せられ

エンジニアも外部のメディアに露出することの重要性

こんにちは。新卒2年目のKEN☆YAMAGUCHIです! 今回は「 エンジニアも外部のメディアに露出することの重要性 」というタイトルでお話をしたいと思います。 僕自身の話をすると、メディアというのはおこがましいですが、本ブログの執筆・ Twitter アカウントの運用・イベントへの登壇を経験しております。 これらの経験をしていく中で、エンジニアの方がメディアへ露出

Rails+Next.jsでGraphQLを導入する時に考えたこと

こんにちは、タイミー開発プラットフォームチームで業務委託として働いている 宮城 です。 タイミーはリリースから4年が経過したプロダクトで、2022年の前半から一部領域でGraphQLを利用し始め現在導入を進めています。 本記事では、GraphQLをプロダクトに導入する上で判断に迷った箇所や課題に対して、タイミーでの意思決定とその理由を紹介します。参考にしていただ

Next.js + Vercel + Supabase を用いた高速アプリ開発

こんにちは! ラク ス入社1年目の koki _matsuraです。 本日は、Next.jsとVercel、Supabaseを用いて簡単なアプリを高速で開発する手順についてお話しできればと思います。 アジェンダ は以下の通りです。 Next.jsとは ReactとNext.jsの違い Next.jsの特徴 Vercelとは Supabaseとは ToDoアプリ作成 Supabaseにデータベースを用意 VercelでNext.jsプロジェクトを作成・デプロイ・GitHub連携 VercelとSupabase

コミューンのモバイルアプリを Flutter でリプレイスしている話

はじめに こんにちは、コミューン株式会社でソフトウェアエンジニアをしている牛嶋です。 2022 年 4 月にコミューンに入社してから、モバイルアプリチームに所属しており、Flutter を用いてコミューンのモバイルアプリ開発に従事しております。 元々コミューンのモバイルアプリは React Native で開発されていましたが、2022 年の 4 月から Flutter を利用したクロスプラットフ

SWCとRelease Pleaseで始めるReact TypeScriptライブラリ開発と公開

こんにちは。Pay ID Devの大木 ( @roothybrid7 )です。 今回外部スクリプトとして読み込み利用する外部SDKを、Reactに組み込むためのラッパーライブラリを作ったので、その開発事例を紹介します。 今回、 SWC(Speedy Web Compiler) や Release Please を利用して開発したので、主にそれらをどう使ったのかを紹介いたします。 背景 去年12/16に開催しましたオンラインイベント 「BASE Tech Talk #1
技術ブログを絞り込む

TECH PLAY でイベントをはじめよう

グループを作れば、無料で誰でもイベントページが作成できます。情報発信や交流のためのイベントをTECH PLAY で公開してみませんか?