React×MUI×Amplifyで個人ブログを作った話

• カード形式の記事一覧画面
  
• サイドバーに目次がある記事詳細画面
  
• 記事はMarkDownで管理
  

本当に必要最低限の機能が揃っているだけのシンプルなブログです！

なぜ作ったか？

ZennやQiita,はてなブログ等々で手軽にブログが作れる今、わざわざ個人開発で作った理由は2つです！

新しい技術を手軽に試す場が欲しかった

普段、技術書を読んだり、ZennやQiitaを始めとした技術ブログで色んな情報に目にする中で「あ、これ試してみたいなー」って思った時に、手軽に試せる自分の場所が欲しかったのが最初の理由です！

特に最近はフロントエンドの技術力を高めたくて色々と勉強しているのですが、業務で試すとなると如何せん限界があります。
かといってSandboxで触ってるだけだと、少し物足りなかったり。。。
やっぱり「こうゆうものが作りたい！こんな機能が作りたい！」って思いから、色々調べてながら触るのが楽しいし、一番知識が身につくなーって思ってます。

設計等のプロダクト単位で考えることを試す場が欲しかった

設計や技術選定等の、プロダクト単位で考えるを試す場が欲しかったのも理由の1つです！

普段開発をしている時に「この設計の方がいいんじゃないか？」とか思うことってありますよね。
でも設計やコード規約って多少開発しずらさがあっても、プロダクト内で統一されていることにも意味があるので、中々変えるのって難しい。。。
その上変えた結果やっぱりやりづらかったってなると戻すのも大変です。

そんな業務で手軽に試すのが難しい、設計や技術選定を試す場としても個人開発のアプリっていいなーって思いました。

なぜブログか？

上記の理由から「なんかアプリを作りたいなー」って思っていた中で、ブログを選んだ理由は3つです！

仕様やデザインを考えるところにエネルギーを使いたくなかった

今回の目的は技術面の学習であり、モチベーションを維持するためにも、仕様やデザインを考えるところにエネルギーを使いたくなかったです。

その点ブログは世の中に無数にあり、仕様やデザイン面で考えることがほぼなくドメイン知識も不要。
そのため技術面で色々試す方に時間やエネルギーを割けるためちょうど良いなーって思いました！

世の中に公開できる

またブログはtodoリストやメモ帳のようなよくあるアプリとは異なり、世の中に公開するために作るアプリって点でも良いなーって思いました！

やっぱり世の中に公開するかどうかで本気度が変わりますよね。
人様に見せるってなると、それなりにちゃんとしたものを作らないとって気持ちになり、それがモチベーションの維持につながります。

技術選定の背景

ブログを作るのに使ったメインの技術と選定の背景です！

React

フロントエンドのライブラリはReactです！

import { Typography } from "@mui/material";
import ReactMarkdown from "react-markdown";

export const Markdown = (props: MarkdownProps) => {
  const { markdownText, components } = props;

  return (
    <ReactMarkdown
      children={markdownText}
      components={{
        ...components,
        p: ({ children }) => <Typography paragraph>{children}</Typography>,
        h1: ({ node, children }) => (
          <Typography component="h2" variant="h4" gutterBottom>
            {children}
          </Typography>
        ),
      }}
    />
  );
};