preactを使ってブログのアーカイブメニューを作る

July 01, 2017

developit/preactという React から一部機能を除いてサイズを軽くしたライブラリがあります。

この preact を使って、Jekyll で書いてるブログのアーカイブメニューを作ってみた（フッター参照）ので、作り方をメモしておきます。

1. アーカイブページを作る

jekyll/jekyll-archivesなどを使って、 https://saitoxu.io/2017/といったアーカイブ用のページを作ります。

2. 記事の投稿日付一覧を書き出す

記事の投稿日付一覧を DOM に書き出しておきます。これを後で preact で読み込んでアーカイブメニューを作るという流れです。

<input id="archive-data" type="hidden" value="{{ "{{ site.posts | map: 'date' |
jsonify | escape " }}}}" />

JavaScript で処理しやすいようjsonifyをかませてます。

3. preact のセットアップ

preact などの npm ライブラリを使う準備をします。

$ yarn init
$ yarn install preact watchify babelify babel-preset-es2015 babel-preset-react

preact の環境構築にはこちらが参考になりました。

React サブセット実装の preact で、ライフゲームのアニメーション書いて使い方を確認した

4. アーカイブメニューのコンポーネント実装

アーカイブメニューのコンポーネントを作っていきます。大枠は以下のようになります。

/** @jsx h */

import { render, Component } from "preact"

class Archive extends Component {
  constructor(props) {
    super(props)
    const postDates = JSON.parse(document.getElementById("archive-data").value)
    // postDatesに記事の日付一覧が入ってるのでよしなに使う
    this.handleClick = this.handleClick.bind(this)
  }

  handleClick(e) {
    // 年の横にあるキャレットをクリック/タップしたときに
    // その年の月別アーカイブを表示/非表示にする処理
  }

  render() {
    // アーカイブメニューのレンダリング
  }
}

window.addEventListener("DOMContentLoaded", () => {
  render(<Archive />, document.getElementById("archive"))
})

詳しくはソースを見てみてください。

おわりに

preact を使ってアーカイブメニューを作りました。

react は大仰だけど、ちょっと使いたいってときに使えるなと思いました。