この記事はテックブログと呼ばれる記事です。

テックブログとはウェブサイトやウェブサービスを開発する過程を公開した開発者のメモのようなものです。

新しく実装した機能や、その使い方について知ってもらうことが目的です。

今見ているサイトのアップデートを頻繁にするので、その工程を公開しようと思いました。

人知れずアップデートしてもなんかちょっと寂しいですからね！

今回の実装内容

今回は記事の詳細ページに目次を自動で追加する機能を実装しました。

どこかの記事ページの上部をご覧ください。（今見ているこのページにもありますよ）

そして、目次をクリックすると、記事内のサブタイトルまでスクロールできるはずです。

実装の経緯

目次っていうのは読み物を作る上でとても大事です。

概要をすぐ把握できるし、何より文章量の目安になりますからね。

貴重な時間を割くに値するコンテンツかどうかは目次を見れば大体わかるものですよね。

実装方法

ここからは少しだけ技術的な話です。

プログラムやデザインに興味のない人は読み飛ばしてください。

今回の実装はjavascriptだけで実装できました。

できるだけプラグインなどは使わずに実装したいですからね。

WordPressは管理画面からサブタイトルを制御できますよね。

その際に自動で生成されるh1〜h5のタグを収集し、目次を作ったっていう感じです。

（h6タグはよくサブタイトルではなくファイルのパスを表示するのに使うので覗きました）

デザインについて

目次なので、コンテンツと分けて見やすいように少しだけグレーっぽいデザインにしました。

それと、目次の行ごとにアイコンを付与しています。

これは、サブタイトルが長過ぎて改行していた場合にちょっと見にくくなってしまうためです。

リンクのアイコンにしたのは、視覚的にクリックできるとわかりやすくするためですね。

プログラミングは楽しい

文書を書くのが好きな人にとってブログの運用っていうのは良い趣味ですよね。

私の場合はそれ以上にサイトの開発がとても面白いなって感じます。

• コンテンツを作ってサイトをよくする
• プログラムを書いてサイトをよくする

少しずつサイトが良くなっていくのはとても気持ち良い。

少しずつっていうのがポイントです。

１つの機能に大体20〜60分程度。

出先のカフェで作業するにはちょうど良い時間帯ですよね。

次は、何かフリーランスの方についてご紹介できるページを作ってみたいなと思ってます。

以上、テックブログでした。