GAミント至上主義

Web Monomaniacal Developer.

Nuxt (3.0.0 stable)でTypeScriptのstrict:trueを開発中とその他で切り替える

いよいよバージョン3.0.0 stableがリリースされたNuxtですが、

nuxt.com

RC12までTypeScriptのcompilerOptionsのstrictがデフォルトfalseだったがRC13以降trueになりました。

詳細はこのリリースノート v3.0.0-rc.13 · Discussion #8687 · nuxt/framework · GitHub

これによってこれまでゆるゆるなチェックで開発してたコードが大量のエラーを吐くようになってしまい、すぐには直せない状態になってしまったので自戒を込めてメモ。

もちろんnuxt.configで上書きできますが、ただstrict:falseにしてしまうと今後も型ゆるゆるコードを書き続けてしまうことになります

nuxt.com

export default defineNuxtConfig({ 
  // 略
  typescript: {
    strict: false
  }
})

そこで、開発中のyarn devではtrueとし、それ以外ではfalseになるよう環境変数NODE_ENVをつかって切り替えるようにしました。

export default defineNuxtConfig({
  // 略
  typescript: {

    strict: process.env.NODE_ENV === 'development'
  }
})

process.env.NODE_ENVはyarn devは'development'、その他nuxi build, nuxi typecheckなどでは'production'となります。

これで開発中はVSCodeで赤線を見ながら己の未熟さを噛み締めながら開発し、CIで行っているTypeCheckでは最低限のチェックを行う、ということが可能になりました。

リモートワークWEB開発者が作業服に入門したメモ

仕事中も休日も作業服を着るようになり、普段から作業服通販サイト、メーカーのカタログを見まくるもはや作業服オタクになって、もうすぐ季節を一巡りするのでメモ。

これまで買ったやつ

写真を取ってて面倒になるなほど思ってたより買ってて自分でもびっくりした。でも全部ではない。

初めてで、よくわからないので買った定番のバートル7051上下。バートルのフラッグシップ言われており、スリムめでかっこいいが、秋冬モデルなのでちょっと重い。 春夏用薄めの7042のズボンだけ春ぐらいに購入。 室内なら年中春夏用でもいいかも。

↑よりちょっと薄め、アタックベース 0434(床の張替え作業で活躍)。ポリエステル100%を試したかった。

通気性がなく蒸れるので、夏用に↓を買うことになる。

夏用高通気性ズボン2つ TS DESIGN TS4Dナイロンドッツライダーメンズワークカーゴパンツ 84504(左)と

SOWA のカーゴパンツ 8018-08(右)とバートルのナイロンベルト 4011

どちらも軽いし涼しい。

長袖ポロシャツ、バートルでポリエステル100%の3種303, 665, 103(右)と、

一番お気に入りのコーコス信岡のMAXDRYエアーUV軽量長袖ポロシャツ G-1638(左の二枚)

違いが分からないのでまずバートルの3種購入。

真夏も日除けのために長袖、襟付きを着てみたけどなんとかなったけど、圧倒的に涼しいのはコーコスのやつ。

夏用コンプレッションインナー バートルの4070と4074、Tシャツ157 冬用防寒インナー 自重堂 78104, 78101

作業着業界では定番の密着するインナーのコンプレッション。

夏用は夕方になると冷えるので動かないリモートワークにはオーバースペックだったかも。

冬用は薄くて暖かいってほどではないけど上下着てれば全然冷えない。

アシックスの作業靴(≠安全靴)

最強の靴を求めてたどり着いた。 アシックスのランニングシューズとかと大して変わらない1万程度で購入できるし、頑丈だし、ダイヤル式BOAでフィットするし、もう紐にはもう戻れないかも。鉄芯ではないのでそんなに重くない。

きっかけ

明確に思い出せませんが、リモートワーク中+子供の相手の業務中に着る服に悩んでおり、

無印とかジャージとかいろいろ検討したけど、仕事するので作業服(英語でWorking Wear?)でいいじゃん、がきっかけだったと思います

そういえば前職の元日立の同僚、パソコンしかいじらないのに作業服を着ていていいなぁと思ったのもあるかも。

作業服のいいところ

価格が安い & 安定している

まず一番はこれ。

一般的な長袖ブルゾン、ズボンで高いものでも4000円以下が、アウターでも1万円以下がほとんど。 長袖ポロシャツは高くても2000円以下、インナーは1000円前後です。

作業服通販サイトでは、ほとんどの商品がメーカー希望小売価格、いわゆる定価のの50%前後で購入することができます。新商品でもほとんど変わりません。

コストにシビアな企業の決済者や自営業者にも選ばれる価格となっています。

ユニクロとか無印だと買った次の週行ったら割引されてショック・・・や、セールのときに買おうとか考えなくていいので楽。必要なときに買って損しません。

あと夏の終りにまだ暑いのに、店に行くと秋冬物しか売ってないみたいなこともよくありますが、作業服ならいつでも同じ値段で買えます。

企業や個人事業主の方々が経費でたくさん買うことで量産されて安くなった商品を個人で買えるお得感もあります。

仕事してる感がでる

リモートワークなので上下ジャージ、上下スウェットでもいいんですが、作業服の方がぴしっとしてるので気分が違います。

スペックを見て選ぶのが楽しい

数千、数万と業種、職種や状況に応じて、素材や機能などのスペックが明確に記載されており、

中学生の時からパソコンのスペック表を見て楽しめる人間にとっては非常に面白いコンテンツでした。

各通販サイト、カタログを見てるだけで時間が過ぎていきます。

近所の作業服通販サイトまいど屋に至っては商品説明に謎の長文ポエムがあるのでテキストサイトとしても楽しめます。

販売期間が長い

服のファッション(流行)に興味のないおっさんにとって、気に入った商品が3年後、5年後もあり、確実に手に入るという安心感もあります。

発売後10年以上ほとんど変わらない定番製品もあるし、メーカーにもよったり限定商品もあるけど、新商品も3年程度は販売されているはず。

覚えた型番も無駄になりません。

耐久性

安いだけでは企業経営者、自営業者は納得しません。

仕事できて汚れるのは当然で、ブルゾン、シャツ、ズボンであれば、毎日のように洗濯しても2年以上は保つ耐久性はあるように思います。

ワ○クマンは安いですが、みた感じ値段相応の1年程度を想定したものが多いように感じます。定番のバートル、自重堂あたりの製品と比べると一目瞭然です。

縫製も余った糸が飛びてていることはよくありますが、縫いが甘かったり、ほどけてしまったようなことは今のところありません。

汚れても気にならない

リモートワークでは汚れませんが、2人の子供を相手にすると超汚れます。

作業服はそもそも汚れる前提の服であるし、上記の通り洗濯しまくっても問題ないし、すぐ乾し、子供の食べ物汚れとか、クレヨンとか泥とかついてもノンストレス。

むしろ多少の汚れがあったほうが風格が出る説まである。

高機能

製品によって異なるが、ポケットの多さ、生地の頑丈さ、軽さ、通気性、UVカットなどの機能があり、選ぶのが楽しいし、実用性が高いです。

ちゃんとした見た目

会社のロゴを入れて着るような企業のユニフォーム向け製品も多いです。

そのため、だらしなく見えるようなものはないし、企業内で揃えるため誰でも着れるようなある程度無難なデザインになっています。

保育園や買い物に着ていくと、職種、業種は間違われてる可能性はありますが、おっさんなので気になりません。

またここ10年ぐらいで、バートルをはじめとして作業服もかっこよさを追求する製品も増えて競争が厳しくなっているようで、スリムなシルエットやスポーティーなものも多くあります。

もちろんユニフォーム用途ではない、個人事業主の多いの建築、土木、解体業向けな製品には、迷彩柄やド派手なデザインもあります。

サイズと在庫が豊富

企業向けとして、ユニフォークにするような作業服は、当然サイズが豊富で、大体のメーカーで定番はSS〜5Lぐらいは揃っています(SS、Sが女性用シルエットだったりする)。

また、一気に全社員分のまとめて注文はもちろん、入社した用に1着、という買い方も多いはずなので大抵の通販サイトで1着から注文できます。

私はだいたいMサイズでなんとかなるので困ったことが無いですが、太めの兄にプレゼントするときにちょうどいいサイズがあり助かりました。

ワ○クマンはMすら在庫切れなことが多々あり、もう買うことはないかなと思います。製造小売業的な会社なので在庫は敵なんだろうなぁ。

リモートワーク用作業服の選び方

作業服と一口にいっても、あらゆる業種や現場に対応する商品がある(全メーカー合わせたら数万種はありそう)ので、いつも注意してみるポイントを3つほど。

合成繊維(ポリエステル等)多めか綿多めか

作業服は知らなかったんですが、綿は耐火性、耐摩耗性でも合成繊維より優れており、火花の出る現場や、鋭利なものを扱う機械系の現場などでは綿100%が基本となるようです。

しかし耐火性はリモートワークには必要のない機能なので、基本的にポリエステル100%か、その割合が多い服を選ぶことになると思います。

今後キャンプ用に買うことはあるかも。

合成繊維はアトピー持ちで肌が弱いので、最初は肌触りも気になったんですが、何着かポリエステル100%のポロシャツ着てみても全く問題ありませんでした。

ポリエステルはジャージもそうですが、軽く、吸水性が少なく汗も洗濯後もすぐ乾き、汚れも落ちやすく作業服に向いるので、綿ポリエステル混合のものでもポリエステル多めのものが基本になります。

経年劣化するポリウレタン入りは避ける

主に生地をストレッチさせるために入っています(あと肌触りとか冷感目的もある)。

巷のストレッチ系衣類にはほぼ使われてたり、不織布マスクのゴムも大抵ポリウレタンだったりします。

ポリウレタンは製造から2、3年程度で加水分解、劣化してしまうため寿命があります。

ポリウレタン素材の弱点を知る | 東京都クリーニング生活衛生同業組合

ずっとしまっておいたスキー用手袋等がボロボロ剥がれたりベタベタになるよくあるやつ。

そのため、確実に2年以上着たいブルゾン、ズボン、アウターではポリウレタン入りは避けるようにしています。

実際の現場仕事だとポリウレタンの寿命の前に服としての寿命が来そうなので心配はいらなそう。

ポリウレタンなしの選択肢がないコンプレッションインナーは別。

そもそもリモートワーク+育児程度だと、ポリエステルメインでもストレッチ生地であれば十分に動きやすいと思います。

ダボダボデザインは避ける

作業服の中でも、昔ながらのモデルだと、薄い緑か青、グレーで、腹回りがかなりゆったりしたデザインが多いです。誰でも着れる&動きやすさ重視?

↓こういうやつ https://www.jcd-online.jp/

気分がアガらなそうだし、これは個人だと特に選ぶ理由は無いように思ってます。

軽いは正義

最初は意識してなかったんですが、TS DESIGNの無重力ゾーンのズボン(上記84504)を買ったときに軽さのメリットを実感しました。

特にスタンディングデスクでリモートワークしてるので、足や肩への負担が違います。当然動きも軽くなります。

同じような種類でも軽量と謳っているを選ぶようにしています。

冬にむけて

エアコンが付けられない部屋で仕事しており、冬は冷えます。

昨今の物価高に備え、暖房なしでも寒くない作業服を揃える予定です。

冬用インナー上下+温かいロングTシャツ、下は冬用ジョガーパンツ、それでも寒かったら↓電熱インナーを着る予定です

【FEVER GEAR ADVANCE】 FGA20010 電熱インナーベスト<名入れ刺繍加工不可>[2022年秋冬]通販ページ│自重堂<公式>オンラインショップ

作業服おすすめはしないけど、状況に応じたおすすめの作業服を知りたい人がいたらついったーとかで投げてもらえたら答えるかも。

バートル、自重堂、SOWA、TS DESIGNが観測範囲です。

チャンネル登録お願いします(挨拶)

NestJSの型定義をNuxt3で使えるようにエクスポートする

フロント、サーバーともにTypeScriptのWEBアプリケーションにおいて、 NestJS側のEntityやDTO、GraphQLの型をNuxt3側で使えると非常に便利だったのでメモ。

システム全体像にとしてはこの記事参照 uyamazak.hatenablog.com

いろいろ前提

レポジトリはNestJS、Nuxt3は同一で下記のようなディレクトリとします

.
├── types # 共有する型定義置き場
├── front # Nuxt3のディレクトリ
└── server # NestJSのディレクトリ

Nuxt3のバージョンは

    "nuxt": "3.0.0-rc.8",

NestJSのバージョンは ここらへん

    "@nestjs/apollo": "^10.0.16",
    "@nestjs/common": "8.0.9",
    "@nestjs/config": "2.1.0",
    "@nestjs/core": "8.4.7",
    "@nestjs/graphql": "10.0.16",
    "@nestjs/platform-express": "8.4.7",
    "@nestjs/typeorm": "^8.1.4",

Entity、DTOなど型定義の共有

編集時などよくEntityそのままの値を返すことがあり、Nuxt側のfetchやuseAsyncDataなどに指定できると便利です。

POST、PUTなどのリクエスト時はDTOの型が使えると補完や型チェックができて非常に便利です。

そもそもDTOはなんぞやって場合は下記参照。 NestJS の DTO と Validation の基本 - 型定義とデコレータで安全にデータを受け付ける - Qiita https://docs.nestjs.com/openapi/types-and-parameters#types-and-parameters

出力専用のtsconfingを用意します

server/tsconfig.shared.json

{
  "extends": "./tsconfig.json",
  "include": [
    "./src/dto",
    "./src/entity",
    "./src/types.ts",
    "./src/param",
    "./src/class-validator-jp.ts"
  ],
  "compilerOptions": {
    "outDir": "../types"
  }
}

メインのやつをextendsしつつ、includeで必要なところだけを指定、outDirで上記の出力先ディレクトリを指定します。

毎回手打ちは面倒なので出力コマンドを server/package.jsonに用意しておきます。

  "scripts": {
    "export:types": "rimraf ../types && tsc -P tsconfig.shared.json --emitDeclarationOnly",
  },

古いゴミが残らない用に書き出し前にrimrafを使って削除を行っています(NestJSのデフォルトprebuildで使ってたので流用) npm run のスクリプトの中でディレクトリの削除を行う (rimraf) - まくまくNode.jsノート

先程用意した出力用tsconfigを指定し、

型定義だけでいいので

--emitDeclarationOnly

を指定します。 これを指定しないと値も出力されるわけですが、それすなわち使用するfront側でもNestJSやその他サーバー側ライブラリのインストールが必要になってしまうので現実的ではありません。

yarnを使っているのでserverディレクトリで

yarn export:types

で出力されるようになります

index.tsも自動生成する

ファイル数が増えてくると、import時に全部指定するのが面倒なのでディレクトリごとにindex.tsがあると便利です。

自動生成してくれる下記ライブラリをインストールして使っています。

create-ts-index - npm search

yarn add -D create-ts-index

して package.jsonのscriptsに下記のようなコマンドを追加して使っています。 全フォルダにはいらないので、ファイル数が多い必要な場所だけ指定しています。

    "cti": "cti create src/dto src/entity -b -s=1 -i=spec.ts",

これで

import { FugaEntiry } from '~/entity/fuga-entity.entity'

のようなfromを

import { FugaEntiry } from '~/entity/'

に省略できるようになります。

Entityの型とレスポンスの型が違う場合

TypeORMでLazy Relationsを使っているとEntityのプロパティの型はそのままPromiseになってしまいますが、 レスポンスとして返す場合はJSONですのでもちろん解決した値を返すと思います。

typeorm/eager-and-lazy-relations.md at master · typeorm/typeorm · GitHub

その場合、あまりきれいではありませんが、上書きして新しい型を作って使うようにしています。 今Nuxt3側で出力してるけど、よく考えるとサーバー側で出力した方が変更しやすくていいかもしれない。

import {
  HogeEntity,
  LazyItem
} from '~/../types/entity'

export interface HogeEntityResponse extends Omit<HogeEntity, 'lazyItems'> {
  lazyItems: LazyItem[] // 元は Promise<LazyItem[]>
}

GraphQLの型を出力する

こちらを参考にCode firstとして使っています。

https://docs.nestjs.com/graphql/quick-start

GraphQLの型を書き出してくれるこいつをインストールします @graphql-codegen/cli - npm

yarn add -D @graphql-codegen/cli

設定ファイルを追加します

server/codegen.yml

schema: ./src/schema.graphql
generates:
  ../types/graphql-types.ts:
    plugins:
      - typescript

出力先 (../types/graphql-types.ts) とpluginsでtypescriptを指定するだけで使えました。

これもpackage.jsonのscriptsに追加

    "graphql-codegen": "graphql-codegen",

上記の型定義とGraphQLの型定義は同時にやってくれたほうがいいので、つなげて実行してしまっています

   "export:types": "graphql-codegen && rimraf ../@shared/@types/server && tsc -P tsconfig.shared.json --emitDeclarationOnly",