JavaScriptを綺麗に整えたい

web

作業効率を求めてコードを書く場合、どうしてもスピードが優先になってしまうのでインデント(コードを見やすくするための字下げ)がおろそかになりがちです。

これはJavaScriptに限らず、HTMLもCSSもそうだと思います。

几帳面というか神経質なコーダーはちょくちょくこのインデントやら改行やらを作業のあいだにちょくちょくやっているようなのでコードは綺麗です。

が、はっきり言って作業が遅いですね。

じゃあ早い人はどうかって言うと、最後にまとめて整えています。

それでこの整える方法なのですが、もちろん個人の好みがあるので、好み通りにしたいなら手作業でどうぞなのですが、効率優先ならツールを使うと超効率的です。

このツールは幾つか種類があるのですが、いろいろ使い比べてみてこれが一番良かったです。

Online JavaScript beautifier

使い方は簡単で、整えたいコードをコピーして、中央の入力エリア内にペースト、そして「Beautify JavaScript or HTML(ctrl-enter)」の部分をクリックか、あるいは「ctrl」+「enter」を押すと整えられた状態のコードとなるので、それをまたコピーして元に戻すという感じです。

JavaScriptの整え系のツールだとこれが一番良かったです。ちなみにHTMLも同時に整えられるののですが、私はこのツールはJavaScript用としてのみ使用してます。

HTML/CSSを整える場合は?

私の場合はDreamWeaverを使ってます。

dw

整えたいファイルが開いている状態で、

コマンド > ソースフォーマットの適用 をクリック

これでソースコードが整えられます。これはHTML/CSSの両方とも有効です。

DreamWeaver上でできるので作業の流れの中で出来るのでこれならちょくちょく整えても作業効率は落ちないです。むしろこまめに整えられるから、コードが常に読みやすい状態なので効率はむしろ良い場合もあります。

でもこのDreamWeaverの残念なところはJavaScriptにはこれが効かないのです。なので先程のツールを併用しているってわけです。

あと残念なのがコメントも効かない。ちなみにここで言う「効かない」というのは整えてくれないということです。そしてその部分だけですので、全体的には効きますよ。

ということで、ソースコード上のJavaScript部分、コメント部分に関しては最初に書いていた状態のままで整えられないので、ここは別ツールなり手動なりでやらないといけないです。

全部やってくれればいいのにね(=‘X‘=)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">