React

React入門書の決定版『りあクト!第2版』を読んだ感想を書いてみる

React 入門書の決定版として技術者の間で話題の同人誌『りあクト!第2版』を読み終わったので、感想などを書いてみたいと思います。実は2周しているのですが、難しいところの理解が及んでないので書くのに躊躇したのですが、それはそれで感想だと思い書く…

JSONを&つなぎのクエリー文字列形式に簡単に変換する方法

JSON は便利なのですが、JSON をクエリー文字列のようにkey1=value1&key2=value2といったように&つなぎの文字列に変換する必要が出てきました。 調べてみたところ、以下のように簡単に変換することができました。 const data = { key1: 'value1', key2: 'val…

JavaScriptでURLのクエリー文字列をキー指定で簡単に取得する方法

JavaScript で URL のクエリー文字列をキー指定で取得するのは、以前は面倒だったようです。 例えば、URL がhttps://example.jp/?key=valueとあったら、keyを指定してvalueを取得したいですよね。 今はURLSearchParamsというものがあるので、クエリー文字列…

ReactのWebサーバーでlocalhostをHTTPS化する方法

React の Webサーバーで、localhost を HTTPS でアクセスできるようにする方法ですが、実は簡単です。 特に自己証明書をインストールする必要もなく、以下のコマンドを実行するだけで OK です。 Windows: Powershell or VisualStudio Code > ($env:HTTPS = "…

Fix: Erorr occurred React + HTTPS in development environment

A below error occurred React + HTTPS in development environment. ts-loader: Using typescript@3.3.4000 and C:\Users\xxx\Projects\react-cognito\tsconfig.json internal/buffer.js:788 class FastBuffer extends Uint8Array {} ^ RangeError: Invalid…

React+Amplify+CognitoにGoogle認証を追加する

はじめに React + Amplify + Cognito でのユーザー認証も大分調査が進んできました。 www.aruse.net 今度は、Google の OAuth 認証を追加したいと思います。 調べてみたのですが、情報が英語圏を含めほとんどない。 断片情報を組み合わせて試行錯誤したらう…

React+Amplify+Cognitoでアプリケーションをユーザー認証でガードする

以下の記事で、React + Amplify + Cognito のユーザー認証を日本語化するところまできました。 www.aruse.net この記事では、React のアプリケーションをユーザー認証でガードする方法をご紹介します。 具体的に言うと、サインインしていないユーザーにはサ…

React+Amplify+Cognitoのサインイン画面を日本語化する

以下の記事で、React + Amplify + Cognito でユーザー認証を行うことができるようになりました。 www.aruse.net 一方で、Cognito でデフォルトで用意された画面は以下のように英語表記になっていて、このままでは使い物になりません。 ですが、Cognito のサ…

React+Amplify+Cognitoでユーザー認証を実装する

はじめに React + AWS Amplify + Cognito でユーザー認証を行うアプリを作ってみたいと思います。 Amplify は AWS のサービスを便利に使用できる JavaScript ライブラリで、Cognito は AWS でユーザー認証を行えるサービスになります。 この記事では、TypeSc…

TypeScriptのReactでAmplifyを使おうとしたらエラーでハマったのでその解決方法

はじめに React の TypeScript をベースとしたプロジェクトで、AWS Amplify + Cognito でユーザー認証のサンプルを動作させようとしたらエラーが頻発してハマってしまいましたので、解決方法のメモを残しておきます。 ちなみに TypeScript な React プロジェ…

Reactで画像ファイルをS3からAPI Gateway+Lambda(C#)経由でダウンロードする方法

はじめに 以下の記事で、React で画像や Excel ファイルを API Gateway + Lambda(C#) 経由で S3 にアップロードする方法をご紹介しました。 www.aruse.net せっかくですので、S3 から画像ファイルを API Gateway + Lambda(C#) 経由でダウンロードする方法も…

Reactで画像やExcelをAPI Gateway+Lambda(C#)でアップロードしてS3に保存する方法

はじめに React を使い画像ファイルや Excel ファイルなどのバイナリファイルを、AWS の API Gateway と Lambda (C#) を経由してアップロードし、S3に保存する方法を調べたので記事として残しておきます。 この方法ですが、ネット上に全くといっていいほど情…

ReactのSPAをS3+CloudFront環境に自動デプロイする方法

はじめに 以下の記事で、Amazon S3 と CloudFront を使って HTTPS でサイトを独自ドメインで公開する方法が分かりました。 www.aruse.net では、React の SPA (Single Page Application)を S3 + CloudFront 環境にデプロイしてキャッシュをクリアするまで自…

React入門として書籍『りあクト!』を読み本家チュートリアルに挑戦した感想

はじめに 書籍『りあクト!』という同人誌を @YSRKENさんにご紹介いただき、一度は挫折した React 再入門しようと思い、書籍を読了した感想と、React 本家サイトの英語チュートリアルに挑戦した感想を書いていきたいと思います。 booth.pm 『りあクト!』の…

Fix: Cannot find module 'react'.ts(2307)

React で以下の import 文で Cannot find module 'react'.ts(2307)というエラーが発生して困りました。 import * as React from 'react'; 不思議なことに、yarn start すると実行できるのですよね。 とりあえず解決策は、以下のコマンドを実行することです。…