テキストエディタのAtomでHTML, CSS, JavaScriptを開発するのにおすすめのパッケージをご紹介します。
大きく分けて『IDEを使う』『linterを使う』の2つの方法があります。標準で付いているものでも必要十分で、それを使うのもあり。
HTML, CSS, JavaScriptは標準で十分
Atomエディタは、HTML, CSS, JavaScript開発の最低限の機能を標準でもっています。
ぼく自身、これらについてはほとんどパッケージを導入していませんし、とくに不満を感じることもありません。
ぼくがHTML, CSSの勉強をはじめたのは2003年です。そのキャリアの『不満がない』です。
これから勉強する人からしたら、不満が出るかもしれません。
ただし、IDEの場合は別です。
IDEは高機能で、もちろん、HTML, CSS, JavaScriptのパッケージもあります。
IDEでは、HTML, CSS, JavaScriptのパッケージを入れないと急に物足りなくなります。
（とくに入力補完、ヘルプ系）
そこで今回は、IDE用のパッケージとIDE以外、ここではlinterのパッケージをご紹介します。
linterはお好みでという感じです。
IDE（統合開発環境）を使う
まず、以前に書いたIDEで使うパッケージをインストールします。
くり返しになりますが、atom-ide-uiが最低限必要です。
HTML, CSS, JavaScriptはひとつずつ、そのほか、JavaScriptフレームワークとデバッガ、JSONなどのIDEパッケージがあります。
ide-html
https://atom.io/packages/ide-html
atom-ide-uiのHTMLパックです。atom公式ではなくサードパーティ製。
HTMLタグにカーソルを合わせると、タグの説明が瞬時に表示されます。ただし英語なので苦手な人にはいらないかも。
しかし、アウトラインにHTMLのタグの階層が表示されます。
クリックすると、自分の見たい・編集したい場所にカーソルがジャンプできるので、これだけでも使う価値はあります。
英語が苦手だとしても入れたほうがいいです。
Web開発では、必ず英語サイトを読まなければならないときがきます。そのための準備にもなりますし、英語が読めなくても全体から分かることもあります。
あとから紹介するCSS, JavaScriptについても同じです。
ide-css
https://atom.io/packages/ide-css
atom-ide-uiのCSSパックです。atom公式ではなくサードパティ製。
HTMLと同じように、CSSプロパティにカーソルを合わせると説明が瞬時に表示されます。ただし英語。これも同じ。
これも、アウトラインにCSSのセレクタの階層が表示されて、カーソルのジャンプができます。
LESS, Saas(SCSS)にも対応しているところがいいです。CSSまわりはこのパッケージひとつで十分です。
Sass(Scss), LESSはCSSの拡張仕様です。プログラムのような処理が書けて、結果に.cssファイルを出力します。
プロパティのグループ化、処理分岐・繰り返し（if, for）ができるので、同じ記述を繰り返し書く必要がありません。
いまのWeb開発では、CSSファイルを直接編集しなくなりつつあります。
LESS, Saasのとき、瞬時に表示される説明には変換後のcssが表示されます。
ぼくはこの機能を使いたくてインストールしています。
ide-typescript
https://atom.io/packages/ide-typescript
atom-ide-uiのJavaScriptパックはありません。
しかし、JavaScriptと同じ祖先（ECMAScript）をもつtypescriptのパックで代用できます。
説明でもJavaScriptが使えると言っています。
ECMAScript（エクマスクリプト）
JavaScriptの仕様のこと。Ecma International（エクマ・インターナショナル）がJavaScriptの書き方を決めている（仕様の策定・勧告）。
実質的な策定作業はTC39が行い、それに基づいてEcma Internationalが勧告する。勧告されると『ES20**（年代）』という名称がつけられる。
Ecma Internationalは、もともとヨーロッパの電子通信に関する標準化団体なので、JavaScriptだけを扱っているわけではない。
ES2015（ES6）
2015年に策定された第6版のこと。JavaScriptの従来の書き方から大幅に改善されたので、インターネット上の情報も多い。
ES2015から1年ごとに仕様を勧告することになったので、公式の名称では版数を使うのをやめた。（ES6は昔の言い方の名残り。正式なドキュメントには書いてある。）
ES6という呼び方は、変化の過渡期なので許されているだけ。
ES2016
2016年に勧告された仕様。ES7という表現が見られるが、ES2016のほうが分かりやすいのでES6ほど一般的じゃない。
ES5
2015年に大幅な変更が行われる前のJavaScriptの仕様。第5版。2009年に勧告。現在、どんなに古いバージョンのブラウザでも動かすことができる基準になっている。
JavaScriptのトランスパイルが簡単にできるようになったので、すべてのブラウザに対応できるJavaScriptの呼び方として使われる。
（トランスパイルは別のバージョンのJavaScriptのプログラムに変換すること。）
ESNext
次世代のJavaScriptの仕様のこと。まだ勧告されていなくてTC39で策定中の仕様のことを指す。
すべてのブラウザが対応していないES2015以降を指して使っていることも多い。
トランスパイルが簡単になったので、Reactなどのフレームワークや、Node.jsのプラグイン開発など、ESNextでプログラミングすることが当たり前になっている。
次世代の仕様なので、短くかんたんに書けることも多く、SPA（Single Page Application）などの大規模・複雑な開発で使われる。
もちろん、Nextの範囲はES20**がリリースされるごとに変わる。その状況は下記リンクにある。
TC39（Technical Committee 39, 専門委員会39）
ECMAScriptの仕様の策定を行う専門委員会。Ecma InternationalはいろいろなTCを持っているので番号が振られている（ECMAScriptの仕様は39）。
作業中の内容や仕様などはGitHubで公開されていて確認できる。
作業は5ステージに分けて行い、すべてのステージが終了するとEcma Internationalが勧告する。
| Stage 0 | Strawman たたき台・試案 | どんな仕様を導入するか？ 策定作業に 入るか？ を決める。 |
| Stage 1 | Proposal 提案 | 仕様の策定作業の枠組みを作ったり問 題点の洗い出しを行う。 |
| Stage 2 | Draft 下書き・草案 | JavaScriptでじっさいに書く。 プログラミングの書き方を決める。 ドキュメントには『正確に』とあるの で、あいまいなことは残さない。 |
| Stage 3 | Candidate 候補 | 一般の開発者にドラフトを公開してフ ィードバックする。 （お試し期間） |
| Stage 4 | Finished 完了 | ECMAScriptの標準に追加できる準備 ができている状態。 いつでも勧告できることを表す。 |
各ブラウザは、勧告されるのを待っているわけではなく、独自に先行して導入することもある。その経過は誰でも確認できる。
これもアウトラインでジャンプできますし、 カーソルを変数・関数・定数に合わせると説明が瞬時に出ます。
またプログラム言語なので定義ジャンプもできます。
Ctrl + 変数・関数・定数クリック
あれ？これなんだったっけ？というものが瞬時に確認できるので便利です。
atom公式のパッケージです。
ide-json
https://atom.io/packages/ide-json
jsonは、いまやデータ転送の構文としていろんなところで使われますが、もともとはJavaScriptのオブジェクトのために作られたデータ構文です。
json = JavaScript Object Notation
json-ideはそのatom-ide-uiのjsonパックでatom公式のパッケージです。
これもアウトラインでジャンプできます。
atom-ide-vue
https://github.com/rwatts3/atom-ide-vue
JavaScriptのフレームワークVue.jsのIDEパックです。Vue.jsで開発する人は入れたほうがいいです。
このパッケージにはatomのlanguage-vueパッケージのインストールが必要です。
https://atom.io/packages/language-vue
IDEのデバッガ
atom-IDEには、JavaScriptフレームワークのデバッガが2つあります。IDEはもともとFacebook社が開発したものなので、それが反映されています。
Facebook社内で使っていたものをそのまま出した感じがします。
atom-ide-debugger-node
https://atom.io/packages/atom-ide-debugger-node
Node.jsのデバッガです。Facebook社にかぎらずWeb開発では必ず使うフレームワークです。
いまのJavaScriptのプログラムは、Node.jsのパッケージ管理から出ていると言っていいほど、たくさんの、そしてよく使われ信頼できるものがたくさんあります。
Node.jsを使うときは入れときましょう。
atom-ide-debugger-react-native
https://atom.io/packages/atom-ide-debugger-react-native
JavaScriptフレームワーク・Reactのデバッガです。
Reactは有名なフレームワークのひとつで、Facebook社が開発しました。
そりゃあ、ありますよね？という感じです。IDEもFacebookが開発したんですから。
Reactはもっとも注目され使われていると言っても過言はないくらいなので、使う機会も多いでしょう。
正確にはReactはJavaScriptのパッケージです。しかし、フレームワークのひとつとして見られることも多い。
次はlinterを使ったパッケージです。linterは個別にパッケージが必要なのでインストールするパッケージ数がIDEより多くなります。
linterとIDEは共存できません。どちらか選んで使います。
またIDEと機能が被っています。どちらが優秀とはいえません。
linterを中心に使う
まずは、以前に書いたIDEじゃないほうのパッケージをインストールします。
linterをベースに、HTML, CSS, JavaScriptで必要なパッケージをご紹介します。
さっきもいいましたが、atomのデフォルトパッケージのHTML, CSS, JavaScriptは十分使えます。
好みの部分はなるべく排除して、最低限いるだろうものを集めました。その点はご了承ください。
HTML, CSSに慣れていて、Webで調べながらサクサク書ける人にとってはいらないです。
まだそこまでになっていない人、『linterにしたい！』という人のためにご紹介します。
linterはそれだけでは意味がありません。それぞれの拡張パッケージが必要です。
JavaScriptには『これ！』というlinterはありません。
linter-htmlhint
https://atom.io/packages/linter-htmlhint
linterのHTML拡張パッケージです。
linter-sass-lint
https://atom.io/packages/linter-sass-lint
linterのSass(SCSS)拡張パッケージです。静的コードチェックを行います。
（LESSには対応していません。）
おまけ
IDEとlinterどちらでも共存できるパッケージです。
おまけなのでお好みでという感じです。
atom-html-preview
https://atom.io/packages/atom-html-preview
HTMLのプレビューを開いて、じっさいのページの確認ができます。
HTMLのソースコードを開いて、
Ctrl + Shift + h
のキーを押すとプレビュー画面が表示されます。
いまのWebの開発では、HTMLをゴリゴリ書くのがめっきり減りました。そうなるとあまり必要ありません。
ぼくも使ってますが、かんたんなHTMLのサンプルコードを見るときぐらいです。
まとめ
HTML, CSS, JavaScirptのフロントエンドだけについてご紹介しましたが、Webのサーバーサイドでよく使われるPHPを使うという人もいるでしょう。
今回は、あくまで最低限必要なパッケージを紹介させていただきました。
Atomは、パッケージをインストールしすぎると動作が重くなり、使い勝手が悪くなります。
また、便利なパッケージがたくさんあります。インストールのし過ぎには気をつけましょう。
もうひとつ、Atomは同じような機能のパッケージがいくつもあります。ひとつだけ選んでインストールしましょう。
