React×MUI×Amplifyで個人ブログを作った話
はじめに
はじめまして！普段はスタートアップで業務SaaSを作っているtaroと申します！
Zennへの初投稿です！今回は個人ブログを作った話をまとめていきます。
どんなブログ？
制作したのはよくあるシンプルな個人ブログです。
- カード形式の記事一覧画面
- サイドバーに目次がある記事詳細画面
- 記事はMarkDownで管理
本当に必要最低限の機能が揃っているだけのシンプルなブログです！
なぜ作ったか？
ZennやQiita,はてなブログ等々で手軽にブログが作れる今、わざわざ個人開発で作った理由は2つです！
新しい技術を手軽に試す場が欲しかった
普段、技術書を読んだり、ZennやQiitaを始めとした技術ブログで色んな情報に目にする中で「あ、これ試してみたいなー」って思った時に、手軽に試せる自分の場所が欲しかったのが最初の理由です！
特に最近はフロントエンドの技術力を高めたくて色々と勉強しているのですが、業務で試すとなると如何せん限界があります。
かといってSandboxで触ってるだけだと、少し物足りなかったり。。。
やっぱり「こうゆうものが作りたい！こんな機能が作りたい！」って思いから、色々調べてながら触るのが楽しいし、一番知識が身につくなーって思ってます。
設計等のプロダクト単位で考えることを試す場が欲しかった
設計や技術選定等の、プロダクト単位で考えるを試す場が欲しかったのも理由の1つです！
普段開発をしている時に「この設計の方がいいんじゃないか？」とか思うことってありますよね。
でも設計やコード規約って多少開発しずらさがあっても、プロダクト内で統一されていることにも意味があるので、中々変えるのって難しい。。。
その上変えた結果やっぱりやりづらかったってなると戻すのも大変です。
そんな業務で手軽に試すのが難しい、設計や技術選定を試す場としても個人開発のアプリっていいなーって思いました。
なぜブログか？
上記の理由から「なんかアプリを作りたいなー」って思っていた中で、ブログを選んだ理由は3つです！
仕様やデザインを考えるところにエネルギーを使いたくなかった
今回の目的は技術面の学習であり、モチベーションを維持するためにも、仕様やデザインを考えるところにエネルギーを使いたくなかったです。
その点ブログは世の中に無数にあり、仕様やデザイン面で考えることがほぼなくドメイン知識も不要。
そのため技術面で色々試す方に時間やエネルギーを割けるためちょうど良いなーって思いました！
世の中に公開できる
またブログはtodoリストやメモ帳のようなよくあるアプリとは異なり、世の中に公開するために作るアプリって点でも良いなーって思いました！
やっぱり世の中に公開するかどうかで本気度が変わりますよね。
人様に見せるってなると、それなりにちゃんとしたものを作らないとって気持ちになり、それがモチベーションの維持につながります。
技術選定の背景
ブログを作るのに使ったメインの技術と選定の背景です！
React
フロントエンドのライブラリはReactです！
そもそもこのブログを作る背景として、Reactをベースとした色んな技術を触りたい、設計を試したいという気持ちから来ているので、フロントエンドはもちろんReactで作りました！
言語はTypeScriptです。
AWS Amplify
インフラはAWSのAmplifyです！
Amplifyはサーバーレス環境をサクッと構築できるサービスで、
- S3を使ったストレージ機能
- Cognitoを使った認証機能
等も、簡単に作ることができます！
今回は、フロントエンドの技術や設計を試すってのが目的だったため、バックエンドやインフラの開発にリソースをかけたくなかったため、サクッと作れるAmplifyを採用しました！
GUIでポチポチしながらモデルやユーザー認証などが作成できて驚きました
MUI
UIライブラリはMUIを使いました！
UIライブラリを使ったのもstyleの実装に時間をかけたくなかったからです！
その上でMUIを採用したのは、npm trendsで比較した結果、最も使われているライブラリであり、それだけ使われているライブラリが、どんな単位でComponentを作り、どんなpropsをもたせているか等を肌で感じてみたかったからです！
responsiveFontSizes(theme, options) => themeの1行で、フォントサイズのレスポンシブル対応ができるのに感動しました。
その他使用した技術
基本npm trendsを見て、npmのダウンロード数とGitHubのStar数を参考にメジャーな物から使用感が良いものを採用しました！
react-markdown
ReactでMarkDownをHTMLに変換するために使用
カスタマイズ性が高くMUIのComponentにも変換できて使いやすかったです。
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>
),
}}
/>
);
};
EasyMDE
ReactでMarkDownエディターを作成するために使用
React Hook Form
Reactで入力フォームを管理するために使用
React Router
Reactでルーティング設定をするために使用
よかったこと
ブログを作る中で感じたよかったことです！
仕事では触らない技術を試すことができた
MUIやAmplifyなど普段の業務では触らない技術を触れられたのは、率直によかったなーと思います。
それらの使い方を知れるだけでなく、それらの技術がどんな設計で作られているのかを触りながら感じられることにより、業務での設計にも活かせそうな部分が多かったです。（特にMUIのComponent設計を知れたのがよかった）
仕事では触っている技術をより深く理解できた
また逆に仕事で使っている技術への理解も深くなりました！
例えば、ESLintの設定などは自分でしたことがなくしっかりといじったことがなかったのですが、自分で0から環境構築をすることで、「あ、こんな設定があるんだー」といった学びが多々あり、環境整備をしてくれている会社のメンバーに本当に感謝だなーって思いました。
設計の難しさを学べた
やっぱり0からアプリを作るときの設計って、こんな小さなブログアプリでも難しかったです。
ディレクトリ構成やComponent設計は何度も決めては変えるを繰り返しました笑
ただ業務でするはずだった失敗を先にできたのはよかったなーって思ってます。
また実際の業務で巨大なアプリの設計をされている方々への尊敬の心がより強くなりました。
業務で使ってる技術の最新バージョンを試せた
これは当初予定していなかった学びでした。
具体的にはReact Hook FormやReact Router等のReact関連ライブラリの最新バージョンを触れたおかげで、しっかりメリットを理解した上で「ライブラリのバージョン上げましょー！」と言えるようになりました。
苦労したこと
ブログを作る中で苦労したことです！
Amplifyの情報が少なくて困った
進捗が止まる原因の8割はだいたいこれでした。
Amplify自体が新しいサービスってこともあり情報が少なく、またどんどんアップデートを重ねているため情報が古くなっていることがざらにありました。（公式のチュートリアル通りにやっても動かないことがしばしば…笑）
結局のところ困ったらソースコードを読むのが一番解決が早いってことになり、OSSのソースコードを読む良い経験になりました！
お世話になった記事
開発中に参考にした記事です。
Amplify
react-markdown
EasyMDE
まとめ
簡単なブログアプリとはいえ、しっかりと目的を設定したおかげで学びの多い個人開発でした！
もし気になった点や感想があれば、コメントいただけると嬉しいですー！
Discussion