フロントエンド 【Vue Router v4/Vue3】404ページを表示する方法
/* や * では効かなかった 404ページを表示したい場合、/* や * と記載すればOKという記事をいくつか見ましたが、私の環境（Vue Router v4, Vue v3）では効きませんでした>< const routes = [ {...
開発
フロントエンド 
バックエンド 【MySQL】複数条件で絞った件数を取得する
複数条件で集計 コード例は、「usersテーブルから、nameが空 かつ genderがmaleのレコード数を取得する」実行命令です。 その１ # AND条件 select count(name="" and gender="male" o...
開発 知っておきたいRustの基本
Rustを勉強してみて、押さえておきたい点をいくつかまとめました。 周辺ツール rustup Rustのバージョン管理ツール。rustupをインストールすると、通常以下もインストールされる。 rustc：Rustコンパイラcargo：Rus...
Git/Github 【zsh/bash/git】おすすめのエイリアス
zshrc/bashrc, gitconfigに設定するおすすめのエイリアスを紹介します。エイリアスをうまく使えば、効率アップや、危ないコマンドの回避ができます！ .zshrc (.bashrc) # git alias g='gi...
開発 m1 Mac(Pro)のファンが回り出した時、改善のために確認すること（たぶん開発者向け）
私はm1 Mac(Pro)を使用しているのですが、普段はとっても静かです。IntelチップのMacやWindowsのPCと比べて、ファンなんて全然回りません。 しかし、たまに高負荷なものを実行すると、「ウィーーーーーーーン」とファンが回り、...
HTML/CSS/Sass 【CSS】枠線の付け方3つ（内側も含む）
「CSSで枠線をつけるといえばborder！」ではありますが、borderだと思い通りのスタイルにならないこともしばしば。。そこで、私が用途に合わせて使い分けている、枠線の付け方を紹介します。 枠線を表現できるプロパティ3つ border ...
開発 【Windows】nodistからnvm-windowsに乗り換える
久しぶりにWindowsでNode.jsのバージョン管理をしようとしたときに、nodistは実質メンテナンスされてないようだったので、別のNode.jsのバージョン管理ツールに乗り換えることにしました。 fnmやnvsなど他にもパッケージマ...
Docker docker-composeとは？docker-compose.yamlのシンプルな説明
docker-composeとは docker-composeは、Docker(Docker Engine)とは別のソフトウェアで、Dockerアプリケーションをもっと使いやすくするためのツール。 通常は、Dockerでサービスを立ち上げる...
JavaScript 【JavaScript】基本的なことを言語化してまとめてみた
普段何気なく使っている仕組みや機能でも「説明して」って言われると、うまく言えないこともしばしば。・・・でも答えたい！ということで、JavaScriptの基本的な部分を言語化してまとめてみました。 ホイスティング（巻き上げ）とは 変数や関数の...
Git/Github 【GitHub Actions】タイムゾーンを指定して現在日時を取得する
GitHub Actionsで現在の日時を取得する方法をメモしておきます。タイムゾーンや時刻表記は任意に変更可能です。 name: Show current date on: [push] jobs: build: name: Show c...
DB DockerでMongoDB、Mongo Expressの環境を立ち上げる(docker-compose)
DockerでMongoDB, Mongo-Express（とNode.js）の環境を立ち上げました。イメージを自作する必要がなかったので、Dockerfileは使用せず、docker-composeファイルのみ使用しました。 docker...
DB NoSQLとは？NoSQLデータベースの種類と特徴
NoSQLデータベースとは？ 関係データベース（リレーショナルデータベース）以外のデータベースのこと。SQLは関係データベース用の言語であることから「SQL＝関係データベース」と捉え、逆に「NoSQL＝非リレーショナル」といった認識。※人に...
React 【React/Formik】入力時に自動送信する方法
Formikを使用しているときに、入力に合わせて自動送信させたかったので、調べて実装してみました。 方針 FormikのuseFormikContextを使用する！FormikのForm内の子コンポーネント等で呼び出すと、Formikの変数...
React ReactSelect(AsyncSelect)でデバウンスする方法
ReactSelect、とても便利ですね！初めて使った時は感動しました。今回はReactSelectで用意されているAsyncSelectでデバウンスする方法を記しておきます。 デバウンスとは 連続して呼び出される同じ処理を制御すること。呼...
OSS 【npmライブラリ作成】デモページの作り方（GitHub Pages）
方針 デモページのコードはexamplesディレクトリで管理。examples/srcには開発用のコードをまとめ、examples/publicは本番用のコードを格納する。デモページにはGithub Pagesを使用。examples/pu...
OSS 【読書記録/レビュー】まつもとゆきひろ 言語のしくみ
最近OSSに興味が出てきたところから始まり、プログラミング言語がどんな感じで作られるか知りたい！と思い、読んでみました。 書籍名 まつもとゆきひろ 言語のしくみ 著者名 まつもとゆきひろ リンク Amazon Kindle 楽天Kobo 概...
OSS 【npmライブラリ作成】パッケージサイズ(package size, unpacked size)を減らす2つの方法
自分でnpmライブラリを作ったのですが、そのパッケージサイズが大きく、減らす方法を模索しました。npmサイトでは、各ライブラリのページにUnpacked Sizeが表示されますし、ユーザーがライブラリを選択するときの基準にもなるので、できる...
Next.js 【npmライブラリ作成×webpack×Next.js】ReferenceError: document is not defined
作成したnpmライブラリをNext.jsで読み込む時、ReferenceError: document is not definedというエラーに遭いました。 状況 作成していたnpmライブラリは、webpackを使用してバンドルし、そのJ...
Next.js 【npmライブラリ作成/Next.js】Global CSS cannot be imported from within node_modules.
自分で作成したライブラリをNext.jsにインストールした際に、Global CSS cannot be imported from within node_modules.というエラーが立ちはだかりました。 エラー内容 Global CS...
JavaScript CJS, UMD, ESMとは？その違い。
cjs, umd, esmって何？と思ったので調べました。 まずはざっくり結論から これらは、モジュールの仕様を指します。JavaScriptファイルから別のJavaScriptファイルを読み込む仕組みのようなものです。 JavaScrip...