プログラミング研究所

Angularのサンプルプロジェクトについて Angularのサンプルプロジェクトについて この記事では、Angular CLI バージョン18.1.0で生成された「 家計簿アプリ (KakeiboApp) 」プロジェクトの内容を詳細に解説します。このアプリは、ユーザーが収入と支出を記録し、現在の残高や取引履歴を確認したり、支出の分類別グラフを表示したりできるシンプルな家計簿アプリケーションです。 プロジェクト全体はGithubにアップロードしておりますので、合わせて参考にしてください。 ・ https://github.com/flying-YT/kakeibo-app/tree/main なお、本アプリをベースに演習問題を作成してみました。Angularに興味ある方は是非試してみてください。 ・ 実践！手を動かして学ぶAngular演習問題 プロジェクト概要 本家計簿アプリは、Angularのコンポーネントとサービスを効果的に利用し、リアクティブなデータ管理にはAngularのSignal機能を採用しています。また、グラフ表示にはChart.jsとng2-chartsライブラリが活用されています。アプリケーションの全体的なスタイルは src/styles.css で定義されており、カードスタイル、タイポグラフィ、テーブル、ボタン、フォーム、ナビゲーションなどの共通スタイルが含まれています。 主要コンポーネントの紹介 Angularアプリケーションは、独立した機能を持つコンポーネントによって構成されます。本プロジェクトの主要なコンポーネントとその役割について説明します。 AppComponent: アプリケーションの骨格 AppComponentは、アプリケーション全体のレイアウトを定義するルートコンポーネントです。 目的: アプリケーションのタイトル、メインナビゲーション、そしてルーティングに基づいて各画面のコンポーネントが表示されるメイ...

実践！手を動かして学ぶAngular演習問題 実践！手を動かして学ぶAngular演習問題 こんにちは。私は会社が最近フロントエンドフレームワークである Angular を採用したため Angular の勉強をしています。 ある程度自分でアプリを構築できるようになってきたため、やはり実際にアプリを作るほうが習得が早いなと思うのと、こういった環境を提供したい気持ちもあったので今回Angularの演習問題を作成してみました！ この演習は、家計簿アプリケーションを題材にしており、基本的なデータ表示からインタラクティブな機能追加まで、段階的に実装を進めていく形式です。 Angularの基礎文法やコンセプトを学んだ後、「次に何をすれば良いかわからない」「実際に手を動かしてみたい」という方に最適な内容となっています。ぜひチャレンジしてみてください！ 演習問題の始め方 演習を始めるには、まずご自身の開発環境にプロジェクトをクローンする必要があります。 リポジトリのクローン 下記のコマンドを実行して、演習問題用のブランチ（ exercise-start ）をクローンします。 git clone -b exercise-start https://github.com/flying-YT/kakeibo-app.git プロジェクトディレクトリへ移動 cd kakeibo-app 依存パッケージのインストール プロジェクトに必要なライブラリをインストールします。 npm install 開発サーバーの起動 下記のコマンドでアプリケーションをビルド...