この記事では、コードエディターAtomで使えるパッケージを紹介します。このパッケージを使うと、タイプしながら変更点をプレビューしたり（特にWebサイト開発向け）、エディターからコンソールやIDEに移動せずにコードをコンパイルして実行したりできます。また、メリットについても記しました。
参考：ショートカットのCtrl|Cmdは、Windowsなら「コントロール」キー、OS Xなら「コマンド」キーを指します。
変更点のライブビジュアライズ
プログラムのコーディングからビジュアライズ（結果確認）へと移動するのは時間のムダなだけでなく、認知のロスを伴います。つまり、タスクの切り替えにより集中力と精神力が失われるため、生産性が低下するのです（『The High Cost of Multitasking: 40% of Productivity Lost by Task Switching』『The True Cost Of Multi-Tasking』参照）。
一方、プログラミングした結果をすぐに確認でき、タイプした内容がすぐに反映される（可能な場合）なら、タスクやアプリケーションを切り替える必要がなくなり、プログラミングとビジュアライズ、デバッグの大部分が単一のタスクでできるので、作業時間を減らし集中力を維持できるようになります。
これから、キーストローク1つでビジュアライズをオン・オフできるコミュニティーパッケージを紹介します。エディットとビュー、つまりすべてをAtomで完結できます。
Webサイト開発
Webサイト開発向けにデザインされたコードエディターであるBracketsとは異なり、AtomにはHTMLやCSSのプレビュー機能が備わっていません。AtomがElectronをベースに開発されていることを考えると不思議です。なぜなら、ElectronはChromium（Google Chromeブラウザーのオープンソースプロジェクト）をエンジンに取り込んでいるフレームワークだからです。
とはいえ、Atomは「ハッキング」できるので、紹介するパッケージを使えば、HTMLやCSSのプレビュー機能をエディターに追加できます。
■Atom HTML Preview
Atom HTML Previewは、HTMLドキュメントをタイプすると、その結果を反映したプレビューを即座を表示します。CSSやJavaScriptにも対応しています。現代のWebサイト開発では基本的なものですが、多くの開発者が利用しています。シンプルで軽量なパッケージで、期待に応えてくれます。
インストールは、次のようになります。
apm install atom-html-preview
■Browser Plus
Browser PlusはAtomのタブでブラウザーを立ち上げられるパッケージで、手軽にデバッグできるDeveloper Toolも同梱されています。
カミナリのアイコンをクリックすると、ライブプレビューが使えます。ただし、変更を反映するには編集しているファイルを保存（Ctrl|Cmd+S）する必要があります。タイプしたものがすぐに反映される「hyper」ライブプレビュー、JSP、PHP、Express、Djangoやほかの言語やフレームワークのプレビューを使うには、コンパニオンパッケージPreview Plus（PP）をインストールしてください。
インストールは、次のようになります。
apm install browser-plus
「hyper」プレビューやほかのフレームワーク対応版のインストールは、次のようになります。
apm install pp
■Bootstrap 3のAtom対応
具体的な話に入りますが、Bootstrap 3 Support for Atomを使うと、Webサイト開発向けのTwitterのフレームワークBootstrapに対応できます。先に紹介したAtom HTML Previewと一緒に使うこともでき、次のような特徴があります。
- JavaScript、CSS、HTMLのヘルパークラスすべてのオートコンプリート機能
- コンポーネントすべてがスニペットに対応
- Glyphicons、Fontawesome、Octiconsのオートコンプリート機能
インストールは、次のようになります。
apm install atom-bootstrap3
■Preview for Atom
先ほど述べたとおり、現代のWebサイト開発はHTMLやCSS、JavaScriptファイルの編集だけにとどまりません。ごく普通に、LessやSassのようなプリプロセッサーを使ってスタイルシートを作成し、TypeScriptやCoffeeScript、その派生言語でコーディングして、JavaScriptにコンパイルします。こうしたツールを使うデメリットは、最終的なコードのビジュアライズやデバッグが複雑になることです。フレームワークやFacebookのReactのようなライブラリーを多用していると、JavaScriptのテキストコードをハイライトしてもなんの解決にもなりません。
Preview for Atomは、このような問題を解決できるとても広範なパッケージで、ソースコードをコンパイルされた形式（すなわち、実際の最終的なコード）でプレビューできます。
次の言語、フレームワーク、ライブラリーに対応しています。
- CoffeeScript
- Literate CoffeeScript
- Less
- Jade
- DogeScript
- TypeScript
- Stylus
- DSON
- React (JSX)
- EmberScript
- ng-classify
- LiveScript
また近いうちに、Sass、Markdown、Haml、ClojureScript、Dartに対応する予定です。
搭載されている機能は次のようになります。
- 別のタブでコンパイルされたソースコードのプレビュー
- プレビューの即時更新
- 読み込みとエラーのメッセージを表示
- タブ遷移で更新
- アクティブなAtomeテーマを使ってハイライト
- デフォルトのプレビューレンダーを手動で変更
- SpacePen viewのライブプレビュー
インストールは、次のようになります。
apm install preview
Markdown
Markdownはプレーンテキストを使ってリッチテキストを作成する軽量のマークアップ言語で、人間も簡単に読解できるので、あとでHTMLとして表示されるREAD MEファイルやオンラインフォーラムのメッセージを記述するのに使われます。
■Markdown Preview
AtomにはREAD MEファイルやオンラインフォーラムのメッセージなどのファイルを編集しビジュアライズする機能が標準で搭載されています。この機能はMarkdown Previewパッケージのもので、インストール不要です。拡張子が.mdのファイルはMarkdownの文法に従って自動的にハイライトされます。プレビュータブの表示を切り替えるには、デフォルトのショートカットCtrl|Cmd+Shift+Mを使います。
標準搭載のためインストールの必要はありません。
■Markdown Preview Plus
Markdown Preview Plus（MPP）は、先のパッケージのコミュニティー拡張機能で、次のような追加機能を備えています。
- プレビューを開く：Ctrl|Cmd+Shift+Mショートカットと同機能
- LaTeXのレンダリング方程式：GitHub風のMarkdownの文法を方程式のブロックで拡張
- Pandoc対応：カスタムpandoc引数の定義や引用の置換への対応を含む追加機能
- オンデマンド同期：Markdownソースエディターの位置とプレビューを必要時に同期
インストールは、次のようになります。
apm install markdown-preview-plus
インタープリタのコードやコンパイルされたコードの実行
Scriptはシンプルな名前の拡張機能ですが、特化したIDEに一般的に搭載されていてテストとデバッグの時間を短くできます。基本的には、PHPやPythonのようなインタープリタのコードやC、Javaなどのコンパイルされたコードを実行でき、結果を編集中のコードのすぐ右に表示されるAtom内の別ウィンドウで確認できます。さらに、ほとんどの言語で、コーディングしているファイル全体または選択部分（テキストの一部を選択した場合）を実行、またはコンパイル後に実行できます。
Scriptにはたくさんのショートカットが備わっており、実行（コンパイルの設定あり／なし、オプションあり）、プロセスを停止、アウトプットビューを閉じる、つまりすべてを2、3のキーボード入力でできます。アウトプットのタイミングはスクリプトやプログラムの実行にかかる時間に応じて最適化できます。
コンパイル時か実行時に置換される{FILE_ACTIVE}や{PROJECT_PATH}のようなタグを渡す便利な機能もあります。
驚くことに、インストールは多くのAtomパッケージと同じくシンプルです。必要なインタープリタやコンパイラーが環境変数PATHに設定されていることを確認するだけです。
次のように、多くの言語とコンパイラーに対応しています。
1C（BSL）、Ansible、AutoHotKey、AppleScript、Babel ES6 JS、Bash、Batch、Behat Feature、BuckleScript、C、C#、C# Script、C++、Clojure、CoffeeScript（normalとliterate）、Crystal、Cucumber（Gherkin）、D、Dart、DOT（Graphviz）、Elixir、Erlang、F#、F*、Fish、Forth（GForth経由）、Fortran（gfortran経由）、Gnuplot、Go、Groovy、Haskell（normalとliterate）、Hy、IcedCoffeeScript、Inno Setup、ioLanguage、Java、JavaScript、JavaScript for Automation（JXA）、Jolie、Julia、Kotlin、LaTeX（latexmk経由）、LilyPond、Lisp（SBCL経由）、LiveScript、Lua（normalとWoW）、Makefile、MATLAB、MIPS、MongoDB、MoonScript、NCL、newLISP、Nim（NimScriptを含む）、NSIS、Objective-C、OCaml、Octave、Oz、Pandoc Markdown、Perl、Perl 6、PHP、PostgreSQL、PowerShell、Processing、Prolog、Python、R、Racket、RANT、Reason、Ren’Py、RSpec、Ruby、Ruby on 、Rails、Rust、Sage、Sass／SCSS、Scala、Scheme、Shell Script、Standard ML、Stata、Swift、Tcl、TypeScript、Zsh
Scriptを実行すると次の図のようになります。
インストールは、次のようになります。
apm install script
次にすること
どのコードエディターであっても、エディターを使いこなすことは熟練プログラマーに欠かせないもので、劇的に生産性を高めてくれます。まだ使っていなければ、ショートカットに慣れたり、何回も繰り返している操作を簡単に実行できないかGoogleで検索したりしてください。もしAtomのようにハッキングできるエディターを使っているなら、パッケージを検索をしてください。また、もし長い目で見て時間の節約になりそうなら、自分でパッケージを書いてみることも検討するとよいでしょう。
Atomに関するSitePointのおすすめの記事は以下です。
- 便利すぎて笑った！Atomの爆速コーディング技を海外エンジニアに教わった
- How To Develop a Package for GitHub’s Atom Code Editor
- 10 Essential Atom Add-ons
Atomの公式リソースは以下です。
- コマンドパレット（ショートカット）：Ctrl|Cmd+Shift+P
- Atom Flight Manual
- Atom Packages
- Atom Blog
この記事ではとても便利な7つのアドオンを紹介しました。
（原文：7 Atom Add-ons for Running Code and Previewing Changes）
［翻訳：内藤夏樹／編集：Livit］
