VS Code Dev Containersによるコマンド操作を排除した環境構築とタスクの自動化
はじめに
執筆時現在、私はTypstドキュメント翻訳プロジェクトに取り組んでいます。
その開発環境をVS Codeとその拡張機能であるDevContainerを用いて行ったため、その使い方について解説します。VS Codeの機能を使っていい感じに自動化できたため、この翻訳プロジェクトにだけにかかわらず、Dev Containersを使用した開発環境共有を行う1例として皆様のご参考になれば幸いです。
Typstドキュメント翻訳プロジェクトについては以下の記事にて紹介しておりますため、もしご興味がありましたらご覧いただけますと嬉しいです。
準備
詳細は割愛しますが、以下の3つのソフトウェアが必要です。
Git
翻訳プロジェクトではGitHubを用いて行われています。手元のPCにはGitをインストールしてください。
VS Code
こちらからインストールしてください。 また拡張機能としてDev Containersもインストールしてください。
Docker
Commercial useでなければ、Docker Desktopが無料で使用できます。 実際は、Docker Desktopに含まれているDocker Engineが入っていれば、この記事の内容は実行できます。 Commercial useかつ無料で使用したい場合には、Docker Engineのみをインストールしましょう。コマンド操作が必要になってしまいますが、WSL (Windows Subsystem for Linux) でも実行できます。
環境構築
開発環境構築にはDevcontainersを使用しております。この翻訳ドキュメントを構成するためには、RustとPython、加えて生成物の表示のためにBunの環境が必要です。以下の手順を踏むことで、これらの開発環境の構築と、ソースコードのビルドおよび加工を自動化しております。
- Docker Desktop（Docker Engine）を起動してください。
Docker Engineのみを起動する場合（コマンド操作あり）
Linuxでは自動起動するようにserviceが登録されているかもしれませんが、WSLやWindows、Macなどを使用している場合には注意が必要です。
docker psコマンドでCONTAINER ID IMAGE ...などが表示されていれば動いています。Cannot connect to the Docker daemon ...と表示される場合には、WSLなどのターミナルで以下のコマンドを実行してください。sudo service docker start - Gitでリポジトリをクローンしてください。
CLIで行える場合にはそれでも構いませんが、VS CodeでGitHub連携が行われている場合、GUIの操作でクローンすることも可能です。ファイルエクスプローラー（Ctrl+Shift+E）からリポジトリの複製を押すか、Ctrl+Shift+PからGit: Cloneを実行してください。テキストボックスにgit cloneと検索すれば見つかります。出てきたテキストボックスにURLを入れましょう。以下の画像では例としてtypst-jpのリポジトリを入力しています。
その後ポップアップでフォルダーを選択したら、クローンが行われます。
動作確認だけであれば問題ありませんが、プルリクエストなどを行いたい場合には、このリポジトリをご自身のアカウントにフォークして、それをクローンするように変更してください。
すでにクローン済みの状態であれば、クローンしたフォルダーをVS Codeで開くだけでよいです。 -
Ctrl+Shift+PからDev Containers: Reopen in Containerを実行してください。reopenと検索すれば見つかります。
実行すると左下の表示が開発コンテナー: typst-jp-documentationに変わり、ビルドが始まります。開発コンテナーの構成（ログの表示）をクリックするとターミナルで見ることができます。
- ビルドが完了したら http://0.0.0.0:8000/ にブラウザでアクセスしてください。ページが表示されれば成功です。アドレスバーに直接打ち込んでいただいてもよいですが、ビルド後に現れる
ブラウザで開くやターミナル上のアドレスをクリックすることでも規定のブラウザで開けます。
開発フロー
ここでできることは環境の構築だけではありません。VS CodeのTasksという機能を使って定型動作を自動化しています。
基本的には、ターミナルに同一のコマンドを打ち込めば同じ動作をさせることは可能ですが、久しぶりに使うとコマンドを忘れてしまうということもあるかと思います。また、この記事のコンセプトであるコマンド操作を使わないことを一貫します。
-
再ビルド
このプロジェクトの基本的な作業は、ソースコードの英文を日本語に翻訳することです。残念がら今はホットリロードなどの機能はないため、変更をブラウザ上に反映させるためには再ビルドする必要があります。とくに設定をいじっていなければ、ビルドはCtrl+Shift+Bで実行されるように設定しております。 -
文章校正
textlintが入っており、翻訳ガイドラインに極力沿うように文章校正をするコマンドが用意されております。
Ctrl+Shift+PからTasks: Run Taskを実行してください。
するとつぎの選択肢からtextlintの種類を選択できます。
-
textlint-html: Rustのソースコードを翻訳した結果から生成されたHTMLファイルの文章校正を行います。これで得られた出力を参考にRustの翻訳文を見直してください。 -
textlint-md: Markdownファイルを文章校正してくれます。 -
textlint-md:fix: Markdownファイルを文章校正した結果を自動で修正してくれます。意図通りに修正されないこともあるため、必ず結果を確認して、適宜正しい状態へと修正してください。
ちなみに
generate-docsはCtrl+Shift+Bで実行されるビルドと同じです。翻訳を修正した場合には再ビルドをかけてください。 -
おわりに
本記事では、VS Codeを用いてコマンド操作をすることなく環境構築および開発を行う方法を紹介しました。具体例としてTypstドキュメント翻訳プロジェクトのリポジトリでの実行方法を示しましたが、他のプロジェクトに対しても応用できる内容かと思います。
Typstドキュメント翻訳プロジェクトのソースコードは執筆時現在のコミットを使用しました。今後もまだまだ自動化が進められ、この記事どおりの運用から変更されることも十分にありえます。むしろ、本プロジェクトにご参加いただき、この運用を変える勢いで、さらなる自動化に貢献いただけますと幸いです。
Discussion