Github Atomをとりあえず触ってみる

# はじめに
ここでは、Github社の「[Atom](https://atom.io/)」というエディタを試してみようという方に向けて書いています。

何も考えずにどんなエディタなのかを体験できるのではないかと思います。

# 対象のバージョンと環境

- Atom v1.3.2
- Windows8.1

上記バージョンでこの記事を書いているので、他バージョンでは若干異なる可能性があります。
Atomのインストール自体は既に行っているという前提です。

# この記事で書く事
- インストール後の設定
- プラグインのインストール
- エディタを使う
- その他トピック

# インストール後の設定

メニューの「ファイル」－「環境設定」の設定

1. デフォルト文字コードの設定
2. ちょっとした設定
3. エディタのスタイルの設定

## デフォルト文字コードの設定
環境設定の「Settings」に「File Encoding」という項目があって、デフォルトは「shiftjis」になってます。
web系の開発などは「UTF-8」が多いので「utf8」に変更しておきます。
![image](https://qiita-image-store.s3.amazonaws.com/0/77804/fa052f0a-7508-a52d-85c5-6510f9fd3d6c.png)

## ちょっとした設定
1と同様に「Settings」の「フォントサイズ」や「行番号の表示」、「最終行を超えて表示」、「バージョン管理システムによって無視されたパスを除外する」、「不可視文字を表示」（空白などを表示）、「ソフトタブ」（タブ入力時に空白を挿入）などの設定項目を好みに合わせて設定します。たぶん最初はこの6つの設定程度で後で追加設定すればよいと思います。
![image](https://qiita-image-store.s3.amazonaws.com/0/77804/96fd0f1f-4f73-3eb7-119b-86be6e3a768a.png)

## エディタのスタイルの設定
環境設定の「Themes」を好みにあわせます。ネットで検索すればいろいろあるので使ってみて良ければ、好みのテーマを探せばよいと思います（[参考：themeサイト](https://atom.io/themes)）。最初は白か黒か慣れている色で設定しておけば良いかと。
![image](https://qiita-image-store.s3.amazonaws.com/0/77804/acfa39c2-0ca6-d740-6da0-0806764dd942.png)

# プラグインのインストール
プラグイン（パッケージ）にこだわり始めると時が過ぎてしまうので、まずは鉄板プラグインをしこみます。

- [minimap](https://atom.io/packages/minimap)（サイドにテキスト全体のマップを表示してくれる）
- [file-icons](https://atom.io/packages/file-icons)（拡張子に応じたアイコンを表示してくれる）
- [highlight-column](https://atom.io/packages/highlight-column)（カーソル列をハイライトする）
- [highlight-line](https://atom.io/packages/highlight-line)（カーソル行をハイライトする）
- [color-picker](https://atom.io/packages/color-picker)（#ffcc66などをピッカーを利用して入力できる）
- [pigments](https://atom.io/packages/pigments)（CSSのカラーコードなどを色付してくれる）
- [linter](https://atom.io/packages/linter)（javascript、css、phpなどのコードの構文解析をしてくれる）
- [atom-ternjs](https://atom.io/packages/atom-ternjs)（javascriptのコードアシストをしてくれる）
- [jquery-snippets](https://atom.io/packages/jquery-snippets)（jqueryのスニペット）
- [atom-bootstrap4](https://atom.io/packages/atom-bootstrap4)（bootstrapのスニペット、バージョンは任意で）
- [docblockr](https://github.com/nikhilkalige/docblockr)（関数コメントなどの雛形を挿入してくれる）
- [project-manager](https://atom.io/packages/project-manager)（プロジェクトの切替などに利用する）
- [atom-beautify](https://atom.io/packages/atom-beautify)（コードやjsonなどを整形してくれる）
- [atom-html-preview](https://atom.io/packages/atom-html-preview)（HTMLをプレビューすることができるようになる）
- linter-xxx（linter-jshint、linter-rubyなど、「xxx」の部分は利用する言語のパッケージを入れる。[こちら](http://atomlinter.github.io/)のサイトで何があるか確認できます）
- autocomplete-xxx（autocomplete-php、autocomplete-rubyなど、「xxx」の部分は言語名で利用する言語のパッケージを入れる）

ちなみに [script](https://atom.io/packages/script)（javascriptなどのコードを実行できる）も良さそうですが、コンソールの文字化けや実行が不安定な場合があるので、好みに応じて入れる感じでよいと思います。

インストールしたプラグインは環境設定の「パッケージ」で見ることができて、「アップデート」でバージョンを上げることができます。ちなみに以前はautocompleteシリーズの「autocomplete」や「autocomplete-plus」、「autocomplete-snippets」、「autocomplete-html」、「autocomplete-css」なんかもインストールする必要があったようですが、このバージョンではデフォルトでインストールされてます。

時間があれば、[Search Packages](https://atom.io/packages)のサイトでいろいろなプラグインを検索してみると楽しいです。

## プラグインの入れ方
メニューの「ファイル」－「環境設定」を開いて「install」メニューを表示します。
上記に記載したプラグイン（パッケージ）を検索して順次インストールしていきます。
![image](https://qiita-image-store.s3.amazonaws.com/0/77804/498ac30c-0e00-fbdc-a765-cbdd3c9754d8.png)

以下の方法を使うと一括でインストールすることができます。
（apmはnpmやrpmのようなatomのパッケージ管理ツールで、Atomをインストールすると使えるはずです。）
1. Windowsのコマンドラインを開く
2. apm list -bi > atompackages
   （「atompackages」の部分は<出力先ファイルパス＋ファイル名>で任意に変更してください）
3. 出力したファイルを開き、上記のプラグイン名を追加します。
![image](https://qiita-image-store.s3.amazonaws.com/0/77804/7e6ba9c2-4493-ddb5-3754-0c13cc7d5ce9.png)
4. 再びコマンドライン上で「apm install --packages-file atompackages」と入力します。
5. Atomを起動している場合は、再起動します。

# エディタを使う
Atomはまとまりのない単一のテキストなどを見たり作成したりするのには向いていないので、その辺の用途で利用するなら、さくらエディタや秀丸などの方が良いと思います。

AtomやSublime TextなんかはEclipseやVisual Studioあたりのエディタのようにプロジェクト単位でファイルを操作する際に非常に有用なツールで、既に定番エディタがあるJavaや.NET系**以外**の開発にはもってこいです。

なので、エディタを使うにはまずプロジェクト単位で管理・利用していくという前提ありきです。
また、実際のディレクトリとエディタ上の表示は若干異なる場合があるので、実際のファイルを確認する場合は、エクスプローラで表示して確認します。

1. プロジェクトフォルダを追加する（※追加した後、非表示にする場合「削除」ではなく「除去」なので注意）。プロジェクトがない場合は適当なディレクトリを選択すれば良いです。
![image](https://qiita-image-store.s3.amazonaws.com/0/77804/9aa0ad58-291b-0eb4-1ec4-fb46467a32f6.png)

2. htmlファイルを作成してみます。新規ファイルを追加。
![image](https://qiita-image-store.s3.amazonaws.com/0/77804/1b2dcd14-0239-9f8b-c5be-349135b7f1fa.png)
![image](https://qiita-image-store.s3.amazonaws.com/0/77804/76381528-693b-a3a2-24c9-f90642f2034b.png)
なんかHTMLを書いてみる。
![image](https://qiita-image-store.s3.amazonaws.com/0/77804/dc844e37-1e2b-4339-34e1-7734b887f3f0.png)

3. 既にプラグインが気づかないうちに適用されていますが、明示的にプラグインを使ってみます。htmlファイルをプレビューしてみますので、メニューの「パッケージ」－「Preview HTML」－「Enable Preview」を選択します。もしくは、「ctrl-shift-H」をキー入力します。
![image](https://qiita-image-store.s3.amazonaws.com/0/77804/6f6ae493-25c0-3f8b-ae62-f9aa1dd08bb7.png)

4. htmlをプレビューできます。
![image](https://qiita-image-store.s3.amazonaws.com/0/77804/17228baa-f0f6-e550-f6c9-a1c5904858e8.png)

5. cssを作成してみます。色を選択する際に「Ctrl+Alt+C」をキー入力するとカラーピッカーが使え、カラーコードの部分が選択した色でハイライトされます。
![image](https://qiita-image-store.s3.amazonaws.com/0/77804/a4de69c5-120f-ee9f-3bb3-ed968de92edd.png)

6. cssを保存して先程作成したhtmlにリンクを追加してプレビューするとcssの内容を反映したプレビューを見ることができます。
![image](https://qiita-image-store.s3.amazonaws.com/0/77804/bee85a6a-f516-2822-406b-f832a3658d04.png)

7. javascriptを作成してみます。「linter-jshint」というプラグインを入れていると下図のように構文解析を行ってくれます。linter-xxxのプラグインを入れると他言語でも同様に構文解析を即時で実行してくれるので、単純なミスを減らしてくれるので便利ですね。ただ、コードが大きくなると重くなる点は注意かと。
![image](https://qiita-image-store.s3.amazonaws.com/0/77804/519f3ef1-0fb4-3848-0724-729dc825b846.png)

8. 再度、htmlをプレビューすると、jsで作成した部分も反映されます。
![image](https://qiita-image-store.s3.amazonaws.com/0/77804/bc6fac11-b25a-5665-4f5d-2679fe302cab.png)

## 使いはじめのまとめ
この記事では非常に単純な例を記載していますが、他の言語に合わせてプラグインを選んだり、周辺ツールと連携するプラグインを追加することでどんどん良いツールになると思います。例えば、githubとの連携であったり。

ただ、あまりプラグインを入れすぎるとバージョン管理と整合性、パフォーマンスに問題がでてくると思いますので、ご注意を。

また、このツールはGUIのメニューやマウス操作よりも、ショートカットを覚えて使っていくことを前提としているように見えるので、何か操作がしたいという時にはショートカットを積極的に使って覚えていくと良いでしょう（まぁ、他のツールも同じかもしれませんが）。

# その他トピック

## 最低限のショートカット

| キー | 動作 | 
|:-- |:--|
| Ctrl + S | ファイルを保存する |
| Ctrl + Z | 1つ前の操作を取り消す |
| Ctrl + Y | 1つ前の操作に戻す |
| Ctrl + A | 全てを選択する |
| Ctrl + L | カーソル行を選択する |
| Ctrl + C | 選択部分をコピーする |
| Ctrl + P | カーソル部分に張り付ける |
| Ctrl + F | ファイル内を検索、置換する小窓を表示する |
| Ctrl + U (文字選択時) | 文字を大文字に置換する |
| Ctrl + L (文字選択時) | 文字を小文字に置換する |
| Ctrl + Shift + F  | プロジェクト内を検索、置換する小窓を表示する |
| Ctrl + Shift + D | カーソル行を下にコピーする |
| Ctrl + Shift + U | エンコードを自動判定する |
| Ctrl + P | プロジェクト内のファイル検索パレットを表示する |
| Ctrl + Shift + P | コントロールパレットを表示する |
| Esc  | 小窓を閉じる     |

その他は[こちらのサイト](http://rfs.jp/sb/atom/atom02_keybinding.html)がWindowsの場合は、参考になると思います。

## プロジェクトの切替
この記事でとりあえず入れるプラグインに含めた「project-manager」を入れている場合、以下のような感じでプロジェクトを記憶して切り替えることができます。

### 開いているプロジェクトを記憶する

「Ctrl + Shift + P」をキー入力してコマンドパレットを開き、「Project Manager: Save Project」と入力します。
![image](https://qiita-image-store.s3.amazonaws.com/0/77804/894a8351-83d8-8b9a-426f-ef68c09ce603.png)

現在開いているプロジェクトに名前を付けて保存できるので、名称を入力してEnterキーをおします。
![image](https://qiita-image-store.s3.amazonaws.com/0/77804/428c9b6c-d98c-8704-3a4d-4e480bada06a.png)

### 記憶したプロジェクトを編集する

「Ctrl + Shift + P」をキー入力してコマンドパレットを開き、「Project Manager: Edit Project」と入力します。project-managerプラグインのプロジェクト設定ファイル（projects.csonファイル）が表示されるので、ファイル内を直接編集します。
![image](https://qiita-image-store.s3.amazonaws.com/0/77804/b0aa2776-e815-8eee-3f97-4711743f9ab4.png)

### プロジェクトの一覧を表示する
「Ctrl + **Alt** + P」をキー入力すると登録したプロジェクトの一覧が表示されるので、切り替えたいプロジェクトを選択します。
![image](https://qiita-image-store.s3.amazonaws.com/0/77804/27693c73-9bd1-2369-38cc-6d2f95368525.png)


# あとがき
Atomはクラウドサービスのようにどんどん成長・更新されているツールなので、パッケージのバージョンを気にしたりする必要がでてきたり、ネット上の情報がすぐに古くなってしまいます。

例えば、このプラグインが必要という記事があっても既に不要になっているとか、メジャーなプラグインでもエラー解消に時間を必要としたり等々。

安定して使う場合、パッケージもセットで管理していくことになるので組織標準にするには少し考えないといけない部分があると思います。

それでも、Eclipse、Visual Studio、Xcodeなどの標準エディタがない言語向けには標準エディタとして使っていきたいと思うエディタだと思います。

残念ながら、マクロ機能はなさそうなので、その点については今後に期待していきたいです。
（2016年1月時点ではロードマップ上にマクロ追加がないので、機能追加されるか不明ですが・・）


# 参考にさせて頂いたサイト
[ATOMおすすめパッケージ 2015年末版](http://qiita.com/saison/items/e241cb538ff23d1bf386)
[atom-がヤバイ！sublimetextを余裕で凌駕してしまっていた件](http://www.geeks-dev.com/atom-%E3%81%8C%E3%83%A4%E3%83%90%E3%82%A4%EF%BC%81sublimetext%E3%82%92%E4%BD%99%E8%A3%95%E3%81%A7%E5%87%8C%E9%A7%95%E3%81%97%E3%81%A6%E3%81%97%E3%81%BE%E3%81%A3%E3%81%A6%E3%81%84%E3%81%9F%E4%BB%B6/)
[[Atom Editor] 俺の設定とプラグインをさらす](http://qiita.com/agektmr/items/4da2c362fef6598fc382)