NextJsとNestJsをDockerで立ち上げる あくまでもDockerのハンズオンなので別に何でもいいのだが、どうせならということで、次に考えている構成でやってみることにした。 ちなみに【環境構築】NestJS+Next.js+TypeScript+Dockerの環境構築ハンズオンに倣うようにすすめていくので、こちらの記事を参考にした方がいいかもしれない。 docker-compose.ymlファイルを作成する プロジェクトのルートでdocker-compose.ymlファイルを作成する。そのために下記コマンドを実行する。 touch docker-compose.yml 実行後、docker-compose.ymlという名前の空ファイルができていることを確認することができる。 このファイルにDockerの設定を書いていく。 version: "3.7" services: backend: build: context: . dockerfile: ./docker/backend/Dockerfile tty: true volumes: - type: bind source: ./backend target: /api ports: , "3000:3000" 設定内容は把握できていないが、これでバックエンドのdocker-compose.ymlが作成できたらしい。 まずはバックエンドのみで起動するためフロントエンドの設定は書かない。 バックエンドの設定 それではバックエンド、つまりNestJs側の設定をすすめていく。 Dockerファイルの作成 設定ファイルに書いた dockerfile: ./docker/backend/Dockerfile で指示したディレクトリを作成する。 mkdir docker cd docker mkdir backend 作成したディレクトリにDockerfileを作成する。 cd backend touch Dockerfile 作成が完了したら以下の内容を記述する。 FROM node:16.18.0 WORKDIR /api CMD ["npm", "run", "start"] ちなみにnodeのバージョンは参考にした記事の通りではなく、なんとなく現在他案件で使用しているバージョンにしてみた。 ↓のちに下記に変更した（よくわからないけど）。 FROM node:16-alpine3.16 これでDocker側の設定は完了。 NestJsをインストールする 次にNestJsをインストールする。 cd ../.. プロジェクトのルートに戻り、nest newを実行※１する。...

Windows 11 HomeにDockerをインストールする 先人の知恵を借り、やってみる。 WSL2/Linuxをインストールする Dockerを起動させるにはLinux OSが必要になる。そこで「Windows Subsystem for Linux」、通称WSLをインストールする必要がある。 Linux 用 Windows サブシステムを使用すると、開発者は、従来の仮想マシンまたはデュアルブート セットアップのオーバーヘッドなしで、ほとんどのコマンド ライン ツール、ユーティリティ、アプリケーションを含む GNU/Linux 環境を変更せずそのまま Windows 上で直接実行できます。 ということでインストールしてみる。powerShellを管理者モードで開き、Cドライブ直下で下記コマンドを実行する。 wsl --install インストール中: 仮想マシン プラットフォーム 仮想マシン プラットフォーム はインストールされました。 インストール中: Linux 用 Windows サブシステム Linux 用 Windows サブシステム はインストールされました。 インストール中: Ubuntu Ubuntu はインストールされました。 要求された操作は正常に終了しました。変更を有効にするには、システムを再起動する必要があります。 無事にインストールできたっぽいので指示に従い再起動する。再起動するとUbuntu の初期設定（ユーザ名とパスワードの設定）が始まるので、ユーザー名とパスワードを設定する。 Installing, this may take a few minutes... Please create a default UNIX user account. The username does not need to match your Windows username....

※この記事を書いているのはフロントエンドを専門にしているので、バックエンド側の「いろは」は何も知りません。 フロント専がDockerとはいったいと頭を抱えつつ、ざっくり入門する記事になります。 Dockerに入門、重い腰を上げる理由 実はというほどでもないが、nestJsもコマンド１つでローカルホストを立ち上げることができるし、公式ドキュメントもローカルホストで書かれている。つまりあえてDockerに入門する必要もないのだが、開発の参考にする記事を調べると、ことごとくDockerで作業しているし、どうやらデプロイもDockerのファイルを使って行っているようである。であれば、こちらも開発環境を合わせた方が開発がよっぽど楽になるので、この機会に入門しちゃうことにした。 なぜDockerを使うのか と聞くと、「環境を揃えたい」という回答が良く聞こえてくるが、いまいちピンと来てない。そもそもフロントエンドであればPackage.jsonで環境を揃えられるんじゃないのと言いたくなる。けどそれを言うと無知と思われるのも嫌なので、調べてみることにした。 NodeとOSを揃えられる Nodeのバージョンを共有できる 調べてみると、Nodeのバージョンアップを揃えられるというのが強みらしい。 これは確かに納得できる。 今までのプロジェクトでもNodeのバージョンが揃ってなくて苦労したことは良くある。Package.jsonの方で依存ライブラリを管理してもその大本であるNodeのバージョンが管理されていなければ意味がない。まあ、Voltaを使ってPackage.jsonにNodeのバージョンをピン止めすれば同じと思ったけど、そもそも皆が皆NodeのパッケージマネージャにVoltaを使っているわけじゃないので、そううまくはいかない。ただそれで言うとDockerもそうなので、納得できるけどこのメリットを享受するためにDockerを入れようとは正直思わない。 Volta - The Hassle-Free JavaScript Tool Manager OSを揃えられる どうやらイメージという設定ファイルでOSを指定できるらしい。 つまり今までOSごとに環境構築で苦労することがあったが、それがなくなるらしい。というのもDockerを使うことで、使っているOSに環境構築するというわけではなく、Docker上のコンテナに環境を構築するので、OSに依存しなくなるということらしい。 実際に使うことでメリットを享受するしかない なんか色々な記事を見てみたが、メリットと感じるのは上に上げた２つだけだった。導入手順を考えるとあえて使う気にもならないが、社会的にDockerを使おう的な風潮を感じるので、今回の個人開発で導入してみて、所感を述べようと思う。使わずに批判するのは一番よくないって誰かが言っていた気がするし。 あとざっと調べてみた感じ、 デプロイが簡単にできる？ 環境をそのまま渡すことができるので、譲渡しやすい？ みたいなメリットがあるのかなと感じた。 とりあえず、物は試しで手を動かして入門してみる。

ネットで見つけた方法は どうやら下記コードで目的は達成できるらしい。 new Array(10).fill(0).map(() => 0) // => [0, 0, 0, 0, 0, 0, 0, 0, 0, 0] いったい、どうしてこうなるのか。 何が行われているのか？ new Array() かっこの中に入れたLength分の配列を作成する。 つまりnew Array(10)であれば10個の値を含む配列を作成してくれる。 ちなみに値はundefinedになる [undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined] fill() fill() メソッドは、開始位置（既定値は 0）から終了位置（既定値は array.length）までのすべての要素を、静的な値に変更した配列を返します。 つまり先ほど作った10個のundefinedを持つ配列のundefinedを0に変更してくれるということ？ console.log(new Array(10).fill(0)) // [0, 0, 0, 0, 0, 0, 0, 0, 0, 0] ということらしい。 この時点でタイトル（n個の任意の値を持つ配列を作成する）という目的は達成されている。 いったいmap()は何をしているのか？ map() このコードでいえばmap()は配列の個数分取り出して0を入れるという、まったく生産性のない動きをしている。 つまり本タイトルという目的を達成するためであれば、不要以外の何物でもない。 n個の任意の値を持つ配列を作成する方法 ということで結論は、 console.log(new Array(10).fill(0)) // [0, 0, 0, 0, 0, 0, 0, 0, 0, 0] に落ち着いた。...

コンポーネントを再レンダリングさせたい 色々な状況が複雑に絡み合っていた。ある処理を行ったあと、初期表示に戻したいという要件があり、それじゃあということで、表示用にデータを作り直したりと色々手を尽くしたが、前述したように色々な状況が複雑に絡み合っていせいで、どうにもできなかった。 そこで、いっそコンポーネントをまるっと再レンダリングしちゃえ、ということにした。 で、それを実現するのが下記コード。 constructor(private router: Router) {} ~ this.router.navigateByUrl('/RefreshComponent', { skipLocationChange: true }).then(() => { this.router.navigate(['Your actualComponent']); }); 行われていることは、１度RefreshComponentというページに飛び、Your actualComponentに戻ってくるという処理。ただユーザーはそれに気が付かない。つまりハック的な対処方法なので、使うのは自己責任で。