こんばんは。社会人になりましてフロントエンド周りの勉強を始めまして、
まずAngularというフレームワークを勉強し始めました。
手始めに公式ドキュメントの「入門」の「はじめてのアプリ」から「ルーティング」までを読んでみて、理解したことなどをメモってみました。
中の人について
- エンジニアで採用され、まずはフロントエンドの担当に
- 昔pythonは書いていたが、スキル is 低い
- まずはここからということで公式docを読んでる ←ｲﾏｺｺ！
という訳で、Qiitaヤクザ造形の深い皆様は、
「まったく分かってないやん･･･」とキレずにコメントなどで
お手柔らかにご教授くださいませ（わがまま）
Angularってなに？
調べた内容をまとめてみました。
- フレームワーク
- 画面まわりを作成する際に便利
-
HTML, CSS, JavaScriptの見た目に関する機能に加えてページ移動に関すること(ルーティング)などの機能もある
↑比較ででてくるVueとかReactとかは後者がない模様。 - JavaScriptの上位互換であるTypeScriptが使用されている
↑型の宣言ができる点で上位互換とのこと
といった感じで、すごい便利そう（小並感）
では、実際に読んで分かったことなどをまとめていきます。
はじめてのアプリ
基礎が書かれています。が基礎だけにめちゃ大切なことが書かれてます。
分かったこと
- 「プロパティ」･･･ざっくりと変数のこと
- 「属性」･･･ざっくりと数値や文字列のこと。
-
「バインド」･･･プロパティに数値・文字列をいれるようなもの
(紐づけてバインドするっていう連想が分かりやすそう) -
インプットとアウトプットの概念
中々理解しづらい感じですが、以下リンクのボタン呼び出し側(親要素）に対して色・形（子要素）を渡す、という例がとてもいい感じ！
[Angularの@Input(), @Output()を理解する。]
(https://qiita.com/masaks/items/677195b78379e0877e24)
☆インプット：親→子へ属性を渡す & []を使用
☆アウトプット：子から親へ考え(ロジック)を渡す & ()を使用
といった感じ･･･？
ルーティング
そもそもルーティングとは複数のページがあるときに、このページにはこのルートで行けば辿りつくよ、という道しるべの情報のこと（ざっくり）
ここからは、実際にコードを書く際にどんな流れなのかを書いてみました。
①コンポーネントを作成
※「コンポーネント」･･･tsファイル, htmlファイル, cssファイル, scssファイルをまとめたもの。
②tsファイル内にpathとコンポーネント名のペアをつくる
こんな感じです。
RouterModule.forRoot([
{ path: '', component: ProductListComponent },
{ path: 'products/:productId', component: ProductDetailsComponent },
])
③htmlファイルにリンク先の設定をします。
<a [title]="product.name + ' details'"
[routerLink]="['/products', productId]">
{{ product.name }}
</a>
ここで、②のpathと、③の[routerLink]の内容が同じになるように設定するようです。
これでルーティングの登録が完了しました。
以後はルーティング情報を使う流れになります。
④tsファイルでimportによって各種道具類をもってきます。
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { products } from '../products';
importで使えそうなイメージがありますが、以下の⑤を実行しないと使えない?ようです。
イメージとしては、
キャンプ場で金網やトングを借りてきました！（だけど持ってきただけで洗ってないので使えない･･･）みたいな感じかなと思います。
⑤tsファイルでexportによってクラス名を定義する
ここでウラス名を定義しますが、②のコンポーネント名と同じな点が重要。
//⑤の部分
export class ProductDetailsComponent implements OnInit {
product;
//⑥の部分
constructor(
private route: ActivatedRoute,
) { }
}
⑥tsファイルでコンストラクタで初期化して使えるようにする
上記コードのconstructorからの部分です。
これによって④で持ってきた道具類を初期化している、とのこと。
キャンプのたとえの場合、金網やトングを洗うことによって使用が可能になるイメージですね。
まとめ&今後の目標
そんなこんなで、初学者がドキュメントを読んで書いてみました。
公式ドキュメントが丁寧で分かりやすい（概念は少し難しいけど）のでこのまま続けていこうと思います。
今後は**データがどういう流れになっているのか？**を図示したいところです。