乗り換え安心、SublimeTextからAtom移行してみて感じた違い
ドーモ、デザイナーのigguです。
ドワンゴでもっぱらエンジニアと連携しながらWebサービスやツールのUIをデザイン/実装したりしています。
今日のお話
僕は2012年8月ごろから3年間ほどSublimeTextを使っていました。その前はDreamweaverです。DreamweaverにおけるGUI中心の環境はマウスとキーボードを行き来する場面が多く、ストレスになっていました。加えてSASSやLESSのメタ言語を使い始めていたのでそれが扱えるキーボード主体で高速なエディタが無いかなーと探していた所でSublimeTextに乗り換えたわけです。
からの・・・約2ヶ月前でした。
そろそろSublimeText飽きたなーと思っていた所に、以前Betaを試したっきり放置していたAtomがにわかに盛り上がっている模様をキャッチ、物は試しとメインエディタをSublimeText (以下Sublime) からAtomにしてみました。
で、最初は軽く試す程度の気持ちでしたがもうすっかりAtomになってしまっています。
そこで僕が一体Atomの何が良くてSublimeに戻ろうとせずに乗り換えてしまったのかを、
両エディタを比較しながら実作業を例にしてすこし魅力をお伝えしてみようと思います。
この記事はMac OSXを基準に書かれています。
Windows, Linuxの方は適時読み替えて下さい。
あらすじ
- SublimeをDockから消す
- Atomの準備
- Atomと基本的Packageのインストール
- 導入時に気づく、設定がGUIメインで楽な件
- では、実際Atomで作業をしてみる
- エディタで編集してブラウザ確認の繰り返し作業
- Gitなどのコンソール作業がAtomエディタ内で完結
- コードの状態可視化がリッチにしやすい
- その他GitHub開発ならでは
- まとめ
SublimeをDockから消す
適当にやってるとすぐSublimeを立ち上げちゃうのでDockから消しました。
さようならSublime・・・これは決意の現れ。
Atomの準備
Atomと基本的Packageのインストール
https://atom.io/ からダウンロードしてインストールしよう。
このへんはサクっといきます。
ウェルカムスクリーンに初心者向けガイドがあるのはSublimeとは違った魅力。
次にSublimeと同じく Package を追加して機能や対応言語を増やしていきます。
公式である atom.io/packages には現時点で3,500前後ものPackageが公開されています。
気になる単語をいくつか検索してみてください、大体の物は揃っているのを感じてもらえると思います。
初めのPackage探しには、先人様が解りやすくまとめてくれた記事がおすすめです！
snowsunnyさんの記事がQiitaでも人気なので紹介させていただきます。
めぼしいPackageをガンガン入れちゃって下さい。
導入時に気づく、設定がGUIメインで楽な件
Packageを入れたりしていてSublimeと大きく違ったのが、設定の楽さでした。
Atom自体と各パッケージにだいたい設定GUIが用意されている。
マウスぽちぽち で設定ができるのはハードルが低くて楽です。
Sublimeでよくある「設定ファイル内でtypoしてて思い通りに動かない」とかがありません。
では、実際Atomで作業をしてみる
ここまで1〜2時間ぐらいしか掛かっていなかった気がします。(あれこれ試したり遊びながらで)
エディタで編集してブラウザ確認の繰り返し作業
ブラウザで確認をしながら作業をするので、変更を保存したら自動でブラウザも更新されて欲しいですね。
Atomでも簡単にできました。
使ったパッケージ
- 指定ブラウザをリロード
- browser-refresh (https://atom.io/packages/browser-refresh)
- リモートサーバーにファイルをアップロード (ローカルサーバーやVM上作業なら不要)
- remote-sync (https://atom.io/packages/remote-sync)
これらを使わない時
- ファイルを編集
- 保存
- アップロード
- ブラウザにフォーカス
- ブラウザをリロードして確認
- エディタにフォーカスを戻す
- 最初に戻る
非常にめんどくさいですね。
腱鞘炎になったり机で服が擦れて毛玉ができるかもしれません。
使う時
- ファイルを編集
- F5キーを押す (保存＋アップロード＋ブラウザがリロードされる)
- 最初に戻る
ずっとエディタにフォーカスを当て続けたまま作業ができますね？
Sublimeでも同じ事をしてましたが、
あっさり同じことが出来るパッケージがあったのと、
brower-refreshの設定もGUI付きで簡単、そのくせ細かく対象ブラウザを指定できたりと、
同じ事をするのにも楽さが違う結果でした。
ChromeがCanaryとそうでないので別けられていたり、 Chrome限定だが背面を維持したまま更新を掛けるなども可能。
Gitなどのコンソール作業がAtomエディタ内で完結
普段のGit作業はGUIのGitクライアントで済ます事もあるのですが、
まれによくターミナルを使いたい場面に出くわします。
Sublimeを使っていた頃の僕は、
「iTerm2にCommand+Tabで切り替えてごにょごにょしてはSublimeに戻る」
をしていました。
SublimeにイカしたターミナルPackageを見つけられなかったからです。
それが、Atomではインストールした初日に満足してしまいました。
使ったパッケージ
- terminal-plus (https://atom.io/packages/terminal-plus)
Atom内でいつも使っているterminalを呼び出せる
これが使いやすいのは、ターミナルを呼び出すと「今開いているプロジェクト」のディレクトリが自動で開かれる事です。(プロジェクト管理はこれ project-manager)
ターミナルに切り替えて・・・ディレクトリを移動して・・・など一切不要です。
もちろんGitだけじゃなく以下のような よくやるタスク をすぐ開いて実行できるのがストレスフリーです。
- sassやlessのwatchと自動コンパイルを走らせておく
- grunt / gulpを走らせておく
- rails / sqlサーバーを走らせておく
最高です。
コードの状態可視化がリッチにしやすい
コードの行毎にGitの差分が表示されます。
さすがGitHub製。しかもそれが初期装備(Core Packages)です。
Sublimeではコード編集時に影響するpackageを大量に入れると重くて編集に支障が出ることもありました。オートコンプリート・ハイライト・コード可視化等です。
AtomでもPackageさえ選べば、Sublime同等以上にリッチな表示にしても、ストレスを感じずコーディングができています。
以下がいま筆者が入れているものです。
- minimapを画面右(左も可)に表示 (Sublimeのような)
- minimapにもgit差分表示
- カラーコードに色付け
- 選択と同じ文字列を全てハイライト (Sublimeのような)
- インデントの深さを解りやすく
- 入力時に自動補完
- autocomplete-[言語]
- 入力時にファイルパスを自動補完
- カーソル横位置をハイライト
上記Packageが大体反映されてるサンプルはこちら。
pigmentsによるカラーコード可視化はCSSメタ言語のLess変数や関数に対応している。筆者はこれでほぼほぼ満足
その他GitHub開発ならでは
PackageやAtom自体にエラーが起きると、画面端にポップアップで詳細が出るのですが。
それをGitHubのissueとしてその場から報告ができるようになっています。
Github製ならではなエラーとissueが繋がった仕組み、Packageの不具合修正や改善のスピードが早いのもうなずける。
しかも、すでに報告済かどうかが判定されていて、
報告済だとそのissueを見て解決状況や原因、場合によっては回避方法も知ることが出来ます。
Sublimeにも当然コミュニティはあってバグも報告されていますが、
それにエディタ上からアクセス出来るのはAtomならではの機能です。
まとめ
SublimeとAtomが違うと感じる点
- 設定はGUIで済む場合が多い
- Packageの追加削除・管理が楽で事故らない
- Packageインストール前に詳細が見られるのも良い
- コンソールPackageの出来が良い
- 当然GitHub連携が強い
- 進化・改善が速い
今回の乗り換えは、元々僕がSublimeの進化が鈍化している様に感じていたところもありました。
Atomは、Sublimeの持つ “コミュニティ製のPackageによって拡張されていく” という良さに、
速さ・解りやすさ・GitHubのパワーが足し算された素晴らしいエディタだと思います。
少なくとも2016年前半はズッ友だよ！(多分)