https://kyonenya.github.io/

静的なHTMLホスティングサイトでも動作するようにJavaScriptのみで構築した、サーバーレスなブログアプリケーション

機能

• CMS機能
  • 記事データベースはJSONで代用
  • 個別記事ページはパーマリンクをクエリ文字列（?id=123）で割り振り、そのidをもとに個別ページをJSで生成
  • 全件分の記事データ（〜数百KB程度）を一覧表示時に取得してあるので、個別ページへの遷移時に通信が発生せず、瞬時に表示される
• 全文検索
  • 記事データはすべて取得してあるのでクライアントサイドで検索実行
  • 検索結果生成には自作パッケージ search-summary を使用
• 記事タグによる絞り込み
• ダークモード対応・レスポンシブ対応
• 関連記事表示用のブログカード
  • ブラウザ標準の Custom elements で実装
• スムーズなページ遷移（v1.2.0より）
  • aタグのページ再読み込みを無効化し、JSのみでページを再描画
  • ブラウザの履歴は History API で作成
• 更新通知バッジ（v2.1.0より）
  • お知らせがあるとナビメニューにバッジが表示され、クリックすると消える
  • クリックしたかどうかの履歴は読み手のブラウザの LocalStorage に保存
• 記事の印刷レイアウトの最適化（v2.1.3より）
• Worksページの業績リストの自動生成（v2.2.0より）
  • 業績データは CSL-JSON 形式で保持
  • 書式は CSL (Citation Style Language) ファイルで調整し、文献リストは citeproc-js で事前生成しておく
    • 試行錯誤の履歴：kyonenya/citation-js-playground

技術

• Vanilla JS
  • ノーフレームワークでSPAを作り、Web標準のAPIへの理解を深める
    • History API, Web Components, Local Storage, ...
  • コンポーネント設計や単方向データフローはReactを踏襲
• Zero dependency（v2.4.0より）
  • 依存パッケージ0、ビルドサイズを10KB未満まで削減
• webpack・PostCSS（v1.1.0より）
• TypeScript（v2.0.0より）
• play.js というiPadでNode.jsが動かせるアプリで開発

なぜそんな設計で作るのですか（v0.0.0）

• なぜ静的ホスティングサイトなのですか——有料サーバーと契約すると、自分が死んだりクレジットカードが止まったりしただけでサイトが消滅するから（無料サーバーも3ヶ月ごとなどの更新ボタンを押し忘れると消える）
• なぜGitHub Pagesなのですか——今後数十年は潰れそうにない会社だから。あと無料ドメイン（github.io）が一番かっこいいから
• なぜHTMLサイトにしないのですか——記事を100個作るためにディレクトリにHTMLファイルを100個作るのは合理的でないから。その場合、例えばヘッダーとフッターのデザインを変えるとき、100個のHTMLファイル全てを手動で更新することになる
• それならなぜ静的サイトジェネレーター（Jekyllなど）を使わないのですか——スマホやタブレットから記事を追加したりスタイルを調整したりできないため。たかがブログを書くのにパソコンを開いていちいちビルドするのはスマートでない
• 結論——静的なホスティングサイトで、かつ動的なページ生成を可能にするには、相手方のPCやスマホを使役してページ生成をやらせるのがよい（本来サーバーサイドでやるべき仕事を相手にやらせる横着な方法）
• 以上はサイト作成当初（2020年4月）に書いた文章。何も分からないので自力で設計を考えたのだが、今読むとこれはSPA（シングルページアプリケーション）の再発明であったことが分かる。それにしても当時は本当に何も分からなくて、記事データをCSVで持とうとしたり、FC2サイトでホスティングしたりしようとしていた。
  • ほか、旧版の README (v2.0.0) なども参照