React.js/Next.js【Next.js】さくらのレンタルサーバーへのデプロイを自動化する（GitHub Actions）
やりたいこと Next.jsで作成したwebサイト（SSG）を、さくらのレンタルサーバーにデプロイする作業を自動化する。 自動デプロイのタイミングは 手動でボタンを押す mainブランチへのマージ（厳密にはmainにpushされたとき） 環...
フレームワーク
React.js/Next.js
SpringBoot【SpringBoot】ログをJSON形式で出力する
ログを解析してアラート通知などに活用したい場合、ログのフォーマットはパースしやすいことが最重要となる。 今回はSpringBootアプリケーションのログを、１ログ１行のJSON形式で出力する方法を解説する。 パースしやすいログとは １ログ１...
React.js/Next.js【Next.js】jestを使ったユニットテストを導入する（TypeScript利用）
環境 next 13.2.1 jest 29.5.0 参考ページ 今回の記事は、Next.jsのテストに関するページをもとに作成している。 テスト対象のコンポーネント 今回のテスト対象コンポーネントは以下。 ボタンと言いつつ、ただのh3タグ...
React.js/Next.js【Next.js】Chart.jsを導入してグラフを描画する
Chart.jsとは Chart.jsとは、上記の公式ページに載っているようなグラフを簡単に描画することができるライブラリ。 環境 Next.js 13.2.1 Node.js 18.0.0 導入手順 ①ライブラリのインストール React...
SpringBoot【SpringBoot】3系バージョンアップ備忘録【1】
はじめに この記事は備忘録としてメモ感覚で記載しているので様々な検証を行ったわけではありません。 環境 IntelliJ SpringBoot2.7.4→3.0.5へ変更したい Java11→Java18 Gradle 発生したエラー A ...
React.js/Next.js【環境構築】プロジェクトにprettierを導入する
やること プロジェクトを新規作成し、prettierを導入するところまで解説する。 また、VSCodeの設定も行い、保存時に自動フォーマットされるようにする。 Next.jsのプロジェクトで解説しているが、サンプルで利用しているだけなので他...
Vue.js/Nuxt.jsVue.jsのプロジェクトにfirebaseを導入する
概要 Vue.jsを利用したプロジェクトに、firestoreを利用してデータ取得を行う手順を解説する。 公式ドキュメント 公式ドキュメントはこちら。 前提 vue createコマンドを利用して作成したVue.jsプロジェクトを想定する ...
Vue.js/Nuxt.js【Vue.js】ディレクティブ省略記法メモ
Vue.jsではよく利用する構文は省略して記述することができる。 久しぶりにVue.jsに触ると忘れてしまうのでメモ。 v-bind: → : v-bindディレクティブは、Vue.js内で使われているデータを画面に埋め込む時によく利用する...
React.js/Next.js【React.js】useState,useRef,useEffectの使い分け簡易まとめ
久しぶりにReactを触ると、どのhooksがどんな機能か忘れてしまうのでまとめ。 簡易的にしかまとめていないので、詳細は公式サイトなどを見てほしい。 useState （個人的に）一番基本的な状態管理のためのhooks。アプリケーションで...
React.js/Next.js【Next.js/React.js】TypeScriptで書かれたプロジェクトにESLintとPrettierを導入する
概要 Next.jsTypeScript という条件のプロジェクトに、いい感じに静的解析ツールとコードフォーマッターを入れる。 ESLint（静的解析ツール）の導入 公式ページを参考に導入する。 インストール $ npm install e...