# 研修25日目(2020/6/12)
## フロントエンドを終えて

先週フロントエンドが終わり今週からDBやPHPなどバックエンド側の学習が始まりました。そこで、せっかく先週フロントエンドの集大成としてオリジナルアプリを作ったにもかかわらず、新しく学ばなければならないことがたくさんあることにより、その時考えていたことなどを忘れてしまうのはもったいないと思い、備忘録としてその時の自分の取り組みを書くことにしました。

かなり長いので全然無理には読んで頂かなくて結構です。ほんと無理には大丈夫ですよ！よ、読んで欲しいなんて言ってませんから！

それでも見たい方は、ありがとうございます。長くて申し訳ないですが、よろしくお願いします。

***目次
①.今回作ったアプリの概要
②.5日間の流れ
③.力を入れた所とそれぞれの反省点(発表含め)
④.今後いつか足してみたい機能
⑤.まとめ***

---

### ①.今回作ったアプリの概要
↓初期状態

---
↓リスト追加

---
↓カード追加

---
↓リストもカードも幾つでも増やせます

---
↓リストもカードも好きなように移動させることができます

---
↓リストもカードも削除ができます

---
↓カードが全てなくなりました。

---

### ②. 5日間の流れ
月曜日に沢口さんからvue.jsで何か５日間で作ってみようというお話があり、そのお話の後５日間どのように進捗したかをまとめてみました。
* 月曜：何を作るかを考えた。これといって作りたいものはなかったので、以前作ったTODOリストを発展させることにした。そして以前インターンで進捗管理に使われていたAsanaが思い浮かび、所謂カンバン方式のタスク管理ツールを開発することに決めた。
Asanaはこちら→　https://asana.com/ja#close
* 火曜：作りたい物をどのように実現するか考えた。Asanaをはじめとしたカンバン方式のタスク管理ツールのデザインを参考にしながらコンポーネントの設計と入力・出力の設計をした。また、データの受け渡しが複雑になりそうで、その状態管理を任せられるVuexを使うかどうか検討するため、Vuexの勉強をしていた。

（参考にしたデザイン①）

（参考にしたデザイン②）

（火曜日に書いたコンポーネントと入力、出力の設計図。マトリョーシカのような入れ子構造にすれば行ける！とわかり、そこを意識しながら書いた。分からなくなった時は常にこれを見に行き頭を整理した。）

* 水曜：Vuexは悩んだ結果使うことに決めた（今回のような小さなアプリには必ず必要ではないのはわかっていたが、親子間でのデータ受け渡しだけでなく、storeでデータの状態管理を任せる感覚を体験してみたかったため。）環境構築した後、実装を始めた。VueCLIが最強すぎて、良い感じのディレクトリをすぐ作ることができた。圧倒的感謝。webpack触らなくて良いのがとても嬉しい。最初の難関はリストの追加機能だったが、なんとか実現でき、その日はリストが横にズラーっと並ぶ所まで完了した。

（今回のプロジェクトのディレクトリ構成。Sassを導入し、main.scssでデフォルトのスタイルの無効、prepends.scssでよく使う色を登録し各コンポーネントから呼び出せるようにした。某インターンの真似してます。）

* 木曜：引き続き実装に取り組んだ。リスト追加コンポーネントとリストコンポーネントを作る要領でリストコンポーネントの中にカード追加コンポーネントとカードコンポーネントを作り、イメージしていた挙動を実現できた。自分で入れ子になるように設計して、それがうまくいった時とても嬉しく感じた。全ての合計カード数を出す処理がなかなかうまくいかず苦しんでいたがVuexのgettersを使いリスト内の合計カード数を集計することができた。JSを勉強しなければ絶対描けなかったので、生JSの大切さを痛感した。あ、朝だ

（store内のgettersの処理。高階関数の使い所が見えてきた気がする。）

（ボード内の全カードを合計する処理が呼び出され…）

（無事viewに反映された。）

* 金曜：木曜までにロジックは終わったので、ドラッグアンドドロップのプラグイン投入とスタイルの調整、そして発表の準備をした。ドラッグアンドドロップはVue.Draggableを使い実装した。とても使いやすく便利なプラグインだと思う。発表は楽しかったです。

Vue.Draggableについて
https://github.com/SortableJS/Vue.Draggable
https://www.ritolab.com/entry/173

### ③.力を入れた所とそれぞれの反省点(発表含め)
#### 1. ユーザビリティについて
　今回の課題は５日間でVue.jsを使いオリジナルのアプリを作るということであったが、どちらかというと自分で考えたロジックを書けるようにすることが優先事項であり、デザイン部分は今回においては気にしすぎる必要は無いことは理解しており、沢口さんもそのようにご説明されていた。

　しかし、今回はVue.jsの演習であるとともに、フロントエンドの最終回であったこと、そして発表もあるということであまりに酷いデザインではいけないと思い、ユーザビリティを最低限ではあるが意識して開発に取り組んだ。具体的には、

* リストやカードの文字数が増えてもスタイルが崩れたりカウンターの表示や各ボタンと重ならないようにスタイリング
* 不必要に目立つ色を使わず、追加は緑、削除は赤と重要な部分だけ色付け
* リストとカードの追加・削除をなるべく似たような体験感を提供（ユーザーの勉強コストを減らさせる）

といった所を意識して開発をした。
自分にとっても使いやすいアプリケーションを目指したため、PC用ということもありアニメーションやホバーアクション、モーダルウィンドウなどは必要がないと考え入れなかった（練習としていれるのありだったが）。無駄に画面機能を詰め込みすぎないこともユーザビリティーの担保の上で大切だと考えている。

（反省点）
VuetifyやBootstrapといったUIプラグインを試してみても良かったかもしれない。他のみんなの発表を聞き、UIに限らず、様々な便利なプラグインをうまく使って開発していたので、全部自分で作ろうとせず良いものは取り入れるよう意識したい。

#### 2.プロダクト設計について

今回は5日という短い期間でたくさんのこと（何を作るか考え、どうやって実現するか設計を行い、実装する）をこなさなければならなかったので、早く手を動かしてコードを書かなければ間に合わないヤバイ！という思いも最初あった。しかしこれまでの経験上、後のことを考えしっかり土台となる部分が設計されていれば追い込みが効きやすい（開発体験が良い）のに対し、その場しのぎで設計がされていると何かページや機能を追加する時とても面倒くさい（開発のモチベが下がりまくる）ことは感じていていたため、今後何かが足されていくことを強く意識しながら設計に取り組んだ。

　2日目まではコードを書かず設計（コンポーネント設計やVuexやSassなどのライブラリ導入の検討）に注力したが、それが後半の実装で効果を発揮できたと思う。実際、Vuexを使いstoreでの状態管理の役割（Action,Mutation,State）を分担させることで、コンポーネントが入り組んできても親子間のデータ受け渡しに頭を悩まさずに済んだり、Sassの導入でスタイリングの効率を高めたことで、CSSのよくわからない挙動に苦しまず発表直前の数時間でデザインを間に合わせることができた。

　コードを書き始めたのが3日目からだったが、開発する上での土台をしっかり固めたことが、今回楽しく実装に取り組めた要因であると考えている。開発効率を高めるという点における設計の大切さを痛感することができたこともだが、自分で実現のための方法を考えるのがとても楽しいことだと知ることができたことも、今回得た収穫の一つだと思う。

（反省点）
正直実装の時間がカツカツになってしまった。もう少し余裕を持ったスケジュールを立てるべきだった。

また試したい技術を使うことを目的として設計したことも良くなかった。技術の目的化を防ぐため、それぞれの技術には適材適所というものがあることを理解し、課題解決の手段として技術が存在するということを改めて意識したい。

#### 3.発表について
　今回の発表では、どれだけプロダクトの仕組みや機能を分かりやすく、そしてどんなことを考えながら開発に取り組んだのかという自分の思考の背景をなるべく皆さんに伝えられるよう心がけた。具体的には、
* いきなりコードや作ったアプリを見せて終わりにするのではなく、今回作りたかったプロダクトのイメージを動画や図、絵を使い分かりやすく伝える
* 「なぜこれを作りたかったのか」「なぜこのライブラリを使ったのか」など、それぞれの理由の根拠を明確にする
* 細かいコードの話はせず（いきなり込み入った新規のコード見せられても伝わりにくい）、コンポーネント設計や処理フローの話を中心にして、なるべくプロダクトの全体感を感じてもらえるようにする

といった所を意識して発表を行った。
聞いてくれている人に分かりやすく、飽きさせないよう話し方を工夫することはどんな仕事でもとても大切だと思うので、難しいが練習していきたい。

（反省点）
Zoomでの発表が思ったより難しく伝えたかったけどうまく伝わらなかった部分もあった。自分から皆さんに問いかけをするなどして入り込めるような工夫もすべきだった。

### ④.今後いつか足してみたい機能
* リロードしてもデータが残る（ローカルストレージへの保存orDBへ保存）
* ログインユーザー専門のタスク管理画面（会員登録・ログイン機能を持つAPIサーバをバックエンドで用意し、それと非同期通信）
* タスクの担当者振り分け
* ガントチャート

### ⑤.まとめ
フロントエンドの学習が先週で終わり、研修開始から１ヶ月経ちましたが、自分がいかに矮小な存在か理解することができました。特にインターンでフロントを触っていたにも関わらず、生のJavaScriptの学習を今まで怠っていて酷い有様だったこと、反省しています。まだpromiseについても良くわかっていない状態なので、頑張りたいです。
ここからさらにサーバーサイドの学習が進み大変ですが、精一杯食らい付いていきます。

あと、カンバン方式の語源ってトヨタ自動車の生産工程で使われて多物らしいので調べてみたいです。