2021 年、あけましておめでとうございます。昨年は人の集まりを自粛する機会が多く、不便に感じることも多くありましたが、一方で「オンライン」や「オフライン」であることを強く意識しながら自分のエンジニアとしてのスキルアップを考える機会も多くありました。今年は考えたり勉強したりしたことを色々な形でアウトプットできるよう心がけていこうと思っています。本年もよろしくおねがいします。
さて、そんな新年最初のブログエントリですが、簡易的な HTML プレビューワーを作ってみました。自分はウェブ関連の技術を紹介する機会が公私で多くあるのですが、そこで本当に紹介したい内容を話す際に HTML や CSS, JavaScript といったフロントエンドの基礎技術は理解しているという前提で紹介することがほとんどです。でも実際にはこの前提を満たしていない人に紹介するケースもあります。
考えようによっては「これから色んなことを勉強していきたい」という強い意志を持った人であって、そういう人が自分の話に興味を持ってもらえることは光栄でもあるのですが、とはいえこれらの基礎技術を理解できていない人にフロントエンドのコードを見せても（しかもここは理解している前提なので、詳しい解説を加えるのは別の部分）おそらくちゃんとは理解できないと思っています。願わくば、そのまま基礎技術にも興味を持ち続けて、自分で勉強も続けていただくことで、いつか理解の点と点がつながる日がやってくることが期待できるとも言えます。が、やはり前提を理解している人向けの説明では本来の難易度以上に難しく聞こえてしまうのか、説明している私からも手応えを感じにくい結果となってしまうことがほとんどです。
で、そういった人向けに、ある程度はその場でも（必要以上のツールのインストールなどをしなくても）HTML などの最低限のフロントエンド基礎をオンラインで独習したり、ある程度理解している人であればライブデモのようなことができるようなものを作ってみました。必要なものはオンラインのネット環境とブラウザだけで、オンラインミーティングとの併用でハンズオンを行う場合の相性がいいと思っています。ただテキスト編集の要素もあるツールなので、UI はスマホやレスポンシブではなく PC からの利用を想定しています（タブレットであればまあなんとか・・かも）。
【サービスの URL】
このツールは GitHub Pages を使って公開しています。URL はこちらです：
https://dotnsf.github.io/jch/
PC のブラウザからアクセスすると下のような４つの列からなる画面が表示されます：
画面内の４つの列は左から JavaScript, CSS（スタイルシート）, HTML, そしてこれらをまとめたプレビューです。左３つが編集エリアになっていて、その編集内容に応じて右のプレビュー結果が変わるようになっています。JavaScript や CSS に外部ライブラリを追加することはできませんが、jQuery だけは初めから使えるようにロード済みです。
初期状態はそれぞれ以下のようになっています：
JavaScript
jquery.js をロードしています。そして $(function(){ と }); の間がテキストエリアになっていて JavaScript を記述できるようになっています（初期状態では空です）。ロード済みなので jQuery のセレクタを使った記述も可能です。
変更を加えてから "JavaScript" ボタンをクリックすると、変更内容がプレビューに反映されます。
CSS
<style> と </style> の間がテキストエリアになっていて、スタイルシートの指定を自由に記述することができるようになっています（初期状態では空です）。
変更を加えてから "HTML" ボタンをクリックすると、変更内容がプレビューに反映されます。
HTML
ベースとなる HTML が記述されています。初期状態では <h2> の見出しが１つと、<div> に囲われたリスト（<ul>～</ul>）が１つ記述されています。
変更を加えてから "HTML" ボタンをクリックすると、変更内容がプレビューに反映されます。
プレビュー結果
上述の JavaScript, CSS, HTML の内容をすべて反映した結果がここに表示されます。初期状態では JavaScript と CSS が実質的に空なので、HTML に記述された内容（<h2> の見出しと <ul> のリスト）がそのまま表示されています。
ではこの初期状態を改良すべく、少しずつ編集してみましょう。まずは HTML に以下の赤字の行を加えてみます：
そして上部の "HTML" と書かれたボタンをクリックします。すると追加した２行のぶんが反映されて、プレビュー結果は以下のように変わります：
次は CSS を追加してみます。初期状態では空だった <style> と </style> の間のスタイルシート編集部分に以下を追加します：
見出しである <h2> タグのフォントサイズ（50px）と色（青）を指定し、id="li3" の要素（さしすせそ）のみ紫色になるよう指定しています。そして最後に上部の "CSS" ボタンをクリックして、指定通りのプレビュー結果になることを確認します（下図では HTML 列は表示していません）：
続けて JavaScript も編集してみましょう。こちらも空だったテキストエリア内に以下を追加します：
リストをラップしている <div id="xxx"> タグの背景色（黃）を指定し、id="li4" の要素（たちつてと）のみ緑色になるよう指定しています。そして最後に上部の "JavaScript" ボタンをクリックして、指定通りのプレビュー結果になることを確認します（下図では CSS 列と HTML 列は表示していません）：
HTML, CSS, JavaScript すべての変更が反映されたプレビュー結果が表示されることを確認できました。もちろんこのまま HTML, CSS, JavaScript に（順番関係なく）変更を追加していく都度、プレビューを確認することができます：
このサービスを使うことで、最小限の準備作業で HTML や CSS, JavaScript といったフロントエンドの基礎技術を実際に編集しては結果を確認しながら学んでいくことができるようになると思っています。
【ツールのソースコード】
このサービスは上述のように GitHub Pages を使って公開していますが、実はページそのものもフロントエンドだけで作られています（アイコン画像などは別ファイルですが、サーバーサイドのバックエンド技術は使っていません）。要するにこのサービスも１枚の HTML とその中に記述された CSS, JavaScript だけで実現しています。
このサービスのソースコードも公開しているので、興味ある方は参照ください：
https://github.com/dotnsf/jch
特に該当 HTML ページのソースコードはこちらから参照できます：
https://github.com/dotnsf/jch/blob/main/index.html
さて、そんな新年最初のブログエントリですが、簡易的な HTML プレビューワーを作ってみました。自分はウェブ関連の技術を紹介する機会が公私で多くあるのですが、そこで本当に紹介したい内容を話す際に HTML や CSS, JavaScript といったフロントエンドの基礎技術は理解しているという前提で紹介することがほとんどです。でも実際にはこの前提を満たしていない人に紹介するケースもあります。
考えようによっては「これから色んなことを勉強していきたい」という強い意志を持った人であって、そういう人が自分の話に興味を持ってもらえることは光栄でもあるのですが、とはいえこれらの基礎技術を理解できていない人にフロントエンドのコードを見せても（しかもここは理解している前提なので、詳しい解説を加えるのは別の部分）おそらくちゃんとは理解できないと思っています。願わくば、そのまま基礎技術にも興味を持ち続けて、自分で勉強も続けていただくことで、いつか理解の点と点がつながる日がやってくることが期待できるとも言えます。が、やはり前提を理解している人向けの説明では本来の難易度以上に難しく聞こえてしまうのか、説明している私からも手応えを感じにくい結果となってしまうことがほとんどです。
で、そういった人向けに、ある程度はその場でも（必要以上のツールのインストールなどをしなくても）HTML などの最低限のフロントエンド基礎をオンラインで独習したり、ある程度理解している人であればライブデモのようなことができるようなものを作ってみました。必要なものはオンラインのネット環境とブラウザだけで、オンラインミーティングとの併用でハンズオンを行う場合の相性がいいと思っています。ただテキスト編集の要素もあるツールなので、UI はスマホやレスポンシブではなく PC からの利用を想定しています（タブレットであればまあなんとか・・かも）。
【サービスの URL】
このツールは GitHub Pages を使って公開しています。URL はこちらです：
https://dotnsf.github.io/jch/
PC のブラウザからアクセスすると下のような４つの列からなる画面が表示されます：
画面内の４つの列は左から JavaScript, CSS（スタイルシート）, HTML, そしてこれらをまとめたプレビューです。左３つが編集エリアになっていて、その編集内容に応じて右のプレビュー結果が変わるようになっています。JavaScript や CSS に外部ライブラリを追加することはできませんが、jQuery だけは初めから使えるようにロード済みです。
初期状態はそれぞれ以下のようになっています：
JavaScript
jquery.js をロードしています。そして $(function(){ と }); の間がテキストエリアになっていて JavaScript を記述できるようになっています（初期状態では空です）。ロード済みなので jQuery のセレクタを使った記述も可能です。
変更を加えてから "JavaScript" ボタンをクリックすると、変更内容がプレビューに反映されます。
CSS
<style> と </style> の間がテキストエリアになっていて、スタイルシートの指定を自由に記述することができるようになっています（初期状態では空です）。
変更を加えてから "HTML" ボタンをクリックすると、変更内容がプレビューに反映されます。
HTML
ベースとなる HTML が記述されています。初期状態では <h2> の見出しが１つと、<div> に囲われたリスト（<ul>～</ul>）が１つ記述されています。
変更を加えてから "HTML" ボタンをクリックすると、変更内容がプレビューに反映されます。
プレビュー結果
上述の JavaScript, CSS, HTML の内容をすべて反映した結果がここに表示されます。初期状態では JavaScript と CSS が実質的に空なので、HTML に記述された内容（<h2> の見出しと <ul> のリスト）がそのまま表示されています。
ではこの初期状態を改良すべく、少しずつ編集してみましょう。まずは HTML に以下の赤字の行を加えてみます：
<h2> 50音 </h2>
<div id="xxx">
<ul>
<li id="li1" class="li">あいうえお</li>
<li id="li2" class="li">かきくけこ</li>
<li id="li3" class="li">さしすせそ</li>
<li id="li4" class="li">たちつてと</li>
<li id="li5" class="li">なにぬねの</li>
<li id="li6" class="li">はひふへほ</li>
<li id="li7" class="li">まみむめも</li>
</ul>
</div>
そして上部の "HTML" と書かれたボタンをクリックします。すると追加した２行のぶんが反映されて、プレビュー結果は以下のように変わります：
次は CSS を追加してみます。初期状態では空だった <style> と </style> の間のスタイルシート編集部分に以下を追加します：
h2{
font-size: 50px;
color: 'blue';
}
#li3{
color: '#f0f';
}
見出しである <h2> タグのフォントサイズ（50px）と色（青）を指定し、id="li3" の要素（さしすせそ）のみ紫色になるよう指定しています。そして最後に上部の "CSS" ボタンをクリックして、指定通りのプレビュー結果になることを確認します（下図では HTML 列は表示していません）：
続けて JavaScript も編集してみましょう。こちらも空だったテキストエリア内に以下を追加します：
$('#xxx').css( 'background', 'yellow' );
$('#li4').css( 'color', 'green' );
リストをラップしている <div id="xxx"> タグの背景色（黃）を指定し、id="li4" の要素（たちつてと）のみ緑色になるよう指定しています。そして最後に上部の "JavaScript" ボタンをクリックして、指定通りのプレビュー結果になることを確認します（下図では CSS 列と HTML 列は表示していません）：
HTML, CSS, JavaScript すべての変更が反映されたプレビュー結果が表示されることを確認できました。もちろんこのまま HTML, CSS, JavaScript に（順番関係なく）変更を追加していく都度、プレビューを確認することができます：
このサービスを使うことで、最小限の準備作業で HTML や CSS, JavaScript といったフロントエンドの基礎技術を実際に編集しては結果を確認しながら学んでいくことができるようになると思っています。
【ツールのソースコード】
このサービスは上述のように GitHub Pages を使って公開していますが、実はページそのものもフロントエンドだけで作られています（アイコン画像などは別ファイルですが、サーバーサイドのバックエンド技術は使っていません）。要するにこのサービスも１枚の HTML とその中に記述された CSS, JavaScript だけで実現しています。
このサービスのソースコードも公開しているので、興味ある方は参照ください：
https://github.com/dotnsf/jch
特に該当 HTML ページのソースコードはこちらから参照できます：
https://github.com/dotnsf/jch/blob/main/index.html
