フロント、サーバーともにTypeScriptのWEBアプリケーションにおいて、 NestJS側のEntityやDTO、GraphQLの型をNuxt3側で使えると非常に便利だったのでメモ。 システム全体像にとしてはこの記事参照 uyamazak.hatenablog.com いろいろ前提 レポジトリはNestJS…

2022/8/15にシニアジョブで新規サービスをリリースしました。忘れないうちに振り返りとかをメモ。 まだ想定してる3割ぐらいの機能しかできておらず、これからやること山積みですが、とりあえず動きはするのでWEBサービスのリリースとして許容範囲かなと。 シ…

RCでまだまだ対応ライブラリの少ないNuxt3ですが、TailwindCSSのモジュール@nuxtjs/tailwindcssは 本体の開発者がメンテナンスしてくれているためか、RC以前から問題なく動いているので使用しています。今回アニメーション周りの動きなどが欲しくなったのでT…

CircleCIでCloud Runにデプロイする際、下記のOrbを使ったけどトリガー経由ではないので、コミットハッシュをCloud Build側で使うのがちょっとややこしかったのでメモ。 CircleCIから--substitutions を使って渡す必要がありました。CircleCI Developer Hub …

TypeScriptで素のObjectよりMapの方がTypeScriptと相性がよく使う機会が増えてきたけど、レスポンスに変換するときなどはObjectに変換する必要があったのでメモ。ぐぐったらreduceとか使う古いのが検索上位に出てきてしまうが、 Map.prototype.entries()をOb…

CircleCIを使っていてCloud Runが必要になったので設定したけど、いくつかハマったのでメモ 前提 この公式Orbsを使用する。 CircleCI Developer Hub - circleci/gcp-cloud-run .circleci/config.ymlはこんな感じ。本番でなくステージング環境を作ってるので…

GitHub統計 シニアジョブのレポジトリには3,028回コミットしてた 出社回数 健康診断と新規採用の顔合わせで2回？ ざっくり時系列 会社のメインのレポジトリは通年ちょこちょこやってたのでそれ以外 １−３月 会社が歌舞伎町に引っ越しで、NuxtJS + Google App…

TypeORMを使っているプロジェクトで、よくやるEntityのfirstNameとlastNameをくっつけてfullnameを返す方法として、getterを使って実装していました。 getterはTypeScriptというかJavaScriptの標準機能なのでまあ良いかと思っていましたが、 TypeScript: Doc…

Firebase AuthのidToken(JWT)を、サーバー側（NestJS）へのリクエストで使う場面で、 サーバーへのリクエスト時にAuthorizationヘッダーにaccess_tokenを付与する必要があった。 FirebaseのユーザーはNuxt3のuseStateで入れてuseFirebaseUserで使っているけ…

NestJSでユーザー認証にFirebase Authentication + Google認証を使うこととなり、なんとかテスト環境を構築したのメモ。 認証はセキュリティ的にも怖いので、これできなかったらつらいなぁというレベルだったけどできてよかった。 Firebase Local Emulatorを…

NestJSを使ったプロジェクトで、認証だけFirebase Authenticationを使う。 そのためローカルのエミュレータ環境とそれを使った簡単なテストを作った。 ローカルで動かすとUIはこんなので超便利↓ CIではもちろんいらないので無効化してる でもCircleCI上でそ…

NestJSの新規開発で、テストを有効活用しながら開発を進めてるけどTest.createTestingModuleでいろいろハマったのでポイントをメモ。 使い慣れてくると超便利。 今作ってるe2eテストの場合、createTestingModuleはこんな感じ。コメントでメモ。 beforeAll, …

TypeORMのEntityで使うRelation系のオプションがいろいろ紛らわしいのでメモ。 バージョン "typeorm": "^0.2.37" DBはMySQLを使用。 公式ドキュメントはここらへん typeorm/relations.md at master · typeorm/typeorm · GitHub Entityはこんな感じのサンプル…

NestJS + TypeORMを使った新規開発で開発がちょっと進み、テストコマンドなどもできてきたのでCircleCIで自動実行できるようにしたのでメモ。前提としてローカルではテストなどが動いていること。 実行したのは下記。まだデプロイなどは行っていない。 lint…

昨日、思考停止の力技でなんとかしまってたけど、TypeOrmModule.forRootAsyncでテスト用の接続環境を渡し、TypeOrmModule.forFeatureをしっかりやればシンプルな設定で動いたのでメモ。NestJS + TypeORM でテスト時のRepository依存エラーを力技でなんとかす…

NestJS + TypeORMの環境で、e2eテスト実行時に、テスト用接続情報を下記のように使用したところエラーが出た。 ググっても記事出てこないのでメモ。app.e2e-spec.ts ``` import { getConnectionOptions } from 'typeorm'//省略 describe('UsersController (e…

2021/9/30 ちゃんと解決できたのでこちらの記事参照 uyamazak.hatenablog.com 以下、特に役に立つことはなさそうNestJS + TypeORMでJestのテスト時、@InjectRepositoryを使った部分の依存関係がなかなか解決できなかった。 そのため@InjectRepositoryに頼ら…

今回作ったサイトシニアジョブ会計事務所 accountant.senior-job.co.jp会社で出したプレスリリースはこちら既存の求人ポータルから、会計事務所系のお仕事に特化させたサイトです。専門用語でいうとサテライトサイトですね。会計事務所、税理士事務所向けの…

2021/9/7追記 エラーの原因は、@nuxtjs/composition-apiではなく、error.vueの描画時の問題だったので、error.vueの内容をclient-onlyで囲むことで解決しました！ @nuxtjs/composition-apiは悪くありませんでした。 ずっと放置してたけど他のメンバーに見て…

新しいサイトの開発でNuxtJS + Composition API + TypeScriptで快適な開発をしてますがuseAsyncは、サーバー、クライアント両方で実行することもあり、理解にちょっと時間がかかっていろいろハマったのでメモ。基本的にちゃんとドキュメント通りに使えば大丈…

NuxtJSでSSR + SPAでコンテンツをaxiosで取得するよくあるページを作っていたら、リンクを連打するとこんな感じになった。 言葉で説明するの大変なのでブログ用にTwitterに動画あげた。NuxtJSなどのSPA + Ajaxでコンテンツを非同期取得してるやつで、ページ…

AWSのECSを使った環境構築、↓この記事からの続きで、 uyamazak.hatenablog.com Laravelの php artisan schedule:runを実行するためにタスクのスケジューリングを使ってみることに。新規作成はコンソール上でなんなくできたものの、CircleCIからの更新方法が…

優先度が高い仕事が落ち着いてきたため、ずっとやりたかった本番環境コンテナ化に着手しました。たぶんお休みで全部忘れるので社内に説明用も兼ねてメモ。下記の記事のように現在のシニアジョブに入社してすぐ、開発環境はDocker化していました。シニアジョ…

趣味で開発しているPuppeteerを使ったPDFサーバーhc-pdf-serverで一部分をnpmにパッケージとして公開しています。これ↓ www.npmjs.com FastifyからPuppeteerを通して、Headless ChromeのPageを使用できるプラグインです。 名前の通り速いFastifyの長所を殺す…

シニアジョブのオフィスの引越にあたり、セキュリティの面からも来客の記録システムが必要になりました。最初すでにいろんな会社が作ってると思ったので、それ使えばいいじゃんと思いましたが、仕様を聞くとたしかに超簡易的なものなのでまあいいかというこ…

経緯 シニアジョブの人材管理システムで、もしもの時のセキュリティのために、すべての操作ログを記録することにしました。 Dataflowのテンプレートを使うことでちょっとのコードでできてしまったので、コードにならない部分の記録をするため雑にメモ。 記事…

NuxtJSで使った社内用アプリをCloud BuildでApp Engineに自動デプロイしようとしたら2時間くらいハマったのでメモ。GitHub Actionsもいいけど、やっぱGCP内で完結させたいなぁということでCloud Build使いました。GitHub Actionsと比べるとユーザーと情報が…

社内システムで最初、JavaScriptでブラウザからAPI叩こうとしたら、おそらくChatwork API側がPreflight requestに対応してないのが原因でCORSエラーが出て送れない・・・。 そのためGASのウェブアプリ側で送るようにしました。developer.mozilla.org UrlFetc…

シニアジョブで簡単な来客記録システムを作りあたり、Google Workspaceを使っているので、 NuxtJSでUI作って、Google スプレッドシートとGASでいけるんじゃね？ と思ってやってみたら、ちょっとハマったものの出来たのでメモ。 ※画面は開発中のものです（圧…

結論 mainに入ってるけどまだリリースされてないだけだった。 リリースちゃんと読もう。 TypeScriptでPuppeteerガンガン使いましょう。 経緯 Puppeteerはv6でTypeScriptの型がビルドインになり、@types/puppeteerが必要なくなりました・・・だと良かったんで…