Atomエディタ 便利なパッケージ一覧! 全23社のWebエンジニア・デザイナーがおすすめを紹介

Web開発で人気のAtomエディタ。便利なパッケージがたくさんありますが、必ずインストールしておきたいのは何でしょう? IT企業23社にアンケート調査を実施しました。一番人気だったのは……?

Atomエディタ 便利なパッケージ一覧! 全23社のWebエンジニア・デザイナーがおすすめを紹介

使い勝手の良さと汎用性の高さから、Webエンジニアやデザイナーの人気を集めているAtomエディタ。愛用している読者も多いのではないでしょうか。登場が2014年と比較的新しいエディタにもかかわらずシェアを急速に伸ばしており、人気の高さをうかがわせます。

Atomエディタを使う際に必ずインストールしておきたいのが、パッケージです。これはデザインテーマや、プログラミングの便利機能などをエディタに追加できるプラグインのようなもの。快適に効率よく開発を進めるには必要不可欠です。

しかし、Atomエディタのパッケージは、世の中に数えきれないほどあります。その中から、どれを使えばいいのでしょうか? そんな悩みを解決すべく、IT企業23社にアンケートを実施。各社トップのエンジニアやデザイナーがお勧めするパッケージを5つまで紹介してもらいました。ぜひ参考にしてください!

株式会社ウィルゲート

1

www.willgate.co.jp

PHPに関係するもので2つ、PHP関係なく3つを挙げました。

2php-integrator

複数のパッケージによって構成されています。PHPプロジェクトの静的解析を実施し、オートコンプリートやジャンプ、リンターの機能を提供します。
オートコンプリートやジャンプを実施できるパッケージはほかにもありますが、このパッケージは静的解析を行い、より正確な動作をしてくれます。リンターにおいては、ほかのリンターと被らない「不明な関数、クラスではないか」「PHPdocがちゃんとか書かれているか」などを確認します。非常に便利なパッケージです。

3aligner-php

PHPでよく使う=>などを揃えてくれるパッケージです。揃えたほうが見え方が良いのだけど、揃えるにはなかなか苦労が……、というときにとても心強いです。

4toggler

例えばtruefalse===!==など、単語や記号をトグルすることができます。たかだか数文字ですし、使う機会も多くないのでパッと書き換えればよいのですが、あると便利なものです。

5hydrogen

Pythonを使っていると便利なJupyter Notebookを、Atom上でそのまま利用できます。Jupyter Notebookと同様の出力結果やグラフの表示に加えて、Kernelを登録すればPython以外の言語でも利用できるようになります。
コードを選択して気軽に実行できる「script」というパッケージもありますが、こちらのパッケージでは、よりインタラクティブに実行・結果確認ができるようになり、非常に便利です。

6activate-power-mode

プログラミングはパワー。
プログラミング時のコードの見やすさをちょっと犠牲に、爽快感が大幅アップします。無機質なプログラミングに色がつき、キーを打つ行為が楽しくなっていきます。

株式会社ウエディングパーク

7

www.weddingpark.co.jp

特に細かな設定をしなくても使いやすくなるパッケージを選ぶようにしています。

8atom-beautify

多彩なファイル形式に対応しており、ソースコードを綺麗にしてくれます。

9platformio-ide-terminal

Macのターミナルを開かなくても、エディタ内でターミナルが使えて、かつ邪魔になりません。

10file-icons

サイドバーからファイルを選択する際に、少し見つけやすくなります。

ウォンテッドリー株式会社

11

site.wantedly.com

12atom-beautify

コードを整形するのに利用。

13linter

各言語に対して、初歩的なミスを減らすためにlinterを入れている。

14language-*

各言語やミドルウェアのサポートしてくれる。例えば、language-reviewは、Re:VIEWの校正機能。

15show-ideographic-space

Markdownを書く際に、全角スペースがハイライトされるので、うっかり追加した場合に気づきやすい。

16atom-material-ui

プラグインではないけど、使ってるテーマ。

株式会社エウレカ

17

eure.jp

  • 主な運営サービス:Pairs
  • 回答者:木村寛(Principal Engineer)

エウレカで、Pairsのグローバル版iOSアプリ開発を担当している木村です。
普段はXcodeでiOSアプリを開発していますが、リファクタリングや、スクリプトを書くときにはAtomを使用しています。パッケージは、細かいものを含めるといろいろインストールしていますが、中でもよく使用しているものを紹介します。

<エディタのUIをキレイにするパッケージ>

Atomの魅力のひとつとして、Electronで作られているためWebの技術を使ったUIのカスタマイズが行いやすいことが挙げられます。パッケージ開発者でも、Webのフロントエンドに経験があれば容易にカスタムUIを作れるでしょう。このあたりが、デザイナーにも人気が出ている要因だと考えています。

18file-icons

ファイルの拡張子に応じて、ファイルのアイコンを変更してくれるパッケージです。
ファイルがたくさん存在するディレクトリで、見分けがつきやすくなります。カラフルに作られているのでエディタが華やかになるのも良いですね! きっとデザイナーさんも喜ぶことでしょう!

<開発を効率化するパッケージ>

19vim-mode-plus

Atom上でVimキーバインドを実現するパッケージです。Vimのキーバインドは便利で、リファクタリングの際にとても役に立ちます。
Atom公式パッケージにあったvim-modeはdeprecated(非推奨)になっており、このvim-mode-plusを使用するように案内されていました。サードパーティパッケージがデファクトスタンダードになるとは、すごい!

20document-outline

Markdownのアウトラインをエディタの右側に表示するパッケージです。ドキュメントを書く際に重宝しています。
現在編集している場所がアウトライン上でハイライトされたり、アウトラインをクリックするとその場所までスクロールすることができます。大きなドキュメントを編集するときに、迷子にならずに済みますよ! 表示する階層の深さは、パッケージの設定で変更可能です。

21script

開いているファイルやバッファ上で、指定した行数を実行できるパッケージです。スクリプトを簡単に実行したいときに、とてもお世話になっています。Vimでいうならquickrunというプラグインが近いと思います。
実行環境がファイルタイプに応じて自動的に決定されるので、ファイルを保存しなくても、ファイルタイプさえ決めてしまえば即実行できます(AtomのファイルタイプはShift+Ctrl+Lで変更できます!)。その場で簡単に実行するほか、実行環境の設定や、引数を指定して実行する設定も用意されているので、実際にスクリプトが実行される状況を想定しながら書けるのもポイントです。nvmやrbenvを使用している場合にパスがうまく通らない! というときにも有効です。

22git-time-machine

Git管理されているファイルの差分を表示するパッケージです。Xcodeでは対応してないgit-worktreeでも問題なく表示できるので、前の実装と比較したいときにとても助けられているパッケージです。
起動すると、画面の下部分に日付から選択できるUIが表示されるため、おおまかな日付にすぐに移動できます。「具体的な日付はわからないけど、この辺りだった気がする……」というときに、クリックしながら過去にさかのぼれるのがとても楽です(コンフリクトの解消はvim-diff派です)

Atomのコミュニティは今も活発で、多くパッケージが開発されており、最近ではGitHubとの連携も強化されるなど、GitHub製であることを活かしたエディタとなりつつあります。まだまだ改善されるべきポイントも残っていますが、今後の進化に期待できるエディタなのではないでしょうか。

株式会社Emotion Tech

23

www.emotion-tech.co.jp

  • 主な運営サービス:Emotion Tech
  • 回答者:子安輝

まず、私のAtomの用途ですが、開発のコーディングでバリバリ使っているわけではなく(IDE派なので……)、作業ログや、ドキュメントのドラフトなど、ちょっとしたメモを書くのに使っています。ですのでプロジェクト管理とかコンソール連携するような大きなパッケージではなく、便利ツールみたいなものを入れています。

24atom-beautify

テキスト整形のためのパッケージです。改行やインデントがまったくないコードも、きれいに整形してくれます。例えば圧縮されたJSONを読み解くときなど(よくありますよね?w)に便利です。

25regex-railroad-diagram

正規表現を構文図にして見せてくれるパッケージです。少し複雑な正規表現でも、視覚的に捉えられるので断然分かりやすくなります。正規表現を読み書きするときには必須のパッケージだと思います。

26language-plantuml & plantuml-viewer

2つのパッケージをセットで使っています。UMLをテキストで記述できるPlantUMLという書式があるのですが、そのシンタックスハイライトとプレビューができるようになります。テキストで記述しておけばバージョン管理もしやすいですし、PlantUMLに対応したドキュメンテーションツールも増えていますので、ぜひ試してみてほしいです。ただし、plantuml-viewerはGraphvizに依存しているので、別途インストールする必要があります。

27color-picker

名前そのまま、カラーピッカーです。新規で色を選択するのにも重宝しますが、指定されている色から少しだけ明度や色相を変更したいときに、ほかのアプリケーションを立ち上げる必要がないのでとても便利です。RGB(A)やHSL(A)など5つの書式に対応していて、それらを相互に変換できるのも嬉しいですね。

28line-jumper

これも地味な機能なのですが、単純にカーソルを10行ずつジャンプできるようになります。AtomはもともとCtrl+Gで任意の行に移動することができますが、「ちょっとだけ移動したい! でも、1行ずつの移動はだるい!」というニーズに答えるステキなパッケージです。

エン・ジャパン株式会社

29

corp.en-japan.com

  • 主な運営サービス:エン転職engage
  • 回答者:たてぽん(プログラマ)

30file-icons

直感的にファイルの種類が分かるのが便利です。実用性よりも見た目が鮮やかになる所が○。

31highlight-selected

地味に便利です。選択した文字列と同じものがあればハイライトしてくれます。

32minimap

単体だとファイルの構造がざっくりと把握できる程度ですが、コレに付随するパッケージに便利なものがたくさんあります。

33minimap-highlight-selected

前述のハイライトをminimapに表示してくれます。ハイライト自体の問題か、こちらのminimap絡みの問題か、巨大なCSVの頻出単語をセレクトするとAtomが固まりました……。そういった特殊なケースを除けば便利です。

エンジニアHubに会員登録すると
続きをお読みいただけます(無料)。
登録のメリット
  • すべての過去記事を読める
  • 過去のウェビナー動画を
    視聴できる
  • 企業やエージェントから
    スカウトが届く