こちらのアプリの機能追加をした記事があります！
->ReactのWebアプリに機能追加してエディタアプリ風にしてみた
はじめに
Reactで簡単なWebアプリを作りました。（実務でもReact使っています）
動機としては、転職のこと等を考えて積極的に自分の技術をアウトプットしようと思ったことと、自分のGithubアカウントに再利用可能性が高いコードを追加していきたいと考え、自分が使ったことが無い技術を取り入れて個人開発していきたいと思ったからです。今回は、Color-Picker関連を使ったことが無かったので使いたいと思い、それを中心に機能を考えました。
概要
- サイトはこちら、Githubリポジトリはこちら
- ボタンデザインを自分で作れるサイト
- 開発環境はReact, Typescript, Vite, MUI
- 所要時間は20時間程度 (約1週間)
- レスポンシブは600px以上(スマホ横画面、タブレット縦画面程度)対応
機能
- ランダムなテキスト・色のボタンを追加、選択中のボタンを複製、Reactコードを表示、色を変更、選択中のボタンを削除
- ＋ボタンを押すとランダムなテキスト、ランダムな色のボタンを作ってくれます。色は完全ランダムだとめちゃくちゃなボタンばかりできてしまうので、いい感じのを種類化して作りました。テキストは200種類ほど、色が60パターン程なので、全パターン数は12000種類程度。
技術
- グローバル状態管理はuseRecoilを使用
useStateだとバケツリレーが辛く、Redux使うほどでもないのでちょうどいいuseRecoilにしました。RecoilはuseContext + useStateと機能的にはほぼ同じですが、書き方やデータ管理がより楽です。 - UI系は基本的にMUIを使用
MUIからはButton, IconButton, TextField, Tooltip、他はコード表示部分でreact-syntax-highlighterを使用しました。MUIは実務でよく使っていて慣れていたので、細かい調整等もそこまで大変ではありませんでした。 - デプロイは、gh-pagesを使ってGithub pagesにデプロイしました。CIはGithub Actionsで、ビルドが通るかの確認だけしています。
工夫した部分
- ユーザのアクションは全てアイコンボタンにして、カーソルを合わせると説明が表示されるようにしました（以下画像参照）。はじめはテキストが入ったボタンにしようとしたのですが、ここのゾーンがかなりごちゃごちゃする印象になったのでこのようにスッキリさせました。
まとめと感想
きちんとアウトプットした個人開発としては初でした。このアプリでもまだ加えたい機能が少しあるので追加実装しつつ、別のものにも挑戦したいと思います。
こちらのアプリの機能追加をした記事があります！
-> ReactのWebアプリに機能追加してエディタアプリ風にしてみた