概要・気づき編
ポートフォリオ
Log: https://portfolio-studyapp.web.app/
アプリ概要
用途
自分が取り組んだことを記録して視覚化
使い方
- 取り組み時間、場所、集中力、内容を記録
- 記録した内容をユーザーごとに管理
- カレンダーとデータを同期
- 場所ごとにグラフを用いて集中力を視覚化
特徴
- SPA（シングルページアプリケーション）
- Firebase(BaaS)を使用したフロントエンドのみの実装
- ニューモーフィズムを取り入れた最新のデザイン
作成理由と意図
理由
- ポートフォリオ
- VueとFirebaseを使ったバックエンドレスなフロントエンド開発
- ユーザー毎のデータ管理の実装
意図
作成決定までのフロー
作りたいものがない→何を基準に作りたいものを決定するべきか→自分の一番身近なものに目を向けよう→プログラミングの勉強→解決すべき課題は？→計画を立てるのが苦手でいつも挫折している→勉強した後に記録をするようにして見える化を図り逆説的に計画が立てれるようにならないか
意識したこと
- 新しい知識はほどほどにして学んだ内容をフルに活用する
- Vueの機能を網羅的に使いwebアプリケーションの最低限の機能を備える
作ってみて感じたこと
- 教材をやるより楽しい
- 非同期処理の理解が深まる
- 次作るものへの意欲が湧く
- 成功体験を得ることができる
- 追加機能を付けてみたくなる
- CSSのbox-shadowは結構コピペ
- VueのCSS設計について学ぶことができる
- 教材を使って勉強するより圧倒的に身に付く
- Vueのライフサイクルについて深く勉強できる
- 実体験を通じたGitの勉強をすることができる
- 一つのコードを書く上でも計画を立てることの重要さを知る
- Array型はかなり便利だと知る（頼り過ぎていいものか模索中）
- vuetifyの一部導入は結構めんどくさい（やるなら全てマテリアルデザインにしたほうがいい）
抜粋
追加機能を付けてみたくなる
アプリケーションとは最低限の機能を実装した上で、プラスアルファによって進化していくものだと感じた。完成形を先に決める必要はなく、今後どのように展開させていくのか考えることこそが重要で、作ってみないとこの考えには至らなかったと痛感している。今後追加してみたい機能は後述する。
実体験を通じたGitの勉強をすることができる
今までなんとなくGitを使用していたが重要さについては理解できていなかった。教材をやるときは流れが全て決まっているため履歴を管理する必要がなかったからだ。今回全ての工程を自分で管理してみて履歴管理とブランチを作ることの重要さを痛感した。
例えばDBとの通信をaxiosからFirebaseのメソッドに変える時、色々なコンポーネントやファイルを書き換える必要があったため挙動がうまくいかない可能性がある。その時ブランチを切ることでリスクを回避することができた。
VueのCSS設計について
教材でやるときはあらかじめクラスが振られているため考える必要がなかったが、今回自分でコンポーネントの管理をする必要があったためCSS設計について初めて疑問を持つことができた。親コンポーネントにscopedが振られてない時の挙動や子コンポーネントでのクラスの付け方、レスポンシブ対応の時にどのようにファイルを分けるのか考えるきっかけになった。
次回
技術選択編