Corredor

ウェブ、プログラミングの勉強メモ。

js-beautify を使ったコード整形ツールを Angular アプリとして作った

HTML・CSS・SCSS・JavaScript・JSON あたりをサクッと整形してくれるツールが欲しく、かといって色々なオンラインサービスをいちいち開くのもダルいので、希望のツールを自分で作ってみた。

整形には js-beautify という npm パッケージを使っている。

名前は js-beautify だが、CSS と HTML の整形機能も持っているので、3種類の整形ツールが一気に作れたというワケ。「JSON や SCSS にも対応」と書いたが、たまたまイイカンジに整形できているだけで、js-beautify が対応しているとは書いていなかった。

ESLint みたいに各ルールを細かく設定できるワケではないが、「jslint-happy モード」という少し厳格なルールプリセットを適用してくれるモードがあったりする。

テキストの入力欄は [(ngModel)] で、出力欄は readonly 設定したテキストエリアに [value] でバインディング。DoCheck および ngDoCheck() を利用すると、コンポーネント中でバインディングしているデータに変更が入ったタイミングを検知してイベントが発火するので、コレを使って整形テキストを出力している。

import { Component, DoCheck } from '@angular/core';
import * as jsBeautify from 'js-beautify';

@Component({ /* 中略 */ })
export class BeautifierComponent implements DoCheck {
  /** 入力値 */
  public input: string = '';
  /** 出力値 */
  public output: string = '';
  /** 入力値の変更時に整形したテキストを出力する */
  public ngDoCheck(): void {
    // HTML 整形の時は jsBeautify.html()、CSS 整形の時は jsBeautify.css() を使う
    this.output = jsBeautify.js(this.input, { /* js-beautify 設定 */ });
  }
}

3画面ともほぼこのような作りなので、jsBeautify の関数名 (jshtmlcss のいずれか) と整形オプションを @Input で渡せる、共通コンポーネントを作って実装した。

試した限りだと、js-beautify は上手く変換できないテキストを渡しても例外を投げたりはしないようなので、try / catch などは用意していない。

コレでとりあえず欲しいモノができた。簡単簡単。

本当によくわかるJavaScriptの教科書 はじめての人も、挫折した人も、基礎力が必ず身に付く

本当によくわかるJavaScriptの教科書 はじめての人も、挫折した人も、基礎力が必ず身に付く