Atomがめっちゃ便利に! Web制作者が絶対入れたいプレビュー系アドオン7選

2016/12/26

Lucero del Alba

399

Articles in this issue reproduced from SitePoint
Copyright © 2016, All rights reserved. SitePoint Pty Ltd. www.sitepoint.com. Translation copyright © 2016, KADOKAWA ASCII Research Laboratories, Inc. Japanese syndication rights arranged with SitePoint Pty Ltd, Collingwood, Victoria,Australia through Tuttle-Mori Agency, Inc., Tokyo

人気エディターAtomをもっと使いやすく、生産性を高めるパッケージの紹介です。プレビュー周りの機能を強化して、コーディングの効率をアップしましょう。

この記事では、コードエディター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ファイルの編集だけにとどまりません。ごく普通に、LessSassのようなプリプロセッサーを使ってスタイルシートを作成し、TypeScriptCoffeeScript、その派生言語でコーディングして、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の公式リソースは以下です。

この記事ではとても便利な7つのアドオンを紹介しました。

(原文:7 Atom Add-ons for Running Code and Previewing Changes

[翻訳:内藤夏樹/編集:Livit

Copyright © 2016, Lucero del Alba All Rights Reserved.

Lucero del Alba

Lucero del Alba

Pythonやデータサイエンス、DevOpsに詳しいプログラマー兼起業家です。アルゼンチン、ブエノスアイレス出身。言語(人と話すときに使う)とダンスが大好きなミュージシャンです。

Loading...