javascript内でhtmlタグを書く時に便利なAtomプラグイン「html-to-javascript」



javascriptファイル内でhtmlタグを書く時に便利なAtomプラグイン「html-to-javascript」の紹介です。

javascriptファイル内でHTMLタグを書いた経験がある人はいるでしょうか? そう。。クリックなどのイベント時に動的にDOMを生成して、jQueryのappendなどを使ってhtmlタグを追加するような時です。

javascript内ではhtmlタグをそのまま使うことが出来ないので、シングルクォーテーション等で囲む必要があり 一言で言うと とても書きづらいです。
( * ReactのJSXは除く )

バリデーション時の短いエラーメッセージ程度なら問題はないですが " 古いシステムの機能追加で動的に長めのhtmlタグを追加する必要や、フォーム生成とかになると、、、"という時に開発の補助をしてくれそうなAtomエディタのプラグインが「html-to-javascript」です。

このプラグインを使うと、htmlタグをjavascriptファイル内で使える文字列に変換してくれます

html-to-javascript 


html-to-javascriptの導入 〜 使い方

html-to-javascriptの導入はSetting -> installから' html-to-javascript 'と入力して検索するか、ターミナル上からからapmコマンドを使ってインストールできます。

# apmコマンドを使ってインストールする場合
apm install html-to-javascript


使い方は簡単で、javascriptファイル上でHTMLを選択し、キーボードの shift + ctrl + j で変換する方法と HTMLタグを囲んでから、右クリックメニューの HTML -> JSをボタン押せばHTMLタグをjavascriptの文字列に変換してくれます。

プラグインを導入すると右クリックメニューにHTML -> JSが追加されます


例として、bootstrapのアラートタグをhtml-to-jsを使うと、下記のように一発変換してくれます。

// After
var template =
''+
'<div class="alert alert-warning alert-dismissible" role="alert">'+
		'<button type="button" class="close" data-dismiss="alert" aria-label="Close">'+
				'<span aria-hidden="true">&times;</span>'+
		'</button>'+
		'<strong>Warning!</strong> Better check yourself, you\'re not looking too good.'+
'</div>'

// Before
var template =
<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>


Summary

以上がAtomエディタプラグイン、html-to-javascriptの紹介でした。

モダンなjavascriptフレームワークを使って開発していれば、javascriptファイルにhtmlタグの直書きをすることは少ないと思いますが、古めのシステムの保守をする機会が多いフロントエンドデベロッパーさんには役立つプラグインかもしれません。

もしかの時に役に立ちそうなプラグインなので、気になった人はゼヒ×2チェックしてみてください!

Github: keevan/atom-html-to-javascript

 

この記事のカテゴリ
プログラミング

この記事に付けられているタグ