目次
いままでエンジニアらしくこのブログの機能をいろいろと自作してきたわけですが、ここ最近ようやっとまともに見れる程度のできになってきたのでここらで全体の構成を記事にしようかと思い立ちました。
なにぶん初めてのシステムづくりなので汚い部分もあるとは思いますが温かい目で見守って上げてください。
↓はこのブログのソースコードです。随時更新中です。
全体構成
技術スタック
TypeScript
最近はWEBフロントエンドを作ろうと思うとまずTypeScriptみたいですね。
私はJavaScriptをほとんど触ったことがないので、みなさんがおっしゃるTypeScriptならではのうざさにあまり共感できないでいるわけですがこれは幸せなのか不幸なのか。
Next.js
普通にreactでも良いのですが、Nextは痒いところに手が届きます。
特に頼りになったと思う機能は以下です。
- 動的ルーティングを勝手に作ってくれる
- 画像を勝手に最適化してくれる
- SSG
特に最後のSSGはJamstack構成には必須ですし、画像の最適化はパフォーマンスチューニングには欠かせませんでした。
こういう静的なブログを作る場合にはGatsbyなどのフレームワークの方が向いているという意見も見受けられたので、一度Gatsbyのブログテンプレートを見てみたのですが開発経験の浅さも相まって初見では意味ぷー過ぎたので、よりわかりやすいNext.jsに飛びつきました。
MUI
コンポーネントが最初から用意されているのでほんとに楽です。
特に、ちょっとした機能なのにスクラッチからだと案外めんどくさい機能（ボタンの波紋とかページネーションとか）を最初から用意してくれているのが最高です。
sxでスタイルも気軽にいじれますしね。
Tailwind CSS
本当はMUIだけでそれなりのウェブサイトは作れるのですが、今回はサーバーサイドで静的レンダリングをする際に生のHTMLを扱う必要があったので、そのスタイリングにはTailwind CSSを使いました。
ただ、MUIとTailwind CSSは両方とも強力な分、いろいろと競合が起きることも多いので併用には注意が必要です。
CMS
microCMS
みんな大好きmicroCMSです。比較的新しいサービスということもあり、記事が充実していないかと思いきや、公式の発信する情報やドキュメントが神がかっているのでかなりおすすめです。
機能についても記事公開に合わせた自動デプロイ機能やカスタムフィールドなどシンプルながらも組み合わせ次第でいくらでも強力にできそうなものを備えています。
ホスティングサービス
Cloudflare Pages
比較的新しいサービスらしいですが、他のサービスに比べて無料枠でできることがかなり幅広いです。
例として、アクセス制限やアクセス解析、セキュリティ機能、速度分析などを無料で提供してくれています。
また、もともとがCDNの企業ということもあり配信パフォーマンスも高いです。
Netlify
実は最初はNetlifyにデプロイしておりCloudflareにはあとから移管しました。
Netlifyもビルドキャッシュによるビルドの高速化やプレビュー機能など十分に強力な機能を無料で提供してくれていたのですが、無料枠だと使えるCDNが限定されているらしく、パフォーマンスの点でどうしても満足がいきませんでした。
まあ、うちみたいな零細弱小ブログがなにイキってパフォーマンスチューニングとか語ってんだと言われれば反論の余地もないわけですが、勉強も兼ねたブログづくりなのでやはり突き詰められる部分は突き詰めていきたいという思いがありまして、移管を決断しました。
いままでありがとう、グッバイNetlify。
今までに作った機能
数式表示
KaTeXを使って作りました。
インラインにも数式を貼れますし（$\mathrm{e}^{\mathrm{i}\theta} = \cos(\theta) + \mathrm{i}\sin(\theta)$）、次のようにディスプレイ型の数式も使えます。
$$\cos(\theta) = \frac{\mathrm{e}^{\mathrm{i}\theta} + \mathrm{e}^{-\mathrm{i}\theta}}{2},\ \sin(\theta) = \frac{\mathrm{e}^{\mathrm{i}\theta} - \mathrm{e}^{-\mathrm{i}\theta}}{2\mathrm{i}}$$
数式表示については以下の記事で詳しい解説をしているので気になる方は参照どうぞ。
ソースコードのハイライト
サーバーサイドでのハイライトに関してはmicroCMSブログに素晴らしい解説記事が載っているのでそちらを参照するのがよろしいかと思います。
一応以下のような形でファイル名を含めてハイライトができるようにしています。
def main():
print("Hello World")
main()
今後実装するかもな機能
テスト
これはさっさとやりたいです。
storybookも導入はしているもののあまり有効活用できていないという状況があるので、うまい付き合い方を模索しながら自分なりの使い方をしていきたいですね。
ダークモード対応
こちらはやり方はわかっているのですがいざやろうとすると色決めたりパレットの設定をしたりちょっと面倒だったりします。
ただ、寝る前に電気消してスマホいじってるときとかにダークモードがないサイトとか開くと目が痛くて辛いときがたまにあるので、このブログの読者にはそういった不便をおかけしないようなるだけはやく取り組みたいとは思っています。
こちらの記事もおすすめ
これはすぐにでも作れる機能です。
自分がブログ記事見るときには正直あまり必要だと思わない機能なのですが、記事を一番下まで読んだときにいきなりフッターが来るとちょっと寂しい感じがあるのでできればつけたいです。
まあ、フッターと記事の間にごちゃごちゃ色々あるのも汚らしくて嫌という意見もありますが。
関連記事カード
アマゾンなどへの誘導リンクカードはあるのですが、このブログ内の他記事への誘導カードはもう少しリッチなものを簡単に作れそうなので作ろうかと思っています。
月ごとアーカイブ
これも別にどちらでも良いと思うのですが、記事の投稿頻度を自分に戒めるためにも必要なのかしら。
まあ、サイドバーがごちゃごちゃしてるのも個人的には嫌いなのですが、汚らしくて。
問い合わせ機能
これはいつか欲しいですね。
まあ、こんな零細弱小貧弱ブログにいらっしゃる物好きな方がまず少ない中で、私に問い合わせしてくださる方がいるとは思いませんが、いつかお仕事の依頼とか（妄想）受けるのに役立ってくれたらいいなあ。
といっても、この機能自体はmicroCMSのポストメソッドを使って実装するのでAPIやフォーム作りの勉強もできるのでモチベーション自体は割りとあったりします。
SNSなどとの連携
これ、必要でしょうか？
そもそも私はSNSを何一つやっていないのでこの機能があってもあまり利用しなさそうという気がしています。
とはいえ、RSSなんかはあってもいいのかなと思いつつ。
あとは将来Twitterなんかを始めたら実装するかもですね。
SEO対策
いい加減SEO対策についてはしっかりやったほうがいいということはわかっています。
ですが、めんどくさいですよね正直。
モチベーションが上がってきたらやります。
まとめ
今回はこのブログの構成や実装した機能について改めて説明してみました。
今後ブログを作ろうという方の一助になることを願っています。
「ブログで会社員の10倍稼ごう！」みたいな話がたびたび持ち上がるわけですが、エンジニアなら金がどうとかではなく単にブログを作ることそのものを楽しんだらいいと思います。
特にJamstackならAPIの勉強にもなりますし、新米エンジニアが初めて作るシステムとしてはうってつけだと思います。
だからといって金がいらないというわけではないですよ？
いつかこのブログが金のなる木になってくれることを密かに期待しつつ、今後も楽しみながらブログづくりに励んでいく所存です。
