👵インターネット老人👴のためのホームページ（死語）リフォーム術

この記事の対象

～00年代初頭にホームページ作っていて、現在放置中……という人、あるいはそういう人から依頼されて昔のフォルダを受け取った人が対象になります。
スキル的にはjQuery(Bootstrap)なら何とか勢～（バックにも関心がある）SPA初心者勢を想定しています。

手順

1.本当に自前でやる必要があるか考える

Webサービスが氾濫する現在、現在サイトにある機能を本当に自前で提供する必要があるか考えましょう。

日記

まぁ最有力はブログへの移行ですね。黒歴史を消す人も多いですが、逆に過去の日記みたいなもんで、残しておきたいと思う人もいるかと思います。ていうかホームページは放置してて日記にあたる部分だけ流石にブログに移行してる人も多いかと思いますね。
何らかの理由でブログに移行できない、不適切だと思う場合はスクレイピングして文章データをmdやらjsonに纏めて、今流行りのGatsbyあたりに手を出すのも良いのではないでしょうか。

イラスト

これは現行のシェアとしてもシステム的にも**pixivへ丸投げするのが一番妥当**かと思います。
画像ギャラリー系のライブラリを入れて自前のサイトで見せることもできますが、pixivと二重管理になって放置する可能性が高いかと。

小説

**これは難しい。**投稿サイトは昔から山ほどありますが、なろうを始め色がついてたりするので……。（2～3年で閉鎖しないという意味で）安定してて、ジャンル問わずで一強みたいなのがあればいいんですが。
あと00年代初頭って「Web小説ならではリッチ表現を目指そう」的な流れもあって、小説本文中に挿絵画像ぶちこんだり、JSやフォントタグ弄りやってたりする小説もそこそこあるので、そこらへん守る必要がある（ギミックが前提）があったり、その系譜を現代の技術で更に進化させたいという気骨の方は自前も全然アリだと思います。

掲示板

これも難しい。 SNSの直接交流やハッシュタグ交流で代替できちゃってそうで完全には出来てないので、「アカウントを持たなくても書ける、個人管理のフォーラム」のニーズは確かにあるんですよ。
ただ当時でいうところのCGI（死語）がPerl/PHP＋ただのログファイルで出来てたのに対し、現在はバックエンド系言語(Ruby/PHP等) + フレームワーク + DBが普通かつ、今時の設計だとバックエンドはAPIのみとなって、表示面はフロントエンドでやる必要があると敷居上がりまくってるんですよね。真っ向からやるにはバックエンドの勉強をガッツリしないときついかと。
OSSのフォーラムアプリも調べましたが、需要がニッチ化したのと、今だとバックエンドAPI+フロントエンドのセット提供になり、なおかつ密結合にならざるを得ないので、今一つ開発が盛り上がってない印象を受けました。現行問題なく動いてるのならそのまま＋SNS交流で逃げてもいいのではという感触はありますね。
ゲーム系チャットアプリのイメージが強いですが、discordとかで丸投げできないかなーというのは考えたりしますが、使ったことがないので（ry

チャット

掲示板と同じくdiscordに丸投げできないかな～（ry

2. WebスクレイピングしてHTMLから実データを取り出して整形する

昔はHTMLファイルの中に装飾データ（fontタグ）や実データを含めて全てが詰まっていたので、解析してオブジェクトの形に纏める（＝スクレイピング）のは必須ですね。**DOMを、tableタグを、ひたすら掘り続けるのだ……**⛏
ゲーム攻略サイトとかデータ系サイトはここの工数を覚悟しといた方がいいです。抽出もさることながら、使い勝手が悪いとか色々データ整形したくなると思うので、延々とデータ整形することになります（体験談）
ところでスクレイピングといえばPython （というかBeautifulSoup）がオススメとされていますが、「Webフロントエンド系の技術は仕方ないにせよ、Pythonまで手出すのはキツイ……」と思う方も多いかと思います。
そういう方は、そもそも自分のサイトであることを活かし、

1. ローカルの開発サーバー（手っ取り早いのはVSCodeの拡張機能のLiveServerとか）を用意
2. 自サイトにJSのスクレイピングプログラムを仕込んでデータオブジェクトを作る
3. 以下のJSでJSONファイルを生成してダウンロードさせる

export const downloadJsonFile = (data: unknown, baseName: string): void => {
	const blob = new Blob([JSON.stringify(data)], { "type": "application/json" })
	const fileName = `${baseName}.json`
	const url = URL.createObjectURL(blob)
	//aタグを生成し、クリックしたことにしてDLさせるというアプローチを取る
	//かなり無理くり感あるが現状これがベストプラクティスな模様。
	const aTag = window.document.createElement("a")
	document.body.appendChild(aTag)
	aTag.download = fileName
	aTag.href = url
	aTag.click()
	aTag.remove()
	URL.revokeObjectURL(url) //生成したURLが保持されてしまうので解放する
}

こういう感じで対処しましょう。ちなみに自分はJSでファイルを生成→DLさせられるのを知らなくて、途中までconsole.logに吐き出し→エディタにコピペでせっせとJSONファイルを作ってました😨

参考:JavaScriptでファイルダウンロード処理を実現する - Qiita

3.旧サイトとの連携を気にしつつ好きな技術で作り直す

わざわざ作り直したいと思うぐらいですし、サイトの規模としてはそこそこ大きいですよね？となると、旧サイトと繋がりを意識しつつ徐々に入れ替えていく形を取る方が良いかと思います。
技術面に関しては関心のあるお好きな技術で……としか言いようがありませんが、最近のトレンドから言うと大規模→React/小規模→Vueという形になるのかなと思います。
また元が静的なウェブサイトという特性からリフォーム後も静的な特性が強いかと思われるので、SSGとの親和性が高いのかな～とも感じます。

アイデア募集

この記事はどっちかというと「（おっさん）初心者プログラマーが現代フロントエンドを学習しながらDIY精神でリフォームする🛠」方向なんですけど、既存のサービスを駆使して、パッと作るというのも全然アリだと思います。
そっち方面は詳しくないので、もし何か使えそうなサービスがあれば教えて下さい。