ブログ始めました

はじめに

こんにちは！始めまして、ハルミです。
この度、ブログを始めることにしました。

誰やねんという方に軽く自己紹介しておくと、
現在27歳のアラサー男で、製造業で働きながら
プライベートの時間でWebプログラミングの学習をしているものです。

このブログは、私ハルミの個人ブログであり
主にWebプログラミングについての学習記録を残していく予定です。

なぜ作ったのか

大きな理由としましては、
自身のWebサイトを持っていなかったので作ってみたかったというのが一番です。

今年(2024年)の正月からプログラミング学習を始めて、 HTML,CSS,JavaScript。。。と学んでいき
現在はReact/Next.jsを主に学んでいて Next.jsでのサイトの作り方がある程度身についたところで このブログを作ることにしました。

ポートフォリオサイトも持っていないし、
実績もないので、服を買いに行く服がない状態でしたw
ようやく自分のサイトを持つことができて今は達成感に浸ってます🥺

参考にさせていただいたサイト

まず、コンテンツ管理の基幹となるシステムにContentlayerを採用しています。
Contentlayerは、Markdownファイルを型安全なJSONデータに変換するツールです。
Contentlayerを使用することで、Markdown形式のデータを簡単に管理し、型定義を持つJSONとして扱うことができます。

そして、このツールを使用してブログサイトを作るにあたり、
shadcn/uiで有名なshadcnさんという方がGitHubで公開しているリポジトリを、かなり参考にさせていただいております。

こちらのリポジトリを見るだけでもかなりNext.jsの勉強になります。

また、MDXブログを作るにあたって、
運用方法や機能などの面でTAKLOGさんのサイトを参考にさせていただきました。 普段からCSS等の技術記事でかなりお世話になっていて、大変オススメです。

おおまかなサイトの概要

このサイトは主な技術スタックとして

• Next.js 14.2.8 App Router
• Tailwind CSS
• TypeScript

を使用して作成しています。

記事の投稿はMarkdown形式で行っており、それをMDXとして読み込んでいます。

MDXが何なのか分からない人に説明すると、
MDXはMarkdownとJSXを同時に使用できるものです。
つまり、Markdownで記事を書くことができるだけでなく、
JSXを使用してReactのコンポーネントを埋め込むことができるので
より柔軟な記事の投稿が可能になっています。

たとえば、MDXファイルに以下のように記述すると

### このように書くと
このように表示されます

*Reactコンポーネント*も埋め込むことができます。
<OgLink url="https://nextjs.org"/>

このように書くと

このように表示されます

Reactコンポーネントも埋め込むことができます。

SSGによる爆速パフォーマンス

当サイトは大部分のページでNext.jsのSSG(静的サイト生成)を使用しています。
一般的にこのようなサイトを最近は JAMstackと呼びます。 JAMstackとは

• JavaScript
• API
• Markup

の頭文字を取っていて、
これらの要素のみでサイトを構築することを指します。 メリットとして、非常に高速なパフォーマンスを誇り、 サーバーサイドの負荷が少ないという点があります。

こちらで分かりやすく解説されています。

PageSpeed Insightsでのスコアは多少の変動はありますが
以下のようになりました。

デスクトップでのスコアは大概どのサイトでも高いためいいとして、
モバイルのスコアですが、かなりの高水準です。

一般的なサイトだとモバイルのスコアはかなり低くなりがちなので、
爆速と言っても許されるのではないでしょうか。(?)

今後もパフォーマンス改善は続けていきたいと思います。

ダークモード対応

このサイトはダークモードに対応しています。
デフォルトだとシステムのテーマに従いますが、
上部のナビゲーションバーにあるボタンからダークモードとライトモードを切り替えることができます。

今後について

今後追加したい機能としては

• 記事検索
• 記事のソート
• 日付アーカイブ
• ページ遷移アニメーション

あたりでしょうか。

DBを使用するような機能は、別でWebアプリケーションを作る時に使用したいと思います。

まだまだ初心者で、Next.jsの学習も始めたばかりです。
少しずつリファクタリングや機能追加をしていきたいと思うので、
今後もお楽しみに！

おわりに

ZennとかQiitaとかあるじゃないですか
ああいうとこで技術記事を書いている人たち本当にスゴイと思っています。
自分もそういう記事書けるくらいのスキル身につけたい！

なので、このブログで学んだことをアウトプットしていこうと思います。

X(旧Twitter)でもちょくちょく投稿してますが、
やっぱり140文字だとちょっとしか書けないので
このブログで意味わからんくらい書いていきたいと思うので、
よかったら見に来てください！

それではまた！