とりあえず完成報告と共有
https://github.com/Yu1111111/FrontOnlyMEMO
GitHub PagesのURLがなかなか発行されないのでそちらは後日付け加えます。
ボロボロではありますがとりあえず作り終えました。
ファイルデータとテキストデータの紐付けはできているのですが肝心のフロント画面がボロボロのため、ただ登録したファイルとテキストが一覧表示されるだけの代物になります。
あまりに中途半端なため実用性の無いメモアプリになってしまいましたが「アプリを自力で作って公開する」と「データを運用する」を達成できたのでヨシ！
学んだこと・得られたもの
- 命名規則の重要性(関数・データ・要素のID)
- コードの振り分けの重要性
- UIデザインの必要性
命名規則の重要性
初めは思いつきでタグのidや関数名、変数名、キーを割り振っていたためしばらくすると「このadd-fileってなんだっけ...表示する場所か？それともトリガーか？」と迷いが生じてしまいました。
そこで今回は以下のように命名規則を作って開発しました。
データ名 → 大文字とアンダーバー(snake_case)
変数や関数 → 動詞は小文字、名詞は大文字で始まる(camelCase)
要素id → 表示する場所を表す場合は"Display + 名詞"、引き金を表す場合は"Trigger + 動詞"
命名規則はチーム開発の場に限らず個人開発であっても重要なスキルだと思うので癖をつけておきたいものです。
コードの振り分けの重要性
何せ初めは一つのJSファイルに思いつきで必要な処理を記述していたため途中から「グロいな...」と思い整理することにしました。
たまたま知っていたMVCモデルを活用して役割毎にファイルを分けたかったのですがイマイチ紙に書き起こしても整理ができなかったため断念。
結局は単純にユーザー視点からみた「目的」毎にファイルを分けて開発しました。
再利用性を考慮して開発しようか悩みましたが無理でした。次回に期待。
UIデザインの必要性
今回は紙になんとなくのイメージを書いてそれに沿ってどうにかHTMLとBootstrapを用いて組み立てるという行き当たりばったりな感じのUI開発となりました。
後々になって「あれがないから付け加えなきゃ」などということがあり、手が止まることが度々ありました。
正直いって気持ちよくない。UIデザインはコードを書く前にFigmaあたりを使ってきっちり明確にしておくべきでしょう。
今後の予定
フレームワーク使って開発してぇ。メンテナンス性を高めてぇ。
てなわけでReactを学んでいこうと思います。
他にもBootstrapと異なり、より自由度の高いデザインが可能なCSSフレームワーク"Tailwind CSS"も気になっているのでかじりたい。
DB操作とバックエンド(Node.js+Express)あたりはお預け状態になってしまいそうです。
状態管理を担うReduxも気になるんだよなぁ...
直近ではReact ,Redux ,TailwindCSSをかじり、今回開発した簡易メモ帳をより実用的なものにグレードアップすることを目標にぼちぼちやっていこうと思います。
最後に
頭がうるさくて眠れない方は大人しく市販の睡眠安定剤を飲んでくださいね。睡眠不足ほど人を殺すものもないと思うので。
ではでは。