概要・気づき編

ポートフォリオ

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が振られてない時の挙動や子コンポーネントでのクラスの付け方、レスポンシブ対応の時にどのようにファイルを分けるのか考えるきっかけになった。

次回

技術選択編