アーキテクチャから新しい！ 初めてのエディタには、21世紀生まれの「Atom」がおすすめ【続・若手エンジニア向けエディタ実践入門】

Atomは2014年にパブリックベータ版、2015年にバーション1.0がリリースされました。当時の私はEmacs本を執筆していたこともあり、いまいち食指が伸びませんでしたが「AtomはWebベースのエディタらしい」という噂を聞いてから少し興味を持ちました。

いざ試しにインストールしてみると、Chromeと同じBlinkを使ってHTMLとCSSで描画されているにも関わらず、まぎれもないデスクトップアプリケーションでした。Web上で動くエディタではないのです。この事実を目の当たりにした私は、まさに21世紀を名乗るのにふさわしいエディタだと感心してしまい、一気にAtomの魅力に取り憑かれた結果、気付けば本を執筆してしまいました（笑）。

gihyo.jp

強い興味を持ったものは「とりあえず本が書けるようになるくらいまで学習してしまおう」というのが私の学習メソッドですが、これが私とAtomの出会いでした。

Atomを支える技術

Atomは、WebブラウザのオープンソースプロジェクトChromiumと、JavaScriptのサーバーサイド実行環境Node.jsを組み合わせて作られた、Electronというフレームワークの上で動作しています。ElectronはもともとAtom Coreと呼ばれ、Atomを開発するために作られたフレームワークだったのですが、正式リリース前にElectronと名付けられ、独立したオープンソースプロジェクトとしてスピンオフされました。

Webアプリケーションと似たアーキテクチャで動作するAtom

Atomのアーキテクチャは、フロントエンドをいわゆるSPA（Single-page application）と同じくHTML、CSS、JavaScriptによって作られています。そして、Atom APIを通じてバックエンドのNode.jsと繋がっています。

このように、Atomは現在主流となっているWebアプリケーションと似たアーキテクチャによって動作しています。Atomが登場するまで、エディタのような激しいI/Oを持つアプリケーションをこのアーキテクチャで動作させようと考える人は、ほとんどいなかったことでしょう。しかし、Atomは見事そんな常識を打ち破り、デスクトップアプリケーションの常識を覆しました。

いまでは、Atom同様このアーキテクチャによって多くのデスクトップアプリケーションが開発されています。この一点に限っても、Atomは現在のソフトウェアエンジニアリングに大きな革新をもたらしたと言えるでしょう。

Atomの特徴的な6つの機能

公式サイトでは、Atomの特徴的な機能として次の6つを挙げています。

1. クロスプラットフォーム

Atomはクロスプラットフォームで動作します。WindowsでもLinuxでもMacでも使えます。

2. パッケージマネージャ

パッケージ検索、インストール、そして作成まで、すべてAtomの中から行えます。

3. 自動補完

柔軟で賢い自動補完が、コーディング速度を向上してくれます。

4. ファイルブラウザ

ファイルブラウザからプロジェクトの中のファイルをひとつのウィンドウで扱えます。

5. マルチペイン（画面分割）

Atomの画面を分割して、同時に複数のファイルを比較したり編集したりできます。

6. 検索と編集

ファイル、およびプロジェクトに対して、文字入力にあわせてプレビューしながら検索および置換ができます。

こんな人にAtomを薦めたい

Atomは、HTML、CSS、JavaScript、Markdown、C、Ruby、Python、Perl、PHPなど、標準で30以上の代表的な言語のインデックスやシンタックスハイライトをサポートしています。

標準機能だけでも非常に多機能です。スニペットや自動補完のほか、行末にある不要な空白文字を自動削除する、Gitのブランチを切り替える、GitHubページを開く、マルチカーソル機能……など。

そのため「プログラムを書いたことがないし、エディタもよくわらない」という人であっても、インストールするだけですぐに便利に使いはじめることができます。なので、初めてのエディタを探している人や、特にエディタの設定などを考えずにプログラミングをはじめたい人には、まさにぴったりのエディタだと思います。

また、JavaScript（CoffeeScriptやTypeScriptも含む）で機能が拡張できるため、自由にエディタを拡張してみたいという人にもおすすめです。ただし、Atomは前述の通りWeb技術によって動作しているため、Webエンジニアリングに関する知識がない人にとってはデバッグが難しいと感じるかもしれません。

使ってみよう！ まずは画面の説明から

ここからは、Atomの具体的な使い方を紹介していきます。標準的な機能を解説した後、パッケージによる拡張を紹介していきますので、ぜひ楽しみにしていてください。

具体的なAtomの使い方の前に、Atomの画面について簡単に説明します。

※環境：macOS 10.11.6 (El Capitan)、 Atom 1.15.0-dev-96111f47e

ウィンドウ・ペイン・ツリービュー

Atomの画面には、Chromeブラウザのようなタブバーがあります。上の図は、AtomでGit管理しているプロジェクトのファイルを開いたときの画像です。左側がスクリーンショットで、その上にそれぞれのUIの説明を記述したものが右側の図になります。

Atomはファイルを開くと、ウィンドウの左にツリービューという専用のファイルブラウザが表示されます。こちらのファイル名をクリックすると、ファイルが開かれてAtomに表示されます。このファイルが表示されている場所をAtomではペインと呼び、自由に分割してウィンドウ内にいくつも並べられます。

ウィンドウの最下部にはAtomのさまざまな情報が表示されるステータスバーがあります。こちらに表示されている情報をクリックすると、それぞれが提供する機能を使うことができるので、ぜひ試してみてください。

設定パネルでできること

Atomメニューの「Preferences…」を選択、あるいはキーボードショートカットの⌘+,（コマンドキー+コンマ）を実行すると、設定パネルが開きます。このパネルからAtomのさまざまな設定が可能です。左のメニュー項目をそれぞれ簡単に説明していきます。

Atomには、5,000を超えるパッケージによって機能を追加でき、パッケージのインストールはこの設定パネルから行います（ターミナルからコマンドを実行する方法も用意されています）。

よりよいデフォルトの設定を提供してくれているため、特に変更の必要はないかもしれませんが、Atomを起動したら最初に確認してみるとよいでしょう。

基本編～これだけはマスターすべき操作

それでは、いよいよAtomの実際の使い方を解説していきます。

プロジェクトを開く

まずはファイルの開き方です。といっても、基本的にはファイルを開くだけですが、Atomには、プロジェクトという概念があります。こちらを意識しておくと、とても便利にファイルの編集が行えるようになるため、ここで解説しておきます。

Atomからファイルを開く場合は、「File」メニューの「Open…」を選択します。すると、OSの標準ダイアログが表示されます。こちらからファイルを選択すればよいのですが、このとき、ファイルではなくディレクトリを開くことができます。

ディレクトリを開くと何が起こるのかというと、そのディレクトリをルートディレクトリとみなして、Atomのウィンドウが作成されツリービューが表示されます。この特定のディレクトリを起点としたウィンドウを、Atomではプロジェクトと呼びます。

Atomでは、一度開いたプロジェクトを記録し、次に開いたときはタブやカーソル位置の状態などを復元したり、プロジェクトをスコープとしてさまざまな機能を利用できます。代表的な機能は次の通りです。

• タブやペインの状態、カーソル位置など作業環境を復元できる
• ウィンドウ内のファイルのみを対象にタブを切り替えることができる
• プロジェクト内のファイルのみを対象に絞り込み検索で開くことができる
• プロジェクト内のファイルのテキストのみを対象に検索・置換ができる
• プロジェクト内のタグジャンプが利用できる
• Gitを利用して変更状態などの情報をエディタに反映できる
• さまざまな外部ツールと連携を行うことができる

「File」メニューの「Reopen Project」に過去に開かれたプロジェクトが記録されるので、頻繁に利用するプロジェクトはこちらからすぐに開くことが可能です。なお、記録されるプロジェクトの個数は「Core」設定の「Reopen Project Menu Count」から変更できます（初期値は15）。

ファイルを開く、タブを切り替える、Fuzzy Finderを使いこなす

プロジェクトを開いた状態のAtomでファイルを開いたり、タブを切り替えたりしてみましょう。

最も簡単な方法はツリービューからファイルをクリックして開く方法ですが、ディレクトリが深くなり、ファイルの数が増えてきた場合は、目的のファイルを見つけるまでに時間がかかってしまいます。そんなとき役に立つのが標準機能のひとつ、Fuzzy Finderです。

⌘+pもしくは⌘+tを実行すると、Fuzzy FinderのFile Finder（上図）が起動します。Fuzzy Finderでは、文字列をタイプするとファイル絞り込みが行われ、上下カーソルで選択します。そしてエンターを押すと、選択したファイルがまだAtomで開かれていなければファイルを開き、既に開かれている場合はタブを切り替えます。

慣れるまでついついツリービューを使ってしまうかもしれませんが、Fuzzy Finderに慣れると素早くファイルを切り替えられるようになります。これからAtomを使い続けていくのであれば、ぜひ覚えていきましょう。

検索する・置換する

次は、Atomでテキストの検索と置換を行ってみましょう。ファイルを開いた状態で、⌘+fを実行すると、ウィンドウ下部に検索パネルが表示されます。

検索パネルの「Find in current buffer」と書かれたインプットボックスに検索したい文字列を入力すると、リアルタイムに検索が行われ、検索にマッチする箇所がハイライトされます。検索中に⌘+gを実行すると、上から順に検索でマッチしている箇所へとカーソルが移動します。そして、⌘+G（shift + g）を実行すると、今度は下から上へとカーソルが移動します。

置換を行う場合は、検索後に続けて「Replace in current buffer」と書かれたインプットボックスに置換したい文字列を入力しましょう。「Replace」ボタンを押すとカーソルのある場所のテキストが置換され、次にマッチする文字列へとカーソルが移動します。もしすべて置換しても問題なければ「Replace All」ボタンを押します。

もうひとつの便利な検索機能、プロジェクト検索も紹介しておきます。

⌘+F（shift + f）を実行すると、先ほどの検索パネルによく似たプロジェクト検索パネルが開きます。

こちらは、現在ツリービューで表示されているファイルすべてを対象として検索を行います。ファイル数が多い場合のために、ディレクトリやファイルの種類を指定することもできます。

検索後は置換も行えますが、こちらはファイル検索と違ってひとつひとつ確認して置換することはできません。そのため、置換を行う場合は、よく確認してから行いましょう。

実践編～パッケージを活用する

ここからは、Atomの持つ基本機能ではなく、世界中の開発者によって作られたパッケージのインストール方法とその機能について解説していきます。すべてのパッケージは紹介しきれないため、JavaScriptによる開発を快適にするパッケージを中心に紹介していきます。

パッケージのインストール

パッケージのインストールは設定パネルから検索して行います。一例として、language-babelというパッケージをインストールしてみましょう。

まずは設定パネルのインストールメニューを選択した状態で「Search packages」と書かれたインプットボックスに「babel」と入力してエンターを実行、あるいは「Packages」ボタンを押します。しばらくすると、左側の図のようにlanguage-babelパッケージが画面に表示されるので、「Install」ボタンを押してインストールします。

インストールが完了すると、「Install」ボタンが右図のように「Settings」「Uninstall」「Disable」ボタンへと表示が変わります。

インストールしたパッケージはすぐに利用できますので、気になるパッケージはどんどんインストールしてみましょう。もし気に入らなければ、「Uninstall」あるいは「Disable」を実行しましょう。

JavaScript開発を快適にする4つのパッケージ

JavaScript開発が快適になる、おすすめのパッケージを解説していきます。

language-babelパッケージ

こちらは、JavaScriptの文法サポートを強化するパッケージです。Atomは標準でJavaScriptの文法をサポートしていますが、language-babelは、最新のJavaScriptの文法や、Facebookが開発しているライブラリReactの構文をサポートしています。

同様のパッケージにreactがありますが、language-babelはパッケージ固有の設定に、ESLintのルールに応じて自動的にJSXのインデントを行ってくれる「Auto Indent JSX」という設定項目が用意されており、たいへん便利なので、私はこちらを利用しています。

linterパッケージ：linter-eslintとlinter-jsonlin

編集中のコードをリアルタイムで文法チェッカ（Lint）に通し、エラーをわかりやすく表示してくれるlinterというパッケージがあります。このパッケージはLintの種類に応じてプラグインパッケージが用意されていており、ひとつでもプラグインをインストールすると自動的にインストールされるようになっています。

パッケージ固有の設定からエラー表示を細かく制御できますので、気になる人はチェックしてみるとよいでしょう。

JavaScriptの開発を行う人は、ESLintを使ってチェックが行えるようになるlinter-eslintをぜひインストールしましょう。ESLintがリポジトリにインストールされていれば、リアルタイムでエラーや警告を表示してくれます。

linter-eslintは、標準でリポジトリにインストールされたESLintを利用するようになっていますが、パッケージ固有の設定の「Use global ESLint installation」オプションからグローバルにインストールされたESLintを利用するように変更可能です。

また、ファイルを保存したタイミングでESLintの自動修正機能を実行する「Fix errors on save」オプションが用意されています。便利なので特に問題なければ有効化しておくとよいでしょう。

ついでにlinter-jsonlintもインストールしておきましょう。JSONを手で書くことはあまりないかもしれませんが、もし編集したときのために入れておくとよいでしょう。

minimapパッケージ

minimapはペインの右側に編集中のファイルの縮図を表示してくれるパッケージです。ファイル全体を俯瞰して確認できるようになります。

このminimapはプラグインを組み合わせることによって、より便利になります。例えば、Gitの差分をハイライトするminimap-git-diffや、Linterのエラー箇所をハイライトするminimap-linterなどがあります。

これらのパッケージを組み合わせることで、変更箇所やエラー箇所がより見つけやすくなります。

pigmentsパッケージ

pigmentsはさまざまカラーコードの文字列に対応する色の背景色を付けてくれるパッケージです。こちらを利用すると、カラーコードの文字列を見るだけで、どのような色か判別できるようになります。また、先ほど紹介したminimap用にminimap-pigmentsというプラグインも用意されています。

pigmentsは、カラーコードを色付けするだけのパッケージではありません。カラーコードを相互変換する機能も用意されており、右クリックメニューの「Pigments」から「Convert to RGB」などのメニューを選択することで、16進数からRGBなどへの変換が可能となっています。

おわりに

ここまで駆け足でAtomの基本的な機能を解説してきましたが、いかがでしたでしょうか？

Atomは正式リリースからまだ2年も経っていない歳の若いエディタですが、GitHubを中心としたエコシステムによって、多くの開発者やプロジェクトを巻きこんで急成長を遂げており、将来が非常に楽しみです。

また、Atomから誕生したElectronは、Web技術によるクロスプラットフォームアプリケーションという、これまでにないアプリケーション開発手法を確立しました。そのため、単なるエディタとしての機能や使い勝手だけでなく、Atomを支える技術自体も開発者にとってたいへん勉強になります。

そんなAtomの内部技術については、私の著書Atom実践入門（2016年、技術評論社）で詳しく解説していますので、興味をもった方はぜひ一読してみてください。もちろん、Atomの使い方やパッケージについても、しっかり解説しています。

これから開発者として長くキャリアを続けていかれる読者にとって、エディタは長い付き合いとなるソフトウェアです。そのため、もし時間がありましたら、一度時間を作って、エディタについてしっかりと学習しておくと、今後の開発人生の大きな手助けになるかと思います。この記事がきっかけとなり、これからのエンジニアライフがよりよいものになることを願っています。

執筆者

大竹智也

1983年生まれ。起業家、およびフロントエンドからバックエンドまで幅広くカバーするWebエンジニア。兵庫県立明石高等学校卒業後、フリーターとして働きながら独学でWeb技術を習得する。2010年にオンライン英会話「ラングリッチ」を起業。2015年に「EnglishCentral」への売却を果たす。現在は、語学学校サウスピークに居候しつつ、次に向けて準備中。著書に『Emacs実践入門』と『Atom実践入門』（共に技術評論社）があり、エディタ本による三冠王を目指している。

編集：薄井千春（ZINE）