Vite + React + SWC + ESLintの環境を整える

webpackに比べ高速と評判のViteを用いてReact開発環境を作成しつつ、ESLintを導入して更にDXを上げたReactの開発環境の作成方法をご紹介しま…

【感想】BB2 2018 - Feelcycle

2018年にリリースされたプログラムの曲で構成された、BB2 2018！1年以上ぶりに受けた私の感想はBB2の皮を被ったBB3だ・・と思うぐらいに強度が高いです…

GitHub Packagesを用いてプライベートに自分のライブラリを公開する！

自分のみ/社内のみに公開して複数のリポジトリから使えるプライベートなライブラリを公開したい。そんな場面に遭遇した事はありませんか？そんな時に便利なのがGitHu…

【感想】BSB Jazz1 - Feelcycle

腕に重点的に効かせるBSBシリーズのジャズ系の楽曲のみで構成された、BSB Jazz 1！「THE・腕の修行」というのが初めて受けた時の感想でした。笑 ぷちB…

【感想】BSW Jazz1 - Feelcycle

ウエストに特化したBSWのJazzの曲のみで構成されたBSW Jazz 1！Jazzと言いつつも結構ノリのいい曲が多くHous系が好きな人は刺さる曲が結構あるん…

簡単にiPhoneと連動して体温を記録出来る！オムロン体温計 MC-6800

超便利なインクリメンタルサーチ用コマンド！fzf

Go製のインクリメンタルサーチ用のコマンド fzf。tmux や vim にも導入が出来て、豊富なオプションも用意されていて使いやすいコマンドです！特にプレビュ…

gitリポジトリのサマリを表示する！ onefetch

Rust製のGitリポジトリのサマリを表示するライブラリ、onefetch。開発が捗る！といったライブラリではないものの「どういうリポジトリだったっけ？」という…

【感想】BB2 Jazz1 - Feelcycle

Jazz系の曲のみで構成された、BB2 Jazz 1！Jazz x Feelcycleて合うのかな、、と受ける前は正直疑ってしまってましたが想像以上に楽しい！ノ…

【感想】BSWi Hous2 - Feelcycle

BSWの中でもよりウエストに効かせるBSWi Hous 2！前作BSWi Hous1と同じく、大人気プログラムの1つな気がします。曲数が12曲と多く、BSWiの…

OAuth2.0でGoogleのAPIを利用する

GoogleのAPIを利用する際認証方法にOAuth2.0を用いたやり方があります。OAuth2.0を用いる方法は1度覚えれば様々なGoogleが提供しているA…

【感想】BSB Regg 1 - Feelcycle

腕に重点的に効かせるBSBシリーズのレゲエ系の楽曲のみで構成された、BSB Regg 1！明るいレゲエ・陽気なレゲエの楽曲ばかりな上、曲のノリが良いものばかりで…

Blog/Vlogやる人にも便利！Macのキータイプ内容を表示してくれるアプリ KeyCastr

Macのキー入力をディスプレイに表示したい、そんな要望に答えてくれるのがKeyCasterです。この記事ではキー入力をディスプレイに表示するKeyCastrのイ…

nodeを使ってGoogle Calenadar APIを使う（サービスアカウントを使用）

みんな大好きGoogleカレンダーの情報を自分のアプリケーションで取得・表示する機会がありました。カレンダーの情報を取得する Google Calendar A…

【感想】BB2 Regg 1 - Feelcycle

レゲエ系の曲のみで構成された、BB2 Regg 1！強度的にもBB2を漕ぎ始めた人にも楽しい内容になっています！明るいレゲエの曲に合わせて漕いでいるとあっという…

シンタックスハイライトもしてくれるcatの拡張ライブラリ！bat

Rust製のcatを便利にしたコマンド、bat。シンタックスハイライト・Gitの差分が分かる機能をcatに追加したものです。この記事では bat の使い方、設定…

【感想】BB2 Regg 2 - Feelcycle

レゲエ系の曲のみで構成された、BB2 Regg 2！個人的にかなり楽しいおすすめプログラム！コリオが豊富で飽きません。ただし「BSLか？」と思うぐらいに脚がキツ…

【感想】BSBi Hous 2 - Feelcycle

満を持して登場したBSBシリーズのインテンシブシリーズBSBi Hous 2！BSBi Hous 1が2018年11月リリースなので、実に4年ぶりのBiシリーズ…

【感想】BSL Hit6 - Feelcycle

脚に重点的に効かせるBSLシリーズのHitシリーズ、BSL Hit 6！BSLらしいシンプルなコリオが多く、Deepかしら？と思うぐらいに1つのコリオを繰り返し…

【感想】BSL Deep2 - Feelcycle

脚に重点的に効かせるBSLシリーズのより身体に集中出来る構成のBSL Deep 2！BSL Deep 1に比べDeepらしさマシマシで、曲の起伏が少なく同じ動作…

【感想】BSL Hous 2 - Feelcycle

BSLのHousシリーズの第2段！さすが人気のエルハ第2段ということで、盛り上がるところでしっかり盛り上がって楽しく漕げる、期待を裏切らない内容になっています！…

【感想】BSL Deep1 - Feelcycle

脚に重点的に効かせるBSLシリーズのより身体に集中出来る構成のBSL Deep 1！Deepシリーズは曲に対して苦手意識がある人もいるかと思いますが、BSL D…

【感想】BB2 XMAS3 - Feelcycle

クリスマスシーズン限定プログラム、BB2 XMAS 3！オシャレなクリスマスディナーに行ったら流れてそうな大人オシャレな曲ばかりが揃ってます！そんな大人オシャレ…

【感想】BB2 PTX - Feelcycle

PENTATONIX（ペンタトニックス）とのアーティストコラボ、BB2 PTX！クリスマスシーズンのみ提供のプログラムです。1度は耳にした事があるようなクリスマ…

【感想】BSL Hous1 - Feelcycle

脚に重点的に効かせるBSLシリーズのHousの楽曲のみで構成された、BSL Hous 1！通称「エルハ」。BSLの中でかなりの人気プログラムで、いい楽曲が揃って…

【感想】BSB Rock1 - Feelcycle

腕に重点的に効かせるBSBシリーズのロック系の楽曲のみで構成された、BSB Rock 1！チューブはキックバックのような脚のリズムを合わせながらの動きが登場せず…

【感想】BSB Hous1 - Feelcycle

腕に重点的に効かせるBSBシリーズのHousの楽曲のみで構成された、BSB Hous 1！選曲の良さ・コリオの楽しさが秀逸で、BSBの中でかなりおすすめ&お気に…

【感想】BSB Hit5 - Feelcycle

腕に重点的に効かせるBSBのHitシリーズ、第5段 BSB Hit 5！チューブ2曲 + ダンベル1曲 + その他7曲、腕に効かせるのはもちろん、脚にも結構負荷…

【感想】BSB Comp1 - Feelcycle

腕に重点的に効かせるBSBのコンピレーションシリーズ、BSB Comp 1！チューブ2曲、ダンベル1曲、それ以外8曲の構成。爽やかめな曲が多い印象で個人的にお気…

【感想】BB2 BEYONCÉ - Feelcycle

Beyonce（ビヨンセ）とのアーティストコラボ、BB2 BEYONCÉ！2022年最新アルバム『RENAISSANCE』の曲のみで構成されたプログラムです！2…

【感想】BSW Comp2 - Feelcycle

ウエストに特化したBSWのコンピレーションシリーズ第2段、BSW Comp 2！BSWらしくクランチが1曲入ってますが、なんと6分超え！そして特徴としてはオフビ…

【感想】BSW Regg1 - Feelcycle

ウエストに特化したBSWのレゲエの曲のみで構成されたBSW Regg 1！選曲の良さ、曲とコリオのマッチ具合がとっても良くてノリノリになって漕げます！また変わっ…

【感想】BSW Rock1 - Feelcycle

ウエストに特化したBSWのロック系の曲のみで構成されたBSW Rock 1！BSWらしくクランチも1曲あり、ウエスト周りに効かせるのはもちろん、脚にもくる場面も…

【感想】BB2 ADELE - Feelcycle

Adele Laurie Blue Adkins（アデル・ローリー・ブルー・アドキンス）とのアーティストコラボ、BB2 ADELE！DEEPのように同じ動きを繰…

【感想】BSW Hit7 - Feelcycle

ウエストに特化したBSWのHitシリーズBSW Hit 7！数あるBSW・BSWiのプログラムの中でも1番強度の高い部類に入ると感じました！ウエストに効かせる動…

【感想】BSW Hit6 - Feelcycle

ウエストに特化したBSWのHitシリーズ。ウエストに効かせつつも、基本的な動作が多く珍しい動作はほぼ出てきません。強度もそこまで高くないのでフォームの確認にもち…

【感想】BB2 MTGX - Feelcycle

Martin Garrix（マーティン・ギャリックス）とのアーティストコラボ、BB2 MTGX！BB2の中では易しめ、BB1から次のステップに移りたい人にはちょ…

【感想】BB2 DVGT - Feelcycle

David Guetta（デヴィッド・ゲッタ）とのアーティストコラボ、BB2 DVGT！David Guettaらしいカッコいい曲が揃っていて、ノリノリになって…

【感想】BB2 EDM - Feelcycle

EDMの曲のみ集めた、BB2 EDM！強度は一般的なBB2と比べると明らかに高強度で、BB2の中だと最難関の1つです。2022/10現在、リザレクション期間しか…

【感想】BB2 MDNA - Feelcycle

Madonna（マドンナ）とのアーティストコラボ、BB2 MDNA！マドンナの楽曲やカバー曲で構成されています。BB2の中ではかなり易しめでBB1を少し難しくし…

【感想】BB2 FLG - Feelcycle

Fedde Le Grand（フェデ・ル・グランド）とのアーティストコラボ、BB2 FLG！アルバム「Something Real」の楽曲を中心に構成されたプロ…

【感想】BB2 ARGD - Feelcycle

Ariana Grande（アリアナ・グランデ）とのアーティストコラボ、BB2 ARGD！世界の歌姫と言われるだけあり、曲も歌もきれいでかわいい雰囲気の曲も多い…

【感想】BB2 ZEDD - Feelcycle

説明不要の世界的人気DJZEDD（ゼッド）とのアーティストコラボ、BB2 ZEDD！さすがの気持ち良く漕げる曲ばかり揃っています。BB2の中ではかなり易しい部類…

【感想】BB2 Avicii - Feelcycle

Avicii（アヴィーチー）とのアーティストコラボ、BB2 Avicii！アルバム『Stories』の曲のみで構成されたプログラムです。2022/10現在、リザ…

【感想】BC OLRD - Feelcycle

FEEL ANYWHERE専用プログラム BC OLRD！OLRDは「Olivia Rodrigo（オリビア・ロドリゴ）」の曲のみで構成されたプログラムです。

NxでFirebase Functionsのアプリケーションを作成する その2

Nxを使っているプロジェクトでFirebase Functionsを使ってバックエンドを構築する事になりました。NxにはFirebase Functionsを簡…

NxでFirebase Functionsのアプリケーションを作成する その1

Nxを使っているプロジェクトでFirebase Functionsを使ってバックエンドを構築する事になりました。NxにはFirebase Functionsを簡…

【感想】BC SLSN - Feelcycle

FEEL ANYWHERE専用プログラム BC SLSN！SLSNは「Silk Sonic（シルク・ソニック）」というブルーノ・マーズとアンダーソン・パークのデ…

【感想】BC JBST - Feelcycle

FEEL ANYWHERE専用プログラム BC JBST！JBSTは「Jon Batiste（ジョン・バティステ）」の曲のみで構成されたプログラムです。オシャレ…

【感想】BC Pop 3 - Feelcycle

FEEL ANYWHERE専用プログラム BC Pop3！Pop1・Pop2と同じく、朝一に気持ち良く漕ぐのに向いているプログラムです。

firestore v9で保存時にundefinedを許容する

firestoreを使っていてundefinedの値を保存しようとするとエラーが起きる事があります。この記事ではfirestoreで値を保存する際にundeif…

【感想】BSWi Metal 1 - Feelcycle

BSWの中でもよりウエストに効かせるインテンシブシリーズの BSWi Metal1！人気のBSWiインテンシブシリーズにまさかのMetalです！期待を裏切らない…

【感想】BC Pop 2 - Feelcycle

FEEL ANYWHERE専用プログラム BC Pop2！Pop1と同じく、爽やかで朝一に漕ぐのに良さそうなプログラム。Pop1に比べコリオが豊富なので「ストレ…

【感想】BC Pop 1 - Feelcycle

FEEL ANYWHERE専用プログラム BC Pop1！爽やかなポップスが多く、終わる頃にはジワッと汗をかける、朝一に漕ぐととても気持ち良いプログラムです。

【感想】BSBi Hous 1 - Feelcycle

腕を重点的に鍛えるBSBi Hous1！腕への負荷はもちろん、脚にもしっかり効きBB3と同じぐらいに強度が高いです。この記事ではBSBi Hous1の難易度や動…

【感想】BB3 Deep 1 - Feelcycle

身体と向き合うDeepシリーズのBB3！BB3 Deep1はBB3としては一般的な強度です。RUNはなく全7曲構成。1曲1曲が長く、Deepらしく淡々と漕ぐ事が…

【感想】BC Hous 1 - Feelcycle

FEEL ANYWHERE専用プログラム BC Hous 1！朝一の漕ぐのにちょうど合うような大変気持ちのいいハウスミュージックが揃っています。また始めたばかり…

【感想】BSB Hit 2 - Feelcycle

腕に特化したBSBのHitシリーズ。脚がキツい場面はほぼなく腕に集中出来ます。feelcycleを始めたばかりの人でも受けやすい強度になっていて、BSBの雰囲気…

Slidevで開発者がサクッとスライドを作る

Slidevを使うとmarkdownで簡単にスライドを作る事が出来ます。更にVueのコンポーネントを読み込むなど面白い機能が豊富に搭載されています。この記事では…

PRの依存関係を可視化出来るCodeSeeを使ってみる

CodeSeeというサービスを利用するとプロジェクトの全てのファイルの依存関係やPull Requestで変更・追加・削除されたファイルの依存関係が分かりやすく…

【感想】BSWi Hous3 - Feelcycle

BSWの中でも更にウエストに徹底的に効かせるインテンシブシリーズのBSWi Hous 1！ウエストにいい感じにアプローチ出来るのはもちろん、楽しくテンションが上…

AlfredでAWSの2段階認証のコードを発行する

AWSの2段階認証はiPhoneのGoogle AuthenticatorなどMacとは別の端末で確認する事が多いと思います。しかしMacでログインした後にiP…

Git大好き人間のGit関係おすすめ設定まとめ

開発をしている時に切っても切りはせないGitのコマンド。Gitのaliasやshに対して設定を行うとGitの操作性を向上する事が出来ます。今までいくつかの記事を…

Cloud Functions for FirebaseでApollo Serverを実装する

Apollo Serverをどこかにデプロイして試してみたい！そう思って調べてみるとCloud Functions for Firebaseが対応している事が分…

Herokuにsocket.ioサーバを立ち上げる

socket.ioのサーバをリモートで動かして技術検証がしたい。サクッと動かせるsocket.ioに対応したサーバがないかな、と調べた時Herokuが対応してい…

package-lock.jsonをyarn.lockに変更する

JavaScriptに関するプロジェクトではnpmかyarnを利用する事が多いです。npm(package-lock.json)で始めたプロジェクトをyarn(…

Git大好き人間のおすすめgitconfig設定

開発をしている時に切っても切りはせないGitのコマンド。Gitの設定ファイル、gitconfigを見直す事でGitの操作が劇的に改善され操作が速く便利に出来るよ…

Git大好き人間のおすすめGit alias設定

開発をしている時に切っても切りはせないGitのコマンド。Gitのエイリアス（alias）を設定する事で素早くGitのコマンドを実行する事が出来るようになります。…

Postmanでsocket.ioを確認する

socket.ioの確認がどうにか簡単に確認出来ないかと調べていたところPostmanで簡単に出来る事が分かりました！この記事ではPostmanでsocket.…

express + socket.ioを使ったsocketサーバをサクッと立ち上げる

Web Socketを使うプロジェクトを始める上でまず技術調査を行いたく、express + socket.io のサーバをローカルに作ってみました。備考録も兼…

グローバルインストールしたパッケージがnodeで使えない時の対処法

npmやyarnでグローバルでインストールしたパッケージをnodeコマンドで使おうとした際にCannot find moduleエラーが起きました。この記事では…

Git大好き人間のおすすめGit関係のライブラリ

エンジニアリングをする際に切っても切りはせないのがGit操作。そんなGitを扱うのを便利にするライブラリをご紹介します。

Gitリポジトリ管理の強い味方！ghq

ローカルでのGitリポジトリ管理の心強い味方、それがghq！ghq単体だとそこまで便利さを感じないのですが、peco・fzfといった「インクリメンタルサーチ」が…

MacのターミナルでAWSの2段階認証のコードを発行する

AWSの2段階認証はiPhoneのGoogle AuthenticatorなどMacとは別の端末で確認する事が多いと思います。しかしMacでログインした後にiP…

【感想】BB3 Hit3 - Feelcycle

ジャンル問わずの色々な曲を集めたBB3のHitシリーズBB3 Hit 3。リザレクション期間しか受けられませんが、渋めの曲が多い印象ですがHitシリーズの中でク…

【感想】BSW Hit8 - Feelcycle

ウエストに特化したBSWのHitシリーズ。HitなのでロックやHip Hop系の曲もありつつ、トロピカル・ハウスのようなふわっとした曲が多いのが特徴。コンビネー…

【Middleware使用】Next.js12でBasic認証を導入（ローカル,vercel 両対応）

Next.js ver.12からMiddlewareが導入されました。これによりライブラリを使わず簡単にBasic認証を設定することが出来るようになりました

RDBを利用したい人におすすめ！PlanetScaleを使ってみた

RDBを使ったサービスを作りたい。でもAWSやGCPだといくらかかるか分からないし、Herokuは無料だと使わないとDB止まってしまうし。。そんな中で手軽にRD…

【感想】BB3 Comp1 - Feelcycle

BB3初のコンピレーションシリーズ、BB3 Comp 1！非常に聞きやすい選曲、コリオの良さが光るプログラムです。BB3としては楽な部類としてもそれでもBB3、…

【感想】BSWi Hous1 - Feelcycle

BSWの中でも更にウエストに徹底的に効かせるインテンシブシリーズのBSWi Hous 1！ウエストにいい感じにアプローチ出来るのはもちろん、楽しくテンションが上…

Gitの最初に行いたい設定。gitconfigにユーザ名とemailを設定する

gitを使う際に最初に行いたい設定の中に、誰がコミットしたかを判別するためのユーザ名とemailを設定する、というのがあります。この記事では設定方法とtigやG…

様々なTypeScriptにおけるオブジェクトの型定義方法について

TypeScriptでは型を様々な方法で定義する事が出来て、型による恩恵を受ける事ができます。この記事ではその中でもobject（オブジェクト）に焦点を当てて型…

Serverless Frameworkでオリジナルドメインを設定する

Serverless Frameworkを使ってAPI開発を行っていると「オリジナルドメインをAPIに設定したい」という事は良くある事例だと思います。この記事で…

Gitのdiffの表示をより分かりやすく！diff-highlightを有効にする

GitのdiffをGitHubのように文字単位で表示してくれるdiff-highlight！導入方法、またtigでも同様に使えるようにする方法を記載します

VercelにRoute53に登録した独自ドメインを設定する

Route53に登録した独自ドメインをVercel上のWebサービスに設定する方法について記載します。

お名前.comで購入したドメインをRoute53に登録する

お名前.comでドメインを購入してRoute53に登録する、という作業がごく稀に発生します。毎回やり方や料金体系を忘れてしまうのと、いまいちやっている内容の理解…

Reactでinput要素外でKeyDownの処理を行う（TS版）

Webサービスを作っているとキーボードの特定のキーを押下時に何か処理を行いたい事があります。この記事ではReactで特定のキーを押下した際に処理を行う方法につい…

【感想】BSB Hit6 - Feelcycle

腕にフォーカスするBSBのHitシリーズBSB Hit 6！腕以上に脚もキツいのが特徴ですが、大人ぽい雰囲気の曲が多く集中して楽しめて、腕も脚も鍛えられる良プロ…

rebase時にsquash・fixupを素早く実行出来る！autosquashの設定

Gitの操作に慣れてくるとrebaseは欠かせないコマンドになってきます。autosquashを設定するとrebase時のsquash・fixupが格段に速くな…

Reactでcmd + Enter（ctrl + Enter）で処理を行う

フォームの処理などを実装していると特定のキーの組み合わせで処理を実行したい事があります。この記事ではReactで cmd + Enter もしくは ctrl +…

Gitのおすすめ設定。pull.ff onlyでpullを便利に

git pullを実行する際に--ff-only(fast-forward only）というオプションがあります。このコマンドを設定しておく事で不要なマージコミ…

gitの設定のレベルについて（system/global/local/worktree）

Gitの設定ファイルgitconfigにはどのリポジトリのフォルダにまで影響を及ぼすか、という設定範囲（system, global, local, workt…

Nuxt.jsでリダイレクト設定を追加する

Nuxt.jsで特定URLへのアクセスをリダイレクトさせる設定方法をご紹介します。

色が似ているかどうかを判定するnpmライブラリ good-friends-colors を公開しました

2つの色が似ている色（人の目で違う色と判断しづらい色）かを判定するnodeのライブラリを作成して公開しました。ライブラリの内容や使い方についてご紹介します。

Nuxt.jsでURL末尾の"/"ありURLを"/"にリダイレクトする

Nuxt.jsのプロジェクトでSEO対策の一環として、"/"のURLを常に"/"なしのURLにリダイレクトする。という対応を行いました。その方法をご紹介します。…

Nuxt.jsで構造化データマークアップ（JSON-LD）に対応する

Nuxt.jsのプロジェクトでSEO対策の一環としてgoogle推奨の構造化データマークアップ（JSON-LD形式）に対応しました。TypeScriptによる型…

Next.jsでBASIC認証を導入する（ローカル,vercel 両対応）

Next.jsでBASIC認証（ベーシック認証）を導入する方法をご紹介します。最終的にローカルではBASIC認証がかからないけど、VercelではBASIC認証…

【感想】BB3 WORLD1 - Feelcycle

feelcycleの中でも異質なBB3 WORLD 1！民族音楽のようなエキゾチックな曲が多いです。全曲強度が高く、かなり難易度の高いプログラムの1つです。この…

Nuxtでhttpのアクセスをhttpsにリダイレクトする

Nuxt.jsのプロジェクトで常時SSL化（http → httpsにリダイレクト）するという事を行いました。その方法を記載します

【感想】BB3 Hit5 - Feelcycle

ジャンル問わずの色々な曲を集めたBB3のHitシリーズBB3 Hit 5！前半は立ち漕ぎが多くキツさを感じやすく後半がBB3として控えめという構成になっています…

【感想】BB3 Soul1 - Feelcycle

feelcycle最強の1つと名高いプログラム、BB3 Soul 1！全体を通して極度が高く、修行感が高い高強度プログラムになっています。この記事ではBB3 S…

【感想】BB3 HH1 - Feelcycle

ジャンル縛りシリーズのBB3でヒップホップの曲のみを集めたBB3 HH 1！。BB3 HH 2に比べ明るいヒップホップが多く「ソウルフルな曲が多いなぁ」と感じま…

【感想】BB3 Hit4 - Feelcycle

ジャンル問わずの色々な曲を集めたBB3のHitシリーズBB3 Hit 4。リザレクション期間しか受けられませんが、曲もノリがよくコリオも曲に合っていて楽しいプロ…

【感想】BB3 Hit6 - Feelcycle

ジャンル問わずの色々な曲を集めたBB3のHitシリーズBB3 Hit 6。BB3の中でも変わった動作が多いのが特徴の高強度プログラムです。この記事ではBB3 H…

Vue.jsで画面を開いた際にtransition-groupでアニメーションさせる

Vue.jsで画面を開いた際にtransition-groupでアニメーションさせる方法をご紹介します。最後はanime.jsと組み合わせて複雑なアニメーション…

【感想】BB3 Regg1 - Feelcycle

feelcycle最強難易度と名高いBB3 Regg 1！そのように言われるだけの超強度プログラムでありつつ、曲もコリオも洗練され楽しいのが特徴のプログラムです…

React/Next.jsにStorybookを導入する

コンポーネントの見え方・使い方などを管理するのに便利なstorybook。この記事ではReact or Next.jsのプロジェクトにStorybookを導入す…

【感想】BB3 Rock1 - Feelcycle

コテコテのバンドサウンドが多い、ザ・ロックンロール！なBB3、BB3 Rock 1。コリオにクセの強い曲が多く、ロックがゆえのテンポのゆらぎも多い高強度プログラ…

Nuxt Contentでサイトマップ（sitemap.xml）を追加する

Nuxt Contentで@nuxtjs/sitemapというパッケージを用いてサイトマップ（sitemap.xml）を自動的に作成する方法を記載します

【感想】BB3 Hous3 - Feelcycle

BB3の中でも強度高めのBB3 Hous 3！「Hous」とはいえノリノリで爽やかな曲はほぼなく、激しめの曲・DEEPのように無機質な曲が多く修行感の強いプログ…

【感想】BB3 UPGD1 - Feelcycle

電子音を使わないUnpluggedな曲のみで構成されたBB3、BB3 UPGD 1！1曲とてつもなく難しい曲がありますが気持ちよく漕げる曲が多い高強度プログラム…

Homebrewでformulae require at least a URLエラー

Homebrewを使っていたところ「formulae require at least a URL」というエラーが発生しました。エラーを解消するために行った事を…

Nuxt ContentをNuxt.jsのプロジェクトに導入する(TypeScriptにも対応)

Nuxt.jsを使いつつ、ブログのような静的なページを作るのに適したNuxt Content。 そのNuxt ContentをNuxt.jsのプロジェクトに導入…

【感想】BB3 HH2 - Feelcycle

2020年にリリースされたヒップホップの曲を集めたBB3のBB3 HH 2！ヒップホップの曲の中でもダークでカッコいい雰囲気の曲が多いのが特徴の高強度プログラム…

Nuxt（SSR）のプロジェクトをVercelにデプロイしBasic認証をかける

Nuxt（SSR）のプロジェクトをVercelにデプロイしBasic認証をかける方法を記載します

Serverless Frameworkのローカル開発でURLを使ってアクセスする

Serverless Frameworkの開発でURLを用いてGET・POSTなどのアクセスしたい事があります。それを実現するためには serverless-o…

NuxtにAnt Designを導入

Nuxt.jsのプロジェクトにUIフレームワークのAnt Designを導入する方法を記載します

DynamoDB Localの開発を便利にするdynamodb-adminを導入する

SequelのようにGUIベースでDynamoDB Localの操作をする事ができるdynamodb-admin。CRUD操作をGUIで出来るため開発効率を上げ…

【感想】BB3 Rock2 - Feelcycle

ロックの曲のみを集めたBB3らしい高強度プログラムのBB3 Rock 2。コリオにクセが少なくBB3として難し過ぎる曲もないため、BB3の中でよくおすすめされる…

【感想】BB3 Hous1 - Feelcycle

BB3らしい難易度のハウスソングを集めたプログラムBB3 Hous 1。足もさる事ながら腕への負荷もキツくバランスが取れた良プログラムです。この記事ではBB3 …

Serverless Frameworkの開発でDynamoDB Localを使う

Serverless FrameworkでDynamoDBを用いる方法をご紹介します。 この記事では、最終的にServerless FrameworkでDyn…

NuxtにAlgoliaを導入する（TS使用、コンポーネントは自分で用意ver）

Nuxt.jsのプロジェクトに全文検索サービスのAlgoliaを自分でコンポーネントを用意しつつ導入する方法を記載します

Nuxtに全文検索サービスAlgoliaを導入する

Nuxt.jsのプロジェクトに全文検索サービスのAlgoliaを導入する方法を記載します

react-scriptsで読み込む環境変数を変える

react-scripts startでローカルサーバ、STGサーバそれぞれコマンドによって別のサーバに繋げたい、ということがありました。 ここでは違う .e…

Nuxt ContentのPrism.jsに行番号を表示する

Nuxt Contentの記事でコードのシンタックスハイライト部分に行番号を表示する方法を記載します

homesickを使ってdotfilesを複数のMacで利用出来るようにする

.zshrcや.gitconfigといったドットファイル（dotfiles）を、homesickというパッケージを使って複数のMacで同期出来るようにする方法を…

Nuxt Contentで作ったサイトの表示パフォーマンスを改善する

私のサイトの表示速度がやたら遅い。。🤯 構成としてはNuxt Contentを使ってSSG、UIフレームワークとしてVuetify、デプロイ先としてNetli…

Apple Silicon MacでアプリやコマンドがApple Silicon対応のものかを調べる

Apple SiliconのMacが登場してアプリやコマンドがApple Siliconに対応しているかそれともIntel版のものか、を意識する必要が出てきまし…

M1 Mac（Apple Silicon）でMacPortsを使う

M1 Macはarm・x86_64というアーキテクチャの違いを意識してパッケージを導入する必要があります。その差異を意識せずにパッケージを導入出来るMacPor…

M1 Mac（Apple Silicon）でHomebrewを使う

M1 Mac（Apple Silicon）でHomebrewを使う方法を記載します。M1 Macではarm・x86_64というアーキテクチャを意識する必要が出て…

Nuxtでstyle-resourcesを用いてグローバルなscssを使いやすくする

Nuxt.jsのプロジェクトでstyle-resourcesというパッケージを使って、グローバルなscssをimportを使わずに使えるようにします

Nuxt.jsにGoogle AdSenseを導入する

NuxtのプロジェクトにGoogle AdSenseを導入する方法を記載します。

足元を温めるホットマットを購入しました

足元を温めるホットマット（ホットカーペット）を買いました。 2週間ほど使ってとても良い買い物が出来たと感じたのでご紹介します！

Reset.cssをNext.jsに導入する

Reset.cssをNext.jsに導入します、ここでは2つのやり方をご紹介します。 cssファイルをDLしてプロジェクトに配置する Nodeのパッケージとし…

Nuxt.jsで必要なFont Awesomeだけをimportする

Nuxt.jsでFont Awesomeを使用する際に使うパッケージのnuxt-fontawesome。書き方次第では全てのフォント読み込む容量を食うため、必要…

Nuxtにads.txtを追加する

Nuxt.jsのプロジェクトにGoogle AdSenseで必要なads.txtを追加します

NuxtでLazy Loadを使う

Nuxtのプロジェクトで画像などのリソースに対してLazyLoadを設定してみます。

React x Chrome Extensionで開いているタブのURLとタイトルを取得する

ReactでChromeのExtension開発をしている際に、開いているページ（タブ）のURLとタイトルを取得します。

Nuxt Contentに目次を追加する

Nuxt Contentで作っているサイトに目次を追加します。

Nuxt Contentで作ったサイトをNetlifyにデプロイする

静的サイトをデプロイするのに便利なNetlify。そのNetlifyにNuxt Contentで作ったサイトをデプロイする方法をご紹介します。

AlfredのワークフローをNodeで作成する

AlfredのワークフローをNode.jsを使って作成します。AlfredのワークフローはデフォルトでNodeをサポートしていないため Alfy というパッケー…

Next.jsで複数のenvファイルを使って複数環境に対応する

Next.jsで$yarn run dev（next） した際に、 .env.local と .env.staging を使い分けられるようにします。

Serverless Frameworkでx-api-keyを設定する

Serverless Frameworkを使ってAWSがサポートする認証方法の1つ「x-api-key」をAPI Gatewayに設定します。

NuxtにStorybookのAddonを変更/追加する

Nuxt.jsのプロジェクトに@nuxtjs/storybookで入っているデフォルトのAddonを変更、もしくは追加する方法を記載します

GitHub Actionsの理解とHello Worldを出力する

GitHub製のCIツール、 GitHub Actions を使ってみます。 GitHub Actionsの理解と、最終的に実際に「Hello World!」と…

NuxtにStorybookを導入する

Nuxt.jsのプロジェクトにStorybookを導入します

create-react-appで作ったReactのプロジェクトのポート番号を変える

create-react-app で作成したプロジェクトの react-scripts start のポート番号を3000番から別のポート番号で起動出来るように…

Nuxt.jsにGoogle Analyticsを導入する

Nuxt.jsのプロジェクトにGoogle Analyticsを導入します。

Serverless FrameworkでRuntime.ImportModuleError

Serverless FrameworkでAWSにデプロイした後 Runtime.ImportModuleError というエラーが起きたためその対処方法を記載…

NodeでServerless Frameworkの開発環境を作る（ts版）

Node.js（TypeScript版）でServerless Frameworkの環境を作っていきます。

Nuxt.jsの開発時のポート番号を変える

Nuxt.jsでの開発時のデフォルトのポート番号は3000です。そのポート番号を変える方法について記載します

Moment.jsからDay.jsに切り替える

Moment.jsという日付を扱うのに特化したjsのライブラリがメンテナンスモードになったため代替えとして上げられる Day.js に以降する事にしました。Mo…

Cocoa Podsのバージョンを上げる

久しぶりにSwiftを触るにあたり「そうだ、Cocoa Podsのバージョンを上げよう！」と思ってつまづいたので備考欄を兼ねて残します。

キャメルケースのkeyのオブジェクトを簡単生成！humpsを使う（ts対応）

スネークケースのオブジェクトを簡単にキャメルケースのkeyに変換したオブジェクトを作れる、npmパッケージの humps。この記事ではhumpsの導入の仕方、使…

Nuxtで早期アクセスのGoogle Fontsを使う

Nuxt.jsで早期アクセスのGoogle Fontsを使っていきます

NuxtでGoogle Fontsを使う

nuxt-webfontloaderというパッケージを使ってNuxt.jsのプロジェクトでGoogle Fontsを使う方法ご紹介します

Nuxtで環境変数を使う

Nuxt.jsで.envを用いて環境変数を使います。

Next.jsにGrommetを導入する

ReactのUIフレームワーク Grommet をNext.jsのプロジェクトに導入する方法をご紹介します。

VuetifyをNuxt.jsのプロジェクトに追加導入する

Nuxt.jsのプロジェクトにUIフレームワークのVuetifyを追加する方法について記載します

reset.cssをNuxt.jsに導入する

reset.cssをNuxt.jsのプロジェクトに導入する方法を書きます

VueでのCSS Modulesの書き方

VueでのCSS Modulesの様々な書き方について、またScoped CSSとの違いについてご紹介します。

Nuxt.jsにCSS Modulesを導入する

Nuxt.jsのプロジェクトにCSS Modulesを導入します。

Nuxt Contentでタグを使う

Nuxt Contentでフロントマターを使ってタグを設定します

Nuxt ContentでVueのコンポーネントを読み込む

Nuxt ContentでMarkdownを書く記事に、Vueのコンポーネントを読み込んで利用する方法を記載します

Nuxt/Contentにcontent-theme-docsを適用する

Nuxt/Contentの公式ページのようなテーマにする Nuxt/Content-theme-docs をNuxt Contentのプロジェクトに導入する方法…

Nuxt/Contentのcontentフォルダの階層を深くする

Nuxt Contentの記事を配置するcontentフォルダの階層を深くしつつ、記事を読み込み表示する方法をご紹介します

Nuxt Content x TypeSciprtでProperty '$content' does not exist on type 'Context'エラー

Nuxt ContentでTypeSciprtを使った際に「Property '$content' does not exist on type 'Contex…

Netlifyでステージング環境を作る

Netlifyでステージング環境を作る方法をご紹介します。手順の最後ではベーシック認証をかける（Proプランが必要）方法も合わせてご紹介します

Netlify x Next.jsのプレビュー環境にBasic認証を設定する

Netlify x Next.jsのプレビュー環境にBasic認証を設定してみます。注意点としてベーシック認証はProプラン以上ではないとかけられません。

Next.jsのプロジェクトをNetlifyにアップする

Next.jsのプロジェクトをNetlifyにアップロードする方法をご紹介します

Serverless FrameworkでCloudWatchのログの保持期間を設定する

Serverless FrameworkでCloudWatchに不要なログを残さないよう有効期限を設定します