リビドー駆動開発
このブログの技術的な話
まえがき
ただし、一から十まで説明しきるのは無理なので、僕の個人的な印象ベースでかいつまんだ説明になってます。
Web系の知識がない人はちんぷんかんぷんかもしれませんがご容赦ください。
マイナーなものは使ってないので、ChatGPTあたりに聞けばずっとわかりやすい説明が聞けると思います。
想定読者
- WordpressやColorfulboxを利用していない成人向けサイトの仕組みを知りたい人
構築方針
サイトを作るにあたって、予めいくつかの方針立てをしていました。
- 表示の早いWebサイト
- 「不測の事態」（サービス終了、クレカ会社の”検閲”といった外圧などなど）に備え、移行・撤退がしやすい軽量な構成
- サーバーの管理コストは極力減らしたいが、過度な外部依存もしない
- 技術的にブラックボックスな部分もなるべくなくす
主要技術
方針に沿いつつ、現状持ってるスキルや興味と相談しながら選定しました。
現代のWebアプリ・サイト開発においては親の顔より見たワンセット。
他にVueやAngularといった選択肢もありますが、そもそも僕がReactしか書けないのでこうなりました。
ReactでWebサイトを作るなら、最初に名前が上がるのはNext.jsでしょう。
実際そっちのほうが知見が多くて開発しやすいはず。
敢えて違うフレームワークにしたのはただただ「個人の好み」です。
Next.jsは独自の仕組みやバージョンによっての違いなども多く、また「軽量な構成」を目指すには機能が多すぎるというのもありました。
その点React Router (V7)は、いわゆるWeb標準を尊重しているところにシンパシーを抱きました。
比較的新しいフレームワークのため知見が少ないところはありますが、公式のドキュメントが充実してるのでそこまで困ってません。あとはトライアンドエラーでなんとかなってます。
CSSの構築に使っています。Reactというと、最初からスタイルが設定されたライブラリもかなり充実しています（MUIやChakra UIなど）が、CSSの勉強にもなると思って一から自分で設定しています。
TypeScriptとの相性がよいのもGood。
実際にWebサイトとして公開するのに使っているのがAWSです。
CloudFront+S3でファイル配信、Lambdaでサーバー側の処理、データ蓄積にはDynamoDBといった具合に、いくつかのサービスを組み合わせています。
「AWS 静的サイト」で検索すると山程似たような構成が出てきます。
こっちも僕が一番使い慣れているサービスだから選んだというところがありますが、Cloudflareでも同等の構成が実現できるかも。
Markdown
記事本文はMarkdownで書いています。WordpressなどのCMSではDBで管理するのが普通のようですが、僕はあくまでファイルで管理しています。
タイトルなどのメタデータはFrontmatterに書いてyamlでロードし、実際にHTMLに埋め込む部分はReact-Markdownを使っています。
使っていない（使えない）技術
世には星の数ほどWebサイトホスティングサービスがあり、メジャーなところはたいていGitHubとの連携がサクッとできて、ソースを更新するとサイトも自動で更新してくれる、みたいなのがめちゃくちゃ手軽にできます。
ただ、哀しいかなGitHubは成人向けコンテンツNG（さらにはホスティングサービスも成人向けや商用利用などに厳しいところがほとんど）なんですね。
頑張って自前のGitサーバーを立てるというのも手ではあります。が、あくまで個人規模でやるほどのことはない、というか当初の「サーバー管理を減らしたい」という目標とモロにバッティングします。
なので割り切ってローカルで完結させています。あくまで手元にあるものが全て、という点ではむしろ安心かもしれない。
まとめ
広告
トップ画像と文中に掲載させていただいた作品はこちらです。
