
Markdownの文章に画像をコピペで貼れるようになる拡張機能です。
スクリーンショットやフォルダの画像をコピーしてクリップボードから貼り付けられるようになります。

[Markdown Image - marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=hancel.markdown-image)

![picture 5](/images/posts/300/307/1626617101207.png)  

スクリーンショットから貼り付けられます。
![screenshot](/images/posts/300/307/MarkdownImage.gif)

フォルダやWEBの画像もコピーして貼り付けられます。
![screenshot](/images/posts/300/307/MarkdownImageCopy.gif)

こんな感じで画像を扱いやすくなります。
設定から保存先のパスを変えたり、ファイルを[Imgur](https://imgur.com/)などにアップロードして貼り付けることも可能です。

めっちゃ便利。

## 使いやすいように設定する

設定変更は`ctrl + ,`か左バー下の歯車から設定を選び検索に`markdown Image`を入力してください。

![picture 3](/images/posts/300/307/dda996af98bf96aa062dceedd5ce77ac5269d60a37d897de50b483e924da836f.png)  


### ファイル名の設定

初期状態だと貼り付けたファイル名がハッシュでしかも長い。
```bash
# デフォルトのハッシュ
![picture 2](/images/posts/300/307/fd1a2472e46c2dd92b903aa1598ba8b096838829f242c584bc07dbbd0bb41585.png)
```

![picture 2](/images/posts/300/307/fd1a2472e46c2dd92b903aa1598ba8b096838829f242c584bc07dbbd0bb41585.png)  
このようにファイル名を変更できるので好みのものにしてください。

▼　いくつかファイル名の例を紹介
```bash
# timestampに設定変更した場合
${timestamp}
![picture 4](/images/posts/300/307/1626615452401.png)  

# マークダウンファイル名
${mdname}
![picture 8](/images/posts/300/307/307-vscode-markdown-image.png) 

# datetimeを表す
${YY}${MM}${DD}T${HH}${mm}${ss}
![picture 10](/images/posts/300/307/20210718T231400.png)  
```

変数や文字を組み合わせたいときは`${YY}-${MM}-${DD}T${HH}${mm}${ss}`のように指定します。セミコロン`:`とアスタリスク`*`は何故か正規表現がどうとかエラーがでて使えないです。

注意点として`${mdname}`だけだとマークダウンのファイル名だが番号が振られないので、２つめ以降は上書きになってしまう。
`${mdname}-${timestamp}`や`${mdname}-${filename}`のように被らなそうな組み合わせにすると良いです。


`/`でディレクトリを切れるのでオススメは以下のようにすると記事ごとに画像を管理しやすい。
```bash
# posts/${mdname}/${timestamp}
images/posts/307-vscode-markdown-image/1626876249627.png
```

## ファイルの保存先パスの変更

デフォルトでは画像は`/images`に保存されます。
![picture 12](/images/posts/300/307/307-vscode-markdown-image-1626618411652.png)  

こちらで保存先のパスを変更できる

## ファイルの保存先変更

デフォルトはローカルに保存します。

![picture 11](/images/posts/300/307/307-vscode-markdown-image-1626618296490.png)  

ローカル以外にもImgurなどにもアップロードできる。
認証設定など色々あるので試してほしい。

## 終わり
雑だけど以上です。
個人的にスクショとイメージのコピーを手軽にマークダウンに貼り付けられるようになるだけで十分満足です。




Markdownに画像を貼り付けるVSCodeの拡張機能 Markdwon Image

Markdownのリストで段組みを揃えて改行する方法が分かったので共有します。

- どういうことかというと 
こんな感じに
 - 段組みを揃えて 
改行できるよ

## 環境

確認できた対応している環境は以下の通り

- GitHub
- Qiita
- Visual Studio Code の [Markdown All in One](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one)のプレビュー
- npm の [markdown-it](https://github.com/markdown-it/markdown-it)

恐らく他のMarkdown対応のエディタやサービスも書けると思います。

## 書き方

リストの行末に改行タグをつけて、次の行は素のテキストを書けばよいです。
改行タグは半角スペース二つ` `か、HTMLの改行タグの` `です。

例（半角スペースはわかりづらいので` `で）

```md
- リンゴ 
Apple
- オレンジ 
Orange
- イチゴ 
Strawberry
```

- リンゴ 
Apple
- オレンジ 
Orange
- イチゴ 
Strawberry


なぜこれで改行できるかと言うと、HTMLを見ると分かりやすいです。

```html
<ul>
 <li>リンゴ Apple</li>
 <li>オレンジ Orange</li>
 <li>イチゴ Strawberry</li>
</ul>
```

上のように`<li></li>`タグの中で改行コードがつくため、行頭を揃えて段組みできるようになります。

## その他にも使える

### 番号付きリスト

```md
> 1. 第一条 
> ロボットは人間に危害を加えてはならない。また、その危険を看過することによって、人間に危害を及ぼしてはならない。 
> 2. 第二条 
> ロボットは人間にあたえられた命令に服従しなければならない。ただし、あたえられた命令が、第一条に反する場合は、この限りでない。 
> 3. 第三条 
> ロボットは、前掲第一条および第二条に反するおそれのないかぎり、自己をまもらなければならない。 
> 
> — 2058年の「ロボット工学ハンドブック」第56版、『[われはロボット](https://amzn.to/301dvm6)』より
```

> 1. 第一条 
> ロボットは人間に危害を加えてはならない。また、その危険を看過することによって、人間に危害を及ぼしてはならない。 
> 2. 第二条 
> ロボットは人間にあたえられた命令に服従しなければならない。ただし、あたえられた命令が、第一条に反する場合は、この限りでない。 
> 3. 第三条 
> ロボットは、前掲第一条および第二条に反するおそれのないかぎり、自己をまもらなければならない。 
> 
> — 2058年の「ロボット工学ハンドブック」第56版、『[われはロボット](https://amzn.to/301dvm6)』より

※ `>`は引用

### 表組み

```md
| 言語 | フレームワーク |
|--------|-------------------------------|
| Python | Flask Django pyramid |
| PHP | Laravel CakePHP Symfony |
| Java | Struts Spring |
```


| 言語 | フレームワーク |
|--------|-------------------------------|
| Python | Flask Django pyramid |
| PHP | Laravel CakePHP Symfony |
| Java | Struts Spring |

Markdownのリストで段組みを揃えて改行する方法

テキストから数式に変換するプラグイン・アプリをまとめます。
ブラウザで実行できるもの、JavaScriptのライブラリ、VSCodeのプラグインなど関連するものをリスト化しました。

それぞれのサンプルまでは載せていません。

## 数式のエンジン・記法について

調べてみると思った以上に数式エンジンが多様だった。
記法もそれぞれあり一長一短がありそうです。

TeX記法など体系が曖昧なため、誤解を招く表現があるやもしれません。
あらかじめご了承ください。

どれが良いかは判断付かないため、見つけたものをここに書きだしておきます。

- [KaTeX](https://katex.org/)
- [MathML(Mathematical Markup Language)](https://developer.mozilla.org/ja/docs/Web/MathML)
- [MathJax](https://www.mathjax.org/)
- [UnicodeMath](https://blogs.msdn.microsoft.com/murrays/2016/11/30/unicodemath-version-3-1/)

### KaTeX

- [KaTeX](https://katex.org/)
- [GitHub](https://github.com/KaTeX/KaTeX)

> KaTeX is a fast, easy-to-use JavaScript library for TeX math rendering on the web.

ライセンス：MIT License

[ドナルド・クヌースのTeX](https://ja.wikipedia.org/wiki/TeX)をベースにしている。
MathJaxよりもブラウザでの描画が早いことを謳っています。

記法については[こちら](https://katex.org/docs/supported.html)にまとまっています。

### MathML

- [MDN - Mozilla](https://developer.mozilla.org/ja/docs/Web/MathML)

> Mathematical Markup Language (MathML) は、数学的表記を記述し、その構造と内容を表現するための XML マークアップ言語です。

数式を描画するマークアップ言語。
HTMLやXMLのように`<>`で書くような言語です。

[MathMLを対象とした数式検索エンジンの設計](https://www.jstage.jst.go.jp/article/infopro/2007/0/2007_0_45/_article/-char/ja/)といった論文も見つけた。

### MathJax

- [MathJax](https://www.mathjax.org/)
- [GitHub](https://github.com/asciimath/asciimathml)

> **Beautiful math in all browsers** 
> A JavaScript display engine for mathematics that works in all browsers. 
> No more setup for readers. It just works.

ライセンス：Apache License 2.0

JavaScriptを使ってブラウザ上に数式を描画するエンジン。
依存がないためこれだけで使える。

### UnicodeMath

- [MSDN](https://blogs.msdn.microsoft.com/murrays/2016/09/07/unicodemath/)

Unicodeの「数式用の書体指定付き文字」となる。
対応したフォントがあれば、数式の字体を変えられそう。

下のサイトの解説がとても詳しい。(3)まである。

- [unicode-math を完全に理解したい話(1)](https://zrbabbler.hatenablog.com/entry/20180915/1537031499)

### MathJaxとKaTeXについて

どちらもTeX文書の変換のためのライブラリであり、記法はほぼ同じ。
パースの速度面ではKaTeXが優勢です。

比較について詳しくは下記を参照してください。

- [TeXライブラリの選出](https://github.com/NetCommons3/Wysiwyg/issues/12)

## JavaScript, npm

以下はJavaScriptまたはnpmで使えるもの。

### markdown-it-latex

- [GitHub](https://github.com/tylingsoft/markdown-it-latex)
- [npm](https://www.npmjs.com/package/markdown-it-latex)

マークダウンをHTMLに変換する[markdown-it](https://github.com/markdown-it/markdown-it)の数式プラグイン。
**KaTeX**と**AsciiMath**に対応している。

このブログでもmarkdown-it、processmdと合わせて利用しています。

例えば、オイラーの公式も下記のように書けます。

KaTeX記法
````
```math
e^{i\pi}+1= 0
```
````

変換後の数式
```math
e^{i\pi}+1= 0
```


- [コマンドでマークダウンを変換するprocessmd | npm](https://www.suzu6.net/posts/120-npm-procesmd)
- [美しい数式をKaTexで美しく書こう](https://www.suzu6.net/posts/102-katex-math-functions)


### AsciiMath

- [AsciiMath](http://asciimath.org/)
- [GitHub](https://github.com/asciimath/asciimathml/blob/master/ASCIIMathML.js)

ブラウザ上でテキストから数式を変換できるJavaScriptライブラリ。
サイトにサンプルがあるので実行確認できます。
変換には[MathJax](https://www.mathjax.org/)を用いている。

CDN配信されているため、以下のスクリプトで導入できます。
```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/latest.js?config=AM_CHTML"></script>
```

## VSCodeプラグイン

Visual Studio Codeで数式を書けるプラグイン。
TeXとマークダウンそれぞれに対応したものがある。

### LaTeX Workshop

- [Visual Studio Code Marketplace](https://marketplace.visualstudio.com/items?itemName=James-Yu.latex-workshop)

Visual Studio Codeのプラグインの中で一番人気のLaTeXプラグイン。
プレビューやスニペット、シンタックスなども同梱しているので、LaTeXで書くならまずはこれを入れるのが良さげです。

### Markdown All in One

- [Visual Studio Code Marketplace](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one)

Markdownで文章を書くならこれだけが一押し。
数式と入力補完も同梱されており下記のように書ける。エンジンはKaTeXかな。

```
$$
f(x) = \int_{-\infty}^\infty \hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
$$
```

```math
f(x) = \int_{-\infty}^\infty \hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
```

あとは、[Markdown PDF](https://marketplace.visualstudio.com/items?itemName=yzane.markdown-pdf)を入れたら十全。

### mdmath

- [GitHub](https://github.com/goessner/mdmath)
- [Visual Studio Code Marketplace](https://marketplace.visualstudio.com/items?itemName=goessner.mdmath)

ライセンス：MIT License

Visual Studio Codeでマークダウン＋数式を書くことができるプラグイン。
数式の変換にはKaTeXを使っている。

### Markdown Math

- [Visual Studio Code Marketplace](https://marketplace.visualstudio.com/items?itemName=koehlma.markdown-math)

$\href{https://katex.org/}{\KaTeX}$記法。

### Fast Unicode Math Characters

- [Visual Studio Code Marketplace](https://marketplace.visualstudio.com/items?itemName=GuidoTapia2.unicode-math-vscode)

UnicodeMathに対応したプラグイン。

## その他サービス

### SearchOnMath

- [SearchOnMath](http://searchonmath.com/)

数式のための検索エンジン！
数式を使っているサイトを検索してくれる。

Googleに慣れてしまっているため精度や使い勝手はそこまでだが、試みはとても面白い。

- [数学の数式・記号のあるページを簡単に検索できる「SearchOnMath」- GigaZine](https://gigazine.net/news/20150225-searchonmath/)

### Mathematics Stack Exchange

- [Mathematics Stack Exchange](https://math.stackexchange.com/)

数式についての質問サイト。
質問タイトルが数式だらけで面白い。

恐らくMathJaxを使っています。

### maths online HTML formula tool

- [maths online HTML formula tool](https://www.univie.ac.at/future.media/moe/formeln/index.html)

HTMLでの特殊文字の書き方を確認できるツールサイト。
Symbolフォントが確認できる。

オーストリアのウィーン大学（Universität Wien）のドメイン上にあって驚いた。
Future Mediaというマルチメディア品質の製品の推進協会が作られたそうです。

## 終わりに

今後も、良さそうなアプリ・プラグインを見つけたら追記する予定です。

数式を書くためのエンジン・プラグイン・アプリのまとめ


「設計書をできるだけテキストで書いてgit管理したい」と試行錯誤しています。
**ER図やシーケンス図などUMLをテキストベースで書けるPlantUML**を導入しました。

VSCodeの拡張機能なので導入も簡単ですし、なによりExcel、PowerPointやdrow.ioで書いていたころよりも
作業効率が上がりました！

PlantUMLを導入するところから、UMLを描きだすところまで紹介します。

環境は主にWindows10で説明します。
LinuxやMacでも導入はできますが「Graphviz」のインストールで苦戦するかもしれません。

## UML (Unified Modeling Language)図を描く理由

**UML図**はソフトウェアシステムの成果物を記述、視覚化、構築、文書化するために使用されるグラフィカル表記法です。
「UMLとは何か？」をわかりやすく説明できないので、[初心者が押さえておくべきのUML入門知識](https://www.edrawsoft.com/jp/uml-introduction.php)を参照してください。

個人的にはUML図を描くことで**自分の頭の中の整理**と**他人に正確に伝えることができる**と実感しています。
図として表現することで、日本語で表現が難しい処理の流れも掴みやすいです。

## インストール手順

以下の手順で進めていきます。
既にインストール済みの場合はスキップしても大丈夫です。

1. VSCodeをインストール
2. Javaをインストール
3. Graphvizをインストール
4. VSCodeの拡張機能からPlantUMLをインストール

### 1. VSCodeをインストール

Visual Studio Codeをインストールしていない方は[こちら](https://code.visualstudio.com/)からインストールして下さい。

インストーラーに従えば問題ないかと思います。
手順を参考にしたい場合は[こちら](https://www.karelie.net/install-vscode-windows/)がわかりやすいです。

### 2. Javaをインストール

Java 8をインストールします。
[こちら](https://www.java.com/ja/)からインストールして下さい。

動かないときはjreのパスを環境変数に追加してください。

### 3. Graphvizをインストール

[Graphviz](http://www.graphviz.org/)は図形の描きだしに必要なライブラリです。
シーケンス図とアクティビティ図はなくても描けるが、一緒に導入することを勧めます。

ダウンロードは[こちら](http://www.graphviz.org/download/)。

![graphviz](/images/posts/134/graphviz.png)

Windowsの方は赤い矢印の「Stable 2.38 Windows install packages」を選び、遷移先の「graphviz-2.38.msi」をダウンロードします。

インストーラーを実行してインストールをします。

パッケージマネージャの`choco`があるなら、CLIでも可能です。
```sh
# 管理者権限で
> choco install graphviz

graphviz installed to 'C:\Program Files (x86)\Graphviz2.38'
```

### 4. VSCodeの拡張機能からPlantUMLをインストール

拡張機能を開き、「PlantUML」を検索してインストールします。

![plantuml](/images/posts/134/plantuml.png)

以上でインストールは終わりです。

## Hello World

インストール出来たので、試しに図形を描いてみます。

ファイルの拡張子は５つありどれでもOK。
*.wsd, *.pu, *.puml, *.plantuml, *.iuml


### ER図

社員管理システムのデータベースを表現してみる。

**./設計/ER図.puml**

```pu
@startuml 社員管理システム

entity "会社マスタ" {
  + 会社ID [PK]
  ==
  会社名
}

entity "社員マスタ" {
  + 社員ID [PK]
  + 会社ID [FK(会社マスタ)]
  ==
  社員名
  年齢
  部署ID
}

entity "部署マスタ" {
  + 部署ID
  ==
  部署名
}

会社マスタ |o--|{ 社員マスタ
社員マスタ }|--|| 部署マスタ
@enduml
```

### プレビュー

ファイルを作成したら、右クリック「ダイアグラムをプレビュー」で図を見ることができます。

![preview](/images/posts/134/preview.png)

### エキスポート

右クリック「ダイアグラムをエキスポート」で図形を描きだせます。

対応

- png
- svg
- pdf
- html
- latex

など幅広く変換できます。

pngに描きだしたもの。

![er](/images/posts/134/社員管理システム.png)

## おわりに

PlantUMLの試し書きは[www.plantuml.com](http://www.plantuml.com/plantuml/uml/SyfFKj2rKt3CoKnELR1Io4ZDoSa70000)のサイトで手軽に確認できます。
サイトでサクッと試してみて、本格的に使ってみたいなと思われた方はVSCodeに導入していみて下さい。

VSCodeにPlantUMLを導入する手順


久しぶりにJavaのコードを実行したくなったが、Eclipseは重いので開きたくない。
そこで、Visual Studio Code（以下、VSCode）で快適なJavaの開発環境を構築する。

## 環境

- Windows10 Home
- [Visual Studio Code](https://code.visualstudio.com/) 1.32.3
- [Java Development Kit](https://www.oracle.com/technetwork/java/javaee/downloads/jdk8-downloads-2133151.html) 1.8

VSCodeとJDKがインストール済みのところから環境を構築します。
無い方は上記のリンクからダウンロードしてインストールして下さい。

## 環境構築の手順

以下の２Stepで構築できます。

1. VSCodeに拡張機能 Java Extension Packを追加する
2. VSCodeにjava homeの設定をする。

### 拡張機能 Java Extension Pack について

先に拡張機能の説明をしておきます。

[Java Extension Pack](https://marketplace.visualstudio.com/items?itemName=vscjava.vscode-java-pack)には以下の拡張機能を含んでいるため、楽に環境を整えることができます。

- [Language Support for Java™ by Red Hat](https://marketplace.visualstudio.com/items?itemName=redhat.java)
  - コード補完
  - Maven, Gtadle, スタンドアロンのプロジェクトサポート
  - リファクタリング
  - コードスニペット
  - ハイライト
  - etc.
- [Debugger for Java](https://marketplace.visualstudio.com/items?itemName=vscjava.vscode-java-debug)
  - デバック
- [Java Test Runner](https://marketplace.visualstudio.com/items?itemName=vscjava.vscode-java-test)
  - Run & Debug JUnit/TestNG Test Cases
- [Maven Project Explorer](https://marketplace.visualstudio.com/items?itemName=vscjava.vscode-maven)
  - Project Scaffolding
  - Custom Goals
  - POMの生成
- [Java Dependency Viewer](https://marketplace.visualstudio.com/items?itemName=vscjava.vscode-java-dependency)
  - Javaプロジェクト、参照ライブラリ、リソースファイル、パッケージ、クラス、およびクラスメンバーを表示する
- [Visual Studio IntelliCode](https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode)
  - AI支援開発
  - AIによってランク付けされた補完リスト

他に必要な拡張機能があれば各自追加して下さい。

- [Spring](https://marketplace.visualstudio.com/items?itemName=Pivotal.vscode-boot-dev-pack)
- [Tomcat](https://marketplace.visualstudio.com/items?itemName=adashen.vscode-tomcat)
- [Jetty](https://marketplace.visualstudio.com/items?itemName=SummerSun.vscode-jetty)

### 拡張機能 Java Extension Pack を追加する

ここから環境構築です。

VSCodeを開いて拡張機能を追加します。
左のメニューから選ぶか、ショートカットキー`Shift`+`Ctrl`+`x`で拡張機能を開きます。

検索バーで「java」と打てば上のほうにJava Extension Pack があるのでインストールします。

![jpe](/images/posts/130/jpe.png)

### java homeの設定

jdkへのパスを通します。

設定から「javahome」と検索して「Java:Home」の設定を確認します。

![javahome](/images/posts/130/javahome.png)

`setting.json`に自身のjdkのパスを以下のように追加してください。

```json
{
    "java.home": "C:\\Program Files\\Java\\jdk1.8.0_121"
}
```

`setting.json`を保存して、VSCodeを再起動します。
ここまでで環境を構築は終わりです。

## プロジェクトを作ってみる

新しくJavaプロジェクトを作成して、Hello, World!を実行します。

VSCodeでコマンドパレット`Shift`+`Ctrl`+`p`を開きプロジェクトを作ってみます。
「Java:Create Java Project」でプロジェクトを作成します。

![create](/images/posts/130/create.png)

プロジェクトの親ディレクトリを選択します。（今回はworkspaceというディレクトリ）

![ws](/images/posts/130/ws.png)

続いて、プロジェクト名を決めます。HelloWorldのディレクトリがworkspaceにできます。

![projectname](/images/posts/130/projectname.png)

新しくVSCodeが開き、プロジェクトが作成されました。

![new_project](/images/posts/130/new_project.png)

## Javaをデバックする

`/src/app/App.java`を開いて、`F5`を押すとデバックモードになります。

![debag](/images/posts/130/debag.png)

左上の実行ボタンでデバックできます。
行数の横をクリックで、ブレークポイントも使えるようになっています。

## おわりに

VSCodeが軽くて好きです。
Java, Python, PHP, JS, C/C++などたくさんの言語の拡張機能を入れていますが、重さを感じません。

引き続き、Mavenプロジェクトを作成する記事を書きました。

- [VSCodeでJava + Mavenのプロジェクトをデバッグする](https://www.suzu6.net/posts/131-vscode-for-maven)

## 参考

- [Visual Studio Code を使った Javaプログラム事始め - Qiita](https://qiita.com/kare/items/11309fef5822788501b5)
- [Visual Studio CodeでJava - Qiita](https://qiita.com/gitcho/items/a6c0bb781bc395e43ec4)

VSCodeでなぜJavaの開発ができるかのまとめがありました。

- [なぜVisual Studio CodeでJavaの開発ができるのか？ - Qiita](https://qiita.com/kikutaro/items/745925395ae89944ae48)


VSCodeでJavaの開発環境を構築する


[VSCodeでJavaの開発環境を構築する](https://www.suzu6.net/posts/130-vscode-for-java)に続いてJava + Mavenのプロジェクトをデバッグしてみます。
VSCodeでのJava環境の構築は前回の記事を参照してください。

## 環境

- Visual Studio Code 1.32.3
- Windows10 Home
- Java Development Kit 1.8
- 拡張機能：Java Extension Pack

Javaの実行環境はすでにできています。

## Java環境構築のおさらい

繰り返しになりますが、手順をおさらいしておきます。

1. JDKをインストールする。[インストーラー](https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html)
2. VSCodeに[Java Extension Pack](https://marketplace.visualstudio.com/items?itemName=vscjava.vscode-java-pack)を追加する。
3. 設定の`java:Home`にJDKのパスを通す。`"java.home": "C:\\Program Files\\Java\\jdk1.8.0_121"`

## Mavenをインストールする

コマンドプロンプトで`mvn`が実行できる必要があります。  
（※ VSCodeのターミナルの設定がコマンドプロンプト以外の場合は、そちらで設定してください。）

[Apache Maven Ploject](https://maven.apache.org/download.cgi#)へ行きバイナリをダウンロードして解凍します。
「apache-maven-3.6.0-bin.zip」をダウンロードしました。

![binary](/images/posts/131/binary.png)

任意の場所に置き、環境変数にpathを通します。

![path](/images/posts/131/path.png)

例）`C:\Program Files\apache-maven-3.6.0\bin`

コマンドプロンプトで実行できるか確認する。

```sh
>mvn -v
Apache Maven 3.6.0
```

OK！

※ VSCodeのターミナルで実行できなかったので、PCを再起動しました。

## VSCodeでMavenプロジェクトを作成する

VSCodeを開き、Mavenのプロジェクト新規作成します。

コマンドパレット`Shift`+`Ctrl`+`p`で「maven」と入力して「**Maven**: Generate from Maven Archetype」を選択します。

![maven](/images/posts/131/maven.png)

続いて、「maven-archetype-quickstart」を選択し新規作成する親ディレクトリを選択していきます。

![maven-quick](/images/posts/131/maven-quick.png)

そうすると、`mvn`コマンドが実行されて。色々とダウンロードしていく。


```sh
> mvn archetype:generate -DarchetypeArtifactId="maven-archetype-quickstart" -DarchetypeGroupId="org.apache.maven.archetypes"

色々とダウンロード。。。。。

Define value for property 'groupId': MavenTest
Define value for property 'artifactId': test
Define value for property 'version' 1.0-SNAPSHOT: :
Define value for property 'package' MavenTest: :

Confirm properties configuration:
groupId: MavenTest
artifactId: test
version: 1.0-SNAPSHOT
package: MavenTest
```

途中で聞かれるIdなど適当に付けたら以下のようになる。
ファイルの作成まで少し待ちます。

```tree
├─.vscode
│      launch.json
│
└─test
    │  .classpath
    │  .project
    │  pom.xml
    │
    ├─.settings
    │      org.eclipse.core.resources.prefs
    │      org.eclipse.jdt.apt.core.prefs
    │      org.eclipse.jdt.core.prefs
    │      org.eclipse.m2e.core.prefs
    │
    ├─src
    │  ├─main
    │  │  └─java
    │  │      └─MavenTest
    │  │              App.java
    │  │
    │  └─test
    │      └─java
    │          └─MavenTest
    │                  AppTest.java
    │
    └─target
        ├─classes
        │  └─MavenTest
        │          App.class
        │
        └─test-classes
            └─MavenTest
                    AppTest.class
```

groupIdの名前をミスった。。。

Mavenプロジェクトの作成は以上。

## VSCodeでMavenプロジェクトをデバッグする

**App.java**

```java
package MavenTest;

/**
 * Hello world!
 *
 */
public class App 
{
    public static void main( String[] args )
    {
        System.out.println( "Hello World!" );
    }
}

```

`F5`か`Shift`+`Ctrl`+`d`でデバックを実行できる。

## mvnコマンド

コンパイルやデプロイなどは基本的に`mvn`コマンドで行う。

コマンドパレットで実行する方法もある。

### コマンドパレットで実行

コマンドパレット`Shift`+`Ctrl`+`p`で「maven」と入力して「**Maven**: Excute commands」を選択します。

![excute](/images/posts/131/excute.png)

pom.xmlを選択して、

![pom](/images/posts/131/pom.png)

実行するコマンドを選択する。

![compile](/images/posts/131/compile.png)

「compile」してみると、下記のコマンドが実行できる。

```sh
>mvn compile -f "c:\Users\y-suzumura\Desktop\GIT\code\workspace\test\pom.xml"
```

コマンドの意味などは[よく使うMavenコマンド集 - Qiita](https://qiita.com/KevinFQ/items/e8363ad6123713815e68)を参考にしてください。

## おわりに

Eclipseを使っていた３年前よりも環境構築するスキルが身についた気がする。

- [VSCodeでJavaの開発環境を構築する](https://www.suzu6.net/posts/130-vscode-for-java)

VSCodeでMavenプロジェクトをデバッグする | Java

[VSCodeでJava + Mavenのプロジェクトをデバッグする](https://www.suzu6.net/posts/130-vscode-for-java)に続いてMavenの環境にJARを追加したので、メモ。

どうやって追加するか悩んだが、**pom.xmlにライブラリを記述したら勝手に導入してくれました！**
Jarファイルをダウンロードしてパスを書くような作業もありませんでした。

## 環境

- Visual Studio Code 1.32.3
- Windows10 Home
- Java Development Kit 1.8
- 拡張機能：Java Extension Pack
- Apache Maven 3.6.0

VSCodeの環境構築は以下を参照してください。

- [VSCodeでJavaの開発環境を構築する](https://www.suzu6.net/posts/130-vscode-for-java)
- [VSCodeでJava + Mavenのプロジェクトをデバッグする](https://www.suzu6.net/posts/130-vscode-for-java)

## pom.xmlにライブラリを追加する

追加するJARは[OkHttp](http://square.github.io/okhttp/)です。
これは[Okio](https://github.com/square/okio)と依存関係があるため、Okioも必要です。

最新バージョンは以下の通り。

- [OkHttp](http://square.github.io/okhttp/) : v3.14.0
- [Okio](https://github.com/square/okio) : v2.2.2

[ここ](http://square.github.io/okhttp/#download)にある通り、Mavenの`<dependency>`をpom.xmlに追加します。

**pom.xml**

```diff
<?xml version="1.0" encoding="UTF-8"?>

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
 <modelVersion>4.0.0</modelVersion>

省略

 <dependencies>
 <dependency>
 <groupId>junit</groupId>
 <artifactId>junit</artifactId>
 <version>4.11</version>
 <scope>test</scope>
 </dependency>
+ <dependency>
+ <groupId>com.squareup.okhttp3</groupId>
+ <artifactId>okhttp</artifactId>
+ <version>3.14.0</version>
+ </dependency>
 </dependencies>
```

（設定に因るかもしれませんが、）pom.xmlに追加して保存すると、「依存関係を更新するか？」みたいなメッセージがでます。
「Now」を選択するとJARをダウンロードして、左メニューの`JAVA DEPENDENCIES`の`Maven Dependencies`に置かれます。

![add-jar](/images/posts/132/add-jar.png)

Okioもダウンロードされており、依存関係も解消されていました。

「依存関係を更新するか？」みたいなメッセージで、「Always」を選択するとpom.xmlの更新が逐次反映されます。

### okioも更新してみる

Okioのバージョンが古かったので、pom.xmlにバージョンを書いてみます。

**pom.xml**

```diff
 <dependencies>
 <dependency>
 <groupId>junit</groupId>
 <artifactId>junit</artifactId>
 <version>4.11</version>
 <scope>test</scope>
 </dependency>
 <dependency>
 <groupId>com.squareup.okhttp3</groupId>
 <artifactId>okhttp</artifactId>
 <version>3.14.0</version>
 </dependency>
+ <dependency>
+ <groupId>com.squareup.okio</groupId>
+ <artifactId>okio</artifactId>
+ <version>2.2.2</version>
+ </dependency>
 </dependencies>
```

自動で更新処理が走り、Okioのバージョンも更新されました。

![okio](/images/posts/132/okio.png)

（何故かkotlinなども入ってる。。。）

## おわりに

以前書いた記事が古くなっていたので、バージョンを更新するため試行錯誤してました。
結果、VSCodeでJavaの開発もかなり良いことがわかりました。

- [OkHttp3を使ったJSONのPOST送信の方法](https://www.suzu6.net/posts/131-vscode-for-maven)

Markdownに画像を貼り付けるVSCodeの拡張機能 Markdwon Image

Markdownのリストで段組みを揃えて改行する方法

数式を書くためのエンジン・プラグイン・アプリのまとめ

VSCodeにPlantUMLを導入する手順

VSCodeでJavaの開発環境を構築する

VSCodeでMavenプロジェクトをデバッグする | Java

VSCodeのMaven環境でJarライブラリを追加する | Java