今回、Excel ファイルをブラウザで読み込み、json に変換して、API で POST する処理を実装したので、備忘録として残しておく。本記事では、Excel ファイルをブラウザで読み込み、json に変換するまでのコードを紹介する。 SheetJS js-xlsx サンプルコード …

React の SPA を実装する際に、画面遷移時にローディング画面を挿入したいことがある。今回、React v16.6 から利用可能になったReact.lazy と React.Suspense を初めて使ってみたので、備忘録として残しておく。 React.lazy とは React.Suspense とは React.…

先日、ローカル環境での開発が終了し、早速、客先のサーバーにデプロイをしようとした際に、エラーが発生して、あれ？GitHub から Clone できない。。。となって焦ってしまった。 同僚に聞くと、即座に回答が返ってきて、そんな裏技あるの？と思ったので、備…

最近、Next.js をよく使っている私だが、先日の案件で SPA で S3 などを用いた静的ウェブサイトとしてホスティングしたいという話になった。よし！今回も Next.js でいくぞ！と意気込んだが、検討した結果、通常の React で React Router を使って実装するこ…

昨日、Fetch API を使うにあたり、大きなミスを犯して、無駄な時間を潰してしまったので、反省を込めて、この備忘録を残しておく。 Fetch APIとは ハマった罠 Fetch API のラッパー関数を作った まとめ Fetch APIとは Fetch APIとは、XMLHttpRequestと同じく…

今回は、SocketIO を用いた簡単なチャットアプリを作ってみたので、紹介する。 Next.js + Socket通信の実装 サーバーサイド フロントエンド Material-UI で簡単にUI構成 まとめ なお、実装したサンプルコードは GitHub に公開している。 Docker でコンテナを…

Next.js（SSR）のアプリケーションを作成して、AWS にデプロイしてみたので、備忘録として残しておく。 0. ECR にイメージリポジトリを作成する 1. アプリをコマンドで実行できることを確認する 2. docker imageを作成する 3. ECRにdocker imageをpushする 4…