JavaScriptを綺麗に整えたい

JavaScriptを綺麗に整えたい

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

これはJavaScriptに限らず、HTMLもCSSも同様のことが言えます。

コードの読みやすさを意識して小刻みにコードを整形するのは非効率ですので、こう言った場合は最後(あるいは目標とするところ)までコードを書ききって、まとめて整形するのが効率的です。

世の中にはいくつかコード整形のサービスがありますが、私自身が使い比べてみて最も使いやすいと思ったのはこちらです。

 

Online JavaScript beautifier

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

HTML/CSSを整える場合は?

先ほど紹介したツールですが、私の場合はJavaScriptのためだけに使用しておりまして、HTMLとCSSに対してはDreamWeaverの標準機能を使ってます。

dw

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

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

これでソースコードが整えられます。これはHTML/CSSのいずれにも有効です。

これならばコードを書きながら、さほど作業の手を止めなくても整形できるので効率が落ちません。むしろ乱れてしまったコードが整形されるので、作業効率がUPするとも思います。

しかしDreamWeaverは残念なことに、HTML文書中のJavaScriptは整形してくれません。整形してくれるのはHTMLとCSSのみでして、JavaScriptは自分が書いた状態のまま維持されます。

テストとしてDreamweaver上簡単なコードを書いてみました。

そして先ほどの「ソースフォーマットの適用」を実行します。

コードが短いのでさほどの変化は感じませんが、よく見てみると上部のHTMLとCSSの箇所は整形されていますが、下部のJavaScript部分はそのままであることが分かります。

このJavaScriptも整形したい場合、方法は2つあります。1つ目は最初に紹介したツールを使用すること、もう1つはDreamweaverで整形する方法です。

上述しました通り、DreamweaverはHTML文書中のJavaScriptは整形してくれませんが、JavaScript単体であれば整形してくれます。

つまりどういうことかというと、

まずは「Command + N」などで「JavaScript」ファイルの新規ドキュメントを作成します。

そして、作成したドキュメントにScript部分だけをコピー&ペースとします。
※この際に先頭の<script>と最後の</script>のタグはコピーしません。

つまり、上記の部分のみをコピーするということです。

そして同様に「ソースフォーマットの適用」を実行します。

するとこのようにJavaScriptとして適切なインデントが適用されました。

ただ、今回のテスト用コードは最初の行の「$(window).load(function () {」をコードが乱れたように見せるため、わざとインデントをつけていたため、この位置が基準として整形されてしまったようです。

最初の行はインデントなしの左付きが望ましいので、この場合は私がよくやる方法としては、一旦コード全体をインデント無しの完全左付け状態にしてから再度「ソースフォーマットの適用」を実行するという方法です。

「Command + A」でコード全体を選択します。

この状態で「Shif + tab(→|)」のキーを何度か押してコード全体を左付状態にします。

この状態になったら、もう一度「ソースフォーマットの適用」を実行します。

するとこの通り、最初の行は左付きで、これを基準として綺麗に整形できました。

このコードをコピーし、最初のドキュメントのところに戻せば、HTMLもCSSもJavaScriptも整形されたドキュメントとなります。

もちろんこの方法でも面倒ではありますが、今のところ有効な手段としてはこれくらいしかなさそうです。

JavaScriptカテゴリの最新記事