はじめに
お久しぶりです。
もう1か月以上前になってしまったのですが、2022/4/11(月)に行われた「VS Code Meetup #19 - フロントエンド開発Night」というイベントで、「Remote-Containersでnext.js環境を作った話」という内容で登壇しました。
VS Code Meetup #19 - フロントエンド開発Night - connpass
内容はタイトル通り、VS Codeの拡張機能であるRemote-Containersを使ってNext.jsの開発環境のベースを構築した話なのですが、質問を受けた＆説明しきれなかった部分について、ここで補足しようと思います。
なお登壇資料はこちらです。
www.slideshare.net
Remote-Containerって何？
Remote-Containerとは、「あるコンテナ環境内でVS Codeを開き、開発やテストを可能にする」拡張機能です。
コンテナの中に入る場合、docker exec -it などを使うと思いますが、そういう操作を一切せずに、VS Codeからわずかな操作だけで簡単にコンテナ内部に入ったり、コンテナ内でVS Codeで開発やテストを実行することもできます。
また、コンテナ環境を簡単に作るための情報(ベースのimage, 各種設定など)も用意されているので、コンテナベースでの環境構築・開発を行う際に大変便利です。(ただし、最低限のDockerの知識は必要になります)
ちなみに登壇時に「離れた場所にあるコンテナに入る拡張機能なのか？」という質問を頂いたのですが、Remote Containerはあくまでもローカル(=VSCodeで開いている環境)をコンテナで開く＆コンテナに入るための拡張機能です。(離れた場所にあるコンテナに入る場合は、Remote-SSHを用います)
devcontainer.jsonについて
登壇資料内「定義ファイル(devcontainer.json)からコンテナ環境を作成できる」と記載していますが、そのdevcontainer.json についての補足です。
devcontainer.json は、開いている環境をRemote-Containerからコンテナとして開くための設定で、コンテナ情報+αを記載します。
登壇資料では主に1から作成する方法を記載しましたが、docker-compose.ymlやDockerfileがあれば、そこから生成することもできます。
コマンドパレットから「Remote-Containers: Add Development Conatiners...」や「Open in Container」などの「コンテナを開く」系のアイテムを選択すると以下のようなメニューが表示されるので、そこから「From (ファイル名)」を選択すればOKです。
ちなみに、Remote-Containerで動かす場合、下記の設定が重要になります。
| 項目 | 説明 | 備考 |
|---|---|---|
| settings | コンテナ生成時に、settings.jsonにある項目についてのデフォルトの設定を行う | |
| extensions | コンテナ内で使用する拡張機能を設定する | 拡張機能のIDを配列で指定する(※1) |
| features | コンテナ内で使用するツールなどの設定を行う | devcontainer.jsonを対話形式で作成した際に追加したツール(登壇資料の9スライド目を参照) (※2) |
※1：拡張機能の一覧で右クリックすると、IDをコピー出来ます。また直接devcontainer.jsonのextensionsに追加することもできます。
※2：自分で定義する場合、いくつかの条件に沿う必要がありそう。下記記事に詳しく記載されています。
参考：Dev container featuresについて調べてみる
何のツールをインストールしたのか
「Remote-Containersでnext.js環境を作った話」というタイトルなのに、結局はnpm(yarn) installでの環境構築がメインになってしまったわけですが、参考までにどのツールを入れたかを記載しておきます。(詳細説明は割愛します)
- create-next-app, typescript
- このあたりは必須かなと思います。
- ts-jest, @testing-library/react, @testing-library/react-hooks
- テスト用のツール群です。(あと、storybookも入れておけばよかったかも)
- emotion
- CSS in JSのライブラリ
- recoil
- Reactでステート管理を柔軟に行うためのツール。(正式リリース版ではないみたいだが、個人的に使いやすい)
- SWR
- HTTP REF 5861で提案された「stale-while-revalidate(再検証中は古いものを)」に基づき、APIのデータを扱うライブラリ
emotion, recoil, swrは単に私が仕事で使ってて、使いやすかったからという理由で入れただけですが...
まとめ
以上、「VS Code Meetup #19 - フロントエンド開発Night」でも私の発表の補足でした。
イベントでの発表だとどうしても時間の関係で細かいところまで説明しきれない部分があるので、こんな感じでブログで補足せざるを得ないですね...本当は登壇前に補足ブログを公開した方がいいのかもしれないですね。(次からできるだけそうします)
本当は登壇から近い日にちに公開できればよかったんですが、個人的に登壇後まもなく入院、手術、その他諸々やらがあり、全く手が付けられませんでした...
ただ、これから徐々にペースを上げていこうと思います。
それでは、今回はこの辺で。
