はじめに
私が勤めている企業ではなぜかテックブログがありません
普段からアウトプットしている人も恐らく私だけという状態なのでテックブログがあったとして書く人がいないのでなかったのかと思います
しかし最近になってエンジニア採用をするならどんな技術がその企業でできるのだろうという理由からテックブログを見るのは当たり前だということに気づきました
テックブログがない私の会社では強いエンジニアが採用を受けることがほぼありません
そこで学習の一環として勝手に会社のテックブログをNext.jsで作成してみたので記事にします
作成したもの
これがトップページのイメージです。
ブログには大きく2つの種類があり、ブログ用に投稿している記事とQiitaやZennなどに投稿している記事が掲載されるようになっています。
記事の詳細画面ではMarkdown形式のものをHTMLとして表示できるようになっています。
使用した技術
今回はMarkdownブログを作ろうと思ったのでNext.jsのSSGを利用して作成しようとしました
また、RSSでデータを取得して外部サイトの記事も取得することで、アウトプットの場所を自由に選べるようにしています
外部サイトをRSSからブログにする
ここの実装はほとんど以下の動画を参考にして行いました
この動画では5時間モブプログラミングをして1からテックブログをTDDで作成しています。
動画を真似るだけでRSSからブログが作れるだけではなく、TypeScriptの方の話やTDDのやり方、サーバーのモックやCypressを使ったE2Eなど多くのことが学べました
この動画で勉強するのはかなりのステップアップになるのでお勧めです
kawamataさんが実装の方針や考えていることをしっかり話してくれたり、実際に調べながら実装していくのもよかったので、別の企画も楽しみにしています
話は逸れてしまいましたが、この動画をやることでRSSから情報を取得して画面に表示するまではできるのであとはいい感じにCSSを当てて表示するだけでRSSブログは簡単にできます
また以下の記事も大変参考になりましたので共有しておきます
Markdownブログを作成する
ブログをつくるならNext.jsでSSGをつかったMarkdownブログと決めていました (流行りだとおもってます)
そこで以下の動画をみてNext.jsの学習を行いました
この動画の作者の方はとても分かりやすい説明と無駄のない説明がとても好きでReactを学習する際には大変お世話になっております。
このブログではまさにやりたかったMarkdown, SSGなのでこの動画をみて真似ればブログが完成します
2つを併せる
ほとんどできているものをあとは組み合わせるだけで今回のブログは完成しました
Next.jsのCSSはMantineというコンポーネントライブラリを利用してみました
1から技術を調べてやるのもよいですが、既にハンズオンとして存在するものをコアの技術としてアレンジを加えるという個人開発の方法もとても早く作れるので良いなと思いました
おわりに
他にもデプロイはFirebaseで、CI/CDにDaggerを利用したりと新しいことも実はやっておりますが、今回はコアな部分の簡単な紹介でした
自分で何かものを作り上げる経験がほぼなかったので、とても達成感がありました
今後も色々個人で開発していければと思ってます