Sunae

概要

ブラウザ上で駆動するメモ帳(WYSIWYGテキストエディタ)です。Sunaeのサイト自体はそのメモ帳を自分で作る(メモ帳の色や行間の大きさを設定する)ことができるWebアプリです。Sunae上で生成したデータURLをブラウザのアドレスバーにペーストすることでメモ帳が立ち上がります。このメモページはブラウザにブックマークすることで素早く使えるようになります。基本的にこのメモ帳の内容は保存ができません。保存するようなことでもないもの(今日のタスク一覧など)を書くのに使います。詳しくはリポジトリのREADME.mdを参照ください。

生成されるコードの一例

data:text/html,<head><meta charset="UTF-8"><title>%E3%83%A1%E3%83%A2</title><style>body{background-color:%23282c34;color:e5c07b;line-height:2;padding:60px;font-family:sans-serif;}</style><link rel="icon" href="data:image/svg+xml;base64,PHN2(～中略～)nPg=="></head><body contenteditable></body>

色を自在にカスタマイズ

カラフルなエディタ

色を変えれば気分も変わります✨

目的

Reactチュートリアルを終えたため、簡単なアプリを作ってみたかった
- 以下のようなアイデアの実現がちょうどよい題材になりそう
些細なことをメモするには既存のメモアプリはオーバースペックだと感じた
- メモのタイトルを考えるのが面倒
- 保存するほどでもないから保存もしたくない。管理が面倒
- 起動が遅すぎる
ブラウザ上で気軽に文字が書けるものがあれば便利ではないか
- contentEditable属性とデータURLを活用することで簡易的なメモ帳にするアイデアを見かけた
- HTMLなので自分好みにスタイルを当てられたら楽しいのではと思った

工夫点

Figmaによるデザインカンプ

Figma習得のため、Figmaで簡単にデザインカンプを作成しました。

デザインカンプ初期

↑初期デザインカンプ

最終デザインカンプ

↑デザインカンプ再考

画面サイズのことを一切考えていなかったために、成果物はこれとは全く違うものになってしまいました。

Viteを使ってみる

ビルドツールにはViteを採用しました。Reactのチュートリアルではcreate-react-appを使用したのですが、追加で必要なライブラリの多さやdeprecation warningの多さにうんざりしていたので別のツールを探していました。たまたまその際Viteが話題になっており、興味があったため使ってみることにしました。デフォルトでHMRが効くことに感動しました。

TailwindCSSを使ってみる

他のCSSライブラリの採用も考えましたが、興味本位で話題になっていたTailwindCSSをせっかくなので採用しました。ここで得られた最高の体験が、次のポートフォリオ開発における採用につながりました。

Reactチュートリアルと違う…？

開発を始めてから、Reactの書き方が主流でないことに気づきました。チュートリアルで紹介されていたクラスコンポーネントは使わずに、関数コンポーネントやHooksを使うのだそうです。再度書き方を調べ直す必要がありましたが、クラスコンポーネントよりも簡潔な書き方ができることを知りました。チュートリアルで感じていたよりも親しみやすかったです。

コンテナ内開発

Reactチュートリアルに続き、これが2つ目のコンテナ内開発の体験でした。手軽に実行環境を構築でき、VSCodeの設定まで隔離できるDocker + VSCodeの組み合わせは本当に最高です。以降の開発も当たり前のようにコンテナを活用するようになりました。

概要