エンジニアを目指す日常ブログ

日々勉強したことのメモ。独学ですので間違っていたらコメント等で教えてください。

React×Typescriptでページ遷移時に値を渡す方法

React×Typescriptでルーティングする際、前画面の値を次の画面に渡す方法を記載する。 ①URLパラメータを使う(パスパラメータ、 クエリパラメータ)② ``コンポーネントにstateを渡す③`useHistory()`を使う

react-router-domを使ったルーティング方法メモ

eact-router-domを利用して基本のページ遷移を実施する。 react-router-domは2021/11/3にバージョン6がリリースされたようだが、情報が少なくて独学が難しいのでバージョン5から始める。

yarnで古いバージョンのパッケージをインストールする方法メモ

Reactのreact-router-domを例に、yarnで古いバージョンのパッケージをインストールする方法メモ。

React × Typescriptでコンポーネントを書く時のテンプレートメモ

React × TypeScriptでコンポーネントを追加するときに毎回迷うので、基本となる要素をメモ。

ReactでCSSを適用する方法のメモ

ReactでCSSを適用する方法のメモ。ReactでCSSを当てる方法はいくつかある。覚えておけばよさそうなものだけ抜粋してメモ。

【React】関数コンポーネントの外に書いた処理はいつ実行されるのか

Reactでは、コンポーネントを関数で定義しているが、関数の外に書いた処理はいつ実行されているのかよくわからなかったので試してみた。

【React】レンダリングを制御するための関連知識メモ

Reactのレンダリングに関わるuseEffect、memo、useCallback、useMemoに関しての基本事項を記載。

AWS Amplify がビルドに失敗したときの原因をメモ

AWS AmplifyでReactアプリを作成しようとしたところ、ビルド実行時にエラーとなったので原因をメモ。

重要だけど忘れそうなJavaScriptの記法メモ

Reactを勉強する中でJavaScriptの記法を利用している。 その中でよく出てきた、超基本の重要なJavaScript記法をメモしておく。今後、何か月か勉強をお休みすることがあると忘れそうなため。

【React/ useState】setState関数の書き方が下手で大量レンダリングが起こった話

Reactを利用してアプリを作っていたところ、予期せぬ大量レンダリングが発生して画面描画が遅くなってしまった。 いろいろ試した結果、useStateのset関数の使い方が悪いことがわかったのでメモ。

React+Node.jsでチャットアプリの基礎を作成する

ReactとExpressを利用して簡易チャットアプリを作成した。 実施した内容をメモ/紹介する。

画面サーバ(React)とWebサーバ(Node.js)をSocket.ioで接続する方法メモ

チャットアプリの事前準備として、画面サーバ(React)とWebサーバ(Node.js)を別々に構築して、クライアントとWebサーバ間をSocket.ioで接続する。

WEBサーバと画面サーバを作成して相互に通信させる

自分で画面サーバとWebサーバを作成し、通信させる。 具体的には、画面サーバがWebサーバから値を取得して、画面表示する。 また、このときに必要になるCORSについて理解する。

docker-composeを利用してdockerコンテナを作成する方法メモ(複数コンテナ対応)

dockerコンテナを立ち上げる。 また、今回はdocker-composeというツールも利用する。

Linux仮想環境:Vagrantの立ち上げ方メモ

Windows上にLinuxの仮想環境を構築する方法として有名なVagrantの立ち上げ方メモ。

手書きで書いた文字を画像に入れ込む方法

手書きで書いた文字の黒い部分を抽出し、データ化する方法を考えたのでメモ。手書きで味のある文字を写真の上などに乗せられたらかっこいいなと思い実施。

【Node.js+Express】ミドルウェアとapp.useについてメモ

Expressで利用される「ミドルウェア」と、ミドルウェアを呼び出すときに使われる`app.use`について調べたことをメモ。

外付けHDDにデータバックアップを取る方法(Windows公式コマンドrobocopy利用)

ソースコードや各種ドキュメント、写真などをローカルPCから外付けハードディスクにバックアップする方法を記載します。

【Node.js】モジュールの作成方法

Node.jsでWEB-APIサーバを立ち上げたが、一部の処理を別のモジュールとして切り出したい場合がある。自分でモジュールを定義して、処理を呼び出す方法をメモ。

【Node.js+ejs】includeの使い方メモ

ejsの構文として`include`がある。 ejsファイルからejsファイルを呼び出せる。 include構文の使い方をメモする。

Node.js + ejsでフロントエンドを作成する方法メモ

前回、Node.jsを利用してWEB APIサーバを立ち上げた。 流れで、テンプレートエンジンを利用してフロントエンドをNode.jsで実装する方法も学んだので、メモしておく。

Node.js + Express でWEB-APIサーバを作成する

Node.jsを利用してWEB APIサーバを立ち上げたい。 Node.jsに画面サーバを担わせることもできるが、画面側はReactで作成したいので、今回はWEBサーバとして基本的なAPIを提供するところまでを目標とする。

HTTPリクエストツールPostmanの利用/インストール時のエラー対応

Node.jsの勉強をしていたところ、HTTPリクエストをPOSTメソッドで投げたい場面が出てきたため、Postmanを利用することにした。手順のメモ。

PowerShellを管理者権限で実行できているか確認するコマンドメモ

PowerShellを管理者権限で実行できているか確認するコマンドメモ。

CodePipelineを利用してECS Fargateでブルーグリーンデプロイメントする

CodePipelineを利用してECS Fargateでブルーグリーンデプロイメントする。 まず、ビルド、デプロイについて単体で理解し、それらの設定をCodePipelineに組み込んでいった。かなり苦労したので、エラーの内容も合わせて紹介する。 順々にやっていったことで20…

Lambda+API GatewayからDynamoDBにアクセスする方法

Lambda関数を作成し、DynamoDBにアクセスする。 Lambda関数を呼び出すためにAPI Gatewayを利用する。

AWS DynamoDBにデータベースを作成し、データを入力する方法メモ

AWS上にDynamoDBを作成し、レコード(アイテム)を追加する。

package.jsonとpackage-lock.json とは?(Node.js/React)

ReactアプリやNode.jsのExpressでアプリを作ると自動で作成される`package.json`ファイルの意味をメモ。

EC2へのSSHアクセス時にポートフォワーディングを設定する方法メモ

EC2にSSH接続する際、ポートフォワーディングの設定をしたのでメモ。

SSHアクセスした先のファイルをVSCodeで編集する方法メモ

SSHアクセスした先のファイル(今回はAWS EC2上に作成したファイル)をVSCodeで編集する方法のメモ。