概要
JavaScriptとVue.jsで作ったgweton-webを、 TypeScriptとReactで書き換えたものです。
gweton-webから変わった点としては、より詳細な検索が行えるようになっていたり、ドラッグ&ドロップ対応があります。 また、左のカテゴリリストと右のメモリストのキーボードの矢印キー移動できるようにしていたり、全体的にキーボードで操作できるように工夫しています。
長期的な開発を経験することを目的としており、約1年半ほど開発を行っていました。 開発の後半では、jestを使ったコンポーネントのテストなども書いていました。
使用した技術
- TypeScript
- React
- materia-ui
- styled-components
- jest
- Firebase
データの保存にFirestoreを使用しており、セキュリティルールも記述していて、セキュリティについても少しは考慮していた気がします。
HTMLやCSSも知識がほぼ0の状態でしたが、これを作りながら学んでいった記憶があります。 Vue.jsのVuetifyと比べて、カスタマイズのためにCSSを書かなければいけないケースが多かったため、学ばざるを得ませんでした。
プロジェクトから学んだこと
今もっているReactやTypeScript、HTML、CSSの知識の多くを、このプロジェクトを作りながら学びました。 これまでは新しい知識を得ることに喜びを感じていたので、インプットが学びの中心でした。 しかし、このプロジェクトを通して、アウトプットに基づかない知識だけではモノを作り上げることができないと感じ、実践の重要性を学びました。 そこから、インプットが中心の学習方法からアウトプットを中心とする学習方法に変わっていきました。
また、このプロジェクトでは、新機能の開発よりも、既存の機能の改善やリファクタリングに多くの時間を費やしてきました。 そういった経験も、良いコードを書くための洞察を深めることはできると思いますが、触れることのできる技術は限られています。 開発者としてのスキルを伸ばすためには、様々な機能を開発し、幅広い技術に触れる必要があるとも感じました。