【Atomのモダンな開発エディタ環境を構築】@2017年版

ディップアドベントカレンダー <font color="DarkGreen">12日目</font> です

![FireShot Capture 2 - Atom - https___atom.io_.png](https://qiita-image-store.s3.amazonaws.com/0/177207/b0a20d10-ceb3-36ce-2587-4c8d2518604d.png)

## 環境

Macで行なっておりますが、
Atomは**WindowsでもMacでも同じパッケージをダウンロードすることができる**ので
Windowsの方もご覧頂ける内容かと思います。

また、すでにAtomをインストールされている方は
[⭐️オススメのパッケージのご紹介](https://qiita.com/k-waragai/private/784a0eb076decd08f4fc#%EF%B8%8F%E3%82%AA%E3%82%B9%E3%82%B9%E3%83%A1%E3%81%AE%E3%83%91%E3%83%83%E3%82%B1%E3%83%BC%E3%82%B8%E3%81%AE%E3%81%94%E7%B4%B9%E4%BB%8B)
まで飛ばしていただいて構いません！

さっさといい感じにしたいんだよ！！急いでるんだよ！！
という方…安心してください。
[⭐️apmで一括インストール](https://qiita.com/k-waragai/private/784a0eb076decd08f4fc#%EF%B8%8Fapm%E3%81%A7%E4%B8%80%E6%8B%AC%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB)
まで飛ばして頂ければ2stepでインストールできます。

## はじめに

初めまして。ディップ株式会社のk-waragaiと言います。

さて、今回は開発者にとって最も重要と言っても過言ではない「エディタ」についてご紹介できればと思います。

この記事を見て、Atomユーザーが増えたら嬉しいです(๑˃̵ᴗ˂̵)

早速ですが、皆さん、**<font color="DodgerBlue">エディタ</font>**は何を使っていますか？

無料のエディタ…
- サクラエディタ
- Atom
- Sublime Text
- Liveweave
- vi(vim)
- Emacs

統合開発環境として
- IntelliJ IDEA
- Visual Studio
- Xcode
- Eclipse

最近では無料のエディタがたくさん登場しどれを使ったらいいのか分からないよ！
という方も多いのではないかと思います。

そんな中でも今回は個人的に使っている<font color="DeepPink">オススメ</font>の
**無料**・**早い**・**軽い**そして**モダン**なエディタ
「<font color="ForestGreen">Atom</font>」についてご紹介いたします

## ⭐️Atomとは

登場したのは2015年と比較的新しいエディタです。
拡張機能が数多く公開されており人気の拡張機能が標準機能として加わったりと、
進化し続けています。

AtomはGitHubの創業者**Chris Wanstrath**氏が
「Web技術を用いて、Emacsのように自由にカスタマイズできる新世代のエディタを開発する」
という思いから始まったオープンソースのエディタになります。

### 💎インストール方法

公式サイト：[Atom](https://atom.io/)

<img width="764" alt="2.png" src="https://qiita-image-store.s3.amazonaws.com/0/177207/aae18ab3-a78c-62d9-1e96-f18c02358778.png">

そのままAtom.zipを解凍して`/Applications`へ移動させましょう。


### 💎様々な拡張パッケージについて

Atomのもっとも優れているのは
この拡張パッケージです。
IDEにする拡張パッケージや、Teletypeが可能になる拡張パッケージなど
様々なものがあります。

また、拡張パッケージの導入も簡単で、

英語であれば
`Atom` > `preferences` >`install`
日本語であれば
`Atom` > `設定` > `インストール`
からパッケージをインストールすることができます。

パッケージのEnable・Disableの切り替えもワンボタンなのでとても楽です。

![スクリーンショット 2017-11-25 16.37.58.png](https://qiita-image-store.s3.amazonaws.com/0/177207/3a128782-3fcf-2303-3834-4188b665e53c.png)



### 💎様々なテーマについて

Atomではたくさんの`Theme`を取り扱っています。

導入も簡単で
英語であれば
`Atom` > `preferences` >`install`
日本語であれば
`Atom` > `設定` > `インストール`
検索対象をテーマに変更してテーマをインストールし設定するだけです。

![スクリーンショット_2017-11-25_17_36_33.png](https://qiita-image-store.s3.amazonaws.com/0/177207/902b0924-b4d1-7704-abe5-c7b088984cd6.png)

![スクリーンショット_2017-11-25_17_36_59.png](https://qiita-image-store.s3.amazonaws.com/0/177207/7c9af886-7322-a8f4-0807-466314e007b3.png)



## ⭐️オススメのパッケージのご紹介

前置きが長くなって申し訳ありません。
ここからが本題です！

・ パッケージ名
・ 紹介
・ Atom Package Link
で紹介します

### 【基礎中の基礎編】

#### 💎 japanese-menu

日本語化にしてくれる素晴らしいツールです。
導入後すぐに日本語化されます。

公式：[japanese-menu](https://atom.io/packages/japanese-menu)

#### 💎 file-icons

<img width="156" alt="スクリーンショット 2017-11-30 15.00.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/177207/bb74f85a-5088-a53e-85e7-adb20bd91372.png">

各ファイルにアイコンを付けてくれます
拡張子よりもアイコンの方が分かりやすくて作業効率が上がります。


公式：[file-icons](https://atom.io/packages/file-icons)

#### 💎 autocomplete-paths

自動でパス部分を保管してくれます。

公式：[autocomplete-paths](https://atom.io/packages/autocomplete-paths)


#### 💎 color-picker

フロントエンド向けにはなってしまいますが、
カラーピッカーが使えるようになります。

公式：[color-picker](https://atom.io/packages/color-picker)

#### 💎 atom-beautify

自動でインデントを綺麗に調整してくれます

公式：[atom-beautify](https://atom.io/packages/atom-beautify)

### 【Github連携】

![atom-github.gif](https://qiita-image-store.s3.amazonaws.com/0/177207/9abbb1f5-3d81-dc0f-725a-64c83676deb5.gif)


#### 💎 git-plus

<img width="251" alt="スクリーンショット 2017-11-30 14.57.49.png" src="https://qiita-image-store.s3.amazonaws.com/0/177207/cacb382c-b38c-3c22-5b57-9a4f78c49db1.png">

こいつがあればAtom上で**Add・commit・push**など一連の流れをやってくれる
Git管理をしているなら必須


公式：[git-plus](https://atom.io/packages/git-plus)

#### 💎 git-log

git logなどをAtomで見れるようにしてくれる優れもの

公式：[git-log](https://atom.io/packages/git-log)

#### 💎 git-controlhub

![スクリーンショット_2017-11-30_14_50_10.png](https://qiita-image-store.s3.amazonaws.com/0/177207/2576a94a-2183-c06e-e6b0-612437d34495.png)

ペインまるまる一つがGUIベースの**GITクライアント**になりますので
Githubのコマンドが分からなくてもこれさえ入れれば問題ないです。

公式：[git-control](https://atom.io/packages/git-controlhub)

#### 💎 git-history

コミット履歴を見ることができます。

公式：[git-history](https://atom.io/packages/git-history)

#### 💎 merge-conflicts

![68747470733a2f2f7261772e6769746875622e636f6d2f736d61736877696c736f6e2f6d657267652d636f6e666c696374732f6d61737465722f646f63732f636f6e666c6963742d617265612e6a7067.jpeg](https://qiita-image-store.s3.amazonaws.com/0/177207/9ddd794d-492f-1460-90ca-49ad22b436c8.jpeg)
(公式より)

コンフリクトが起こっている箇所を視覚的に分かりやすく表示してくれます。
クリックで解消できるので便利です。

公式：[merge-conflicts](https://atom.io/packages/merge-conflicts)



### 【あると便利すごい機能】

#### 💎 teletype

ペア(モブ)プログラミングが出来るようになる
複数人で同じファイルを編集できるようになるもの。
詳しくはこちらの記事へ
[【リアルタイム共同編集】Atomで出来るようになったってよ](https://qiita.com/k-waragai/items/a372800c262f56fe688a)

公式：[teletype](https://atom.io/packages/teletype)

#### 💎 browser-plus

ライブプレビューをしながら編集ができるようになります。

公式：[browser-plus](https://atom.io/packages/browser-plus)


#### 💎 atom-ide-ui

![atom-ide.gif](https://qiita-image-store.s3.amazonaws.com/0/177207/650e483b-aaaa-c769-b277-c7966f235d16.gif)
(公式より)

Atomを丸ごとIDE(統合開発環境)にしてしまうものです。

メインパッケージである`atom-ide-ui`をインストールした後
好きな言語のideパッケージをインストールすることで使用することができます。
対応している言語は以下の通り

|言語名|パッケージ名|
|---|---|
| TypeScript & JavaScript | ide-typescript |
| Flow | ide-flowtype |
| C# | ide-csharp |
| Java | ide-java |
| PHP | ide-php |

公式：[atom-ide](https://ide.atom.io/)

#### 💎 remote-edit

サーバー内のファイルを編集する際に、Atomから編集できるようになります

公式：[remote-edit](https://atom.io/packages/remote-edit)

### 【その他いいと思ったものたち】

#### 💎 linter

こやつはbase的存在のパッケージ。

・linter-rubocop
・linter-ruby
・linter-php
などを入れて静的解析ができるようになります。

公式：[linter](https://atom.io/packages/linter)

#### 💎 minimap

安定のミニマップ

公式：[minimap](https://atom.io/packages/minimap)


## ⭐️オススメのテーマのご紹介

### 🚀 Dracula

- dracula-ui
- dracula-syntax

中二病をくすぐるダークな感じ！！

![スクリーンショット 2017-11-26 18.55.29.png](https://qiita-image-store.s3.amazonaws.com/0/177207/75f04ab3-acb0-98f2-9635-6f1ca12f647b.png)

![スクリーンショット 2017-11-26 18.55.45.png](https://qiita-image-store.s3.amazonaws.com/0/177207/ff822858-5f99-64d8-6e53-94617012f2e7.png)

### 🚀 atom-material

- atom-material-ui
- atom-material-syntax

一気に近未来のようなファンタジーな感じになりますね！！
ポップな感じがかわいい！

![スクリーンショット 2017-11-26 18.59.13.png](https://qiita-image-store.s3.amazonaws.com/0/177207/4e9e1e2c-6dce-0f6b-6b2d-cf5557686f0f.png)

![スクリーンショット 2017-11-26 18.59.22.png](https://qiita-image-store.s3.amazonaws.com/0/177207/372983b6-1f4f-856d-cd7e-7c1c6cf406c3.png)

## ⭐️apmで一括インストール

<img width="479" alt="スクリーンショット 2017-11-30 14.55.51.png" src="https://qiita-image-store.s3.amazonaws.com/0/177207/4db06e63-c317-c43d-6f7d-d606e8beb043.png">


`Atom` > `install shell commands`でシェルコマンドを使えるようにします。

`apm install --packages-file {ファイル名}`でまとめてインストールができます。

```txt:test.txt
atom-beautify@0.30.9
atom-material-syntax@1.0.7
atom-material-ui@2.0.6
autocomplete-paths@2.12.1
dracula-syntax@2.0.5
dracula-ui@0.6.0
file-icons@2.1.14
git-controlhub@0.4.0
git-log@0.4.1
git-plus@7.10.0
japanese-menu@1.13.0
teletype@0.2.3
```


上記のは自分がメインで入れているもののリストです。こちらを`Downloads`かどこかに保存して

`apm install --packages-file ~/Downloads/test.txt`
でまとめてインストールができます。

## ⭐️最後に

パッケージインストール後は必ずAtomを再起動をしましょう！
そうすることで反映されるものもありますので。

自分のiTerm2ではAtomと同じ「Dracula」のテーマを使っています。

<img width="1552" alt="スクリーンショット 2017-11-25 17.34.16.png" src="https://qiita-image-store.s3.amazonaws.com/0/177207/c63e9cc2-6e82-f34f-f17a-995e97460c7c.png">


公式：[Dracula](https://draculatheme.com/)

好きなテーマで統一する事により開発も捗ります✌︎('ω'✌︎ )

また、上記のパッケージで紹介しているものは
GUI操作が可能なものばかりですが、ショートカットキーを覚えるともっと早く作業ができます。

最後に、自分はGithub管理がメインなのでGithubの創業者が作っているAtomは超便利です。
Atomのおかげで作業効率も上がりとても助かっております…。

また、このパッケージは必須だよという事があればどしどしコメントください！
皆さんのオススメ枠としてご紹介させていただきます٩( 'ω' )و


明日もあるのでぜひみてください！
明日は【fish shellでモダンなターミナル環境を構築】です！