JavaScript整形ツールでできること
複数人で書いたコード、フォーラムからコピーしたコード、圧縮されたバンドルから取り出したコードは読みにくいものです。行ごとにスペースの入れ方が違い、長いメソッドチェーンは画面からはみ出し、入れ子のコールバックは形が崩れます。フォーマッターはひとつのルールに沿ってコードのレイアウトを書き直すので、コードが何をしているかに集中できます。
このページでは、広く使われているオープンソースのコードフォーマッター Prettier 3 をブラウザで直接動かしています。JavaScript パーサーは最初に整形したときにだけダウンロードされ、コードがページの外に出ることはありません。
使い方
- 左のボックスに JavaScript または JSX を貼り付けます。貼り付けるとすぐに整形されます。
- または ファイルを開く で
.jsファイルを読み込むか、サンプル で例を表示します。 - オプションを選びます：
- インデント：スペース2つ、スペース4つ、タブ。
- 行の幅：折り返すまでの文字数を 80、100、120、160 から選びます。
- 末尾のカンマ：すべて、ES5、なし。
- シングルクォート：
"text"の代わりに'text'を使います。 - セミコロン：オンにすると文末にセミコロンを付け、オフにすると安全な場所ではセミコロンを取り除きます。
- 整形 または Ctrl+Enter を押します。
- コピー を押すか、ダウンロード で
.jsファイルとして保存します。
一度実行すると、その後は入力に合わせて出力が更新され、オプションを変えるとすぐに整形し直されます。
整形前と整形後
圧縮された入力です。
const total=items=>items.filter(i=>i.qty>0).reduce((sum,{price,qty})=>sum+price*qty,0);async function load(url){const res=await fetch(url);if(!res.ok){throw new Error('Request failed: '+res.status)}return res.json()}初期設定のまま 整形 した結果です。
const total = (items) =>
items
.filter((i) => i.qty > 0)
.reduce((sum, { price, qty }) => sum + price * qty, 0);
async function load(url) {
const res = await fetch(url);
if (!res.ok) {
throw new Error("Request failed: " + res.status);
}
return res.json();
}アロー関数の引数にかっこが付き、メソッドチェーンは 80 文字に収まらないので1行に1呼び出しずつ分割され、シングルクォートはダブルクォートに変わっています。行の幅 を 100 にすると、同じチェーンが1行に収まります。
const total = (items) =>
items.filter((i) => i.qty > 0).reduce((sum, { price, qty }) => sum + price * qty, 0);クォート、セミコロン、末尾のカンマ
チーム内でスタイルが議論になりやすい点は、ほとんどこの3つのオプションで決められます。
シングルクォート をオン、セミコロン をオフにした場合：
const name = 'Ada'
let list = [1, 2, 3]末尾のカンマ は、複数行にわたる配列やオブジェクトの最後の要素にカンマを付けるかどうかを決めます。Prettier の初期設定である「すべて」の場合：
const user = {
firstName: "Ada",
lastName: "Lovelace",
email: "[email protected]",
role: "admin",
};「なし」にすると、"admin" の後のカンマが消えます。末尾のカンマがあると、要素を追加したときに変わるのが1行だけになるので、差分が見やすくなります。「ES5」は配列とオブジェクトには付けますが、関数の引数には付けません。かなり古い実行環境向けの設定です。
JSX
React コンポーネントも整形できます。
const App = () => (
<div className="app">
<h1>Hello</h1>
<p>{name}</p>
</div>
);構文エラー
コードを解析できない場合、フォーマッターは処理を止めてエラーの場所を知らせます。カンマが抜けたオブジェクトの例です。
const a = {
b: 1
c: 2
};このときのメッセージは 3行目、3列目：Unexpected token, expected "," です。入力欄で表示 を押すと、その場所へ移動します。閉じ波かっこが抜けた関数では 3行目、1列目：Unexpected token と表示されます。これは、パーサーが } を期待していた入力の末尾を指しています。
このツールはコードを実行せず、リントも行いません。使われていない変数、間違った関数名、ロジックのミスは報告されません。
ヒント
- オプションは一度チームで決めて、プロジェクトの
.prettierrcファイルに書いておきましょう。エディタでもこのページでも同じ結果になります。 - 見慣れないコードを読む前に整形してみてください。構造どおりのレイアウトになるので、入れ子のミスが見つけやすくなります。
- 型注釈のあるコードには TypeScript整形ツール を使ってください。JavaScript パーサーは最初の
: stringで止まってしまいます。 - コードではなくデータを扱うなら、より厳密で検証もできる JSON整形ツール が向いています。
JavaScriptを整形するほかの方法
- VS Code：「ドキュメントのフォーマット」（Windows は Shift+Alt+F、macOS は Shift+Option+F）。このページと同じ結果にするには、Prettier 拡張機能を入れて既定のフォーマッターに設定します。
- コマンドライン：
npx prettier --write src/app.js。CI ではnpx prettier --check .を使うと、整形されていないファイルがあるときにビルドを失敗させられます。 - ブラウザの開発者ツール：「ソース」パネルの整形表示ボタンを使うと、デバッグ中に圧縮されたスクリプトを読みやすくできます。
HTML ページ内のスクリプトは、HTML整形ツール でマークアップと一緒に整形できます。