【JavaScript】コード作成ツールの作り方【コード出力篇】

　どうも！LSSです！！

今回は一昨日の記事、
【JavaScript】コード作成ツールの作り方【さわり】 - Little Strange Software
の続きとなります！

前回は、飾りの部分を操作できるようにするところまで書きましたが、「コード作成ツール」として必須である、「コードを画面上に表示する」ところまで至りませんでしたので、今回はその部分を書いていきます。

なお、今回も「普通にブログを書いたり飾りつけしたりする人」には向かず、「コピペ用のコードを配布する人」という狭い層に向けた内容となってしまっています^^;

前回のラスト
まずは、コードを入れる箱を用意します
HTMLタグを無効化する方法
前置きが長くなりましたが、具体的には
replaceについて
改行が無いと見づらい
出力するサンプルにも改行をつけたい
出力するコードにも改行をつけたい
インデント（字下げ）について
あとがき

前回のラスト

コード

<input id="colp" type="color" value="#ffaaaa"/>
<input id="haba" type="range" value="10"/>
<div id="gamen"></div>
<script>
colp.addEventListener('input',gw,false);
haba.addEventListener('input',gw,false);
gw();
function gw(e){
txt='<style>.waku{border:'+haba.value+'px double '+colp.value+';}</style><span class="waku">テストです</span>';
gamen.innerHTML=txt;
}
</script>

というところまで書きました。

これは、
txt='<style>.waku{border:'+haba.value+'px double '+colp.value+';}</style><span class="waku">テストです</span>';

と書くと、変数txtに代入される内容が、
まず文字列としての '<style>.waku{border:'
（前後の'は文字列を囲む記号なので含まれません）
に続けて（プラスして）、haba.valueが後ろに並びます。
これは'で囲んでいないので、値の内容が読み取られる事になり、habaと名付けた（idをつけた）スライダーが「10」の状態であれば'10'という文字列を指定したのと同じ事になります。

更に続けて（プラスして）、'px double 'も文字列としてそのまま後ろに追加され、
colp.value でcolpと名付けたカラーパレットの内容が追加されます。
これは '#ffaaaa' のような色コードを示す文字列になります。

後は、文字列としての ';}</style><span class="waku">テストです</span>' が後ろに追加されます。

上記の工程を経て、結局txtの内容は、

<style>.waku{border:10px double #ffaaaa;}</style><span class="waku">テストです</span>

という事になります。

この内容を、
gamen.innerHTML=txt;
で出力する事によって、
<div id="gamen"></div>
が
<div id="gamen"> <style>.waku{border:10px double #ffaaaa;}</style><span class="waku">テストです</span></div>

と書いたのと同じ事になります。

まずは、コードを入れる箱を用意します

<div id="gamen"></div>

の中にサンプルを入れていたのと同様に、それと別にコードを入れておく場所を用意します。

<input id="colp" type="color" value="#ffaaaa"/>
<input id="haba" type="range" value="10"/>
<div id="gamen"></div>
<p> </p>
<p>コード</p>
<div id="gamenc" style="background-color: #eeeeee; padding: 0.6em; border-radius: 5px;"></div>
<script>
colp.addEventListener('input',gw,false);
haba.addEventListener('input',gw,false);
gw();
function gw(e){
txt='<style>.waku{border:'+haba.value+'px double '+colp.value+';}</style><span class="waku">テストです</span>';
gamen.innerHTML=txt;
}
</script>

↑このようにしてみました。
オレンジ色の部分は、コードである事が分かりやすいように装飾したもので、

コード

↑LSSがよく使うこういう要素になります。

ここのスタイル指定は好きに変更できます^^

HTMLタグを無効化する方法

HTMLは、半角の<と>で挟まれているものを「タグ」として認識し、<と>の間にあるものは画面上に表示されません。

参考：HTML超入門！…のさわりだけ！！ - Little Strange Software

でも、HTMLを含んだコードをコードとして画面上に表示させたい場合、<や>も表示させたいですよね。

対処方法は、HTMLコード中に、

<p>

のように書くと、

<p>

と表示されます！

つまり、<が<になり、>が>になります。

（余談ですが、&を表示させたい場合は & と書きます）

（更に余談ですが、<は日本語で「小なり」を意味し、英語で「less than（より小さい）」の頭文字を取って < 、>は「大なり」で「greater than」の > と知っておくと覚えやすいかも？）

前置きが長くなりましたが、具体的には

変数txt内の「<」を「<」に、「>」を「>」に、全て置き換えてやれば、
HTMLタグを無効化した状態でそのまま表示
できる事になります！

コード

と、赤文字部分を一行足すと、

コード

と、↑このようにサンプルが変化すると同時に、コードの内容も変化するものになります^^

replaceについて

JavaScriptには文字列を置換する関数「replace」が用意されています。

今回はそれを二重にしていますが、例えば、

txt='あいあいさー';
gamen.innerHTML=txt.replace(/い/g,'き');

のようにコードを書くと、

あきあきさー

のように、変数txt内の全ての「い」が「き」に置き換えられます。

書式としては、
変更前の文字列.replace(/変更したい文字/g,'変更後の文字');

のように書きます。

「変更したい文字」を囲むのが「/」になる点が要注意ですね。

「g」というオプションによって「複数回変更前文字が含まれていたら全部」が対象となります。

今回はそれを二重に使用する事で、

gamenc.innerHTML=txt.replace(/</g,'<').replace(/>/g,'>');

「『変数txtの中に含まれる全ての < を < に置き換え』たものの中に含まれている全ての > を > に置き換える」

という事を行っています。

改行が無いと見づらい

txt='<style>.waku{border:'+haba.value+'px double '+colp.value+';}</style><span class="waku">テストです</span>';

と、一行で書ききっていますが、もっと複雑なコードになると「改行を入れておかないとどれがなにやら」分からなくなる、という事が出てきます。

その場合、以下のように書く事で対応可能です。

コード

txt='<style>';
txt+='.waku{';
txt+='border:'+haba.value+'px double '+colp.value+';';
txt+='}';
txt+='</style>';
txt+='<span class="waku">';
txt+='テストです';
txt+='</span>';

txt+= で、「今ある変数txtの後ろに追加で」文字列を足す事ができます。

ただし、単純に後ろに付け足すだけなので、出力するコードとしては改行されず、元の
<style>.waku{border:'+haba.value+'px double '+colp.value+';}</style><span class="waku">テストです</span>
という、一行の文章のままなんですけどね^^;

出力するサンプルにも改行をつけたい

実際のところ、HTMLもCSSも、改行は意味を持っておらず、あってもなくても画面上は同じ結果となります。

が、最終的に画面上に表示されるコードを見やすく改行させるために、まず変数txtの内容に改行を含めたい場合、次のような書き方ができます。

コード

txt='<style>\n';
txt+='.waku{\n';
txt+='border:'+haba.value+'px double '+colp.value+';\n';
txt+='}\n';
txt+='</style>\n';
txt+='<span class="waku">\n';
txt+='テストです\n';
txt+='</span>\n';

それぞれの行末、区切り記号 ' の前（つまり囲みの内側）に、半角で \n をつけました。

nは普通にアルファベットですが、その前の記号は「バックスラッシュ」と言います。

/ （スラッシュ）と傾きが反対になっている記号ですね。

これは、環境によっては半角の￥（円マーク）として表示されます。

入力する時も、キーボードの￥キーを押して入力できます。

今、LSSが見ている画面上ではバックスラッシュとして見えていますが…もしかしたら読者さんには￥に見えてる方がおられるかも…ちなみにどちらで見えていても、動作は変わらないです^^

そして、冒頭に書いた通りHTMLもCSSも、改行は意味を持っていないため、サンプルの表示もなんら変わりなく見る事ができます。

出力するコードにも改行をつけたい

例えば、HTMLコード上に

あ
い
う
え
お
と書いたとしても、ブラウザで表示した時は

あいうえお

のように改行が無視される事になります。

これも、「HTMLもCSSも、改行は意味を持っていない」からですね。
HTML上で改行させたい時には <br/> タグを使用します。

<br/>タグを入れると、例えば

あ<br/>い<br/>う<br/>え<br/>お<br/>
とコード上に書いたとしても、

あ
い
う
え
お

のように表示される事になります。

という事で、コード作成ツールに表示する「コピペ用に出力するコード」の

\n を <br/> に変換してやれば良い事になりますね^^

コード

<input id="colp" type="color" value="#ffaaaa"/>
<input id="haba" type="range" value="10"/>
<div id="gamen"></div>
<p> </p>
<p>コード</p>
<div id="gamenc" style="background-color: #eeeeee; padding: 0.6em; border-radius: 5px;"></div>
<script>
colp.addEventListener('input',gw,false);
haba.addEventListener('input',gw,false);
gw();
function gw(e){
txt='<style>\n';
txt+='.waku{\n';
txt+='border:'+haba.value+'px double '+colp.value+';\n';
txt+='}\n';
txt+='</style>\n';
txt+='<span class="waku">\n';
txt+='テストです\n';
txt+='</span>\n';
gamen.innerHTML=txt;
gamenc.innerHTML=txt.replace(/</g,'<').replace(/>/g,'>').replace(/\n/g,'<br/>');
}
</script>

このように、二連replaceの後にさらに続けて
.replace(/\n/g,'<br/>')
を追加しました。

すると、こうなります。

コード

操作すると、サンプルと同時にコードが変更され、コードも綺麗に改行が入っていますね^^

インデント（字下げ）について

コードを見やすくする方法として、改行の他に「インデント（字下げ）」をつける、という方法があります。

よく使われるのは半角スペースですが、txt+=の中の行頭に半角スペースを入れても、表示されたコピペ用コードにはうまく反映されない事があります。

この対策として「半角スペースを   に置き換える」という方法を使ってみましょう。

コード

<input id="colp" type="color" value="#ffaaaa"/>
<input id="haba" type="range" value="10"/>
<div id="gamen"></div>
<p> </p>
<p>コード</p>
<div id="gamenc" style="background-color: #eeeeee; padding: 0.6em; border-radius: 5px;"></div>
<script>
colp.addEventListener('input',gw,false);
haba.addEventListener('input',gw,false);
gw();
function gw(e){
txt='<style>\n';
txt+='.waku{\n';
txt+=' border:'+haba.value+'px double '+colp.value+';\n';
txt+='}\n';
txt+='</style>\n';
txt+='<span class="waku">\n';
txt+='テストです\n';
txt+='</span>\n';
gamen.innerHTML=txt;
gamenc.innerHTML=txt.replace(/</g,'<').replace(/>/g,'>').replace(/\n/g,'<br/>').replace(/ /g,' ');
}
</script>

だんだんreplaceがお化けになってきましたがｗ
.replace(/ /g,' ')
をさらに追加し、
txt+=' border:'+haba.value+'px double '+colp.value+';\n';
の行に半角スペースを２つ入れてみました。

これで試してみると…

コード

無事、表示されたコードのほうにもインデント（字下げ）が反映されるようになりました！

もちろん、この出力されたコードをコピペしても、ちゃんと問題なく使用できます^^

あとがき

前回と今回については、「作り方の作り方」を作る、という、書いてるうちに混乱しそうな内容を書いてました^^;

果たして、この記事に意味はあったのか？ｗ

は、今後、これを読んでくださった方の中から
「CSSコード配布をされていて、これを使ってみようと思ってくれる方」
が現れるかどうか、にかかっています^^

…今度は軽めの記事を書こう、うん。

ってなとこで、今回はこのへんで！

次回もまた、よろしくお願いします^^