ブログ村 子供写真

ヘルシープログラマー

ヘルシープログラマ ―プログラミングを楽しく続けるための健康Hack

ヘルシープログラマ ―プログラミングを楽しく続けるための健康Hack

 上半期中のリリース分を間に合わそうと頑張ったり、家でのバタバタが重なったりで、上期のリリースが終わってから所謂、燃え尽き症候群てきな感じ。フィジカルの不調が不眠気味にまで拡張されているので、さすがに心療内科にかかってきた。
 仕事も上司に相談して、セーブしたり、新年度にようやく入った新人さんに仕事を触れるように準備したりと対応中。

 

Fitbit InspireHR フィットネストラッカー Black L/Sサイズ  [日本正規品] FB413BKBK-FRCJK

Fitbit InspireHR フィットネストラッカー Black L/Sサイズ [日本正規品] FB413BKBK-FRCJK

 
 あと、年齢に伴う体力の低下というより、無理をした時のダメージの残り方と回復の遅さに健康管理の必要性を感じたので活動計を購入してみた。睡眠やら運動量やらをまずは可視化して、改善を長期的に図っていく。

 今回の経験で、趣味のプログラミング(業務関係なし)ができてないと精神的なストレスが半端ないのがわかったのが今回の収穫かな。VSCodeのツールでコード書いてる時間を測定できるのがあるけど、業務で集中してコード書くのは4時間半がわたしの限界なのもわかった。結局、8時間労働で積算したのがすべての間違いということです。4時間かける5日の2週、計40Hを1イテレーションで作業をマネージしていかんと、いろいろと効率悪いし、無理がかかる。
 
 顧客の期待感のマネージメントとか、今回噴出した課題を書いたらきりがないのでここでやめるけど、まだまだだなと思う。

Angularを使ったプロジェクトの開始

自分でやっててもたまに忘れて調べ直すし、人に説明するときのためにもなりそうなのでメモ書き


  • Node

とりあえずNode.jsはインストールしてる必要がある。
nodejs.org

cli.angular.io


必要なものはこれくらいかな?
Gitとか、VisualStudioCodeとかのツール類はすでにインストールされているものとする。

作るもの

簡単なTaskManagerを作成する。
新しくディレクトリを作成する。

mkdir task-manager
cd task-manager
ng new frontApp 

少し待つとひな型が作成されるので試しに起動してみる。

cd frontApp
ng serve --open

これでひとまず土台はできた!

次にアプリのデザインを整えるためにAngular Materialをプロジェクトに加える。
material.angular.io

作成されたAngularのディレクトリないでコマンドを実行したら終わり。

ng add @angular/material

扱うデータを考える

単純なToDoアプリをアプリを作る。

扱うデータは以下の通り

  • User
  • Task

データモデルのディレクトリ内にデータ構造を規定するクラスを作成する

ng g class model/user
ng g class model/task

これでクラスが作成されたので詳細を詰めていく。

次にユーザー一覧用のコンポーネントを作成する。

ng g component userList

ユーザーリストからそれぞれのユーザのタスクを扱える詳細コンポーネントも作成しておく

ng g component userDetail

あとは各コンポーネントを作成して、ルーティングして、データ取得のためのサービスを作成したら終わり。
ルーターはひな型作成時にルータ使用にYesを選択していれば作る必要はない。サーバーとの間でデータを扱うためのサービスを作成する。

ng g service dataService

個人開発を始めてみる

まずは、自分がユーザーとして欲しいサービスを作成してみる。幸か不幸か、フロントからバックエンド、デプロイまで全部仕事でやったので一人でサービスローンチできるので。