Atom HTML, CSS, JavaScript開発におすすめのパッケージをご紹介

  • ---

    LINEで送る
  • -

    ブックマーク
  • -

    pocket
  • -

    rss
他言語サイト
翻訳はみつかりませんでした
HTML, CSS, JavaScript image

テキストエディタの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)などの大規模・複雑な開発で使われる。


各ブラウザとそのバージョンが、それぞれの仕様の対応状況を確認することができる。

TC39(Technical Committee 39, 専門委員会39)

ECMAScriptの仕様の策定を行う専門委員会。Ecma InternationalはいろいろなTCを持っているので番号が振られている(ECMAScriptの仕様は39)。

作業中の内容や仕様などはGitHubで公開されていて確認できる。

作業は5ステージに分けて行い、すべてのステージが終了するとEcma Internationalが勧告する。

Strawman - Stage0 - たたき台・試案

どのような仕様を導入するか? 策定作業に入るか? を決める。

Proposal - Stage1 - 提案

仕様の策定作業の枠組みを作ったり、問題点の洗い出しを行う。

Draft - Stage2 - ドラフト(下書き・草案)

JavaScriptを使ってじっさいに書く。プログラミングの書き方を決める。ドキュメントには『正確に』とあるので、あいまいなことは残さない。

Candidate - Stage3 - 候補

一般の開発者にドラフトを公開してフィードバックする。(お試し期間)

Finished - Stage4 - 完了

ECMAScriptの標準に追加できる準備ができている状態。いつでも勧告できることを表す。


各ブラウザは、勧告されるのを待っているわけではなく、独自に先行して導入することもある。その経過は誰でも確認できる

参考:TC39の公式ドキュメント

これもアウトラインでジャンプできますし、 カーソルを変数・関数・定数に合わせると説明が瞬時に出ます。

またプログラム言語なので定義ジャンプもできます。

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はもっとも注目され使われていると言っても過言はないくらいなので、使う機会も多いでしょう。

 

次はlinterを使ったパッケージです。linterは個別にパッケージが必要なのでインストールするパッケージ数がIDEより多くなります。

linterとIDEは共存できません。どちらかを選んで使います。

またIDEと機能が被っています。どちらが優秀とはいえません。

linterを中心に使う

まずは、以前に書いた『全ジャンルで使えるおすすめパッケージのご紹介』にあるIDEじゃないほうのパッケージをインストールします。

linterが中心になります。 そしてHTML, CSS, JavaScriptで必要なパッケージをご紹介します。

さっきもいいましたが、atomのデフォルトパッケージのHTML, CSS, JavaScriptは十分使えます。

好みの部分はなるべく排除して、最低限いるだろうものを集めました。その点はご了承ください。

HTML, CSSに慣れていて、Webで調べながらサクサク書ける人にとってはいらないです。

まだそこまでになっていない人、『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には対応していません。)

まとめ

HTML, CSS, JavaScirptのフロントエンドだけについてご紹介しましたが、Webのサーバーサイドでよく使われるPHPを使うという人は合わせて必要でしょう。

-> PHPのパッケージ

今回はあくまで最低限必要なパッケージだけを紹介させていただきました。

Atomは、パッケージをインストールしすぎると動作が重くなり、使い勝手が悪くなります。

また、便利なパッケージがたくさんあります。インストールのし過ぎには気をつけましょう。

もうひとつ、Atomは同じような機能を持つパッケージがいくつもあります。これらのパッケージはひとつだけ選んでインストールしましょう。

HTML&CSSの本
post-cta-image

どうしてもインターネットで調べて勉強するのが苦手という人のために、HTMLとCSSの最新技術と基本を網羅できる本を2冊選びました。

この内容を身につければ、ほかの本は必要ありません。将来的には、自分の力で、書籍を使わずに、インターネットにある情報だけで学べます。


HTML&CSSの本2選

SNSでも記事を配信しています。
コメントを残す

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

top
この記事を気に入ったらぜひシェアも!!