自分は時計アプリ難民です．

リッチなタイマーを作りたい，というかねてからの想いにメンバーが応えてくれました．
自分は普段から勉強時や作業記録によく時計やタイマーを使用します．
確かにwebタイマー自体は山のようにあるものの，検索上位に出現するタイマー達は微妙に微妙な点が見え隠れ．
スマホで買った優秀な時計アプリは，今や世代遅れiPhone8の電池をアホみたいに食い荒らす大食漢．
（ちなみに5,000円で買ったスマートタイマーも何かと融通が効かず，今ではただのインテリアに でもオシャレだからいいや）

俺は決めた．便利なタイマーを作ろう．作って時計難民を救ってあげよう，と．

ただし，素朴にタイマーを作るだけではこの願いは叶えられないので，細かい部分にまで気を配った今風でモダンなリッチタイマーを作り上げたいのです．
最終日までにデプロイを済ませて，発表後には正式リリース，っていうのが理想形ではあるかな．

• 班決め
• 大まかな方向性決め

• コンセプトを固める
  • 作品の構成など
• 簡易企画書を作成する
  • 図なども一緒に

HTMLファイルを作成した後に，まず最初にするべきことはなんでしょうか．
...答えは，!→[tab]です．すべてはここから始まると言っても過言ではない．
VSCodeは予測変換がとても優秀なエディタなので，楽できる部分は楽したいよね．

せっかくなので，web開発に使える便利なVSCodeプラグインをご紹介しようと思います．

1. Auto Rename Tag
2. Auto Close Tag
3. Live Server
4. Bracket Pair Colorizer
5. JavaScript (ES6) code snippets
6. ESLint（JSのリンター）
7. Prettier

上3つは必須級なのでぜひ押さえておきたいところ．
LiveServerは，VSCode上でボタン一つでローカルサーバを起動することができます．ホットリロードに対応しているので，即座に変更部分を確認できます．
（nodeでもローカルサーバを立てて作業できますが，こっちの方が圧倒的に楽）

興味があれば試してみてね．

さて，作品制作についてですが，チームページ＋簡易企画書ページにも少しある通り，大体の方向性が決まってきたところです．
大枠は「タイマー×db記録×ソケット通信」といった具合です．

ブラウザアプリなので，PCだけでなくスマホでの使用も想定してレイアウトを組んでいきたいと考えています．
ただPC用，スマホ用と2つのレイアウトを考えて実装していては時間ばかりかかってしまうので，モバイルファーストで実装を進めていく考えです（ここは変更になるかも）．
またFirebaseを用いたログイン機構を搭載することで，ユーザ個人の計測時間を管理できたり，またユーザ間のランキング機能も実装できたらいいなと構想を練っています．

アプリケーション作成時のデファクトスタンダードとなりつつある（？）SPAでの実装も行う予感がしてます．画面遷移をすべてポップアップ表示等で済ますか，SPAとしてルーティング設計まで行うかは全体との兼ね合いになりますが，ルーティングライブラリもCDNで使えるので利用のハードルも大分低いかなと...

とりあえず，面倒なルーティング周りとdb設計だけ先に終わらせて，細かいデザインの部分は時間一杯まで粘って改良していく形がいいのかな，よく分かんないけど．
うまくいくといいな．
てかめっちゃ長くなってね

VSCodeにデフォルトで搭載されているgit機能が...使えてしまった...
学内ネットワークが必要ってことで変に身構えてた．addとかpushとかのgitコマンド自体は普通に打ち込んで使うって時点で何となく察してたけど，実際に使えてびっくりしました．

ターミナルで打ち込むのもかっこいいけど，2，3クリックで同じことができるならもう絶対そっちのがいいよ．
ちなみに，gitコマンド関連の情報は講義ページにまとまってるし，08班のgitリポジトリにも同じようなことを書いておいたので，必要な人はそこで確認してください．

講義の話に戻りますが，JSの基礎事項で押さえておきたい部分ってなんだろうって考えた時に，

- 文法規則
- オブジェクトの概念
- 主要なオブジェクトとよく使うメソッド
- DOM操作

辺りかなって思います．

HTML/CSS，JSを使うってだけならこんな知識いらないだろうけど，使いこなしたいなら知識も多少は必要なのかなって気がする．
勉強するのに良さげなサイトとか．

• MDN web docs

リファレンスとして使うのはもちろんだし，言語のドキュメントもちゃんと用意されてるから，ここのJSガイドを一通り見てみるとWeb開発の流れが掴めるかも．量はそれなりに多いから，割と時間ある人向けかも．

• 現代の JavaScriptチュートリアル

上のと似たようなドキュメントです．MDNの方が情報量は多いのかな，ちょっと分かんないです．検索上位に出てくる．

• YouTube動画

正直これが一番手っ取り早く勉強できる気がする．簡単なwebデザインとかアニメーションを紹介してる動画とかを探して，一緒にコード打ち込んでみよう．理解も深まるし，実際に動く技術が手に入ります．しかも無料．なので最近は専らこれ．

さて話を戻しますが，今回はものと操作についてうんうんと頭を悩ませました．具体的な内容を考えれば考えるほどアイデアの粗が目立ってくるし，煮詰めていかないといけない箇所が浮き出てきたので，それはありがたくいただいて次回以降ちゃんと考えていきます．
詳細な仕様の定義＋デザインラフ→ルーティング＋dbアクセスの設定→完成までデザイン凝る　という流れ．

todo関連はチームページにまとめてあるってことで省略．
（だんだん書く場所が分散してきて，どこで何を書いたのか分かんなくなってきたorz）

今回までここに書きたいことを書いてきて，情報の整理の仕方とかwikiの使用方法が上手じゃないなと反省しています
段々と個人ページを有効活用するのと逆走している気がしてきましたが（しかも全力で），持ち前の図太いガラスのハートがそういった理性を超えていくのでもうどうしようもないです．

今回もネットリソースを最大限有効非活用していきます（漢泣き）．

班ページ（gr08）の今回の取り組み内容の通り，前回から引き続いて”ものと操作”を洗い出す作業をメインに行いました．

個人的な悩みとしては，タイマーの計測設定画面や計測記録画面などポップアップ形式で表示する部分について，spaなので別ルートとして扱った方がデータの移動がクリアになるのか，それともVuexを使用してグローバルに状態を管理しポップアップ自体はコンポーネントとして小さく扱うべきか，決めかねています（それかもっと上手い方法）．
propsの受け渡しはあまり書きたくないし，かと言ってVuexを目一杯使うのも気が引けるので，おそらくこれはどの道を選んでもハズレですね．実装する時のことは考えないようにしよう．
まあそのうち箱買いしたモンスターが届くだけなんで．．

あと今回自分の方でFirebaseの基礎的な環境構築は済ませておきました．次回以降DBで管理が必要なデータを洗い出したあと，データ構造を決めて実際に通信してみようと思います．
ルーティングも前回の段階でサンプルの動作確認まで済んでいるので，今回書き出した画面遷移を参考にルーティング設計を進めていきます．
これであとはデザインを詰めていくだけになるはずです．

という備忘録でした．備忘録，この言葉いいね．正直備忘録の体も成していないけれど，それでも罪の意識が薄れて許されてる気持ちになってくる．

積極的に多用していこう．

VueやReactのようなモダンなJSライブラリを使うとモジュール分けがスムーズにいきそうというお話．

自分達の作るアプリは，機能を1つの画面で実装して画面間でデータを受け渡していくようなモデルになるのですが，モジュールに分けようとするとどうしても画面を1つの大きな単位として区切っていく形になります．
そして画面の中でさらにモジュールとして切り分けたい部分が出てくるのですが，これをバニラHTML/CSS・JSで実装しようとすると同じファイルを複数人で作業するような場面に出くわします（多分）．

例えばログインの新規登録画面．簡単にモジュール分けを考えてみると，入力フォームを実現するモジュール，ユーザが入力したデータをバリデーションするモジュール，ログインボタンが押されたときにapi通信を行うモジュール，のように分けられると思いますが，各モジュールで扱うデータは1つのHTMLファイルに記述されているform内のデータになります．つまり，誰かが勝手にデータの形式を書き換えてしまったら，他の人の作業にも影響が出てしまいます（3人で1つのりんごをデッサンしているイメージ．誰かがりんごの位置を変えると他の人から見える位置も変わるよね）．

モジュールに分ける時にモジュールのインタフェース（データの受け渡し口）を取り決めておくことで，こういった不用意なバグを防ぐことができます．ReactやVueなどのライブラリはこれをコンポーネントという手段で実現しています．
コンポーネントは，HTML/CSS，JSを1つのパッケージのようにまとめて切り出して，それをパーツのように扱います．出来上がった複数のパーツを組み合わせることで大きな機能を実現していきます．
先の例で言うと，入力フォームを実現するコンポーネントを親として，入力値を受け取ってバリデーションを行う子コンポーネント1，バリデーションされた値を受け取って登録用api通信を行う子コンポーネント2，のように実装できます．それぞれの子コンポーネントはHTMLファイルのform内のデータを扱うのではなく，あくまで前のコンポーネントから受け取ったデータを対象にした処理を行うので，受け渡すデータにさえ気をつければ各モジュール内でのデータ形式の変更は他に影響しません．

コンポーネントが1つのモジュールの単位になり得るので，（このライブラリを使う前提であれば）必要な機能をコンポーネントとして切り出していくだけでモジュール分けが完了してしまいます．

みたいなことを今日の作業中に気づいたので，今後の参考になるかもしれないと思って書いてみました． 他にも，ページの切り替えを効率的に行うライブラリやログイン情報をアプリ全体でグローバルに安全管理するライブラリなど便利なライブラリがたくさんあるので，今後も共有していけたらと思います．

本日Todo，次回Todoは班ページにまとめてあるのでカッツ

夜中にこのまま徹夜で課題をやってしまおうと思い立って，まずは腹ごしらえとクレープを食べたらその後すぐ眠くなってそのまま寝てしまった話もカッツ

今回は環境構築とモジュールの担当決め，Gitの整備を行いました．そして元々苦手だったWindowsがさらに苦手になりました．

環境構築の方法はリポジトリ内wikiにまとめてあります．ただしWindows環境は全く考慮していないのでご了承ください．winの環境構築はもうお腹いっぱいです．

モジュール分けを行いましたが，なにぶんモジュールが10個ほどあるので（それも1つ1つが結構分量あるのよ）担当を決めるのも一苦労．とりあえず分担が決まったのでよかった．
自分が言い出しっぺやりだしっぺですが，都合で開発にあまり時間を割けないのでメンバーに何とか頑張ってほしいです．サポートは一生懸命するつもりだけど，積極的に取り組んで完成を目指してくれることを願っています．

あと，Gitとかブランチ作成ルール，Vueのお約束ごとなんかはGitリポジトリ内のwikiにまとめることにしたので，もし今これを見てるメンバーはそっちも確認してね（このページの一番上にあるリンク）．

正直今回は終始windowsを相手にしていて疲れてしまったので，進捗はイマイチっぽい．まあ元凶はもちろんwinであって使っている人には全く非は無いので，自分はこれからwinアンチとして精力的に活動していくつもりです．まずは新入生への布教から．大学生はmac持ち歩いていればいいんです，環境構築で困る事ないし（.NET大好き学生は別）．そうすればこんなに疲れる事はなかった...それか大学のUbuntu使うとか．ただ時間外で作業する時にVPNが必要になるのはちょっと手間かなぁ．．

作業する環境ですが，個人PCにリポジトリをクローンしてそこで作業して，gitコマンドを使う時だけVPNを繋げば良いっていうのが結論構成だと思うんですが，それを阻むwinですよ．インストールしたツールの自動インストール先がシステムの操作可能範囲外だから実行できませんって，つまりどゆこと？？使えるところにインストールしよ？？　しかもGit使うのにインストールが必要だなんて聞いてないよ，ってもう100回くらい言ってる気がするけど．（でも普及率的にGitを使うケースの方が少ないか...）
もっと素直に動作してほしいですね．

敵を知るには，まずは己から．もう少しwinのことを知ってみようかな．

リポジトリwikiに書きたいこと書き出しているから，段々とこっちに書く内容が無くなってきてwinへの不満ばかりになってしまった...
そしてまた日を跨ぎましたと．TT

今回はログインモジュール作成に取り組みました．

基本的にVuexを使うとデータのやり取りが一気に面倒になるんだよね...　メールアドレスとパスワードを状態管理するのに，stateからデータ持ってきてページに反映，入力値はまたstateに送るという工程が必要になって，その値の反映方法も関数定義が必要で...みたいな感じです．
フォームバインディングでcomputed使うときはセッターとゲッターを使うのが一般的なのかな．勉強になりました．

作業時間内での進捗はイマイチだったので，次回までに別で時間を設けて，もう少し作業を進めようと思います．

Either U run theday, theday runs U.
こんないかしたタイトルにしたい．

今回はGitについて触れようと思います．

08班では積極的にGitを活用しています．Gitを活用することで，

• 作業分担が楽になる
• マージ（＝合体）作業のシステム補助
• 他メンバーの作業内容を把握可能
• 履歴の保存

などのメリットがあります．

まず作業の分担が楽になるという点ですが，これは作業ブランチの切り分けに当たります．作業ブランチは基本的にモジュールや機能単位で切り分けるようにしています．ブランチを切って作業すると，仮に他の人と作業範囲が被ってしまっていても，Gitが被った部分をコンフリクトとしてハイライトしてくれるのでマージ作業が超楽になります．やっぱりVSCodeとGitの組み合わせが最強かもしれない．
また，masterブランチの他にdevelopブランチなどを挟んでおくと過去バージョンのバックアップとして利用できるので，深刻なバグが発生した時もなんとかなるんじゃないかなと思ってます．

時間があればこの班のGitの使用事例などをまとめてGitLab-wikiに書いておこうと思います．
気になる人はそちらも参考にしてみてください．

次にプロトタイプ制作について．現在担当しているログイン/新規登録モジュールとサイドバーモジュールはどちらも基本機能の実装が終わりました．
ログイン/新規登録機能はBaasであるFirebaseのAuthentication機能を使って認証トークンを受け取るという形で実装しました．サイドバーはvue-routerの設定とrouter-linkコンポーネントの配置だけだったので特に何にもなかったです．ほんとFirebaseは地獄だった．．今後Firebaseの導入以上に詰まる要素ないでしょってくらい．マジで記法統一してくれい

次回以降は受け取ったトークンを使ったRTDBへのアクセス，またRTDBのタプル操作あたりを実装していこうと思います．あとはログイン情報の永続化とか．localStorageはStringしか受け取らないとかいう微妙仕様なのでindexedDBで実装しようかなと思っています（え，fbで実装できるって？？）．最終的にはCacheAPIも導入したいところ．
あとはぼちぼちデザインも考えていこう...沼る気がする

中間発表終わったー

人前に出て何かを伝えるって難しいなーと終わってから反省しました．
作ることに夢中になっていて，作ったものの魅力を人にどう伝えるかってところまでは思考が回ってなかった...orz
他チームの方はアプリの機能詳細を説明しいたけとか，エリンギとか，じゃなくてまつたけなんだけど，それら含めてもうちょっと工夫できる箇所があったかなと思います．
反省点は次回までに咀嚼して，最終発表に活かしたいです．

そういえば最近宮沢賢治の魅力に気づき始めていて，というのも作品の一部分を切り取って読んでも賢治の言葉選びのセンスとか自然を観る目に驚かされるんですよね．
自分も同じ岩手に住んでいるので，賢治が見た世界の片鱗でも感じ取りたいなと思って，まあ最近暑くなってきたのもあって，宮沢賢治の扇子を買いました．
賢治のセンスを仰ぎながら夏も頑張ろうと思います．

センスと言えば，他チームの発表を見てアイデアや機能の完成度，デザインで参考にできる箇所がいくつかあったのを急に思い出しました．
うちのチームは今の所，主要な機能の開発は自分以外のメンバーに任せている状況です．
自分はアプリ全体の管理とかデザイン，web開発のドメインが必要な部分を担当しているので，他チームのセンス溢れる作品内容を参考にして，良いところも悪いところも含めて取り入れられる箇所を検討していきます．
センス溢れる作品に仕上げたいところです！！

サイドバーの非展開/展開動作を実装しました．
ずっと開いてる意味ないかなーと思って作り始めたら，アプリの構造がミスってることに気がつきました．
ミスというか作り方が微妙だったんですが，おかげさまでただのサイドバーの伸び縮みにわざわざsotreを仲介することになりました．やったね！
ガンジーでも殴るレベル．

あとはもう一つ，時計画面にデザインを適用しました．
今回はcssが思ったよりも素直な挙動をしていたので，心が荒むことなく無事に終わることができました．
いやー，absoluteに手を染めずに済んでよかった．

TimerScreenにもデザインを適用させておきたいです．そうすればあと残りのデザインノータッチはTimerSettingとTimerSaveとダッシュボードだけなんだから！
ん多くね？？

全体的な進捗具合は6割くらい．班wiki-活動記録の方に詳しくまとまってるので，よければそちらもご覧ください．

今日はガチデザイナー（クラフトビール部のポスターとか作った方）の本気を見てしまって，なんか負けた気分で若干落ち込んでます．
うん．確かにあのポスター普通にかっこよかった．
寝て起きたらもう一度デザイン案見直してみて，さらにブラッシュアップしていこう．
かっこよさ，統一感，使いやすさ，疲れなさ．．色んな角度から見直してみようと思います．

ダッシュボード機能の進捗状況の確認と，成果時間のグラフ表示モジュールの方向性の確認，後はログインモジュールのログイン状態のキャッシュ情報を反映させる処理あたりを行いました．
ダッシュボードの機能の方が段々と完成してきていて，モジュール内でのデータの成形までは進んでいるようなので，残る大きな仕事はデータベースとのapi通信とCSSの適用になりそう．
グラフはChart.jsのvueラッパーライブラリを使用する方向性でお願いしたので，お手軽にちゃんとしたグラフを表示できるはずです（その節は伝えるのが遅れてごめんなさい）.
ログインの方は，firebase auth がデフォルトでログイン情報をキャッシュしてくれるみたいなので(場所はindexedDBっぽい)，リロードするたびにログインし直さなくても大丈夫なように書き換えました．コンポーネントがレンダリングされるタイミングが微妙にズレているせいで，処理の記述が地味に大変だった..

 次回以降 

モジュール同士のデータ受け渡しの実装，realtime databaseとのapi通信処理，CSSコーディング，ダッシュボードの残りの機能作成が主になるかなと思います．
意外と多い．

サインアップ（新規ユーザ登録）時に，データベースに登録されたユーザの領域を確保するように修正しました．
SignUpForm.vueのsubmit関数の中で該当するactionをdispatchするようにして，同期-非同期の動作タイミングを揃えるようにしています．
基本的にFirebaseモジュールのメソッドは非同期で実装されていて，同期処理が終わった段階で処理が始まるので処理順序を工夫する必要があります．
Vueアプリだとコンポーネントが読み込まれる順番も考慮しないといけないので，コンポーネントをロードするタイミングと非同期処理を実行するタイミングを同期させるのが難しい点でした．

 次回以降 

次回はログイン時とキャッシュログイン時にデータベースからユーザ情報を取得してストアに保存する処理を書こうと思います．

• ログイン，キャッシュログイン時にDBからデータを取得し，グローバル変数に保存する処理を追記
  • 一度だけ取得するデータと，変更をリアルタイムリッスンするデータの取得方法を分けて実装
• ログインコンポーネントの非同期処理と他コンポーネントのそれとで実行タイミングがズレていたために生じたエラーに対処
• 完成したログインコンポーネントをdevelopブランチにマージ
• CSS適用の補助

今回は主に，ダッシュボードの機能開発に関わる部分で，ログインコンポーネントへの機能追加を行いました．
Vueはコンポーネントが呼び出される順番が決まっているので(微妙にタイミングがずれることがしばしばあるけど)，ダッシュボードコンポーネントで呼び出した非同期処理とログインコンポーネントの非同期処理の実行タイミングを考える必要があります．動作としてはログイン→ユーザ情報の取得→そのデータをもとにダッシュボードの描画，という流れで設計していましたが，ログイン時に呼び出すFirebaseAPIの実行結果が返ってくるタイミングがどうやってもダッシュボードの描画に間に合わず，急遽データローディング画面を追加してタイミングを揃えるという方法でダッシュボードの描画に合わせました(データがない状態で描画すると処理部分でエラーが起こる)．

また，CSSコーディング組みの補助も行いました．
人手が足りない部分は自分も協力してCSSの適用に回りました．CSSは正直根性勝負なところがあるのであまり得意では無いのですが，最後の一踏ん張りと思って書きました．今回でメンバーもだいぶバニラCSSには慣れたと思うので，もし次回やる時にはSCSSやTailwindCSSあたりを使って効率よくCSSを書きたいと思います．あとダッシュボード周りは書くのが大変だったので，Vuetifyを使っても良かったかもしれません．使い方を知らないので今回は見送りましたが．

(追記)
発表直前まで粘って実装を進めました．CSSの微調整，アイコン・ファビコンの設定，BGMの選定(発表に間に合わず...)など，最後の調整を進めました．朝まで付き合ってくれたメンバーに感謝．

• しました
• 聴講しました

どの班も中間発表から進化していて，見ていて楽しかったです．
特にゲームは作るのが大変だったと思いますが，遊べるまで形になっていて驚きました．
プログラムを公開用に整形してネット上で遊べるようにしたいなーと思うくらい，見ていて楽しそうなものばかりでした．
(もしゲームの公開に興味があれば，もしかしたら力になれると思うので，ぜひお声がけください)

今回は班長として参加しました．

チーム開発ということで，これまで自分がしてきた経験をもとに，チーム開発らしく振る舞ってみました．
大学を終えるまでにチーム開発に関わる経験はほとんど無いと思うので，今回の講義で一緒になったメンバーにはチーム開発及びウェブアプリ開発の雰囲気を肌で体感してもらって，今後に役立ててもらいたいなと考えていました(そしてあわよくば開発仲間にしてしまおう...なんて)．例えばGitを活用してみたり，ウェブデザイン関連のツールを使用してみたり，JSのウェブ開発用ライブラリを使って開発してみたりと，色々なことに挑戦してみました．
特に開発で使用したJSライブラリのVue.jsは自分以外のメンバーは全く触ったことがなく，分からないことだらけだったと思いますが，自分に質問したりネットで調べたりして積極的に勉強し使いこなしていたので，メンバーとその実力に感謝でいっぱいです．Vueを採用したのは完全に自分のエゴですが，この開発でVueを使ってアプリを作れるくらいの知識と経験を得られたようなので良かったです．

なんか偉そうに書いてますが，自分としてもVueでちゃんとしたアプリを作る経験はそこまで多くなかったので，今回の開発で得られた知識や経験はとても貴重なものでした．知らないエラーに遭遇したり設計上で工夫が必要な場面が何度もあり，その度にネットで情報を集めたりメンバーとあれこれ悩みながら実装してみました．
特にFirebase(外部APIの非同期処理)は初めて採用したサービスだったので，導入から苦労しました．その後も非同期処理の実行タイミングなどで度々苦労しましたが，この開発でBaaSの扱い方を知ることができたのでとても有意義な経験になりました．

ウェブ開発は進化のスピードが著しく，数年前まで流行っていた技術が今では化石(jQueryとか)，なんてことも珍しくないのでキャッチアップが大変ですが，その分便利な開発ツールやサービスが無限に開発されているので，それを使わない手はないと思います．
情報の分野でよく「車輪の再発明はするな」という言葉を聞きますが，まさにその通りで，自分が今苦労していることは他の人も同じく苦労していて，そのうちの誰かが既に便利ツールを作っているものなので，困ったときは色々と調べてみると解決の糸口になると思います．
データベースを使いたいけどSQLの知識がない...→BaaSのNoSQLやウェブストレージ，デザイン案を作りたいけどPowerPoint使うと共有が面倒...→FigmaやXD，JSで処理を考えて記述するのが面倒...→VueやReactやSvelte，JSのルールが自由すぎてエラーばかり起きる...→TypeScript，メモの共有が面倒...→GoogleドキュメントやNotion，みたいな．
せっかくやるなら新しいことに挑戦してみようって精神が大事だと思います．

何はともあれ，メンバーと楽しく快適な開発をして，時にはエラーに頭を悩ませたりしながら...．とても意義のある講義でした．
また自分のサブテーマだった"メンバーにいろんな経験をしてもらうこと"，"使ったことのない新しいサービスを使ってみること"，"アプリをデプロイすること"の全てを達成することができました．
ありがとうございました．