カテゴリ: JavaScript/TypeScript
認証機能について考える
個人アプリをせこせこと開発中の今日このごろ。現在作っているアプリはアカウント機能もあるので、認証まわりの実装も必要になってきた。最初は、BaaSなど使って楽をしようと思ったが、久しぶりに認証機能も実装してみることにした。今回はバックエンド、 ...
Monorepo+NestJSで共通コードを自動リロード
Turborepoを用いてモノレポ構成で開発していて、NestJSのホットリロード少しハマった。 下記のようなディレクトリ構成で共通コードをNestJSとNextJSで共有していた。 共通コードは、tscでコンパイルし、開発時は--wa ...
RemixからReact Router v7にアップグレード
先日、Remixを使って作り直した自分のサイトをReact Router v7にアップグレードする。 こちらの公式ドキュメントを参考にした。 https://react-router-docs-ja.techtalk.jp/upgrad ...
GitHub Actionsでさくらインターネットの共有サーバにデプロイ
GitHub Actionsを使って、RemixのSPAモードで作ったサイトをサーバにアップする。 GitHub Actionsでやりたいのは、 masterリポジトリにpushした時に実行 package.jsonに設定したVolt ...
Vimの設定を見直してみる
最近はもっぱらVSCodeばかりになってしまったが、新しいMacを購入したのでVimやらShellを見直してみることに。 Shellをfishに変えてみた 今までzshを使っていましたが、fishがよさそうなので変更してみます。 まず ...
RemixのSPAモードでお問い合わせフォーム
SPAでお問い合わせフォームを作ってみる。当然必要なのはメールを送信する機能だが、サーバサイドの機能は使えないのでどうするものかと考える。 最近ではSendGridを使ってメール送信したりすることが多いようだ。でもクライアントサイドのみで ...
RemixのSPAモードでNavLinkが上手く動かない
ヘッダーのナビゲーション部分で各ページに移動するとリンクにアンダーラインが付くようにしていて問題が…。 https://www.greenstudio.jp yarn run buildでSPAモードで出力したあと動作をチェックしてみる ...
YarnのPnPモードを使ってみる
サイトリニューアルするにあたり、YarnのPnPモードを使ってみることにした。 PnPモードとは、node_modulesに依存せずに.pnp.cjsに依存関係のパッケージ情報を出力して管理するタイプのものらしい。別途キャッシュディレクト ...
Remixでindexに複数ルート割り当て
indexページを共通ページとして、複数のルート（パス）を割り当てるのにハマった。 下記URLを見ると分かるようにポートフォリオのリンクを開くと、モーダル画面が開いてポートフォリオの詳細画面が開く。このときにポートフォリオごとに固有のUR ...