VSCodeとDockerでLaTeXの実行環境を整える

## はじめに
　論文執筆のために、VSCodeとDockerを使ったLaTeX環境の構築を行いました。今回は、環境構築時に行ったことをまとめていきます。
　なお、今回の環境構築は以下の記事を参考に進めていきました。この記事には記されていないDockerのコマンド等を補足で示していきます。


https://zenn.dev/being/articles/how-to-use-my-latex#%E3%81%AE%E7%92%B0%E5%A2%83%E6%A7%8B%E7%AF%89%E3%81%AFdocker%E3%82%92%E4%BD%BF%E3%81%8A%E3%81%86

## 事前準備
### 必要なソフトウェア
　LaTeXの環境を構築するために以下のソフトウェアの導入を行いました。
- VSCode
    - LaTeX Workshop(拡張機能)
- WSL2
    - 今回はWSL2上で作業を行います。
- Docker
- Git,GitHub
    - LaTeXテンプレートをGitHubのリポジトリからクローンします。

## Dockerイメージのpull
　以下のコマンドを実行しLaTeXの環境構築がされたimageをローカルにpullします。
```
$ docker pull ghcr.io/being24/latex-docker:latest
```
### pullできたかの確認
以下のコマンドを入力しimageの一覧を表示します。
```
$ docker images
```
実行後に以下のものがあればpullは完了しています。
```
$ ghcr.io/being24/latex-docker                        latest    36c0de73963d   3 months ago    1.65GB
```
### テンプレートをクローンする

　[こちら](https://github.com/being24/latex-template-ja)のリポジトリにあるLaTeXのテンプレートをローカルにcloneします。画面右上にある"Use this template"というボタンか、"Fork"を押下することでテンプレートのコピーを作成します。その後、ローカルにgit cloneを行います。

1. "Use this template"か"Fork"を押下（どちらでも結構です）
![c23db36c9c2f8dd648a35cede8f4dc02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2341225/872ba7aa-2983-ca43-d04a-15d64c53684e.png)

1. 自分のリポジトリにコピーを作成する。（自分はForkで実行しました）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2341225/7619dd08-1cd5-3cbb-0c66-cee55b65e041.png)

1. コピー作成後ローカルにcloneを作成する。
    1. codeをクリックしurlをコピー（環境によってhttpかssh好きな方で）
 ![8c93edc2cff580e5d65735e244e6af34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2341225/979dfbc1-d62e-6c4e-9b6f-95058347fd15.png)
    1. cloneを実行
```
$ git clone [コピーしたリポジトリのURL]
```
## main.texの編集
　編集が可能か確認を行うために、クローンしたディレクトリ内にある "main.tex" の編集を行います。
　今回は、titleとauthorを編集します。
```
\documentclass{classes/resume}

\title{
	\gt{LaTeX 環境の構築のテスト}\\
}

\author{
	\gt{hogehoge大学 hoge学科}\\
	\gt{山田太郎}
}

\date{}

\begin{document}
\maketitle

% ここに本文をかく
% exampleフォルダを参考にしてください

\end{document}
```
## docker imageの起動とpdfファイルの作成
　前章で作成したmain.texをpdfファイルに変換するために、先ほどpullした docker imageを起動します。
以下のコマンドを実行します。
```
$ docker run --rm --name latex-template-ja -it -v ${PWD}:/workdir ghcr.io/being24/latex-docker
```
コマンドの解説をします
- ``` docker run ``` : コンテナでコマンドを実行
- ``` --rm ``` ：コンテナの終了時にコンテナを削除
- ``` --name ``` ：コンテナに名前を付ける（ここだと"latex-template-ja"）
- ``` -it ``` ：コンテナ内に入りshellを起動する。
- ``` -v ${PWD}:/workdir ```： ローカルのディレクトリをworkdirにマウントする。

実行後、コンテナ内のshellが起動されたら、以下のコマンドを実行します。
```
/workdir# uplatex main.tex
```
このコマンドを実行することで、texファイルがコンパイルされdviファイルが作成されます。
今回だとmain.dviというファイルが作成されているか確認してください。

　次に、今作成したdviファイルをpdfファイルに変換します。
```
/workdir# dvipdfmx main
```
このコマンドを実行することでdviファイルをpdfファイルに変換することができます。
## pdfファイルの確認
　作成されたpdfファイルを確認します。


### latex workshopを使用する。
　latex workshopが導入されている場合左のサイドバーに「TEX」と書いている項目が存在するはずです。そちらをクリックしてください。クリックすると「View LaTeX PDF」というタブがあるのでそちらを展開し、「View in web browser」を選択しましょう。そうするとwebブラウザーが立ち上がるのでそちらから確認しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2341225/62113feb-aceb-5f46-6b6e-5b16b080ffde.png)
以下のように表示されたら成功です！！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2341225/28a2157a-4fa2-70ec-023b-2b41fd597ea3.png)

## さいごに
　以上が、私の行ったVSCodeとDockerでLaTeXの環境を構築する方法です。今回の学習でDockerコマンドの使い方やオプションの意味なども詳しく知ることができました！