Atom（GitHub製エディタ）に乗り換えて最初にやっておきたいこと

2015年05月08日
Takanori Maeda
Atom GitHub

GitHub製の開発者向けエディタである「Atom」を利用している人も増えてきました。自分もこれまで使っていたSublime TextからついにAtomに乗り換えました。乗り換えを決意してから、いろいろ調べたり、試したりしながら少しずつ自分仕様にカスタマイズし、やっと使える状態になってきたところです。そうした中で大事だと思ったAtomを使うための初期知識を共有できればと思って今回記事にしてみました。

Atomに乗り換えた理由

私がAtomに乗り換えたのは、ずばり以下の3つの理由からとなります。

無料
パッケージが豊富
GitHub製という安心感

これまでSublime Textを使っていましたが、Sublime Textは有料で70ドルします。この支払いを保留しながら使い続けることもできますが、何とも言えないモヤモヤ感があります。Atomにすることで、このモヤモヤ感から完全に解放されます。それだけでもAtomに移行する価値はあったかなと思います。

それから、Atomはパッケージというプラグインのようなものをインストールして機能を拡張して使いますが、その種類が豊富であり、すでに現時点で1,800を超えるパッケージが公開されています。また、AtomはGitHubが開発しているということもあり、github.comとの親和性が高いのはもちろんのこと、開発者の気持ちを理解して開発されているということが随所に見られるエディタとなっています。

Atomを導入する

Atom導入の際に参考にしたもの

Atom導入に当たり、以下を参考にしました。特に『WEB+DB PRESS』のATOM特集の記事はとても内容が濃くて、すごくタメになりました。

**『WEB+DB PRESS Vol.86』**
著者: 結城洋志, 沖元謙治, 足永拓郎, 林健太郎, 大竹智也, 内田誠悟, その他
出版社: 技術評論社
発売日: 2014年4月23日
ISBN: 4774172480

AtomをMacにインストール

Atomのインストールは簡単です。Atomの公式サイトから「atom-mac.zip」ファイルをダウンロードします。zipファイルを解凍したら、「Applications」フォルダにドラッグします。これでAtomのインストールは完了です。

Atomを起動して、「command + shift + p」でコマンドパレットを開き、「Window: Install Shell Commands」と入力して実行します。そうすることにより、Macのターミナルから[atom]コマンドと[apm]コマンドが使えるようになります。

1.2 Getting Started : Installing Atom

Sublime Textをアンインストール

これからAtomを使うと決めたので、これまで使っていたSublime Textは思い切ってMacから完全に削除しました。Sublime Textに紐付いているファイルが多いので、ファイルを開くとSublime Textが起動して、結局Sublime Textで作業するということを防ぎたかったので。

Proxyを設定

会社の環境はProxy認証の必要なWindows 7で、Atomのテーマやパッケージをインストールして使うにはProxyの設定が必要でした。proxyを設定するには、.atomディレクトリ直下に.apmrcファイルを作成し、以下を記述します。

https-proxy = http://[認証ID]:[パスワード]@[proxyのURL（ホスト）]:[ポート番号]

~/.atom/.apmrc

またはコマンドから直接登録してもよいです。

$ apm config set https-proxy http://[認証ID]:[パスワード]@[proxyのURL（ホスト）]:[ポート番号]

ここで注意すべきは、proxyのプロトコルをsslでも「http」と記述することです。「https」と記述した場合、パッケージをインストールしようとすると、以下のようなエラーが出てしまいました。

atom proxy error — tunneling socket could not be established, cause=5140:error:140770FC:SSL routines:SSL23_GET_SERVER_HELLO:unknown protocol:openssl\ssl\s23_clnt.c:795:

Firewallのせいでsslのエラーが出る場合は、さらに以下を.apmrcファイルに追記します。

strict-ssl = false

~/.atom/.apmrc

[参考]

それでもエラーが出る場合は、以下の環境変数の設定をお試しください。

メニューの日本語化

自分は英語のまま使っていますが、念のため紹介しておきます。Atomのメニューを日本語化するには、以下のパッケージを使うとよいようです。メニューバーとコンテキストメニューを日本語化してくれるとのことです。（パッケージのインストール方法は後半部分で紹介します。）

japanese-menu – Atom

Atomの基本操作を覚える

Atomの起動

Atomはターミナルからコマンドを叩いて起動することができます。プロジェクトのディレクトリに移動して、以下のようにカレントディレクトリのパスを指定して[atom .]コマンドを実行すると、プロジェクトのフォルダとファイルの全てをツリービューに表示した状態で起動し、とても作業がしやすくなります。

$ cd project_dir
$ atom .

atomコマンドの詳細については、以下のコマンドでご確認ください。

$ atom -h

基本設定（Settings）

Atomの設定ファイルは、.atomディレクトリ直下の「config.cson」ファイルとなります。直接このファイルをいじってもよいですが、基本的な設定はAtom内でも行えます。Atomメニューの「Preference…」（WindowsならFileメニューの「Settings」）または「Command（Ctr） + ,」でAtomの環境設定画面（Settings）が開きます。

今回自分が行った設定内容を紹介します（といってもほとんどデフォルトのままですけど…）。

Show Indent Guideに「チェック」: チェックを入れるとインデントガイドが可視化されます。
Show Invisibleに「チェック」: チェックを入れると半角スペースなどが可視化されます。
Font sizeを「13」: 文字サイズ。デフォルトは「16」。若干小さくしました。
Line Heightを「1.4」: 行間。デフォルトは「1.3」。若干広げました。

キーバインド（ショートカットキー）を覚える

Atomはさまざまなキーバインドを駆使して操作します。登録されているキーバインドは、設定画面（Settings）の「Keybindings」、またはコマンドパレットから「Settings View: Show Keybindings」コマンドで確認することができます。

キーバインドはかなりの数あるので、最初から一気に覚えるのは大変です。よく使いそうなキーバインド（Mac用）として以下を紹介しておきます。

command + shift + p: 「コマンドパレット」を開きます。おそらく一番使うであろうキーバインドです。
command + ,: 「設定画面」を開きます。これもパッケージのインストール時などよく使います。
command + k 矢印キー: 画面を矢印キーの方向に分割します。
command + w: 分割した画面を閉じます。

ちなみにキーバインドは自分で好きなように設定することもできます。キーバインドの設定は.atomディレクトリ直下の「keymap.cson」ファイルで行います。詳細は以下を見てください。

4.2 Behind Atom : Keymaps In-Depth

文字コードと使用言語を指定する

Sublime Textの文字コードはUTF-8のみの対応でしたが、AtomはUTF-8以外の文字コードも扱うことができます。新規でファイルを作成したら、画面右下で「文字コード」と扱う「プログラミング言語」を指定します。

.atomディレクトリを開く

Atomの初回起動時に「.atom」ディレクトリがホームディレクトリ直下に作られます。「.atom」ディレクトリにはAtomの設定やカスタマイズに必要なファイルが入っています。このディレクトリはSettingsのページの左メニューの下にある「Open Config Folder」ボタン（Windowsだと「Open ~/.atom」ボタン）を押して開くことができます。各種設定ファイルを直接いじる時などに使うと思うので、覚えておくとよいと思います。

テーマを設定する

Atomでは「UI Theme」と「Syntax Theme」の2つのテーマを自由に設定することができます。

UI Theme: メニューや設定画面など編集画面以外に適用されるテーマ
Syntax Theme: 編集画面に適用されるテーマ

自分はSublime Textで使っていた「Monokai」というテーマが好きなので、Syntax Themeには「Monokai」をインストールして適用させました。UI Themeはデフォルトの「Atom Light」のままにしています。自分の場合は好みのテーマにするだけで、やる気が全く異なってくるので、テーマの設定は重要だと思っています。