開発

開発

メモアプリ開発② メモ機能

メモアプリ「Simpl」の開発手順をまとめるシリーズ第2弾はメモ機能です。 ユーザーと紐づけたメモを扱います。 これまでの学習内容については以下の記事にまとめています。 はじめに 今回追加する機能は以下のとおりです。 メモの取得 メモの作成...
開発

メモアプリ開発① アカウント機能

メモアプリ「Simpl」の開発手順をまとめるシリーズ第1弾はアカウント機能です。 (膨大な量になってしまったので目次利用を推奨します。) これまでの学習内容については以下の記事にまとめています。 はじめに 今回追加する機能は以下のとおりです...
開発

【React】Context APIの使い方

作成してきたメモアプリにグローバル状態管理を導入します。 これまでの学習内容については以下の記事にまとめています。 グローバルな状態管理の利点 それぞれのコンポーネントは状態という「データ」を持つことができます。しかし、コンポーネントが複雑...
開発

【Jest/React Testing Library】Reactテスト入門【コンポーネントの振る舞い編】

初めてReactのテストフレームワークを触るので簡単なテストを行った内容をまとめます。 これまでの学習内容については以下の記事にまとめています。 テストについて フロントエンドのテストは、アプリケーションの異なる観点で品質を確保するために以...
開発

【JavaScript】非同期処理を簡単な例を使って理解する

「こう書けば動く」という状態でJavaScript/TypeScriptの非同期処理を実装してきました。 今回は「よく分からず使っている」を「なんとなく分かる」にするため、できるだけ簡単な例を作成して基本を整理します。 本記事で掲載している...
開発

【React/TypeScript】コンポーネント指向【ステップ解説】

前回まで最低限のアプリケーションをAWSにデプロイする内容で更新してきましたが、今回はフロントエンドのトピックです。 今回は、実際のプログラムを使ってコンポーネントの整理を行ってみたいと思います。 手順はReact公式「React の流儀」...
開発

React×SpringBoot×MySQLをAWSにデプロイ

こんにちは。じゅんです。 今回はReact×Spring Boot×MySQLをAWSにデプロイします。 VPCの作成から動作確認までこの記事でカバーしています。 これまでの作業内容については以下の記事にまとめています。 全体像 VPCの作...
開発

MySQLとSpringBootの連携方法【MyBatis/Maven/VSCode】

こんにちは。じゅんです。 今回は、開発(ローカル)環境でMySQLとSpringBootを連携させる方法についてまとめます。 Spring Bootプロジェクトの作成は以下の記事で詳しく解説しています。 また、これまでの作業内容については以...
開発

DockerでSpringBootアプリを動かす方法

こんにちは。じゅんです。 今回はSpringBootアプリをDockerで動かしてみたいと思います。Dockerについてはあまりよく知らないので、イチから調べて自分なりの理解もまとめていきます。 これまでの作業内容については以下の記事にまと...
開発

SpringBoot×Reactを2つのEC2インスタンスにデプロイする方法

こんにちは。じゅんです。 前回、1つのEC2インスタンスにSpring BootとReactの簡単メモアプリをデプロイしました。今回はそのメモアプリを2つのEC2インスタンスにデプロイします。2つのインスタンス間で通信を行う上で必要な設定を...