アプリケーション開発 [React] react-papaparse を使って JSON データを CSV ファイルとしてダウンロードする
React アプリ内で表示しているテーブルなどの JSON データを、CSV ファイルとしてローカルにダウンロードしたいケースがあります。そんな機能が簡単に実装できる、react-papaparse の使い方を紹介します。
React
アプリケーション開発 アプリケーション開発 [React] react-papaparse を使ってローカル CSV ファイルを JSON データとしてロードする
React アプリ上でローカル CSV ファイルを読み込ませて、大量データを効率的に一括処理したいケースがあります。画面UIやデータ変換をしてくれる便利なモジュール react-papaparse を紹介します。
AWS AWS Amplify Storage を AWS CloudFormation でマニュアルセットアップする
サーバーレス WEB アプリ (SPA) から、ファイルをバックエンドにアップロードして処理したいことがあります。AWS Amplify と連携させた Amazon S3 バケット「AWS Amplify Storage」を使用すると、アプリとセキュアに連動したストレージを簡単に作ることができます。
アプリケーション開発 React 18 にアップグレードしてみた
2022年3月29日に、React のバージョン 18 がリリースされました。私が開発・運用している既存 React アプリ (v17) をアップグレードしたときに対応した箇所を紹介します。
AWS Amazon API Gateway Cognito オーソライザーに送信する ID トークン のフォーマットに注意
Amazon API Gateway のセキュリティ機能で、アプリ側で取得した ID トークンが不正なものでないか検証する Cognito オーソライザーという機能があります。API Gateway のタイプにより ID トークンを送信するフォーマットが異なるため、注意点として紹介します。
AWS AWS Amplify 環境で webmanifest ファイルへのアクセスを有効にする
AWS Amplify でアプリ稼働環境を公開しているときに、manifest.json ファイルの拡張子を .webmanifest に変更する方法を紹介します。変更しなくても動くのですが、ブラウザの開発者ツールに変更を推奨するメッセージが表示され続けるため、それを消すための対処です。
アプリケーション開発 React Router v6 が出たので v5 からアップグレードしてみた
React Rouer v5 から v6 へのアップグレード時に書き換えたコード例を紹介します。ただモジュールをアップグレードするだけでは動かず、コード書き換えが必要になりますのでお気を付けを。
データベース React アプリ用に Amazon DynamoDB でユーザ設定テーブルをつくる
React アプリ用に Amazon DynamoDB でユーザ設定テーブルをつくった例を紹介します。 Amazon DynamoDB のテーブル設計とアプリ側でのデータ構造変更の例の紹介が主旨となっております。
AWS Amplify + Cognito + React アプリから Kinesis Data Firehose にログをストリームする
AWS Amplify + Amazon Cognito + React の WEBアプリで、Amazon Kinesis Data Firehose にログをストリームする方法を紹介します。
AWS Amplify UI v2 が出たので v1 からアップグレードしてみた [ AWS Amplify + Amazon Cognito + React ]
AWS Amplify UI v2 による、Reactアプリのサインイン画面実装例を紹介します。実際にアップグレードした際のコード例や気付きがありますので是非ご覧下さい。