Atomエディタ 便利なパッケージ一覧! 全23社のWebエンジニア・デザイナーがおすすめを紹介
Web開発で人気のAtomエディタ。便利なパッケージがたくさんありますが、必ずインストールしておきたいのは何でしょう? IT企業23社にアンケート調査を実施しました。一番人気だったのは……?
使い勝手の良さと汎用性の高さから、Webエンジニアやデザイナーの人気を集めているAtomエディタ。愛用している読者も多いのではないでしょうか。登場が2014年と比較的新しいエディタにもかかわらずシェアを急速に伸ばしており、人気の高さをうかがわせます。
Atomエディタを使う際に必ずインストールしておきたいのが、パッケージです。これはデザインテーマや、プログラミングの便利機能などをエディタに追加できるプラグインのようなもの。快適に効率よく開発を進めるには必要不可欠です。
しかし、Atomエディタのパッケージは、世の中に数えきれないほどあります。その中から、どれを使えばいいのでしょうか? そんな悩みを解決すべく、IT企業23社にアンケートを実施。各社トップのエンジニアやデザイナーがお勧めするパッケージを5つまで紹介してもらいました。ぜひ参考にしてください!
- 株式会社ウィルゲート
- 株式会社ウエディングパーク
- ウォンテッドリー株式会社
- 株式会社エウレカ
- 株式会社Emotion Tech
- エン・ジャパン株式会社
- 株式会社カカクコム
- 株式会社クラウドワークス
- コネヒト株式会社
- 株式会社ジモティー
- 株式会社スタディスト
- 株式会社Speee
- 株式会社スペースマーケット
- 株式会社SmartHR
- 株式会社Zehitomo
- 株式会社ソニックガーデン
- ピクシブ株式会社
- 株式会社ビズリーチ
- 株式会社マネーフォワード
- 株式会社Misoca
- メドピア株式会社
- ラクスル株式会社
- Retty株式会社
- まとめと人気のあるパッケージ一覧
※社名の50音順に掲載。回答者は敬称略とする
株式会社ウィルゲート
![1](https://cdn.en-ambi.com/image/contents_hub/43/45/243_01.jpg)
PHPに関係するもので2つ、PHP関係なく3つを挙げました。
php-integrator
![2](https://cdn.en-ambi.com/image/contents_hub/43/45/243_02.png)
複数のパッケージによって構成されています。PHPプロジェクトの静的解析を実施し、オートコンプリートやジャンプ、リンターの機能を提供します。
オートコンプリートやジャンプを実施できるパッケージはほかにもありますが、このパッケージは静的解析を行い、より正確な動作をしてくれます。リンターにおいては、ほかのリンターと被らない「不明な関数、クラスではないか」「PHPdocがちゃんとか書かれているか」などを確認します。非常に便利なパッケージです。
aligner-php
![3](https://cdn.en-ambi.com/image/contents_hub/43/45/243_03.png)
PHPでよく使う=>
などを揃えてくれるパッケージです。揃えたほうが見え方が良いのだけど、揃えるにはなかなか苦労が……、というときにとても心強いです。
toggler
![4](https://cdn.en-ambi.com/image/contents_hub/43/45/243_04.png)
例えばtrue
とfalse
、===
と!==
など、単語や記号をトグルすることができます。たかだか数文字ですし、使う機会も多くないのでパッと書き換えればよいのですが、あると便利なものです。
hydrogen
![5](https://cdn.en-ambi.com/image/contents_hub/43/45/243_05.png)
Pythonを使っていると便利なJupyter Notebookを、Atom上でそのまま利用できます。Jupyter Notebookと同様の出力結果やグラフの表示に加えて、Kernelを登録すればPython以外の言語でも利用できるようになります。
コードを選択して気軽に実行できる「script」というパッケージもありますが、こちらのパッケージでは、よりインタラクティブに実行・結果確認ができるようになり、非常に便利です。
activate-power-mode
![6](https://cdn.en-ambi.com/image/contents_hub/43/45/243_06.png)
プログラミングはパワー。
プログラミング時のコードの見やすさをちょっと犠牲に、爽快感が大幅アップします。無機質なプログラミングに色がつき、キーを打つ行為が楽しくなっていきます。
株式会社ウエディングパーク
![7](https://cdn.en-ambi.com/image/contents_hub/43/45/243_07.jpg)
- 主な運営サービス:ウエディングパーク
- 回答者:浅本侑樹(デザイナー)
特に細かな設定をしなくても使いやすくなるパッケージを選ぶようにしています。
atom-beautify
![8](https://cdn.en-ambi.com/image/contents_hub/43/45/243_08.png)
多彩なファイル形式に対応しており、ソースコードを綺麗にしてくれます。
platformio-ide-terminal
![9](https://cdn.en-ambi.com/image/contents_hub/43/45/243_09.png)
Macのターミナルを開かなくても、エディタ内でターミナルが使えて、かつ邪魔になりません。
file-icons
![10](https://cdn.en-ambi.com/image/contents_hub/43/45/243_10.png)
サイドバーからファイルを選択する際に、少し見つけやすくなります。
ウォンテッドリー株式会社
![11](https://cdn.en-ambi.com/image/contents_hub/43/45/243_11.jpg)
- 主な運営サービス:Wantedly Visit、Wantedly People、Wantedly Chat
- 回答者:koudaiii(インフラエンジニア)
atom-beautify
![12](https://cdn.en-ambi.com/image/contents_hub/43/45/243_12.png)
コードを整形するのに利用。
linter
![13](https://cdn.en-ambi.com/image/contents_hub/43/45/243_13.png)
各言語に対して、初歩的なミスを減らすためにlinterを入れている。
language-*
![14](https://cdn.en-ambi.com/image/contents_hub/43/45/243_14.png)
各言語やミドルウェアのサポートしてくれる。例えば、language-reviewは、Re:VIEWの校正機能。
show-ideographic-space
![15](https://cdn.en-ambi.com/image/contents_hub/43/45/243_15.png)
Markdownを書く際に、全角スペースがハイライトされるので、うっかり追加した場合に気づきやすい。
atom-material-ui
![16](https://cdn.en-ambi.com/image/contents_hub/43/45/243_16.png)
プラグインではないけど、使ってるテーマ。
株式会社エウレカ
![17](https://cdn.en-ambi.com/image/contents_hub/43/45/243_17.jpg)
- 主な運営サービス:Pairs
- 回答者:木村寛(Principal Engineer)
エウレカで、Pairsのグローバル版iOSアプリ開発を担当している木村です。
普段はXcodeでiOSアプリを開発していますが、リファクタリングや、スクリプトを書くときにはAtomを使用しています。パッケージは、細かいものを含めるといろいろインストールしていますが、中でもよく使用しているものを紹介します。
<エディタのUIをキレイにするパッケージ>
Atomの魅力のひとつとして、Electronで作られているためWebの技術を使ったUIのカスタマイズが行いやすいことが挙げられます。パッケージ開発者でも、Webのフロントエンドに経験があれば容易にカスタムUIを作れるでしょう。このあたりが、デザイナーにも人気が出ている要因だと考えています。
file-icons
![18](https://cdn.en-ambi.com/image/contents_hub/43/45/243_18.png)
ファイルの拡張子に応じて、ファイルのアイコンを変更してくれるパッケージです。
ファイルがたくさん存在するディレクトリで、見分けがつきやすくなります。カラフルに作られているのでエディタが華やかになるのも良いですね! きっとデザイナーさんも喜ぶことでしょう!
<開発を効率化するパッケージ>
vim-mode-plus
![19](https://cdn.en-ambi.com/image/contents_hub/43/45/243_19.png)
Atom上でVimキーバインドを実現するパッケージです。Vimのキーバインドは便利で、リファクタリングの際にとても役に立ちます。
Atom公式パッケージにあったvim-modeはdeprecated(非推奨)になっており、このvim-mode-plusを使用するように案内されていました。サードパーティパッケージがデファクトスタンダードになるとは、すごい!
document-outline
![20](https://cdn.en-ambi.com/image/contents_hub/43/45/243_20.png)
Markdownのアウトラインをエディタの右側に表示するパッケージです。ドキュメントを書く際に重宝しています。
現在編集している場所がアウトライン上でハイライトされたり、アウトラインをクリックするとその場所までスクロールすることができます。大きなドキュメントを編集するときに、迷子にならずに済みますよ! 表示する階層の深さは、パッケージの設定で変更可能です。
script
![21](https://cdn.en-ambi.com/image/contents_hub/43/45/243_21.png)
開いているファイルやバッファ上で、指定した行数を実行できるパッケージです。スクリプトを簡単に実行したいときに、とてもお世話になっています。Vimでいうならquickrunというプラグインが近いと思います。
実行環境がファイルタイプに応じて自動的に決定されるので、ファイルを保存しなくても、ファイルタイプさえ決めてしまえば即実行できます(AtomのファイルタイプはShift
+Ctrl
+L
で変更できます!)。その場で簡単に実行するほか、実行環境の設定や、引数を指定して実行する設定も用意されているので、実際にスクリプトが実行される状況を想定しながら書けるのもポイントです。nvmやrbenvを使用している場合にパスがうまく通らない! というときにも有効です。
git-time-machine
![22](https://cdn.en-ambi.com/image/contents_hub/43/45/243_22.png)
Git管理されているファイルの差分を表示するパッケージです。Xcodeでは対応してないgit-worktreeでも問題なく表示できるので、前の実装と比較したいときにとても助けられているパッケージです。
起動すると、画面の下部分に日付から選択できるUIが表示されるため、おおまかな日付にすぐに移動できます。「具体的な日付はわからないけど、この辺りだった気がする……」というときに、クリックしながら過去にさかのぼれるのがとても楽です(コンフリクトの解消はvim-diff派です)。
Atomのコミュニティは今も活発で、多くパッケージが開発されており、最近ではGitHubとの連携も強化されるなど、GitHub製であることを活かしたエディタとなりつつあります。まだまだ改善されるべきポイントも残っていますが、今後の進化に期待できるエディタなのではないでしょうか。
株式会社Emotion Tech
![23](https://cdn.en-ambi.com/image/contents_hub/43/45/243_23.jpg)
- 主な運営サービス:Emotion Tech
- 回答者:子安輝
まず、私のAtomの用途ですが、開発のコーディングでバリバリ使っているわけではなく(IDE派なので……)、作業ログや、ドキュメントのドラフトなど、ちょっとしたメモを書くのに使っています。ですのでプロジェクト管理とかコンソール連携するような大きなパッケージではなく、便利ツールみたいなものを入れています。
atom-beautify
![24](https://cdn.en-ambi.com/image/contents_hub/43/45/243_24.png)
テキスト整形のためのパッケージです。改行やインデントがまったくないコードも、きれいに整形してくれます。例えば圧縮されたJSONを読み解くときなど(よくありますよね?w)に便利です。
regex-railroad-diagram
![25](https://cdn.en-ambi.com/image/contents_hub/43/45/243_25.png)
正規表現を構文図にして見せてくれるパッケージです。少し複雑な正規表現でも、視覚的に捉えられるので断然分かりやすくなります。正規表現を読み書きするときには必須のパッケージだと思います。
language-plantuml & plantuml-viewer
![26](https://cdn.en-ambi.com/image/contents_hub/43/45/243_26.png)
2つのパッケージをセットで使っています。UMLをテキストで記述できるPlantUMLという書式があるのですが、そのシンタックスハイライトとプレビューができるようになります。テキストで記述しておけばバージョン管理もしやすいですし、PlantUMLに対応したドキュメンテーションツールも増えていますので、ぜひ試してみてほしいです。ただし、plantuml-viewerはGraphvizに依存しているので、別途インストールする必要があります。
color-picker
![27](https://cdn.en-ambi.com/image/contents_hub/43/45/243_27.png)
名前そのまま、カラーピッカーです。新規で色を選択するのにも重宝しますが、指定されている色から少しだけ明度や色相を変更したいときに、ほかのアプリケーションを立ち上げる必要がないのでとても便利です。RGB(A)やHSL(A)など5つの書式に対応していて、それらを相互に変換できるのも嬉しいですね。
line-jumper
![28](https://cdn.en-ambi.com/image/contents_hub/43/45/243_28.png)
これも地味な機能なのですが、単純にカーソルを10行ずつジャンプできるようになります。AtomはもともとCtrl
+G
で任意の行に移動することができますが、「ちょっとだけ移動したい! でも、1行ずつの移動はだるい!」というニーズに答えるステキなパッケージです。
エン・ジャパン株式会社
![29](https://cdn.en-ambi.com/image/contents_hub/43/45/243_29.jpg)
file-icons
![30](https://cdn.en-ambi.com/image/contents_hub/43/45/243_30.png)
直感的にファイルの種類が分かるのが便利です。実用性よりも見た目が鮮やかになる所が○。
highlight-selected
![31](https://cdn.en-ambi.com/image/contents_hub/43/45/243_31.png)
地味に便利です。選択した文字列と同じものがあればハイライトしてくれます。
minimap
![32](https://cdn.en-ambi.com/image/contents_hub/43/45/243_32.png)
単体だとファイルの構造がざっくりと把握できる程度ですが、コレに付随するパッケージに便利なものがたくさんあります。
minimap-highlight-selected
![33](https://cdn.en-ambi.com/image/contents_hub/43/45/243_33.png)
前述のハイライトをminimapに表示してくれます。ハイライト自体の問題か、こちらのminimap絡みの問題か、巨大なCSVの頻出単語をセレクトするとAtomが固まりました……。そういった特殊なケースを除けば便利です。
株式会社カカクコム
![34](https://cdn.en-ambi.com/image/contents_hub/43/45/243_34.jpg)
- 主な運営サービス:価格.com、食べログ、キナリノ、yoyaQ.com、スマイティなど
- 回答者:田中龍一(株式会社カカクコム システム本部システム開発1部、価格.comの通信系カテゴリに関するシステム設計・開発、部内自動化推進を担当)
local-history
![35](https://cdn.en-ambi.com/image/contents_hub/43/45/243_35.png)
ローカルに履歴を自動的に取ってくれるため、いざというときに簡単にファイルを以前の状態に戻せる安心感がある。
term3
![36](https://cdn.en-ambi.com/image/contents_hub/43/45/243_36.png)
Atomタブでターミナル操作ができる。「コードを見ながらコマンドを打ちたい」など、ウインドウを切り替えるのが面倒なときにお勧め。
docblockr
![37](https://cdn.en-ambi.com/image/contents_hub/43/45/243_37.png)
docコメントを補完してくれる。クラスやメソッドのドキュメントコメントを書くとき活躍。
useful-context-menu
![38](https://cdn.en-ambi.com/image/contents_hub/43/45/243_38.png)
今開いているファイルに対して、コンテキストメニューからファイルのフルパスを取得したり、エクスプローラを開いたりできる。
show-ideographic-space
![39](https://cdn.en-ambi.com/image/contents_hub/43/45/243_39.png)
Atom上で全角スペースをわかりやすく表示できるため、テキストやHTMLで全角スペースが入ってくる場合の確認などで便利。
株式会社クラウドワークス
![40](https://cdn.en-ambi.com/image/contents_hub/43/45/243_40.jpg)
- 主な運営サービス:CrowdWorks
- 回答者:飯田意己(プロダクトDiv.)
rails-transporter
![41](https://cdn.en-ambi.com/image/contents_hub/43/45/243_41.png)
Railsのcontroller-view間、model-spec間などの面倒なファイル移動がショートカットで行えるようになるパッケージです。大規模なRailsプロダクトだと便利です。
rails-i18n-autocomplete
![42](https://cdn.en-ambi.com/image/contents_hub/43/45/243_42.png)
RailsのI18nのキー名のサジェスト・補完を行ってくれるパッケージです。translation missingエラーに気付きやすくなります。
rspec
![43](https://cdn.en-ambi.com/image/contents_hub/43/45/243_43.png)
RailsのテストフレームワークであるRspecを、エディタ上から実行できるようにするパッケージです。その場でテスト実行できるため、TDD向けです。
goto-definition
![44](https://cdn.en-ambi.com/image/contents_hub/43/45/243_44.png)
メソッドの呼び出し先から定義にジャンプできるようにするパッケージです。どこで定義されているメソッドなのか探すのが大変な場合に便利です。
activate-power-mode
![45](https://cdn.en-ambi.com/image/contents_hub/43/45/243_45.png)
キータイプ数に応じてゲームのようなコンボ数を表示するパッケージです。おふざけパッケージですが、モブプロなどで使用すると盛り上がります。
コネヒト株式会社
![46](https://cdn.en-ambi.com/image/contents_hub/43/45/243_46.jpg)
- 主な運営サービス:ママリ
- 回答者:安達稜(エンジニア)
pigments
![47](https://cdn.en-ambi.com/image/contents_hub/43/45/243_47.png)
カラーコードに背景色がつくので、エディタ上でどんな色なのか確認ができます。
docblockr
![48](https://cdn.en-ambi.com/image/contents_hub/43/45/243_48.png)
/**
まで打ってEnter
を押すとブロックを生成してくれたり、@paramや@returnなどを補完してくれます。
project-manager
![49](https://cdn.en-ambi.com/image/contents_hub/43/45/243_49.png)
複数のPJやリポジトリを分けて、簡単に切り替えられるようになります。
file-icons
![50](https://cdn.en-ambi.com/image/contents_hub/43/45/243_50.png)
拡張子やファイル、ディレクトリ名から自動でアイコンをつけてくれます。ぱっと見でも分かりやすくなります。
auto-update-packages
![51](https://cdn.en-ambi.com/image/contents_hub/43/45/243_51.png)
インストール済みのパッケージを自動でアップデートしてくれます。
株式会社ジモティー
![52](https://cdn.en-ambi.com/image/contents_hub/43/45/243_52.jpg)
- 主な運営サービス:地元の掲示板 ジモティー
- 回答者:小林達也(Androidアプリエンジニア)
atom-clock
![53](https://cdn.en-ambi.com/image/contents_hub/43/45/243_53.png)
コーディング中でも時計が欲しかった。
linterとその関連プラグインたち
![54](https://cdn.en-ambi.com/image/contents_hub/43/45/243_54.png)
成果物の整形を助けてくれる。
regex-railroad-diagram
![55](https://cdn.en-ambi.com/image/contents_hub/43/45/243_55.png)
ちょっと難解な正規表現文字列を可視化して、どのように処理されるのか理解しやすい。
tablr
![56](https://cdn.en-ambi.com/image/contents_hub/43/45/243_56.png)
表計算ソフトを開くまでもないときに、すぐに確認できて便利。
株式会社スタディスト
![57](https://cdn.en-ambi.com/image/contents_hub/43/45/243_57.jpg)
- 主な運営サービス:Teachme Biz
- 回答者:坂野元紀(エンジニア、社員番号10番。役職はないが、ほぼ創業メンバーばかりのところに飛び込んだ1人目の社員。入社後すぐに新機能の開発を任され、連携企業との調整も含めてやり遂げた非常に優秀な人材です。)
pigments
![58](https://cdn.en-ambi.com/image/contents_hub/43/45/243_58.png)
カラーコードをエディタ上でハイライトしてくれるので、イメージしやすいし、変なミスをしなくて済むので入れています。
date
![59](https://cdn.en-ambi.com/image/contents_hub/43/45/243_59.png)
Atomにはデフォルトで現在の日時をいれるショートカットキーがないですが、メモなど取る際には日時を入れられると便利なので。
show-ideographic-space
![60](https://cdn.en-ambi.com/image/contents_hub/43/45/243_60.png)
Atomのデフォルト設定では全角スペースを可視化できないので、半角スペースと区別するために入れています。
goto-definition
![61](https://cdn.en-ambi.com/image/contents_hub/43/45/243_61.png)
Atomにはデフォルトで関数の定義場所へのジャンプ機能がないので。
split-diff
![62](https://cdn.en-ambi.com/image/contents_hub/43/45/243_62.png)
Atomにはデフォルトでファイル差分チェックがないため入れています。
共通して、Atomアップデート時など必要があればそれぞれちゃんとメンテナンスされていそうなので使っています。
株式会社Speee
![63](https://cdn.en-ambi.com/image/contents_hub/43/45/243_63.jpg)
linter-eslint
![65](https://cdn.en-ambi.com/image/contents_hub/43/45/243_65.png)
ESLintはCIでも走らせていますが、書きながら確認できるほうが圧倒的に速いので重宝しています。
platformio-ide-terminal
![66](https://cdn.en-ambi.com/image/contents_hub/43/45/243_66.png)
作業中はコードを書いているウィンドウから出たくないため使用しています。
file-icons
![67](https://cdn.en-ambi.com/image/contents_hub/43/45/243_67.png)
ファイルタイプを、ファイル名でなくアイコンの色・形で判別できるのが便利です(MacBook Proを使用しているのですが、最高解像度で使っていると文字が細かくて読むのが大変なので)。
株式会社スペースマーケット
![68](https://cdn.en-ambi.com/image/contents_hub/43/45/243_68.jpg)
- 主な運営サービス:スペースマーケット
- 回答者:仁科俊晴(エンジニア)
ruby-block
![69](https://cdn.en-ambi.com/image/contents_hub/43/45/243_69.png)
ifやendにカーソルが重なったときに、対応するifやendが薄くハイライトされる。
autocomplete-ruby
![70](https://cdn.en-ambi.com/image/contents_hub/43/45/243_70.png)
自動補完されるようになる。
linter-rubocop
![71](https://cdn.en-ambi.com/image/contents_hub/43/45/243_71.png)
文法をチェックしてくれる。
rubocop-auto-correct
![72](https://cdn.en-ambi.com/image/contents_hub/43/45/243_72.png)
コードを整形してくれる。
atom-runner
![73](https://cdn.en-ambi.com/image/contents_hub/43/45/243_73.png)
Atom上でスクリプトを実行し、結果を表示してくれる。
この5つのパッケージは、特にRubyエンジニアにオススメのものです。理由としては、関連のパッケージを導入することで「キレイなRubyのコードを素早く書ける環境」を作ることができるからです。
ruby-blockで見やすくなったAtomエディタで、autocomplete-rubyを活用しながらコードを書いていき、文法ミスなどはlinter-rubocopとrubocop-auto-correctで検知・自動修正し、出来上がったRubyファイルをatom-runnerによってサクッと実行確認するという、開発の一連の流れに必要な環境を整えることができます。
株式会社SmartHR
![74](https://cdn.en-ambi.com/image/contents_hub/43/45/243_74.jpg)
- 主な運営サービス:SmartHR
- 回答者:芹澤雅人(VPoE)
file-icons
![75](https://cdn.en-ambi.com/image/contents_hub/43/45/243_75.png)
Atomを使っているとタブを多用すると思いますが、たくさんタブを開いていると目的のファイルを見つけるのに苦労することがあります。
File Iconsを、入れるとタブとツリーのファイル名の横に拡張子に応じたアイコンを表示してくれるので、目視によるファイルの検索性が向上して使いやすくなります。拡張子によって色分けされるのも嬉しいポイントです。
pigments
![76](https://cdn.en-ambi.com/image/contents_hub/43/45/243_76.png)
アプリケーションを開発していると、カラーコードを扱うことが多いと思います。ただし、特殊な訓練を積まない限り、コードを見ただけではどんな色なのか想像がつかず、少なからず不安な気持ちを抱きながらのコーディングになります。
Pigmentsを入れると、カラーコードの文字列にいい具合にその色を付けてくれるので、安心してコーディングができます。
minimap
![77](https://cdn.en-ambi.com/image/contents_hub/43/45/243_77.png)
某テキストエディタでおなじみのアレです。ファイルの全体像をつかむのに役立ちますが、僕はもっぱら「大きなスクロールバー」として使っています。
株式会社Zehitomo
![78](https://cdn.en-ambi.com/image/contents_hub/43/45/243_78.jpg)
- 主な運営サービス:Zehitomo
- 回答者:Duong Thanh Dat(デベロッパー)
nuclide
An open IDE for web and native mobile development, by Facebook.
monokai
![80](https://cdn.en-ambi.com/image/contents_hub/43/45/243_80.png)
Theme.
base16-tomorrow-dark-theme
![81](https://cdn.en-ambi.com/image/contents_hub/43/45/243_81.png)
Theme.
editorconfig
![82](https://cdn.en-ambi.com/image/contents_hub/43/45/243_82.png)
Maintain code style consistency.
react
![83](https://cdn.en-ambi.com/image/contents_hub/43/45/243_83.png)
Syntax highlighter.
2014年にAtomを使っていたときには、ほかのエディタ、例えばSublime Text 3やCodaと比較すると、やや遅かったイメージがありますが、最近のAtomはスピードも速く、また、ほかの開発者とも簡単に共有できるようになった気がします。
Atomがお勧めできる理由は、無料、オープンソースであること、そしてコミュニティを助けようとするカルチャーがあることかなと思います。また、クロスプラットフォームのデスクトップアプリケーションフレームワークであるElectronに基づいているため、HTML・CSS・JavaScriptに対応しているところもポイントです。シンタックスハイライト、コードコンプリート、Gitなどのツールやビルトイン機能も充実しているので、UI観点から考えても使いやすいです。
Atomは、誰もが使いやすいエディタの一つだと思います。エンジニアの方、特にジュニアエンジニアには、ぜひ活用していただきたいです。
株式会社ソニックガーデン
![84](https://cdn.en-ambi.com/image/contents_hub/43/45/243_84.jpg)
- 主な運営サービス:Remotty
- 回答者:aki77 & mat_aki(CTO)
以下で紹介するパッケージは、どれも自分自身の不便を解消することが目的で作ったものなので、自信をもってオススメできます!
clipboard-plus
![85](https://cdn.en-ambi.com/image/contents_hub/43/45/243_85.png)
クリップボードの履歴を画面上で絞り込みながらペーストできます。Atomの公式ブログでも紹介されています。
emacs-plus
![86](https://cdn.en-ambi.com/image/contents_hub/43/45/243_86.png)
EmacsからAtomに乗り換えたい人には必須! 自分自身がAtomに乗り換えるために作りました。
expand-region
![87](https://cdn.en-ambi.com/image/contents_hub/43/45/243_87.png)
選択範囲をインタラクティブに広げてくれます。
autocomplete-rails-partial
![88](https://cdn.en-ambi.com/image/contents_hub/43/45/243_88.png)
Railsのパーシャルビュー名を自動補完してくれます。Rails用便利パッケージを、ほかにもいくつか作っています。
sequential-command
![91](https://cdn.en-ambi.com/image/contents_hub/43/45/243_91.png)
Emacsのsequential-command.elをAtomに移植しました。例えば、Ctrl
+A
を繰り返し押した場合には、以下の動作になります。
まず「行頭に飛ぶ」→次に「ファイル先頭に飛ぶ」→次に「元の場所に戻る」
ピクシブ株式会社
![92](https://cdn.en-ambi.com/image/contents_hub/43/45/243_92.jpg)
- 主な運営サービス:pixiv、pixivコミック、BOOTH、pixivFACTORY、pixiv Sketch、Pawoo、ImageFlux
- 回答者:道井俊介(リードエンジニア、ImageFluxプロダクト責任者)
お勧めのAtomパッケージということで、社内Slackでアンケートを実施し、Atomエディタを使っているエンジニアにapm ls -i
の結果を貼ってもらい、インストール数順に集計しました。そのため、単純に使っているユーザー数が多いパッケージに偏っていますが、ご容赦ください。
なお、「language-*」や「linter-*」といった言語ごとのパッケージは除いています。
linter
![93](https://cdn.en-ambi.com/image/contents_hub/43/45/243_93.png)
ほとんどのlinterのベースとなっているパッケージです。Atomでlinterを使っている方はほとんどインストールしていると思います。
今回の集まったデータでは、linter-eslint、linter-ruby、linter-stylint、linter-rubocop、linter-sass-lintあたりがよく使われていました。ちなみに自分は、Goを書くのにAtomを使っています。
pigments
![94](https://cdn.en-ambi.com/image/contents_hub/43/45/243_94.png)
CSSやHTMLで指定している色をハイライトしてくれます。CSSだけでなくLESSやSass、StylusといったCSSプリプロセッサにも対応しているため、変数で指定されている色も、わかりやすく視覚的に判断できます。
file-icons
![95](https://cdn.en-ambi.com/image/contents_hub/43/45/243_95.png)
ファイルの種類別にアイコンを変えてくれるパッケージです。ポップなカラーで表示してくれるので、ツリービューもにぎやかになります。
atom-beautify
![96](https://cdn.en-ambi.com/image/contents_hub/43/45/243_96.png)
各種フォーマッターを動かしてくれるパッケージです。各種プログラミング言語のフォーマッターに対応しています。
merge-conflicts
![97](https://cdn.en-ambi.com/image/contents_hub/43/45/243_97.png)
Atom上でGitのコンフリクトをマージするためのツールです。コンフリクト箇所にジャンプしたり、差分をわかりやすく表示してくれます。
株式会社ビズリーチ
![98](https://cdn.en-ambi.com/image/contents_hub/43/45/243_98.jpg)
- 主な運営サービス:ビズリーチ、HRMOS(ハーモス)、スタンバイ
- 回答者:竹添直樹(CTO室 チーフアーキテクト、GitBucket、Scalatra、Apache PredictionIOなどのコミッター、『Scalaパズル』『Java逆引きレシピ』といったJava/Scala関連書籍の執筆・翻訳など)
AtomはMarkdown編集環境として便利に使用しているため、Markdown編集用のプラグインを選んでみました。ブログや雑誌記事、書籍の原稿などもAtomでMarkdownで書いています。
document-outline
![99](https://cdn.en-ambi.com/image/contents_hub/43/45/243_99.png)
サイドバーにMarkdownの見出しをツリー状に表示してくれるプラグインで、Markdownで長文を記述する際に文章の構造を把握するのに便利です。以前はリフレッシュが重かったのですが、高速化されてからは長文でも使えるようになりました。
markdown-writer
![100](https://cdn.en-ambi.com/image/contents_hub/43/45/243_100.png)
Markdownの編集時に便利な、ちょっとした機能を提供してくれるプラグインです。例えば、箇条書きの末尾で改行すると行頭に自動で-
を挿入してくれたり、そこでTab
キーを押して箇条書きをネストさせたりできます。
markdown-scroll-sync
![101](https://cdn.en-ambi.com/image/contents_hub/43/45/243_101.png)
Markdownのプレビューを、エディタの表示位置にあわせて自動的にスクロールしてくれるものです。Markdownに慣れてくるとプレビューはあまり使わなかったりするので、使用頻度はさほど高くありませんが……。逆に、プレビューをスクロールするとエディタも自動でスクロールしてくれるプラグインが欲しいな、と思うこともあります。
atom-csv-markdown
![102](https://cdn.en-ambi.com/image/contents_hub/43/45/243_102.png)
CSVを範囲選択して、Markdownの表に変換するものです。自作のプラグインなのですが、Markdownの表の記法はけっこう面倒なので、CSVで記述してサクッと変換できるのはなかなか便利です。
markdown-table-editor
![103](https://cdn.en-ambi.com/image/contents_hub/43/45/243_103.png)
Markdownの表の編集を強力にサポートしてくれるプラグインです。表を編集すると自動的にセル幅を調節してくれたり、タブキーでセルを移動できたり、とても便利なプラグインです。大きな表を編集するなどで敢えてフォーマットしたくないときには、適さない場合もあります。
株式会社マネーフォワード
![104](https://cdn.en-ambi.com/image/contents_hub/43/45/243_104.jpg)
- 主な運営サービス:マネーフォワード、MFクラウドシリーズ
- 回答者:河野湖々(Java/Rubyエンジニア、マネーフォワードで最年少19歳のエンジニア)
linter
![105](https://cdn.en-ambi.com/image/contents_hub/43/45/243_105.png)
その書き方のどこが危険なのか、どうするのが美しいとされているのか、それがなぜなのか、などの説明があるリンクに飛べるのが良い。
goto-definition
![106](https://cdn.en-ambi.com/image/contents_hub/43/45/243_106.png)
ジャンプ機能がないと、何をするにしてもいずれ辛くなる。
platformio-ide-terminal
![107](https://cdn.en-ambi.com/image/contents_hub/43/45/243_107.png)
ターミナルをいじるたびにウィンドウや画面を切り替える必要がなくなる。guardやdaemonを動かしておくと、落ちた瞬間・直った瞬間がわかりやすくていいかも。
show-ideographic-space
![108](https://cdn.en-ambi.com/image/contents_hub/43/45/243_108.png)
全角スペースを信じられないくらい目立たせることが可能。
file-icons
![109](https://cdn.en-ambi.com/image/contents_hub/43/45/243_109.png)
なんか可愛いから(特に.go
ファイル)。あとはファイルツリーも見やすくなるかも。
株式会社Misoca
![110](https://cdn.en-ambi.com/image/contents_hub/43/45/243_110.jpg)
- 主な運営サービス:クラウド請求管理サービス Misoca
- 回答者:日高克也(エンジニア、松江オフィス)
個別の理由は省略しますが、以下に挙げるものはどれも、私にとって「なるべくAtom内で完結させたい」「キーボードで操作したい」「軽量である」ということを実現するために必要なパッケージです。
メドピア株式会社
![116](https://cdn.en-ambi.com/image/contents_hub/43/45/243_116.jpg)
- 主な運営サービス:MedPeer、first call、ダイエットプラス
- 回答者:内田雄太(リードエンジニア)
linter-rubocop
![117](https://cdn.en-ambi.com/image/contents_hub/43/45/243_117.png)
プロジェクトでrubocopを導入しているなら、ぜひ入れたほうが良いパッケージです。コマンドを打ってチェックする手間が省けます。eslintやscss-lintなども導入しているなら、linter-eslintやlinter-scss-lintを入れるのもお勧めです。
rails-snippets
![118](https://cdn.en-ambi.com/image/contents_hub/43/45/243_118.png)
Railsの記述を、いい感じに補完してくれます。
rails-open-rspec
![119](https://cdn.en-ambi.com/image/contents_hub/43/45/243_119.png)
現在開いているファイルに対応するspecファイルを、ショートカットキーで開いてくれます。別ペインで開いてくれるのが地味にいいです。
browser-plus
![120](https://cdn.en-ambi.com/image/contents_hub/43/45/243_120.png)
Atom内でブラウザを開けます。保存すると変更を反映してくれるライブプレビュー機能があるので、フロントエンド作業の際にはよく使います。
open-recent
![121](https://cdn.en-ambi.com/image/contents_hub/43/45/243_121.png)
最近開いたファイル一覧をメニューに追加してくれます。いつの間にかファイルを開き過ぎて「さっき開いたファイルどこだっけ?」となると使います。
ラクスル株式会社
![122](https://cdn.en-ambi.com/image/contents_hub/43/45/243_122.jpg)
linter-rubocop
![123](https://cdn.en-ambi.com/image/contents_hub/43/45/243_123.png)
linter-rubocopと、別途RuboCopのgemをインストールして設定しておくことで、コードを書きながらでもRubyのコード規約に沿うように指摘してくれます。その場で間違いに気付けるので、開発効率がアップしました。
Retty株式会社
![124](https://cdn.en-ambi.com/image/contents_hub/43/45/243_124.png)
- 主な運営サービス:Retty
- 回答者:渡辺映介(UXエンジニア)
project-manager
![125](https://cdn.en-ambi.com/image/contents_hub/43/45/243_125.png)
プロジェクトを簡単にスイッチングできて便利。
highlight-column
![126](https://cdn.en-ambi.com/image/contents_hub/43/45/243_126.png)
列をハイライトしてくれて、自分の記述している位置はもちろん、インデントのズレや、スペースが全角なのか半角なのかも把握しやすく、作業中に間違いに気づきやすい。
autocomplete-paths
![127](https://cdn.en-ambi.com/image/contents_hub/43/45/243_127.png)
ファイルパスを補完してくれるパッケージ。
担当している業務では、素早く複数のプロジェクトや施策に対応する必要があり、コーディングの癖で誤りやすい部分などを補完してくれたり、間違いに気づけたり、ミスを少なくしてくれる。自分用にエディタを最適化させていく工程も楽しい。
トップエンジニアの意見を参考に、快適な開発環境を
さまざまなパッケージをインストールするほど、Atomエディタは便利になっていきます。各社のトップエンジニアが挙げたパッケージの中からお気に入りのものを見つけ、あなたの開発環境をより快適にしていきましょう。
付録 - よく使われているパッケージ一覧
複数の企業で挙げられたパッケージを一覧表にまとめました。参考にしてください。
編集:中薗昴(サムライト)