Atomの操作

# 概要
ここではAtomの以下の操作について説明する。

```
インストール
日本語化対応
ファイル作成、保存方法
ファイルを開く
```

# インストール
## 1.AtomのURLにアクセスし、「Download」ボタンを押す

以下のURLにアクセスする。
https://atom.io/

<img width="1105" alt="スクリーンショット 2019-10-18 0.19.12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/248644/ef9797f0-fa79-944b-7f0e-051387e4b3d5.png">


## 2.ダウンロードフォルダにあるatom-mac.zipを解凍する
Finder → ダウンロード → atom-mac.zipをダブルクリックする。

<img width="670" alt="スクリーンショット 2019-10-18 0.21.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/248644/b0fbb057-30fe-8206-6348-be5550f9c8fe.png">

タブルクリックすると解凍されたAtomファイルが表示される。

<img width="672" alt="スクリーンショット 2019-10-18 0.21.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/248644/43d970a1-083f-777d-86ff-705e82688738.png">

## 3.Atomをインストールして起動する
Atomファイルをダブルクリックし、インストールを開始する。
(下記の画面が表示されるので、開くボタンを押す)

<img width="501" alt="スクリーンショット 2019-10-18 0.21.50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/248644/76186b4a-3446-6d17-ebbf-59dfbb440661.png">

インストールが完了し、Atomが起動する。
<img width="1147" alt="スクリーンショット 2019-10-18 0.22.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/248644/7d24e3cf-4e12-327c-bfb6-c00f75923a82.png">

# 日本語化対応
Atomをインストールした直後は英語での表示となるため、日本語で表示するように設定を行う。

## 1.WelComeGuideを開く
Atomのメニュー →  Help → Welcome Guideをクリックする。

<img width="923" alt="スクリーンショット 2019-10-18 0.48.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/248644/01a6dce2-3207-38dd-33b7-382cb2cf9213.png">

## 2.Install a Packageを選択
Atom画面にWelcome Guideのタブが表示されるので、中にある「Install a Package」をクリックする。

<img width="572" alt="スクリーンショット 2019-10-18 0.50.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/248644/b6320846-2b08-86c2-a5c1-e8a0db4702c8.png">

詳細が展開されるので、「Open Installer」をクリックする。

<img width="530" alt="スクリーンショット 2019-10-18 0.50.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/248644/5920bf86-469a-49cb-02e0-ae8a89c78052.png">


## 3.日本語化パッケージのインストール
Settingsタブが表示され、Search packagesという検索画面が表示されるので、`japanese`と入力し、「Packages」をクリックする。

<img width="384" alt="スクリーンショット 2019-10-18 0.50.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/248644/26e85400-10e1-7d49-45a4-9e775d89edca.png">

japanese-menuというパッケージが表示されるので、「Install」をクリックする。

<img width="364" alt="スクリーンショット 2019-10-18 0.51.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/248644/31458877-a286-ce8c-3cc7-389fc00f76ce.png">

インストール完了後、Atomのメニューが日本語になっていれば完了。
<img width="567" alt="スクリーンショット 2019-10-18 0.51.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/248644/fc34899a-e0a8-74b0-a0d2-1af824693887.png">


# ファイル作成、保存
Atomを使ったファイルの作成、ファイルの保存について記載する。
Atomを起動した状態から開始する。

## 1.Atomメニュー左上の「ファイル」から「新規ファイル」を選択

<img width="363" alt="スクリーンショット 2019-10-18 1.05.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/248644/409c5341-f50b-100e-0669-77e43d41495c.png">

Atomの画面に新規ファイル(untitledというタブ)が作成されるので、適当な文字を入力しておく。

`文字入力後の状態`
<img width="890" alt="スクリーンショット 2019-10-18 1.07.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/248644/997db0ba-1446-ac48-9136-3d4303a23fa2.png">

## 2.Atomメニュー左上の「ファイル」から「保存」を選択

<img width="359" alt="スクリーンショット 2019-10-18 1.07.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/248644/7b613198-82a5-7b41-3da7-046a2ae9ddab.png">

名前の入力、場所を指定し、「保存」をクリックする。
名前はファイル名、場所はファイルの保存先となるので、場所はコードを書いていくためのディレクトリを選択する。

<img width="347" alt="スクリーンショット 2019-10-18 1.08.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/248644/5860e0bb-909b-fb23-09c9-68e39078e976.png">


# ファイルを開く
## 1.Atomメニュー左上の「ファイル」から「開く」を選択

<img width="352" alt="スクリーンショット 2019-10-18 1.22.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/248644/247f6346-503a-f200-551d-073e32a0cc90.png">

コードを書いていくためのディレクトリを選択し、開きたいファイルを選択する。
ここでは、上の手順で作成したファイルを選択する。

<img width="629" alt="スクリーンショット 2019-10-18 1.28.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/248644/1bfbe7ab-8659-3f6a-d8aa-dcb79d2f5475.png">

選択後、Atomの画面にファイルの情報が表示される。

<img width="889" alt="スクリーンショット 2019-10-18 1.29.58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/248644/7a7a49f6-6e8c-f9c0-3d13-b251b8628e60.png">


ここまでで、Atomをインストールして、ファイルの作成、作成したファイルを開く、ことができるようになった。