目次
リスキリングとしてJavaScriptの学習を始めました
私は、ブログを始めて2か月が過ぎ、目標の一つであったGoogle AdSenseも申請がパスし、ようやく慣れてきたと感じるようになりました。
何か新しいことを始めると、良くも悪くもその影響があると思うのですが、私は、ブログを始めたことで、他の人のブログをアレコレと参照するようになりました。
その結果、JavaScriptに興味を持ち、この度、学習を始めることにしました。
最近流行りの、リスキリングとか、リカレント教育とかも意識しています。
JavaScriptはプログラミング言語ですから、学習向けに何を作ろうかと他の人のブログを参照した結果、ブログの目次を作成するプログラムを作成することにしました。
使い方 目次の作成
私が想定する、目次の作成プログラムの使い方は次の通りです。
- 私がブログで使用している見出しタグH3の内容をリスト化し、予めブログの1行目に設置した目次のマーク(印)部分にリストを追加する
- 目次のマーク(印)は、<div id="TocSimpleTop">目次</div>とする
アルゴリズム 目次の作成
私が考えた、目次の作成に関するアルゴリズムは次の通りです。
- ブログ内の見出しタグH3を検索
- ULタグを作成し、その要素としてブログ内の見出しタグH3の内容を追加
- 作成したULタグを予めブログ内に設置した目次のマーク(印)に追加
JavaScriptソースコード 目次の作成
目次の作成用JavaScriptソースコードを次に記載します。
// ID = "TocSimpleTop"のHTMLタグを抽出
let TocTop = document.getElementById('TocSimpleTop');
// HTMLタグ(ID = "TocSimpleTop")の存在を確認
if (null !== TocTop) {
//
//HTMLタグ(ID = "TocSimpleTop")が存在する場合
//
// 見出しタグh3を含む文を抽出し、NodeList化
let TagList = document.body.querySelectorAll('h3');
//
// 目次リストを作成
//
// ブログ内の見出しタグの存在を確認
if (0 < TagList.length) {
//
// 見出しタグが含まれている場合
//
// ULタグを追加
let TocUlTag = document.createElement('ul');
TagList.forEach(
// 見出しタグの個数だけ繰り返し
function(element) {
// LIタグを追加
let TocLiTag = document.createElement('li');
// 見出しタグの内容
TocLiTag.innerHTML = element.textContent;
// ULタグの子要素としてLIタグを追加
TocUlTag.appendChild(TocLiTag);
}
);
// 目次リストを子要素としてULタグを追加
TocTop.appendChild(TocUlTag);
}
}
JavaScriptソースコードのポイントを以下に記載します。
下記コードにて、ブログ本文中のid="TocSimpleTop"と定義されたHTMLタグを抽出します。
行番号2: let TocTop = document.getElementById('TocSimpleTop');
下記コードにて、ULタグとLIタグを作成します。
行番号24: let TocUlTag = document.createElement('ul');
行番号31: let TocLiTag = document.createElement('li');
下記コードにて、LIタグのテキスト要素を代入します。
行番号33: TocLiTag.innerHTML = element.textContent;
下記コードにて、ULタグとLIタグの親子関係を指定します。
(親ノード)ULタグ --- (子ノード)LIタグ
行番号36: TocUlTag.appendChild(TocLiTag);
下記コードにて、id="TocSimpleTop"と定義されたHTMLタグとULタグの親子関係を指定します。
(親ノード)id="TocSimpleTop"と定義されたHTMLタグ --- (子ノード)ULタグ
行番号41: TocTop.appendChild(TocUlTag);
JavaScriptソースコードをブログのテーマに追加
作成したJavaScripソースコードをブログのテーマに追加する方法は、次の通りです。
- テーマ >> カスタマイズ で「HTMLを編集」を選択
- </body>の直前に下記に従ってJavaScriptソースコードを追加
//<![CDATA[
JavaScriptソースコード
//]]>
</script>
ちなみに、「//<![CDATA[」と「//]]>」が必要になるのは、JavaScriptソースコード内で「&」や「<」、「>」を使用した場合、xmlが誤動作するのを回避するためです。
innerHTMLでハマりました
JavaScriptでULタグの要素を追加する際にハマりました。
始めは、createElement()メソッドを使用せず、というか、存在を知らなかったので、getElementById()メソッドで取得した要素(Element)のinnerHTML変数にULタグの追加を試しました。
具体的には、次の通りです。
let TocTop = document.getElementById('toc_top')
...
TocTop.innerHTML += '<ul>'
TocTop.innerHTML += '<li>' + 'H3要素' + '</li>'
TocTop.innerHTML += '</ul>'
ところが、上記の方法では「H3要素」だけが追加され、他のHTMLタグは追加できませんでした。
期待する表示は次のものでした。
- H3要素
しかし、実際は次のようになりました。
H3要素
試しに次のように記述したところ、こちらは期待通りの動作となりました。
TocTop.innerHTML += '<ul><li>H3要素</li></ul>'
つまり、' 'に記載する内容を+演算子で分割しなければ良いみたいです。
しかし、プログラムとしては都合が悪いので、いろいろと調べたところcreateElement()メソッドの存在を知ることができました。
ブログでのJavaScriptソースコードの表示について
ブログ上でJavaScriptソースコードを表示するために、今回は、Google-code-prettifyを使用しました。
私が行った、Google-code-prettifyの設定に関する作業手順を以下に記載します。
- テーマ >> カスタマイズで「HTMLを編集」を選択
- HTML内の</head>の直前に次の内容を追加
<!-- Google-code-prettify -->
<script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=desert'/>
<style type='text/css'>
/* Google-code-prettifyの行番号を1行ずつ表示 */
pre.prettyprint.linenums li {
list-style-type: decimal;
}
/* スクロールバーの表示 */
pre.prettyprint {
overflow: auto; word-wrap: normal;
}
/* 行間の調整 */
pre.prettyprint {
/* 上 右 下 左 */
padding: 0.5em 0.5em 0.5em 1.0em;
margin-bottom: 2em;
line-height: 1.1em;
border: 1px solid #888
}
</style>
<!-- Google-code-prettify -->
- ブログ作成時、HTMLモードで<pre class="prettyprint linenums">ソースコード部分</pre>と記載
今後も、リスキリングの一環として、JavaScriptの学習を続けていければと思います。
(2022年10月12日 追記)
本記事中では、作成したJavaScriptソースコードを、テーマの「HTMLを編集」にて追加したと記載しました。
その後、JavaScriptを外部ファイル化する方法を検討した結果、現在表示されている目次は、下記のJavaScriptファイルを実行して作成されています。
https://4affiuser.github.io/src/TocSimple1.js
