こんにちは、いまりんです。
claudeでvibe coding をして開発スピードが向上したのと、多少フロントエンドの実装について慣れてきたのもあって個人開発をするモチベが高くなってる今日この頃。
今回は思考整理Webアプリとして「Matoriko」を作ってみました。
こちらになります。
https://matoriko.imarin.net/
命名の由来はマトリョーシカのように思考が生えてくる、、といった感じ。
きっかけ
思考を整理する際に頭の中ではトピックが枝分かれし、階層構造になっていることがよくあると思います。
僕は月末に「今月なにがあったっけ」といったことを散歩しながらスマホのメモ帳に書き殴ることをしたりしています。
そのとき浮かんできた出来事はバラバラで、それぞれに「原因」や「気づき」が紐付いています。
しかし、一般的なテキストエディタのような「上から下へ流れる一本道の文章」では、この立体的な思考のつながりをうまく再現できず、もどかしさを感じていました。
マインドマップのような階層構造で、かつ日記のように日々の思考をストックできる場所が欲しい」——そんな思いから、このアプリの開発を始めました。
Matorikoの紹介
試しに今回の記事を書くにあたっての下書きをMatorikoで書いてみました。
項目ごとに分けられていい感じ！
結構ブログの記事を書く時に考えがまとまらずうーん、、て唸ってることが多いのですがこの形式で書くといい感じに整理できた気がします。
ちなみにsaveボタンを押すとマークダウン形式でテキストファイルをダウンロードできます。
使った技術
ソースコードはこちら: https://github.com/imarin309/Matoriko/tree/main
React + type scriptの構成で、新しい挑戦としてCSSにTailWindを使ってみました。
たびたびTailWindというキーワードを聞くのでちょっと使ってみたいと思っていたんですよね。
使ってみたらCSSとコンポーネントを行き来して確認するみたいなことが減って開発のしやすさを感じたが、CSSを隔離できないところがちょっとうーんて感じ。
今度この辺を整理してまた記事にできたらと思います。
おわり
実際に使ってみて、文章をただ書き連ねるよりも「今、自分は何について深く考えているのか」が明確になる感覚があります。
自分自身の「欲しい」から始まった開発でしたが、実際に使ってみると、文章をただ書き連ねるよりも「今、自分は何について深く考えているのか」が明確になる感覚があります。
ではまた( ´ ▽ ` )
