ツイート
シェア
LINEで送る
B! はてぶでブックマーク
Pocketでブックマーク
RSSフィード

Atom, プログラム言語に関係なく使えるおすすめのパッケージ

atom image
イラストダウンロードサイト【イラストAC】
の画像をもとに加工しています。

テキストエディタのAtomでおすすめのパッケージをご紹介します。今回は、プログラム言語に関係なく共通で使えるパッケージです。

よっぽどこれを超えるほどいいパッケージが出ないかぎり、開発をやめてしまわないかぎり長く使えるので、ここから検討しましょう。

全ジャンル共通でおすすめするAtomのパッケージ

Atomエディタのパッケージは、各プログラム言語や用途によって便利なパッケージが用意されています。

atomでは、大きく分けてふたつの方法があります。

  • IDE(統合開発環境)を使う
  • linterを使う

一般的なのはこの2つです。ほかにも方法があるのかもしれませんが、情報が多く探すだけでも疲れます。

ここでもこの2つを中心に進めていきます。また、全ジャンル共通で使えるパッケージがたくさんあり、プログラム言語のタイプに関係なく使えるものもたくさんあります。

それらを用途別にまとめましたのでいくつかご紹介します。

IDE(開発統合環境)

まずはじめにおすすめするのは、atomの開発統合環境(IDE, Integrated Development Environment)です。

もともとFacebook社が開発していた高機能IDEのなかから最低限の機能を取り出してまとめたものです。

atomの公式プラグインです。

atom-ide-ui(https://atom.io/packages/atom-ide-ui)

メリット

  • プログラム開発に必要な機能がパッケージ化されているので、パッケージを探す手間がはぶける。
  • どのプログラム言語でもパッケージのインストール作業はほぼ同じ。
  • プログラム開発をすぐにはじめることができる。
  • 初心者・開発環境にこだわりがない人向け。

デメリット

  • 内部のlinterがWordPressに対応していない。
  • それぞれの機能でもっと便利なパッケージがあることもある。
  • 同じような機能のパッケージは共存できないことがある。linterと共存できない(有名なパッケージです)。
  • もっといい環境を求めると不満になる。
  • 自分に合う開発環境を作りたい人向け。

atom-ide-uiは、それだけではIDEとして不完全です。それぞれのプログラム言語専用のプラグインのインストールが必要です。

atom-IDEの基本機能は豊富で、これに加えてデバッガ、コンパイラもあります。

正直ほかに必要なものはないくらいです。atom-IDEについては前にくわしく書いているのでそちらを参照して下さい。

だから最初におすすめします。

これからatom-IDE以外のいろいろなパッケージを紹介しますが、atom-ide-uiの基本機能と被ることが多いです。紹介しながら被っていることを言っていきます。

no image person
いやいや。オレはオレの環境を作るんだ!

という人は参考にしてください。また、IDEの補完機能として使えることもあるのでそのあたりを参考にしてください。

  • IDEを使うなら、とりあえずatom-ide-uiとide-***をインストールするだけで開発がはじめられる。
  • のこりの機能は必要になったときに入れていく。

ぼくは、以前は自分でプラグインを集めて使っていましたが、IDEに変えました。

『基本はIDE + 不足分をほかのプラグイン』という使い方をしています。

atom-IDEはWordPressに対応していません。ぼくはWordPressのPHP開発のときだけはlinter+αの環境に切り替えています。

プログラミング

ここ10年くらいでしょうか? プログラムの開発では自動化が急激に進みました。

  • コードの自動チェック
  • ツールを使ったテストの自動化
  • 開発統合環境(Eclipseなど)の充実
  • etc…

まだこのような環境が整備されていないころ、単純なテキストエディタでひたすらプログラミングしていたころを懐かしく思います。その反面、二度とあの環境では作業したくないとも思います。

個人的な感想はさておき、これらの便利な機能は、Atomエディタでもパッケージとして用意されています。

ここでは5つご紹介します。

linter

https://atom.io/packages/linter

プログラムの静的コードチェックを行うツールです。静的コードチェックは、プログラムがルールに従って書かれているかをチェックします。

linterはこれだけで使えません。各プログラム言語専用のlinterパッケージのインストールが別に必要です。

linter-php, linter-pythonなどがあります。

linterはインストールしてパッケージの設定を行うだけで、ツールが自動的に実行されます。

コーディングミスがあれば、赤い下線が表示され、エラーの内容が、エディタの下に表示されるウィンドウにリストで表示されます。

これでコーディングミスを気にせずにプログラミングに集中できます。

WordPress環境構築の記事で、linterの動作のキャプチャがあります。ぜひ見てみてください。

IDEと共存できません。どちらかを使うことになります。IDEのCode Actions、Diagnosticsと同じ機能です。

ほんの10数年前まで、コンパイルしたり、実際にプログラムを実行してみないとミスがわかりませんでした。

そのため当時のプログラマは、コーディングミスをせずに正確に速く書く能力が必要でした。もちろん、プログラムのルールのほとんどは頭に入っています。

静的コードチェックは、その間違いをコーディングの段階で自動で指摘してくれる、登場したときは感動すらしたツールです。今ではなれてしまってその感動は忘れてしまいましたが...

おかげでプログラマは、プログラムのルールを完璧に覚える必要はなく、うろ覚えで書き始めることもできるようになりました。

linter-ui-default

https://atom.io/packages/linter-ui-default

linterの補完パッケージで、静的コードチェックの結果を下の方にリストで表示します。

補完パッケージなのでlinterが必要です。もちろんatom-IDEとは共存できません。

atom-beautify

https://atom.io/packages/atom-beautify

プログラムコードを整形するパッケージです。

プログラムの整形は、読みやすい書きやすいプログラムを作成するときに必ず必要です。

縮小化されたHTML, CSS, JavaScriptのプログラムを復元するのに使うこともできます。

このように、プログラムの整形はとても重要です。しかし、手作業で行うのはとても面倒で、サボってしまったり、後回しにして結局しない人も多いのではないでしょうか?

このパッケージは、プログラムの整形を自動で実行してくれます。メニューから選択するだけで実行できます。また、主要なプログラム言語に対応しています。

プログラミングのエディタとして使う場合はインストールすることをおすすめします。

atom-beautifyの紹介ページの一文を抜粋します。

Beautify HTML, CSS, JavaScript, PHP, Python, Ruby, Java, C, C++, C#, Objective-C, CoffeeScript, TypeScript, Coldfusion, SQL, and more in Atom

IDEを使う人は不要です。Code Formatで十分です。

symbols-tree-view

https://atom.io/packages/symbols-tree-view

開いているファイル内の関数、変数などのツリービューを右側に表示します。

宣言先へジャンプすることもできます。プログラミングをする人には必須パッケージでしょう。

IDEのOutlineと同じ機能で不要ですが、PHPの場合、IDEのOutlineが正常に動作しません。IDEの補完機能として使っています。

goto-definition

https://atom.io/packages/goto-definition

関数や定数の定義しているところにジャンプします。開いているファイルも含めプロジェクト内のファイルすべてにジャンプできます。

IDEを使う人は不要です。Definitions (plus Hyperclick)と同じです。

tag

https://atom.io/packages/tag

htmlやxmlなどのマークアップ言語のタグの終端を自動入力するパッケージです。

IDEにはないので補完機能として使っています。

入力補完

プログラミングを行うとき、入力補完は作業効率上、外せない機能です。

何かの文字を1つ入力するごとに、メソッドやクラス名、タグなど、使うであろう入力候補がリストで表示され、選択することができます。

『俺にはそんなものは必要ない !』という強者の方もいるかもしれませんが、ほとんどの方はあったら使いたくなる機能でしょう。

ここでは2つご紹介します。

autocomplete-paths

https://atom.io/packages/autocomplete-paths

皆さんは、プログラムのコーディングで相対パスを指定するとき、"../" の入力を繰り返していて、どの階層にいるのか分からなくなることはありませんか?

autocomplete-pathsは相対パスの入力補完をしてくれるパッケージです。相対パスを記述しているときに入力候補を自動的に表示してくれます。

必須でインストールすることをおすすめします。

IDEにはautocomplete機能があるのですが、動いているような気がしません。とりあえず補完機能として使っています。

color-picker

https://atom.io/packages/color-picker

rgbなど色指定を行うときに直感的に色を選択するピッカーを表示します。

IDEにはありません。補完機能として使っています。

ターミナルエディタ

vim-mode-plus

https://atom.io/packages/vim-mode-plus

テキスト編集をvimコマンドで操作するパッケージです。頻繁にサーバーで作業を行う人にとっては便利なパッケージです。

vim-mode-plus-ex-mode

https://atom.io/packages/vim-mode-plus-ex-mode

vim-mode-plusの拡張機能パッケージです。:w, :qなど、vimのコマンドモードが使用できます。一括置換もできます。

IDEにはvimコマンドはありません。補完機能として使っています。

UI(見える化で分かりやすくする)

これから紹介するパッケージは、プログラミングを行う上で絶対に必要なものではありません。

Atomエディタのビューツリーを見やすくしたり、カーソルをハイライト表示するなど、視覚的に作業しやすくするパッケージです。

5つご紹介します。

file-icons

https://atom.io/packages/file-icons

ビューツリーやタブで、ファイルの拡張子のちがいをアイコンで表現します。

一見デザインとしての見栄えの良さのためのパッケージに思います。しかし、開発作業をするとき、アイコンを見ただけでファイルの種類が判断できることは作業効率が上がります。

必ずインストールすべきとは言いませんが僕は使っています。

IDEにはありません。補完機能として使っています。

highlight-line

https://atom.io/packages/highlight-line

いまカーソルがある行をハイライト表示する(目立つように表示する)パッケージです。

地味ですが便利なプラグインです。集中してプログラミングをする人にはおすすめです。

IDEを使う人は不要です。同じ機能があります。

highlight-selected

https://atom.io/packages/highlight-selected

選択したテキスト文字列と同じ文字列をハイライト表示するパッケージです。

これも地味ですが、プログラミングでは変数を使うので、スペル間違いを一目で確認できます。

IDEを使う人は不要です。Code Highlightと同じ機能です。

minimap

https://atom.io/packages/minimap

テキストエリアの右端にミニマップを表示します。カーソル移動では大きすぎる移動に便利です。

IDEにはないものなので補完機能として使っています。

minimap-autohide

https://atom.io/packages/minimap-autohide

ミニマップは移動先の選択時以外はあまり使い道がありません。そのためにミニマップを自動的に非表示にするパッケージです。

このパッケージは、マウスのスクロールが止まると非表示になります。そして、スクロールされているとき表示されます。

まとめ

今回はあくまで最低限必要なパッケージだけを紹介させていただきました。大きく分けると2つのパターンに分かれることもご紹介しました。

  • IDEを使う
  • IDE以外の個々のパッケージを集める(linterが中心)

今回ご紹介したパッケージでいえば、

IDE
https://atom.io/packages/atom-ide-ui
ide-***
IDE以外(linter中心)https://atom.io/packages/linter
https://atom.io/packages/linter-ui-default
https://atom.io/packages/atom-beautify
https://atom.io/packages/goto-definition
https://atom.io/packages/highlight-line
https://atom.io/packages/highlight-selected

のどちらかを選び、IDEとそれ以外どちらを選んでも使うパッケージは

https://atom.io/packages/symbols-tree-view
https://atom.io/packages/tag
https://atom.io/packages/autocomplete-paths
https://atom.io/packages/color-picker
https://atom.io/packages/file-icons

です。あとはお好みで、

https://atom.io/packages/vim-mode-plus
https://atom.io/packages/vim-mode-plus-ex-mode
https://atom.io/packages/minimap
https://atom.io/packages/minimap-autohide

などをつかいます。

Atomはパッケージをインストールしすぎると動作が重くなり使い勝手が悪くなります。

便利なパッケージはたくさんありますので、同じような機能のプラグインはひとつにきめるべきです。

インストールのし過ぎには気をつけましょう。

ご紹介したもののほかに、Atom上でプログラムを実行する環境が必要な方もいると思います。

しかしこれは個人の好みですが、Windowsならコマンドプロンプト(かPower Shell)、Macならターミナルをひとつ起動するだけで済むことなのであえて紹介から外しました。

また本格的な実行環境が必要なら、バーチャル環境(Virtual Boxなど)を別に用意する方が断然良いです。

あくまで個人の意見ですが、これらより優秀なatomのパッケージは今のところ見つかっていません。

迷うならとりあえずIDEを使いましょう。IDE以外の機能が必要になるのはそれなりに分かっている人なので、気にすることはありません。

最低限の設定として環境変数のPATHは設定しておきましょう。

java, php, pythonでは必要です。node.jsを使うときはnpmコマンドなどの設定が必要になります。

ide-phpやlinter-phpなどのパッケージではsettingsでパスの設定ができます。ほかのコマンドを使うパッケージも同じです。

でもいちいち設定するのもめんどうなのでPATHに追加したほうがいいです。

(これらのパスのデフォルト設定はPATHの値を使います。)

前の投稿
Atom, おすすめパッケージのまとめ。プログラム言語別から共通で使えるものまで。
AtomでHTML, CSS, JavaScript開発。おすすめのパッケージ。
次の投稿
コメントを残す

*