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, JavaScriptについてはほとんどパッケージを導入していませんし、とくに不満を感じることもありません。

(ぼくがHTML, CSSを勉強し始めたのは15年以上前(2003年くらい)です。それぐらいのキャリアの『不満がない』です。これから勉強しようという人からしたら当たり前じゃないことを当たり前にしていることもあります。)

ただしIDEを使う場合は別です。IDEはプログラム開発に必要なものが高機能なものとして提供されています。もちろん、HTML, CSS, JavaScript用のIDEパッケージもあります。

IDEは高機能なので、HTML, CSS, JavaScriptのIDEパッケージを入れないと急に物足りなさを感じます。

(とくに入力補完、ヘルプ系)

そこで今回は、IDE用のパッケージとIDE以外のとき、ここではlinterのパッケージをご紹介します。

linterのほうはお好みでという感じです。

IDE(統合開発環境)を使う

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

くり返しになりますが、atom-ide-uiが最低限必要です。そして、HTML, CSS, JavaScriptはひとつずつ、そのほかJavaScriptフレームワーク、JSON、JavaScriptフレームワークのデバッガなどのIDEパッケージがあります。

ide-html

https://atom.io/packages/ide-html

atom-ide-uiのHTMLパックです。ide-htmlはatom公式ではなくサードパティ製パッケージです。

HTMLタグにカーソルを合わせるとタグの説明が瞬時に表示されます。ただし英語でなので英語が苦手な人にはいらないかも。

しかし、アウトラインにHTMLのタグの階層が表示されて、クリックすると自分の見たい場所、編集したい場所にカーソルがジャンプできるので、これだけでも使う価値はあります。

英語が苦手だとしても入れておくことを推します。

Web開発では、いつか必ず英語サイトを読まなければならないときが来ます。そのための準備にもなりますし、英語が読めなくても全体から分かることもあります。

あとからご紹介するCSS, JavaScriptについても同じです。

ide-css

https://atom.io/packages/ide-css

atom-ide-uiのCSSパックです。ide-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 + 変数・関数・定数クリック)。

あれ?これなんだったっけ?というものが瞬時に確認できるので便利です。

ide-typescriptは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

2大JavaScriptフレームワークのひとつであるReactのデバッガです。ReactはFacebook社が開発しました。

そりゃあ、ありますよね?という感じです。IDEもFacebookが開発したものですから。

ReactはいまのJavaScriptフレームワークでもっとも注目され使われていると言っても過言はないくらいなので、使う機会も多いでしょう。


次は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は同じような機能を持つパッケージがいくつもあります。これらのパッケージは1つに限定してインストールするようにしましょう。

HTML&CSSの本
post-cta-image

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

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


HTML&CSSの本2選

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

*

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

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