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

Atomは、「A hackable text editor for the 21st Century」と公式のコピーにあるように、21世紀に誕生した新しいエディタで、アーキテクチャも新しくて魅力的なものになっています。

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

みなさんお久しぶりです、再びエンジニアHubに帰ってきました大竹智也(@tomoyaton)です。前回はEmacsの記事1をお届けしましたが、今回はAtomというエディタの記事をお届けします(次はVimかもしれませんね)

Atomは、WebエンジニアにはおなじみのGitHubが開発しているテキストエディタです。公式のコピーに「A hackable text editor for the 21st Century」とあるように、21世紀に誕生した新しいエディタです。そのため、Atom自身のアーキテクチャもこれまでのエディタと異なり、新しくて魅力的なものになっています。

Atomとの出会い

1

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

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

gihyo.jp

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

Atomを支える技術

2

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

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

3

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

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

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

設定パネルでできること

4

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

項目 詳細
Core Atom本体の基本的な設定を行う。
Editor 編集機能や画面表示に関する共通の設定を行う。
Keybindings Atomに登録されているショートカットをすべて確認する。
Packages Atomにインストールされているパッケージを管理できる。パッケージを選択すると、パッケージ固有の設定が行える。
Themes Atomにインストールされているテーマを管理できる。テーマを選択すると、テーマ固有の設定が行える。
Updates インストールされているパッケージやテーマの更新の確認と実行が行える。
Install パッケージやテーマの検索とインストールが行える。

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

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

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

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

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