Atomエディタをインストールする方法（Windows編）

# まえがき
**Atom**とは、米ギットハブ（GitHub）社が開発・公開している、プログラミングに適したテキストエディタで、オープンソースとして公開されています。
C言語、C++、C#、Java、Python、Ruby、PHP、Perl、Go言語、HTML、CSS、JavaScript、SQL、シェルスクリプト、XMLなど様々な言語に対応しています。

`Vue.js`を使用するにあたって、**Atom**を使用しました。
そこで、今回は**Atom**をインストールする方法を紹介します。

# 環境
以下の環境で確認しています。

+ OS:Windows10 または Windows7
+ Atom 1.58.0（x64）

# 1. Atomをインストール
[Atom公式ページ](https://atom.io/, "Atom公式ページ")を開き、「Download」をクリックします。
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/292434/d107d0b0-24ae-1d58-eb77-d16eb6fda443.png)

`AtomSetup-x64.exe`がダウンロードされます。

ダウンロードされた`AtomSetup-x64.exe`をダブルクリックすると、Atomがインストールされ、起動されます。
![1-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/292434/733022e7-0633-9796-6d03-c0b432ddc84b.png)

「Welcome」のタブで「Show Welcome Guide when opening Atom」のチェックを外します。
（起動時に毎回「Welcome」「Welcome Guide」のタブが開かないようにします。）
![1-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/292434/40751f61-e439-aea4-2480-3b1d93deb834.png)

「Welcome Guide」のタブを閉じます。
![1-3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/292434/d907ed5d-3cdd-59d9-ca55-0d4ed14f30f0.png)

「Welcome」のタブを閉じます。
![1-4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/292434/08be815e-f225-c8d1-d22b-77abcaef076c.png)

「Telemetry Consent」タブで「No, do not send my usage data」をクリックします。
（起動時に毎回「Telemetry Consent」のタブが開かないようにします。）
![1-5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/292434/642f12bf-c2e4-091b-1729-fca689a20d30.png)


# 2. 日本語設定

メニューから「File」－「Settings」を選択します。
![2-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/292434/51a21eea-a5c9-2b98-91a7-f0cac921fadc.png)

「Install」をクリックします。
![2-3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/292434/f7d0c0c6-f193-f8b9-8483-f312a3be51d9.png)

「japanease-menu」を入力すると「japanease-menu」が表示されるので、「Install」をクリックします。
![2-4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/292434/3cdc1b9c-9868-6fc5-ee50-55b79aea1692.png)

メニューが日本語になります。
![2-5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/292434/b8481c83-78ed-6c56-afad-91974cb3bdc8.png)

# 3. テーマの変更
メニューから「ファイル」－「設定」を選択します。
![2-6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/292434/cc5ca4ab-11e8-5c72-8e1f-3d157e56061e.png)

「テーマ」をクリックします。
![2-7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/292434/c708c7c2-9d30-93af-c088-00350591a9c9.png)

「インターフェーステーマ」と「シンタックステーマ」に好きなテーマを選択します。
（ここでは「Atom Light」を選択しています。）
![2-8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/292434/36426f65-812a-8e98-073d-bb13c9834eea.png)

# 4. HTMLプレビュー（atom-html-preview）のインストール
メニューから「ファイル」－「設定」を選択します。
![2-9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/292434/dbab63da-e8a4-b4d3-deb3-c6477bf9fd15.png)

「インストール」をクリックします。
![3-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/292434/570e5f19-7b9a-4369-c6d1-7db0f09e3829.png)

「atom-html-preview」を入力すると「atom-html-preview」が表示されるので、「Install」をクリックします。
![3-3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/292434/4459839a-2444-83a6-7e1e-33c9e188ef3c.png)

「設定」タブを閉じます。
![3-4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/292434/675dbe05-b495-9dea-2f3a-e7849d6640ee.png)

# 5. HTMLの作成とHTMLプレビュー（atom-html-preview）の確認
「Projectタブ」で「Add folders」をクリックします。
（またはメニューから「ファイル」－「プロジェクトフォルダを追加」を選択します。）
![4-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/292434/3c5d96f5-45c6-774d-2b79-33fda89d15ed.png)

追加したいフォルダを選択します。
（ここでは「C:\Data\work\project」を追加しています。）
![4-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/292434/e595a7bb-1960-c694-82e1-c245eac30e6a.png)

追加されたプロジェクトフォルダを右クリックし、「新規ファイル」を選択します。
![4-3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/292434/446fd51f-3fca-e140-cbb3-37c6ddbcd0da.png)

ファイル名を入力し（ここでは「index.html」）、Enterキーを押します。
![4-4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/292434/b2115085-992c-19c3-a648-3ed945bdc7e8.png)

index.htmlにHTMLを記載し保存します。

```html:index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>テストタイトル</title>
  </head>
  <body>
    <h1>テストヘッダー</h1>
  </body>
</html>
```

![4-5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/292434/4d8c7141-fbfe-8c8c-aa26-bf527d98b3b6.png)

メニューから「パッケージ」－「Preview HTML」－「Enable Preview」を選択（または「Ctrl + Shift + H」）します。
![4-6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/292434/7974d021-66a2-3115-a0fd-bb2eb3b9782d.png)

HTMLのプレビューが表示されます。
![4-7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/292434/76db4447-cd6e-db2b-3b07-22684208b632.png)


# リンク
[Atom公式ページ](https://atom.io/, "Atom公式ページ")


---

以上