React
はじめに JavaScript や TypeScript のテストで、Jest を使う機会は多いかと思います。 この記事は、Jest の使い方を逆引きリファレンスの形式で掲載します。 今まで Jest でテストを行う際は webpack を使用することが多かったのですが、webpack はすでに開…
はじめに よかったところ 段階を踏んで解説がされている Hooks について詳しく解説されている export についての解説あり export の記法 export default の記法 CSS の手法が複数解説されている TypeScript の解説がある 足りなかったところ パッケージマネ…
はじめに React Native + Expo の開発を行おうとして、そういえば React のプロジェクトで ESLint と Prettier を導入したけど定型化しておらず再利用ができないなぁと思いました。 じゃあ、React プロジェクトの ESLint と Prettier の設定を React Native …
React で i-mobile の広告を表示するのは一筋縄ではいきません。 自分もかなり苦労して広告を表示させることができました。 この記事は、i-mobileから提供されたスクリプトをそのまま使用していますが、ある時点での i-mobile の表示方法であり、将来に渡っ…
React に限った話ではないかもしれませんが、JavaScript(TypeScript)で <script>タグを動的に生成してスクリプトを実行したい、もしくは外部スクリプトを読み込みたいことは結構あると思います。 外部スクリプトを読み込む方法はネットを探せば結構見つかるのですが</script>…
React のような SPA (Single Page Application) では、変数から直接 JSON ファイルを出力したいことがあります。 そんなときには、以下のスクリプトを試してみてください。 const fileName = 'finename.json'; const data = new Blob([JSON.stringify(export…
技術書典 7で頒布されていた『React x Amplify で始めるサーバーレス アプリケーション開発』という本があったのですが、技術書典当日は気が付かず、BOOTH にて販売されているのを発見して速攻でポチりました。 booth.pm これですよ、これ。これが欲しかった…
はじめに Amplify + Cognito のサインイン画面は堅牢でよくできているのですが、いかんせんデザインの自由度が低いです。 この記事では、 Amplify の API を直接叩いてサインインする方法をご紹介します。 はじめに 準備 出来上がりの画面 ソースコード 解説…
React + Amplify + Cognito のサインアップ画面では、デフォルトで電話番号が必須項目になってしまいます。 Congnito のユーザープールでは、必須項目になっていないのにもかかわらず。 ですが、この電話番号を無効にする方法があります。 その方法は簡単で…
はじめに 前の記事で、React+Amplify+Cognito認証のアプリで画像ファイルをS3にアップロードするまで行いました。 www.aruse.net この記事では、Excel ファイルを S3 にアップロードし、S3 のトリガーで Lambda 関数(C#)を起動し、Excel ファイルを読み込ん…
はじめに 前の記事で、React+Amplify+Cognito認証のアプリで自動デプロイするところまでご紹介しました。 www.aruse.net 今度は、Amplify の Storage という機能を使用して S3 にファイルをアップロードする方法をご紹介します。 前の記事のプロジェクトに機…
はじめに React のSPA(Single Page Application)アプリに、AWSのAmplifyライブラリとCognito認証を組み合わせたものを、BitbucketというGit サービスにコミット後、Web アプリとして自動デプロイする方法を見ていきたいと思います。 事前に、Bitbucket で de…
"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.
技術書典6で入手した、React の SPA (Single Page Application)の解説本である『ネコミミでもわかるシングルページアプリケーション』(60ページ)を読み終わりました。 この本は BOOTH での再販がないので、技術書典でしか入手できない貴重な本になります。 …
React 入門書の決定版として技術者の間で話題の同人誌『りあクト！第２版』を読み終わったので、感想などを書いてみたいと思います。実は２周しているのですが、難しいところの理解が及んでないので書くのに躊躇したのですが、それはそれで感想だと思い書く…
JSON は便利なのですが、JSON をクエリー文字列のようにkey1=value1&key2=value2といったように&つなぎの文字列に変換する必要が出てきました。 調べてみたところ、以下のように簡単に変換することができました。 const data = { key1: 'value1', key2: 'val…
JavaScript で URL のクエリー文字列をキー指定で取得するのは、以前は面倒だったようです。 例えば、URL がhttps://example.jp/?key=valueとあったら、keyを指定してvalueを取得したいですよね。 今はURLSearchParamsというものがあるので、クエリー文字列…
React の Webサーバーで、localhost を HTTPS でアクセスできるようにする方法ですが、実は簡単です。 特に自己証明書をインストールする必要もなく、以下のコマンドを実行するだけで OK です。 Windows: Powershell or VisualStudio Code > ($env:HTTPS = "…
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 でのユーザー認証も大分調査が進んできました。 www.aruse.net 今度は、Google の OAuth 認証を追加したいと思います。 調べてみたのですが、情報が英語圏を含めほとんどない。 断片情報を組み合わせて試行錯誤したらう…
以下の記事で、React + Amplify + Cognito のユーザー認証を日本語化するところまできました。 www.aruse.net この記事では、React のアプリケーションをユーザー認証でガードする方法をご紹介します。 具体的に言うと、サインインしていないユーザーにはサ…
以下の記事で、React + Amplify + Cognito でユーザー認証を行うことができるようになりました。 www.aruse.net 一方で、Cognito でデフォルトで用意された画面は以下のように英語表記になっていて、このままでは使い物になりません。 ですが、Cognito のサ…
はじめに React + AWS Amplify + Cognito でユーザー認証を行うアプリを作ってみたいと思います。 Amplify は AWS のサービスを便利に使用できる JavaScript ライブラリで、Cognito は AWS でユーザー認証を行えるサービスになります。 この記事では、TypeSc…
はじめに React の TypeScript をベースとしたプロジェクトで、AWS Amplify + Cognito でユーザー認証のサンプルを動作させようとしたらエラーが頻発してハマってしまいましたので、解決方法のメモを残しておきます。 ちなみに TypeScript な React プロジェ…
はじめに 以下の記事で、React で画像や Excel ファイルを API Gateway + Lambda(C#) 経由で S3 にアップロードする方法をご紹介しました。 www.aruse.net せっかくですので、S3 から画像ファイルを API Gateway + Lambda(C#) 経由でダウンロードする方法も…
はじめに React を使い画像ファイルや Excel ファイルなどのバイナリファイルを、AWS の API Gateway と Lambda (C#) を経由してアップロードし、S3に保存する方法を調べたので記事として残しておきます。 この方法ですが、ネット上に全くといっていいほど情…
はじめに 以下の記事で、Amazon S3 と CloudFront を使って HTTPS でサイトを独自ドメインで公開する方法が分かりました。 www.aruse.net では、React の SPA (Single Page Application)を S3 + CloudFront 環境にデプロイしてキャッシュをクリアするまで自…
はじめに 書籍『りあクト！』という同人誌を @YSRKENさんにご紹介いただき、一度は挫折した React 再入門しようと思い、書籍を読了した感想と、React 本家サイトの英語チュートリアルに挑戦した感想を書いていきたいと思います。 booth.pm 『りあクト！』の…
React で以下の import 文で Cannot find module 'react'.ts(2307)というエラーが発生して困りました。 import * as React from 'react'; 不思議なことに、yarn start すると実行できるのですよね。 とりあえず解決策は、以下のコマンドを実行することです。…