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

AtomをIDE(開発統合環境)に変身させる

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

テキストエディタのAtomをIDE(開発統合環境)にする方法です。まぁパッケージをインストールするだけなのでそんなにむずかしくはありません。

ほかのプログラム開発環境を作るのに比べればインストールするパッケージ数も少ないです。

IDE(開発統合環境)とは

IDE(Integrated Development Environment)はプログラム開発に必要な機能を備えたテキストエディタのことです。

  • 入力補完
  • 定義ジャンプ
  • ヘルプ機能
  • デバッガ
  • コンパイラ

などがあります。Gitの操作やローカルサーバなどを持ったものもあります。

これだけあれば、プログラム開発をひとつのテキストエディタでスムーズにできます。

AtomにもIDEパッケージがあります。もともとFacebook社が開発していた高機能IDEのなかから最低限の機能を取り出してまとめたものです。

atomの公式パッケージです。

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

メリット

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

デメリット

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

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

ide-***という名前で配布されています。

(***はプログラム言語名)

パッケージのインストール画面で、"ide-"と検索入力すると出てくるので迷うことはありません。

React.jsやVue.jsなどのフレームワーク、Node.jsなどのパッケージもあります。

atom-ide-uiの基本機能

Busy Signal
atomに何かが起きているときにステータスバー(下の部分)に表示する。
(そんなにいらない。)
Code Actions
プログラムの診断機能。
プログラムを書いていて、間違っていると瞬時に何が悪いのかメッセージが出る。
左の行のところにエラーマークが表示される。
Code Format
プログラムのフォーマット整形。
プログラムを選択して右クリックメニューで実行すると一発で整形する
Code Highlight
変数やfunction、定数にカーソルを合わせると他の同じものがハイライト表示(目立つように表示)される。
(変数のスペル間違いなどに便利。)
Console
プログラムの実行結果などを表示するコンソール。
Datatips
変数やfunctionや定数にマウスを合わせると説明が表示される。
・functionやクラスなどは説明コメントを表示
・変数、定数の場合は値を代入した式を表示
※ コメントの書き方のルールを守っていないとただしく表示されない。
(javaならjavadoc)
Definitions (plus Hyperclick)
定義ジャンプ(Ctrl+クリック)。
変数や定数、functionやクラスの宣言しているところにジャンプ。
ファイルがちがう場合はそのファイルを開く。
(このクラスなんだったっけ?というときにすぐに確認できる。)
Definition jump (Ctrl+click).

Jump to the place where the variable, constant, function or class is declared.

If the file is not the same, open the file.

(You can quickly check what this class is again. You can quickly check if you know what the class is.
Diagnostics
プログラムの診断機能。
バグの内容を下のウィンドウに表示する。
(バグの場所も表示。)
Find References
変数やfunction、クラスにカーソルを合わせて右クリックメニューで実行すると、宣言した場所、使っているところが下のウィンドウに表示される。
(定義ジャンプする前に使うとよい。ジャンプする必要がないくらい内容が分かることもある。)
Outline
開いているファイルのクラス、function、変数などのリストが右側に表示される。
クリックすると定義されているところへジャンプする。
(ファイル内の定義ジャンプ。)
Signature Help (Experimental/WIP)入力補完。
文字列を入力すると、変数やfunction、クラスなどの候補が瞬時に表示されて全部を入力する必要がない。
(スペル間違いも防げる。)

これだけの基本機能があります。これに加えてデバッガ、コンパイラもあるので、正直ほかに必要なものはないくらい。

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

プログラム言語パック

atom-IDEは、atom-ide-uiだけでは意味がありません。このパッケージは、どのプログラム言語でも使える共通機能だけをまとめたものだからです。

PHP, Java, Pythonなどのプログラム言語で使うには、それぞれの言語パックをインストールする必要があります。

  • 言語パックの名前はide-***
  • atom公式とコミュニティー開発のサードパーティ製がある。

atom公式パッケージ

C#Omnisharpをベースに作成
FlowFacebook製
Java Eclipse JDTをベースに作成
JSONVSCode JSON language serverをベースに作成
TypeScriptTypeScript serverをベースに作成
姉妹言語のJavaScriptも使える

主要言語がないじゃないか!

と思うかもしれませんが、もともとFacebook製なので偏りがあります。そこはご愛嬌で。

でも、それぞれのベースになっているのは、もともと広く使われているツールがベースになっています。機能が足りないことはありません。

JavaはEclipse JDTがベースっていうのがいいですね?

EclipseはIBMが作ったIDEで、Java開発でこれに勝てるものはありません。Eclipse JDTはその中核パッケージです。

コミュニティパッケージ - サードパーティ製

公式で足りないものはサードパーティ製で補います。公式サイトでも紹介されているので信頼性は高いです。

BashMac, Linuxで採用されているシェルコマンド。
Docker一番注目されているOSの仮想化技術。PCの中にいくつもの仮想PCを作る。
Fortran科学技術分野で20年以上使われる老舗のプログラム言語。
Haskell-hie数学的なものや科学技術で使われる。
並列処理が得意。
アカデミックな分野で使われることが多いのでくわしくは知らない。
PHP『WebといえばPHP』というくらいWeb屋にとってはおなじみのプログラム言語。
PowershellWindowsでも採用されるシェルコマンド。
Python近年もっとも急成長、普及したプログラム言語のひとつ。
AIのパッケージが豊富。
PHPに代わってWebでも使われてきている。
Reasonよく分からない。海外では使われているらしいが日本ではどうなんだろう?
Rust上に同じ。
ScalaJavaの実行環境で動作できるので、Javaを書きやすく読みやすくしたプログラム言語の位置づけ。
Javaも進化してシンプルなコードになっていっているので、『Javaでいいじゃん!』と思われているところがある。
Vue最近のJavaScriptフレームワークの中で、Anglar, Reactと並ぶほど急成長、注目される。
Vue.js。
中国版Anglarのかんじ。
Anglarよりシンプルでわかりやすいといわれる。

???と思った人もいるかもしれません。

主要言語がまだまだ足りないからです。C, C++, Swiftなどないですね?マイクロソフトの言語もありません。

さすがにライバル会社が推しているものは大人の事情があって、紹介できないのかも。

主要言語のパックは、パッケージのインストールの検索(ide-***)で見つかります。

atom-IDEの言語パックは、公式、公式が認めたコミュニティー、その他のサードパーティで、大概のプログラム言語はそろっています。

デバッガ

デバッガの基本機能

atom-IDEにはデバッグ機能もあります。言語パックと同じようにatom-ide-uiには基本機能しか入っていないので個別にパッケージをインストールします。

Launch/Attach UIランチャー、アタッチのUI。デバッグの起動設定。
Breakpoints + conditionalブレークポイント。プログラムを止めるところをソースの左側をクリックするだけでマークをつける。
Stepping (Pause, Continue, Step, Restart)プログラムの実行・一時停止・再開・停止などの操作をボタンを押すだけで行う。
Threads (Running, Focus)スレッドの状態を表示。マルチスレッドのデバッグで使う。PHPなどのシングルスレッドではいらない。
Stacktraces & in-memory source viewsスタックトレース。メモリ状態表示。
プログラムがどのファイルのどの部分を実行しているのかを表示。
プログラムのメモリ使用量を表示。
メモリリークなどの調査に使う。
Scopes & editable variables views
変数の値を表示。見たい変数を追加するなどの編集機能もある。
(デバッグエンジンが対応している場合)
Watch expressions変数の値を見る。変数を追加したり、値を変更・削除することもできる。
Scopes & editable variables viewsとちょっと被る。
Console + Replプログラムの標準出力を表示するコンソール。

個別のデバッガパック

Node DebuggerNode.jsのデバッガ。atom非公式のfacebook製。
Python DebuggerPythonのデバッガ。atom非公式のfacebook製。
React Native DebuggerReactのデバッガ。atom非公式のfacebook製。
C/C++ GDB DebuggerC/C++デバッガ。atom非公式のfacebook製。
OCaml Debuggerプログラム言語MLのデバッガ。atom非公式のfacebook製。

個別のデバッガは、いまのところすべてfacebook製です。atomの公式になっていません。

なのでfacebook色がすごいです。facebook社内ではこれらの言語・フレームワークを中心に開発しているんでしょうね?

Reactはfacebookが開発したJavaScriptのライブラリです。これからもfacebook色がみえます。

Javaのデバッガはありません。このように主要言語でも専用デバッガはないときがあります。

Javaについては、Eclipse JDTをもとに言語パックを作っていると言っているので、基本機能だけでいけるのかもしれません。

このあたりは一度試してください。なければ、ほかにもデバッガパッケージがあるのでそれを使うのもありです。

ただしatom-IDEとの相性もあるので、やってみてどうなの?の部分があります。

まとめ

atom-IDEはいろいろな機能があるのにパッケージのインストール数は少ないです。

  • atom-ide-ui
  • ide-***の言語パック
  • デバッガ
  • 足りない部分はide以外のパッケージ

プログラム開発の初心者は、いろいろな機能を使いこなせないので、atom-IDE(+ debugger)で十分です。

atomにはいろいろな高機能のパッケージがたくさんあるので、探すのがむずかしい、めんどうだという人におススメです。

ぼくは、atomでプログラム開発する人には最初にatom-IDEを推します。

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください