あるSEのつぶやき・改

ITやシステム開発などの技術に関する話題を、取り上げたりしています。

React

Vite+Jest 逆引きリファレンス in TypeScript

はじめに JavaScript や TypeScript のテストで、Jest を使う機会は多いかと思います。 この記事は、Jest の使い方を逆引きリファレンスの形式で掲載します。 今まで Jest でテストを行う際は webpack を使用することが多かったのですが、webpack はすでに開…

書籍『React実践の教科書』が分かりやすくてよかった

はじめに よかったところ 段階を踏んで解説がされている Hooks について詳しく解説されている export についての解説あり export の記法 export default の記法 CSS の手法が複数解説されている TypeScript の解説がある 足りなかったところ パッケージマネ…

React Native+ExpoでESLintとPrettierを使いコードチェックとフォーマット整形を行う方法

はじめに React Native + Expo の開発を行おうとして、そういえば React のプロジェクトで ESLint と Prettier を導入したけど定型化しておらず再利用ができないなぁと思いました。 じゃあ、React プロジェクトの ESLint と Prettier の設定を React Native …

Reactでi-mobileの広告を表示する方法

React で i-mobile の広告を表示するのは一筋縄ではいきません。 自分もかなり苦労して広告を表示させることができました。 この記事は、i-mobileから提供されたスクリプトをそのまま使用していますが、ある時点での i-mobile の表示方法であり、将来に渡っ…

Reactで<script>タグを生成しスクリプトを実行/外部スクリプトを読み込む方法

React に限った話ではないかもしれませんが、JavaScript(TypeScript)で <script>タグを動的に生成してスクリプトを実行したい、もしくは外部スクリプトを読み込みたいことは結構あると思います。 外部スクリプトを読み込む方法はネットを探せば結構見つかるのですが</script>…

ReactでJSONファイルをブラウザから直接ダウンロードさせる方法

React のような SPA (Single Page Application) では、変数から直接 JSON ファイルを出力したいことがあります。 そんなときには、以下のスクリプトを試してみてください。 const fileName = 'finename.json'; const data = new Blob([JSON.stringify(export…

『React x Amplify で始めるサーバーレス アプリケーション開発』が分かりやすくてよい本だった #技術書典

技術書典 7で頒布されていた『React x Amplify で始めるサーバーレス アプリケーション開発』という本があったのですが、技術書典当日は気が付かず、BOOTH にて販売されているのを発見して速攻でポチりました。 booth.pm これですよ、これ。これが欲しかった…

React+AmplifyのCognito認証画面に独自カスタマイズした画面を使用する方法

はじめに Amplify + Cognito のサインイン画面は堅牢でよくできているのですが、いかんせんデザインの自由度が低いです。 この記事では、 Amplify の API を直接叩いてサインインする方法をご紹介します。 はじめに 準備 出来上がりの画面 ソースコード 解説…

React+AmplifyのCognitoサインアップで電話番号を無効にする方法

React + Amplify + Cognito のサインアップ画面では、デフォルトで電話番号が必須項目になってしまいます。 Congnito のユーザープールでは、必須項目になっていないのにもかかわらず。 ですが、この電話番号を無効にする方法があります。 その方法は簡単で…

React+Amplify+Cognito認証のアプリでExcelをS3にアップロードしLambda(C#)で読み込む

はじめに 前の記事で、React+Amplify+Cognito認証のアプリで画像ファイルをS3にアップロードするまで行いました。 www.aruse.net この記事では、Excel ファイルを S3 にアップロードし、S3 のトリガーで Lambda 関数(C#)を起動し、Excel ファイルを読み込ん…

React+Amplify+Cognito認証のアプリで画像ファイルをS3にアップロードする

はじめに 前の記事で、React+Amplify+Cognito認証のアプリで自動デプロイするところまでご紹介しました。 www.aruse.net 今度は、Amplify の Storage という機能を使用して S3 にファイルをアップロードする方法をご紹介します。 前の記事のプロジェクトに機…

React+Amplify+Cognito認証のアプリを自動デプロイまで行う

はじめに React のSPA(Single Page Application)アプリに、AWSのAmplifyライブラリとCognito認証を組み合わせたものを、BitbucketというGit サービスにコミット後、Web アプリとして自動デプロイする方法を見ていきたいと思います。 事前に、Bitbucket で de…

Solved, "No userPool" error at aws-amplify

"No userPool" error at aws-amplify is soloved below. import Amplify from 'aws-amplify'; import * as aws_exports from './aws-exports'; - Amplify.configure(aws_exports); + Amplify.configure(aws_exports.default); in index.tsx.

ReactのSPA解説本『ネコミミでもわかるシングルページアプリケーション』の感想

技術書典6で入手した、React の SPA (Single Page Application)の解説本である『ネコミミでもわかるシングルページアプリケーション』(60ページ)を読み終わりました。 この本は BOOTH での再販がないので、技術書典でしか入手できない貴重な本になります。 …

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 すると実行できるのですよね。 とりあえず解決策は、以下のコマンドを実行することです。…