長らくSublime Textを使ってきたんですが、色々あってエディタを乗り換えようと思い、この度Atomを選択して色々と設定したので記事にしておきます。
Atomを選んだ理由
理由としては
- 周りで使っている人が増えている
- オープンソース
- EditorConfigに対応している
- 日本語の扱いが結構良さそう
という点です。周りで使ってる人が多いとトラブル時や不明点などの、情報交換がしやすいので良いです。ネットで検索するというのは当然するんですが、なんか普段のコミュニケーションで、ここがね〜とかっていうやり取りが結構楽しかったりするんですよね。
オープンソースなので、いろいろな人がパッケージやテーマを開発して、それらを自由に使えるというのが醍醐味なので、これはポイントが高かったです。開発側に回るのもオープンソースだと簡単にできるのでそういうのも楽しいんですよね。
自分のために作ったものを誰かが利用して、それを勝手にもっと良くしてくれてというのがほんと素敵な世界で楽しいです。
EditorConfigという点は、上記のオープンソースということを考えると、もうこれがないとしんどいというか面倒くさいから、ないと選択したくないというレベルになってきます。
EditorConfigが何かというと、Ginpeiさんのブログを読んでもらえば凄くわかりやすいんですが
様々なエディターで利用できる、共通の書式設定ファイルです。”.editorconfig”というファイルをプロジェクトのルートに配置しておくだけで、エンコード等の書式をそのディレクトリー配下のファイル編集時に固定できます。
EditorConfigで文字コード設定を共有して喧嘩しなくなる話。（Frontrend Advent Calendar 2014 – 14日目）：Ginpen.com
http://ginpen.com/2014/12/14/editorconfig/
簡単に説明すると、文字コードをどうするか？改行コードは？インデントってどうするの？タブ？スペース？何文字分？と言った決まり事を口頭で説明するのではなく、このファイルに書いてプロジェクトのルートに含めておくだけで、そのプロジェクト以下のディレクトリは、すべてこのEditorConfigの設定に基づいて書式が決められるということです。
この取り決めを口頭で説明する手間と、ファイルによって間違ってしまうといった人的ミスを、たったこのファイルを用意するだけで解決できるという素晴らしいものなんですよね。
オープンソースの世界だとインターネット上の様々な人が開発に関わる可能性があるので、この取り決めをいちいちやってられないんです。でも、このファイルがあるだけで、開発者はそんなところを何も考えずにソースをかけるので、ホントストレスフリーなんですよね。素晴らしい！
これ知らなかった人は是非これから意識してみてください。オープンソースの世界じゃなくて、仕事のチーム内でもこれが有るだけで面倒くさいコミュニケーションがひとつ減るので、負荷が下がりますよ。
日本語の扱いが結構良さそうというのは、メニューが英語じゃいやだ！とかではなく、エディタに入力する日本語の表示、文字コードの扱いが割としっかりしてるという話を聞いたので選択したということです。
やっぱり僕は日本人なので、日本語を入力することが凄く多いので、ここが弱いと使っていてストレスなんですよね。
パッケージリストと管理について
手軽にプラグインやパッケージをインストール出来るツールはすごく便利なんですが、手軽にホイホイ入れていると、後々「何を入れたっけ？」ってなるんですよね。
AtomにはNode.jsのパッケージ管理ツールであるnpmのパッケージリストと同様のことが出来るapmというのが使えます。
こうやって書くと「何を言ってるのだお前は」状態になると思うので、一つ一つ説明していきます。
Node.js
Node.jsは高速でスケーラブルなネットワークアプリケーションを 簡単に構築するためにChrome の JavaScript 実行環境 上に構築されたプラットフォームです。 Node.jsはイベント駆動とノンブロッキング I/O モデルを使用することにより 軽量・効率的で、分散されたデバイスにまたがるデータ集約的なリアルタイム アプリケーションに最適です。
要は、サーバーサイドプログラミングのJavaScriptです。ブラウザからWebサーバーにアクセスして非同期処理でデータベースへのアクセスと、Webサイトの表示が行えるので、ユーザーは画面の遷移といったストレスを感じることなく、リアルタイムに動的なWebサイトを閲覧することが出来ます。twitterやFacebookといったSNSでよく見かけますね。
npm
Node Packaged Modules(npm)とはNode.jsのライブラリやパッケージを管理することができるツールです。 ライブラリやパッケージの管理ツールを主にパッケージマネージャと呼びます。 パッケージマネージャを使うことで、使いたいライブラリの導入や削除を簡易にしたり、パッケージ同士の依存関係を管理することができます。
Node Packaged Modules(npm)とは ： チームラボ
http://team-lab.github.io/skillup-nodejs/2/4.html
ターミナルやコマンドプロンプトといった、いわゆる黒い画面からコマンドを叩いてパッケージをインストールしたり、アップデートしたりするためのものです。Node.jsでは、これを使ってpackage.jsonに依存するパッケージを列挙しておいて、それらを管理することが出来ます。
apm
apmは上記のnpmと同じ使い方ができるAtom用のパッケージ管理ツールです。Atomをインストールすると自動的にapmもインストールされるので、すぐに使うことが出来ます。
Atomのプロジェクトはおそらく ~/.atmとか/usr/local/bin/apm になっていると思うので、黒い画面からディレクトリを移り、
$ apm list
とか叩くと結果が返ってきます。ちなみにこのコマンドは自分インストールしたパッケージのリストが表示されます。
他のコマンドは以下の様な感じです。
| clean | node_modules から package.json で参照されていないすべてのパッケージを削除する。 |
| config | apmのconfigを変更。 |
| dedupe | node_modules から重複しているものを削除する。 |
| deinstall | apm uninstall のエイリアス。 |
| delete | apm uninstall のエイリアス。 |
| dev | apm develop のエイリアス。 |
| develop | 指定されたパッケージのGitリポジトリを指定されたディレクトリにクローンし、その依存関係をインストールし、~/.atom/dev/packages/<package_name> にリンクをつくる。未指定なら ~/github/<package_name> にクローン。ATOM_REPOS_HOME でクローン先を変更できる。 |
| docs | 指定されたパッケージの homepage をブラウザで開く。 |
| erase | apm uninstall のエイリアス。 |
| featured | https://atom.io/packages の featured に上がっているものを一覧表示する。 |
| home | apm docs のエイリアス。 |
| init | パッケージ・テーマ・言語の scaffold を生成する。 |
| install | 指定されたパッケージを ~/.atom/packages/<package_name> にインストールする。 |
| link | 指定されたパッケージのパスへのリンクを ~/.atom/packages につくる。パスが指定されなければ、カレントディレクトリを使う。 |
| linked | apm links のエイリアス。 |
| links | ~/.atom/packages と ~/.atom/dev/packages にあるパッケージのリンクを一覧表示する。 |
| list | インストールされたパッケージと Atom にバンドルされたパッケージを一覧表示する。 |
| ln | apm link のエイリアス。 |
| lns | apm links のエイリアス。 |
| login | atom.io の token を入力し、キーチェインに保存する。 atom.io に publish するときにユーザーを識別するのに使う。 |
| ls | apm list のエイリアス。 |
| open | apm docs のエイリアス。 |
| outdated | apm upgrade のエイリアス。 |
| publish | カレントディレクトリのパッケージの新しいバージョンを atom.io に publish する。 |
| rebuild | node_modules にインストールされたモジュールすべてをリビルドする。 |
| rebuild-module-cache | ~/.atom/packages にインストールされたすべてのパッケージのモジュールキャッシュをリビルドする。 |
| remove | apm uninstall のエイリアス。 |
| rm | apm uninstall のエイリアス。 |
| search | Atom パッケージ・テーマを atom.io から検索する。 |
| show | apm view のエイリアス。 |
| star | 指定されたパッケージに atom.io のスターをつける。 |
| starred | apm stars のエイリアス。 |
| stars | スターをつけた Atom パッケージ・テーマを一覧表示またはインストールする。 |
| test | spec に含まれるパッケージのテストを動かす。 |
| uninstall | ~/.atom/packages にインストールされたパッケージを削除する。 |
| unlink | 指定されたパッケージのパスへのリンクを ~/.atom/packages から削除する。パスが指定されなければ、カレントディレクトリを使う。 |
| unpublish | publish されたパッケージやバージョンを atom.io から削除する。 |
| unstar | 指定されたパッケージのスターをはずす。 |
| update | apm clean し apm install する。 |
| upgrade | インストールされた古い (out of date) パッケージをアップグレードする。 |
| view | パッケージ・テーマの情報を表示する。 |
apm のコマンド一覧：Qiita
http://qiita.com/bouzuya/items/c57241b97cd063dd9279
パッケージリスト
で、肝心なパッケージの管理についてですが
$ apm list --installed --bare > packagelist.txt
と叩けば、リスト書きしたテキストデータが吐き出されます。
$ apm install --packages-file packagelist.txt
と叩くことで、吐き出しておいたパッケージリストに記述されているパッケージやテーマを一気にインストールできます。
なので、他人に自分の環境を渡したい場合なども、上記のコマンドでファイルを吐き出しておいて、それを渡してコマンドを実行してもらえば、同じ環境ができあがります。便利ですね。
注意点としては、npmの場合だとこういったパッケージのリストは自動的に吐き出されるのですが、Atomの場合は自動では吐き出されないので、必要に応じて自分でコマンドを叩く必要があります。
また、これ以外の方法にも、気に入ったパッケージにStarをつける機能があるんですが、Atomには、この自分がStarをつけたパッケージを一括でインストールできるという機能があって、それも便利です。
$ apm stars --install
これでStarをつけたパッケージを一気にインストールできます。
また、Starなんて使ってなかった！という場合、インストールしているパッケージに一括でStarをつけるコマンドも有ります。
$ apm star --installed
実行するとトークンを聞かれるので、 https://atom.io/account にてトークンをコピーして貼り付ければ実行されます。
逆にアンインストールしたパッケージのStarを外すには
$ apm unstar atom-color-highlight
を叩けばOKです。
インストールしたパッケージの紹介
今回実際にインストールしたパッケージです。
上記EditorConfig で説明したもの
パッケージのインストールはメニューの
Atom > Preferences からSetting画面を開き、左のメニューにある install から行います。
ちなみに僕は atom-material-syntax-dark というテーマを使っているのでこういう見た目になっています。
テーマをインストールしたい場合は、上記画像でPACKAGES という緑色のボタンの横にあるTHEMESをクリックし、検索モードを切り替えて検索します。
インストールしたパッケージは、Setting画面の左側にあるPackagesに移動して確認できます。（テーマの場合はThemes）
設定
キーバインドとか色々出来ることあるんですが、それはおいおいやっていくとして、ひとまずやったものだけ。
不可視情報の表示
デフォルトだと半角スペースやタブといった不可視情報は何も表示されずに見づらいので、不可視情報を見えるようにします。
Atom > Preferences からSetting画面を開き、Show Invisibles のチェックが外れていると思うので、チェックを入れればOKです。
フォントの変更
Sublime Textで Source Han Code JP を使っていたので、Atomでもこれを設定。
同じく設定画面のFont FamilyにSource Han Code JPと書き込みすればOK。ついでにフォントサイズも15に設定。
Githubでの公開
.atom以下のディレクトリやファイルをGithubにあげたので、これでいつでも戻せます。
atomcy – setting for Atom
https://github.com/yat8823jp/atomcy
使い方
- Atomのインストール https://atom.io/
cd ~/.atomapm install --packages-file packagelist.txt
最後に
Sublime Textの時にも感じましたが、このタイプのエディタは、プラグインを色々いれたり、テーマを変えてみたり、設定を触ってみたりと、カスタマイズしていくことでより使いやすくなっていくエディタです。自分に合うにはどうカスタマイズすれば良いのか？どういうプラグインがあるのか？を調べていくことが出来るか？で、自分に合うか、合わないかを決められるのではないかな？と思います。
ここを苦と感じない人であれば、凄く使いやすいエディタになると思います。ただ、個人的に少し重たい？と感じるので、それが無くなったらより良くなるなと感じています。
とはいえ、以前よりやりやすくなったので、今はATOMに満足しています！
2016年3月11日追記：プラグインのminimap-bookmarksについて使い方がわからなかったのですが、こさりん( @cosarin ) に教えてもらったので追記しました。ありがとう！
お役に立てたらお願いします🙇
Comments