実践！手を動かして学ぶAngular演習問題

実践！手を動かして学ぶAngular演習問題

実践！手を動かして学ぶAngular演習問題

こんにちは。私は会社が最近フロントエンドフレームワークであるAngularを採用したためAngularの勉強をしています。
ある程度自分でアプリを構築できるようになってきたため、やはり実際にアプリを作るほうが習得が早いなと思うのと、こういった環境を提供したい気持ちもあったので今回Angularの演習問題を作成してみました！
この演習は、家計簿アプリケーションを題材にしており、基本的なデータ表示からインタラクティブな機能追加まで、段階的に実装を進めていく形式です。

Angularの基礎文法やコンセプトを学んだ後、「次に何をすれば良いかわからない」「実際に手を動かしてみたい」という方に最適な内容となっています。ぜひチャレンジしてみてください！


演習問題の始め方

演習を始めるには、まずご自身の開発環境にプロジェクトをクローンする必要があります。

  1. リポジトリのクローン
    下記のコマンドを実行して、演習問題用のブランチ（exercise-start）をクローンします。 
    git clone -b exercise-start https://github.com/flying-YT/kakeibo-app.git
  2. プロジェクトディレクトリへ移動 
    cd kakeibo-app
  3. 依存パッケージのインストール
    プロジェクトに必要なライブラリをインストールします。 
    npm install
  4. 開発サーバーの起動
    下記のコマンドでアプリケーションをビルドし、ローカルサーバーを起動します。 
    ng serve

    ブラウザで http://localhost:4200/ にアクセスすると、演習開始前のアプリケーションが表示されます。ここから、下記の演習問題に取り組んでいきましょう。


演習問題

問題1: 取引履歴の金額表示を動的に調整する

BalanceComponentの取引履歴テーブルにおいて、金額表示が取引のタイプ（収入または支出）に応じて色と符号が変化するように修正してください。

  1. 収入（income）の場合：金額の前に+を付け、CSSクラスincomeを適用して青色で表示する。
  2. 支出（expense）の場合：金額の前に-を付け、CSSクラスexpenseを適用して赤色で表示する。

問題2：取引登録フォームのカテゴリ選択肢を動的に変更する

TransactionFormComponentにおいて、取引タイプ（収入または支出）が変更された際に、カテゴリの選択肢が適切に更新されるように実装してください。

  1. typeフォームコントロールの値がincomeに変わった場合、カテゴリはincomeCategoriesの中から選択されるようにする。
  2. typeフォームコントロールの値がexpenseに変わった場合、カテゴリはexpenseCategoriesの中から選択されるようにする。
  3. 初期表示時も、typeの初期値（expense）に基づいて適切なカテゴリが選択されていることを確認する

問題3：新しい取引を登録するロジックを実装する

TransactionServiceのaddTransactionメソッドは、新しい取引をリストに追加し、日付でソートする役割を担っています。このメソッドの具体的なロジックを実装してください。

  1. 受け取ったtransactionDataに、現在時刻に基づくユニークなidを追加して新しいTransactionオブジェクトを作成する。
  2. transactionsStateシグナルを更新し、新しい取引を既存の取引リストに追加する。
  3. 追加後、取引リストを日付の新しい順（降順）にソートする。

問題4：支出分類グラフにデータを表示する

TransactionServiceのgetSpendingByCategoryメソッドは、支出カテゴリごとの合計金額を計算し、グラフ表示に適した形式でデータを返す役割を担っています。このメソッドの具体的なロジックを実装してください。

  1. まず、全てのexpenseCategoriesについて初期値0を持つMapを準備する。
  2. this.transactions()から全ての取引を取得し、その中から支出（expense）タイプのみを対象とする。
  3. 各支出取引について、そのカテゴリの合計金額を集計する。
  4. 最終的に、集計されたデータをラベル（カテゴリ名の配列）とデータ（対応する金額の配列）のオブジェクトとして返す。

問題は以上です。なお、問題についてはREADMEにも記載しているので参考にしてください。


解答例について

問題が解けなかった場合や、自分の実装と比較したい場合は、下記の解答例ブランチをご確認ください。

解答例ブランチ:
https://github.com/flying-YT/kakeibo-app/tree/solution


さいごに

もし「Angular自体が初めて」という方や、「基礎からもう一度復習したい」という方がいらっしゃいましたら、下記の記事でAngularの概要や特徴をまとめていますので、ぜひご覧ください。

参考ブログ記事:
Angularとは？フルスタックなフレームワークを徹底解説！

この演習問題が、あなたのAngularスキルアップの一助となれば幸いです。
もし、こういう機能を付けて問題にしたほうが良いなどあれば、ぜひご意見をください。
今回はこのへんで、ではまた！

コメント

コメントを投稿

このブログの人気の投稿

PowerAppsで座席表を作成する

イメージ
PowerAppsで座席表を作成する。 PowerAppsで座席表を作成する。 昨今、会社では指定された先がなく、自由に席を選んで仕事ができる フリーアドレス が増えてきているのではないでしょうか。 私の会社も フリーアドレス を採用しているのですが、その日の気分によって座る場所を変えることができるので私は気に入っています。 ただ自由で便利な反面、困る場面もあるかと思います。 フリーアドレス は自由に座れるのですが、だれがどこに座っているのか分からなくなる状況があります。 さらに テレワーク が重なると出社していない人もいるため、より分からなくなるかと思います。 みなさんの会社でも同様の状況になっていないでしょうか。 もちろん最近は便利なアプリなどによって改善されていたり気がしますが、そのアプリの利用料などがかかるため導入にためらってしまったりするかと思います。 なので今回は、この課題を Power Apps で改善をしていきます。 アプリの概要 アプリの概要を簡単に説明します。 Labelを複数配置していき、机や椅子、その他会議室やロッカーなどを表現 席用のLableの「OnSelect」メソッドにフロー起動の処理を追加 上記だけで簡易な座席表を作成できます。 別途データベース用のListsを作成しておきます。 それでは、Listsの作成から進めています。 下準備 今回のアプリのデータベースはMicrosoft Listsを使用します。 適当な場所にListsを下記内容で作成します。 必要なカラムは「Title(Id)」「Name」です。 今回は適当に数個座席を作成しておきます。「Name」部分は空...
続きを読む

Power Automateでファイル名から拡張子を取得

イメージ
Power Automateでファイル名から拡張子を取得 Power Automateでファイル名から拡張子を取得 以前、 Power Automateで自動ファイルバックアップ（OneDrive） という記事で ファイル名から拡張子を取得する方法 をまとめました。 その際には複数の変数を用意して、かつ関数も使用して取得していましたが、これはフロー作成にかなり手間がかかるものです。 そのため、どうにか簡略化できなかと検討したところ新しい取得方法で、より簡潔に作成できることがわかったので、今回はファイル名から拡張子を取得する方法について新しい手法をまとめたいと思います。 作成方法を解説 まず取得する方法を説明する前に、以前の方法ではどのように取得していたかというと、 ファイル名から拡張子までの文字数を取得 ファイル名の拡張子部分の長さを取得する 拡張子の開始位置から、拡張子の文字数分だけ切り取って取得する といった手順を踏んでいました。 詳細は先程リンクを貼っているブログか、文字列抽出方法をまとめたブログがあるので参考にしてください。 Power Automateで文字列抽出 このように以前の方法ですと、ステップ数が増えるため作成も手間ですし、メンテナンス性も良くない状況です。 なのでもっと簡略化して実装する方法を紹介します。また2つの関数を使用するものの、シンプルなため可読性は高いです。さらに、今回の方法で実装すると事前準備していた変数3つが不要になります！！ では、いよいよ本題に入ります。 今回使用する関数は split と last の2つになります。 split関数 split関数 は文字列を指定の文字で 分割 する関数です。 ...
続きを読む

Power AutomateでTeamsのキーワードをトリガーにする

イメージ
Power AutomateでTeamsのキーワードをトリガーにする Power AutomateでTeamsのキーワードをトリガーにする Power Automate には Teams に使えるアクションが多く存在しています。 その中でも今回は「 キーワードが言及された場合 」というトリガーを紹介していきたいと思います。 このトリガーは、グループチャットもしくはチャネルに投稿されたメッセージに、指摘のキーワードが含まれていると起動するトリガーになります。キーワードが含まれてさえいればいいので、チームなどでキーワードを取り決めておけばいつでも起動できます。 フローを作成してみる 今回はトリガーなので、起動することさえPower Automate上で確認すればよいですが、せっかくなので何かしらのメッセージをTeams上に投稿したいと思います。 トリガーを選択する フローの作成で、「自動化したクラウドフロー」を選択します。 今回のフローの名は「キーワード検知」として、フローのトリガーにはキーワードで検索し「キーワードが言及された場合」を選択します。 トリガーの設定をする このトリガーでは「グループチャット」か「チャット」のどちらかを選択することができます。 今回は設定値を下記のようにします。 メッセージの種類：グループチャット 検索キーワード：test Chat-1：テストの会議 これで、「テストの会議」のチャットでメッセージに「test」が含まれる投稿がされた際に、このフローが...
続きを読む