{"id":20094171,"url":"https://github.com/naopeke/angular-jp","last_synced_at":"2026-03-05T19:58:11.404Z","repository":{"id":213503165,"uuid":"734269658","full_name":"naopeke/Angular-JP","owner":"naopeke","description":"Explanation in Japanese","archived":false,"fork":false,"pushed_at":"2024-01-30T11:53:44.000Z","size":45,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-13T03:31:04.723Z","etag":null,"topics":["reference-material"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/naopeke.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-12-21T09:16:48.000Z","updated_at":"2024-02-02T08:13:37.000Z","dependencies_parsed_at":"2024-11-13T16:49:44.388Z","dependency_job_id":"1c010b8f-17f4-4978-98c5-78c75fd1d663","html_url":"https://github.com/naopeke/Angular-JP","commit_stats":null,"previous_names":["naopeke/angular-jp"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/naopeke%2FAngular-JP","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/naopeke%2FAngular-JP/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/naopeke%2FAngular-JP/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/naopeke%2FAngular-JP/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/naopeke","download_url":"https://codeload.github.com/naopeke/Angular-JP/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241533630,"owners_count":19977826,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["reference-material"],"created_at":"2024-11-13T16:49:38.414Z","updated_at":"2026-03-05T19:58:06.377Z","avatar_url":"https://github.com/naopeke.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# INDEX\n[](#)\n1.[インストール](#インストール)  \n2.[モジュールの作成](#モジュールの作成)  \n3.[コンポーネントの作成](#コンポーネントの作成)  \n4.[ダウングレード](#ダウングレード)  \n5.[ルーティング](#ルーティング)  \n6.[文字列補間（単方向バインディング）](#文字列補間単方向バインディング)  \n7.[プロパティバインディング（単方向データバインディング）](#プロパティバインディング単方向データバインディング)  \n8.[イベントバインディング（単方向データバインディング）](#イベントバインディング単方向データバインディング)  \n8.[双方向データバインディング](#双方向データバインディング)  \n9.[ngIf](#ngif)  \n10.[ngFor](#ngfor)  \n11.[PIPE](#pipe)  \n12.[@Input](#@input)  \n13.[@Output](#@output)  \n14.[EventEmitter](#eventemitter)  \n15.[Bootstrap](#bootstrap)  \n16.[Service](#service)  \n17.[navigateとnavigateByUrl](#navigateとnavigateByUrl)  \n18.[Location](#location)  \n19.[ActivatedRoute](#activatedroute)  \n20.[Form](#form)  \n\n\n\n\n## インストール\n```\nnpm i -g @angular/cli@16.2.10\n```\n```\nnpm uninstall -g @angular/cli\n```\n```\nnpm cache clean --force\n```\n```\nng new my-app(nombre de aplicacion)\u003c/p\u003e\n```\n\n## モジュールの作成\n```\nng generate module nombre-del-modulo\nng g m nombre-del modulo\n```\n```\nimport{ NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common'\nimport { MiComponente } from './mi-componente.component'\n\n@NgModule({\u003cbr\u003e\n    declarations: [MiComponente],\n    imports: [CommonModule],\n    exports: [MiComponente]\n})\n\nexport class MiModulo {}\n```\n  \n## コンポーネントの作成\n```\nng generate component nombre-del componente\nng g c nombre-del componente\n```\n\n```\nnpm start\u003cbr\u003e\n```\nhttp://localhost:4200/  \n  \n## ダウングレード\n**Actively supported versions**\nhttps://angular.io/guide/versions\nNode.js\n```\nnvm install 18.10.0 // to install the version of node.js I wanted\nnvm use 18.10.0  // use the installed version\n```\nAngular (Downgrade @angular-devkit/build-angular)\n```\nnpm list @angular-devkit/build-angular\nnpm install @angular-devkit/build-angular@16.2.10 --save-dev\n```\n\n## ルーティング\n異なるビューやコンポーネントをナビゲーションバーのURLに基づいて表示するための仕組み  \n1.ルーティングモジュールの作成: 多くのプロジェクトでは、ルーティングを管理するために専用のモジュール（通常は AppRoutingModule）を作成  \n```\nng generate module app-routing --flat --module=app\n```\n2.ルートの定義  \n![Captura desde 2023-12-21 12-18-18](https://github.com/naopeke/Angular-JP/assets/143800388/c8b9fb42-b1b3-4c43-a48e-1cbba09f6d50)  \n\n3.＜router-outlet＞の使用: 通常は app.component.html）に \u003crouter-outlet\u003e を配置  \n![Captura desde 2023-12-21 12-18-37](https://github.com/naopeke/Angular-JP/assets/143800388/9ab8b155-cbaf-4168-a6c6-6e70348c4e6f)  \n  \n4.ナビゲーションリンクの設定: routerLink ディレクティブを使って、異なるルートへのナビゲーションリンクを設定  \n![Captura desde 2023-12-21 12-18-57](https://github.com/naopeke/Angular-JP/assets/143800388/28963912-6a6b-4ce1-8f65-9fcca8945cbc)\n  \n## 文字列補間（単方向バインディング）\nOne Way Binding コントローラーからビュー  \n二重中括弧 {{ }} を使って、コンポーネントの TypeScript クラスからテンプレート（HTML）にデータをバインド  \n```\n\u003ch1\u003e{{expression}}\u003c/h1\u003e\n\u003cimg src=\"{{expression}}\" /\u003e\n\u003cdiv [class]=\"expression\" \u003e\u003c/div\u003e\n\u003cimg [bind-src]=\"expression\" /\u003e\n```\n![Captura desde 2023-12-21 12-09-38](https://github.com/naopeke/Angular-JP/assets/143800388/15e99fe4-d88e-4934-809d-7d9f286cce13)  \n  \n文字列の連結、算術演算、メソッドの呼び出しなども可能  \n![Captura desde 2023-12-21 12-09-49](https://github.com/naopeke/Angular-JP/assets/143800388/3517b9f8-9c9c-4743-94de-7b2d66087a4e)  \n\n## プロパティバインディング（単方向データバインディング）\nOne Way Binding コントローラーからビュー  \nコンポーネントのクラスプロパティとテンプレート内の HTML 要素プロパティを結びつける重要な機能  \nプロパティバインディングは角括弧 [] を使って行われます。これは、コンポーネントのプロパティを HTML 要素のプロパティにバインドするために使用される。  \n![Captura desde 2023-12-21 12-29-15](https://github.com/naopeke/Angular-JP/assets/143800388/f36063f8-6e23-4c21-b4ae-df20597b214c)  \nExampleComponent の userName プロパティがテキストボックスの value 属性にバインドされています。このため、テキストボックスには初期値として \"John Doe\" が表示される。  \n    \n属性バインディング: DOM の属性にバインドする。例: \u003cdiv [attr.role]=\"myRole\"\u003e\u003c/div\u003e  \nクラスバインディング: CSS クラスにバインドする。例: \u003cdiv [class.special]=\"isSpecial\"\u003e\u003c/div\u003e  \nスタイルバインディング: インラインスタイルにバインドする。例: \u003cdiv [style.color]=\"isSpecial ? 'red' : 'green'\u003c/div\u003e  \n## （イベントバインディング）単方向データバインディング\nビューからコントローラー  \nテンプレート（HTML）内のイベント（ユーザーの操作など）をコンポーネントのメソッドにバインドするためのメカニズム  \n（反応させたいDOMイベントの名前）＝”イベントがトリガーされたときに実行されるコンポーネントのメソッド”  \n![Captura desde 2023-12-21 12-59-34](https://github.com/naopeke/Angular-JP/assets/143800388/bc63f430-74b2-4e08-9caa-f6da8c8a63d1)  \n\nコンポーネント内でのメソッド定義  \nイベントバインディングに関連付けられたメソッドは、コンポーネントのクラス内に定義されます。\n![Captura desde 2023-12-21 13-00-26](https://github.com/naopeke/Angular-JP/assets/143800388/07968e03-a3ac-4ad8-b3c3-db298413b77b)  \n  \nイベントオブジェクトの使用  \nイベントハンドラーには、イベントオブジェクトへのアクセスが可能です。  \n![Captura desde 2023-12-21 13-11-35](https://github.com/naopeke/Angular-JP/assets/143800388/47b3d1f4-7f03-4574-93eb-4327175c9613)  \n$event はクリックイベントのマウスイベントオブジェクトを表します。  \n\n## 双方向データバインディング\nTwo Way Binding\n双方向バインディングでは、以下の二つのプロセスが組み合わさっています：  \nプロパティバインディング: コンポーネントのプロパティがテンプレートの属性にバインドされ、コンポーネントの状態がテンプレートに反映されます。  \nイベントバインディング: テンプレート内のユーザーのアクション（例えば、テキストボックスへの入力）がコンポーネントのメソッドにバインドされ、それによってコンポーネントの状態が更新されます。  \n  \nAngular では、[(ngModel)] ディレクティブを使って双方向バインディングを実現します。これは、特にフォーム要素での使用に適しています。  \n![Captura desde 2023-12-21 13-39-40](https://github.com/naopeke/Angular-JP/assets/143800388/da0d9f7f-3edb-4e4b-976f-be04f649a783)  \nこの例では、username というコンポーネントのプロパティが \u003cinput\u003e 要素の value 属性にバインドされています。ユーザーがテキストボックスに何かを入力すると、username プロパティが自動的に更新されます。同様に、username プロパティの値がプログラム的に変更されると、テキストボックスの表示内容も更新されます。  \n![Captura desde 2023-12-21 13-42-05](https://github.com/naopeke/Angular-JP/assets/143800388/46d9844c-57bc-4673-a235-a24cdf4854b4)  \n  \n![Captura desde 2023-12-21 13-42-40](https://github.com/naopeke/Angular-JP/assets/143800388/90830745-5ed5-4ea2-853a-fdc6b39343b4)  \n  \n![Captura desde 2023-12-21 13-43-32](https://github.com/naopeke/Angular-JP/assets/143800388/e71270b9-d157-4887-9634-14901eac47de)　　\n\nFormsModule をインポートする　　\nFormsModule を @angular/forms パッケージからインポート  \n通常、app.module.ts ファイル内で行う。  \n![Captura desde 2023-12-21 13-47-39](https://github.com/naopeke/Angular-JP/assets/143800388/e0066bec-b98c-40f6-ac97-a0615735b90c)  \n\nNgModule デコレータの imports 配列に FormsModule を追加  \n![Captura desde 2023-12-21 13-48-08](https://github.com/naopeke/Angular-JP/assets/143800388/3058044c-637d-4c04-9280-cb7b4e27fd0e)  \n\nFormsModule は主にテンプレート駆動フォーム（Template-driven Forms）で使用されます。リアクティブフォーム（Reactive Forms）を使用する場合は、代わりに ReactiveFormsModule をインポートする必要があります。  \n  \n1: ReactiveFormsModule のインポート  \nReactiveFormsModule のインポート:  \n通常、アプリケーションのルートモジュール（多くの場合は app.module.ts）で行う。  \n![Captura desde 2023-12-21 13-56-45](https://github.com/naopeke/Angular-JP/assets/143800388/05321ae2-cefc-4b36-a41c-894f5bca84dd)  \n\nNgModule デコレータに追加:  \n![Captura desde 2023-12-21 13-57-33](https://github.com/naopeke/Angular-JP/assets/143800388/575dec5f-28c6-43d9-8955-cbc6642c75b9)  \n\n2: リアクティブフォームの使用  \n![Captura desde 2023-12-21 13-58-40](https://github.com/naopeke/Angular-JP/assets/143800388/87062007-1da5-497a-9227-120c3bdfa7eb)  \nテンプレート駆動フォームとリアクティブフォーム、同一アプリケーション内で両方を使用することが可能。ただし、同一のフォーム内で混在させることはできない  。\n\n\n## ngIf\n特定の条件が真（\ntrue）の場合にのみ、DOM上に要素を表示するために使用。条件がfalse の場合、要素はDOMから完全に削除。  \n![Captura desde 2023-12-21 14-11-00](https://github.com/naopeke/Angular-JP/assets/143800388/92adf319-e67a-451d-afeb-72a36aeeb1d0)  \n\n*ngIf で使用される条件は、通常、コンポーネントの TypeScript クラス内で定義されたプロパティに基づいています  \n![Captura desde 2023-12-21 14-12-14](https://github.com/naopeke/Angular-JP/assets/143800388/0fad1ea6-954d-4bd2-9480-5b4ae61d54b1)  \n\nelse 条件を使用して、条件が false の場合に別のテンプレートを表示することもできます。  \n![Captura desde 2023-12-21 14-13-10](https://github.com/naopeke/Angular-JP/assets/143800388/eb101762-f56e-401b-af5f-2e8a5087cf9a)\nこの例では、showMessage が false の場合、「メッセージはありません。」というテキストを含む \u003cp\u003e 要素が表示されます。  \n  \n## ngFor\n*ngFor は *ngFor=\"let item of items\" の形式で使用され、ここで items は配列やオブジェクトのリストを表し、item はリスト内の個々のアイテムを表すローカル変数です。  \n![Captura desde 2023-12-21 14-18-10](https://github.com/naopeke/Angular-JP/assets/143800388/03ed06cd-5397-4c8d-9882-94c378288cc8)  \n\nループ中の各アイテムのインデックスや他の有用な変数にアクセスすることもできる。  \nこの場合、let i = index で各アイテムのインデックスにアクセスし、1から始まる番号と共にアイテムを表示。\n![Captura desde 2023-12-21 14-18-41](https://github.com/naopeke/Angular-JP/assets/143800388/7f6759c9-e6f3-4100-bacc-0d71ac2940a2)　　\n\n大きなリストや複雑なオブジェクトを含むリストを扱う際には、パフォーマンスを最適化するために trackBy 関数を使用することが推奨されます。これにより、Angular はオブジェクトのアイデンティティを追跡し、必要なときのみ DOM を更新します。　　\n![Captura desde 2023-12-21 14-20-53](https://github.com/naopeke/Angular-JP/assets/143800388/68a87f23-45ce-4a07-91ee-aa2df20f2e1e)　　\n\n## Pipe\n\n## @Input\n親　⇒　子  \n1.子コンポーネントに @Input プロパティを定義  \n![Captura desde 2023-12-21 10-01-39](https://github.com/naopeke/Angular_Commands/assets/143800388/04df3da9-c5e2-487f-b77c-7a89d7b0dcd7)\n  \n2.親コンポーネントから子コンポーネントにデータを渡す  \n![Captura desde 2023-12-21 10-01-56](https://github.com/naopeke/Angular_Commands/assets/143800388/22c7b30f-4e72-46fb-9de6-3c301c021c1c)  \n  \n## @Output\n子　⇒　親\n1.子コンポーネントに @Output プロパティを定義  \n![Captura desde 2023-12-21 10-08-34](https://github.com/naopeke/Angular_Commands/assets/143800388/d853f75c-680a-4051-99b7-0bd987629e55)  \n  \n2.親コンポーネントでイベントを受け取る  \n![Captura desde 2023-12-21 10-08-52](https://github.com/naopeke/Angular_Commands/assets/143800388/98417bbd-e522-4307-992a-222e4c3259bb)\n\n## EventEmitter\nカスタムイベントをコンポーネント間で送信するために使用されるオブジェクト。これは主に子コンポーネントから親コンポーネントへのデータの伝達に利用される  \n1.EventEmitterのインポート  \n![Captura desde 2024-01-09 17-48-37](https://github.com/naopeke/Angular-JP/assets/143800388/1a6f79b8-79ac-4fad-ab78-95b198788015)  \n  \n2.EventEmitterのインスタンスの作成  \n![Captura desde 2024-01-09 17-49-34](https://github.com/naopeke/Angular-JP/assets/143800388/7297e669-3692-49a2-9c00-99c0109667cc)  \n\n3.親コンポーネントでのイベントの受信  \n親コンポーネントのテンプレートで、子コンポーネントのイベントにリスナーを設定  \n![Captura desde 2024-01-09 17-50-23](https://github.com/naopeke/Angular-JP/assets/143800388/04d1493d-02cd-4e64-bb7a-9554fb472140)  \n親コンポーネントのクラスで、イベントが発火したときに実行する関数を定義\n![Captura desde 2024-01-09 17-52-24](https://github.com/naopeke/Angular-JP/assets/143800388/295a3b19-6f82-4004-86b9-927469db5c77)\n\n\n## Bootstrap\n```\nnpm install bootstrap jquery @popperjs/core\n```\nangular.JSON\n```\n\"styles\": [\n\n  \"node_modules/bootstrap/dist/css/bootstrap.min.css\",\n\n    \"src/styles.scss\"\n\n    ],\n\n    \"scripts\": [\n\n    \"node_modules/jquery/dist/jquery.min.js\",\n\n    \"node_modules/@popperjs/core/dist/umd/popper.min.js\",\n\n    \"node_modules/bootstrap/dist/js/bootstrap.min.js\"\n\n    ]\n\n```\n\n## Service\nアプリケーション全体で使用される共有データやロジックをカプセル化するためのもの。  \nコンポーネント間でのデータ共有、API呼び出し、ユーザー認証、ロギングなどの機能を提供するために使用  \n\n1.サービスの作成  \n![Captura desde 2024-01-09 17-56-41](https://github.com/naopeke/Angular-JP/assets/143800388/a7ea2c75-63df-4393-82a6-fee399a88d0b)  \n  \n2.サービスの実装  \nmy-service.service.ts  \n必要なロジックやデータアクセスのメソッドを定義  \n![Captura desde 2024-01-09 17-57-47](https://github.com/naopeke/Angular-JP/assets/143800388/889f0776-239f-496a-8a23-d0f8e02f9aed)  \n\n3.サービスの注入と使用  \nコンポーネントのコンストラクター内でサービスを注入  \n![Captura desde 2024-01-09 17-59-06](https://github.com/naopeke/Angular-JP/assets/143800388/e4632c6a-7800-486d-9620-cbb2deab9984)\n  \n## navigateとnavigateByUrl\nnavigate  \n```\nthis.router.navigate(['/path', { queryParams: { page: 1 } }]);\n```\nnavigateByUrl  \n```\nthis.router.navigateByUrl('/path?page=1');\n```\n\n## Location\n1.インポート  \n```\nimport { Location } from '@angular/common';\n```\n\n2.コンポーネントでの注入  \n```\nconstructor(private location: Location) { }\n```\n\n3.メソッドの使用  \n戻るボタン  \n```\ngoBack(): void {\n  this.location.back();\n}\n```\nURL取得\n```\ncurrentUrl(): string {\n  return this.location.path();\n}\n```\nURL変更（ブラウザの履歴に追加せずに）\n```\nreplaceUrl(path: string): void {\n  this.location.replaceState(path);\n}\n```\n\n## ActivatedRoute\nまずコンポーネントに注入  \n```\nimport { ActivatedRoute } from '@angular/router';\n\nconstructor(private route: ActivatedRoute) { }\n```\nルートパラメータの取得：URLの動的セグメント（例えば、/product/:id の :id）  \n```\nngOnInit() {\n  this.route.paramMap.subscribe(params =\u003e {\n    const productId = params.get('id');\n    // パラメータ 'id' の値を使用する\n  });\n}\n```\nクエリパラメータの取得:URLのクエリパラメータ（例えば、?search=text の search）  \n```\nngOnInit() {\n  this.route.queryParamMap.subscribe(queryParams =\u003e {\n    const searchQuery = queryParams.get('search');\n    // クエリパラメータ 'search' の値を使用する\n  });\n}\n```\nフラグメントの取得:URLのフラグメント（例えば、#section1 の section1）  \n```\nngOnInit() {\n  this.route.fragment.subscribe(fragment =\u003e {\n    // URLのフラグメントを使用する\n  });\n}\n```\nデータの取得:静的データやリゾルバ経由で取得されたデータ\n```\nngOnInit() {\n  this.route.data.subscribe(data =\u003e {\n    // ルートに関連するデータを使用する\n  });\n}\n```\n## Form\n## Model Driven\n1.ReactiveFormsModuleのインポート\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnaopeke%2Fangular-jp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnaopeke%2Fangular-jp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnaopeke%2Fangular-jp/lists"}