Coding Methodology
フレームワークなしでテンプレートリテラル内のhtmlをいい感じの見た目にする
2022 / 08 / 31
ウェブコンポーネント、Fetch API 等ブラウザ標準の API が発達してきたことに伴い、javascript フレームワークを使用せずとも少ない記述で高度な表現が可能となってきました。
ただ、フレームワークを使用せず javascript から html を挿入するためにテンプレートリテラルを使用すると、エディター上ではただの文字列となってしまい、「見通し悪く、補完・フォーマットが効かない」状態で作業しづらくなりがちです。
実はちょっとした工夫で javascript のテンプレートリテラルを html ファイル上での操作感に近付けることができます。
javascript(typescript)内で快適にマークアップするための VS code と npm ライブラリーの設定をいくつかご紹介します。
SyntaxHighlight を効かせる(VS code)
各種フレームワークを使用する場合、搭載されているhtmlやcssなどの関数をインポートし、フレームワーク用のエディター拡張機能を有効化することで SyntaxHighlight を機能させます。
フレームワークなしで同様にコードを見やすくするために Comment tagged templates という拡張機能を使用します。
使用方法は拡張機能の名前の通りで、テンプレートリテラル内で使用される言語(html)を開始バッククオートの前にコメントとして記述します。
prettier でフォーマットさせる(VS code,npm)
prettier の導入方法は割愛させていただきます。
色が付き見やすくなりましたが、このままですとテンプレートリテラル内のインデント等を手動で調整する必要があるためコーディングスタイルの統一が難しい状態です。
prettier にテンプレートリテラル内を html として扱ってもらうためには、記述した/* html */を大文字にするだけで対応します。（私も最近知りました！）
コード補完を効かせる(VS code)
コーディングフォーマットの統一感は問題なさそうです。ただ、記述時は javascript(typescript)内の文字列と判定されており、エディターの補完がうまく機能していません。
テンプレートリテラル内の html の補完に関しては emmet を許可する言語を追加すれば可能になります。
VS code の設定画面へ進み[Emmet: Include Languages]で検索します。
「項目の追加」をクリックし項目名に html の補完を効かせたい言語(typescript,javascript 等)。値に html を入力し「OK」をクリックします。
再度入力してみると、補完候補に html の内容がでてくるようになりました。
Stylelint を適用させる(VS code,npm)
style タグで記述された css 部分に stylelint を効かせコーディングルールを守りやすい設定も構築してみます。必要なライブラリは以下となります。
- stylelint
- postcss-html
その他必要な stylelint ライブラリを導入してください。今回は記述間違いを防ぎつつプロパティの並び順を揃えたいので、
- stylelint-config-standard
- stylelint-config-recess-order
をあわせてインストールしています。
npm install --save-dev stylelint stylelint-config-standard postcss-html stylelint-config-recess-order
stylelint の設定は以下としました。
// .stylelintrc
{
"extends": ["stylelint-config-standard", "stylelint-config-recess-order"],
"overrides": [
{
"files": ["**/*.ts"],
"customSyntax": "postcss-html"
}
],
"rules": {
"declaration-block-no-duplicate-properties": true
}
}
overrides の部分で typescript ファイルも対象に含め、customSyntax で html 内でも lint されるように設定しています。
また VS code にも stylelint の拡張機能を追加してください。
保存時に修正できる部分は修正してしまいたいので vscode の settings.json を以下のようにしています。
// .vscode/settings.json
{
"stylelint.validate": ["css", "typescript", "html"],
"scss.validate": false,
"css.validate": false,
"editor.codeActionsOnSave": {
"source.fixAll.stylelint": true
},
// Prettier併用の場合
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
この状態でウェブコンポーネントに指摘を受けそうなスタイルを書いてみます。
// my-element.ts
const template = /* HTML */ `
<style>
div {
font-size: 60px;
position: relative;
font-size: 56px;
}
</style>
<div id="greeting">hello world</div>
`;
export default class MyElement extends HTMLElement {
constructor() {
super();
const element = document.createElement("template");
element.innerHTML = template;
this.attachShadow({mode: "open"}).append(element.content.cloneNode(true));
}
customElements.define("my-element", MyElement);}
エディター上で確認すると、ソート順が守れていないpositionと重複して宣言しているfont-sizeにエラーが出ています。
ファイルを保存すると、自動修正可能なプロパティ順が修正されます。
今回の tips はコーディングの「書き味」をフレームワーク使用と遜色ないレベルに向上させつつ、ランタイムには影響がないライブラリとエディターの設定のみなので、ブラウザ上で使用されるファイルサイズは必要なものだけとなります。
フレームワークの導入がオーバースペックだと感じたときなど、是非試してみてください。
サイトパフォーマンス向上と開発者体験の両立に役立てれば幸いです。では。
