武者修行を始めて15日程経過。
1週間程かけて Start Angular · GitBook でAngularの基礎を学んでそれなりに知識がついたので。
Angularを使ってアプリを作り始めました。
忘れないようにめも。
主に何をした
- componentの作成
- module作成
- template作成
- pipe作成
- routing設定
- testの設定
ざっくり言うとこんな感じ。
Angularの特徴を自分の中で整理
型定義をする
- AngularはTypescriptなので型定義をしないとダメ。しかしany型は使わないこと
- データのやり取りの中で型指定をしないとエラーになる原因になる
失敗の背景
型定義しなかったらnpm run build が通らず「型定義してー」言ってました。
componentとmodule
- inputやselectなどformで使う細かいパーツまでcomponent化出来る(感動)
- 細かいcomponentを作成したらmoduleにまとめ管理する
私の中で
component = 「おかず」 module = 「お弁当箱」
componentの中は
hoge.component.html・・・テンプレート hoge.component.css・・・テンプレート hoge.component.spec.ts・・・テストに使用するファイル hoge.component.ts・・・import、export、データの初期化等など
他にもこのようなファイルを追加することも
hoge.module.ts・・・作成したcomponentをimport(declarationsにも記述) hoge.ts・・・型定義するファイル hoge.component.mock.ts・・・テストを通す為の仮ファイル
失敗の背景
- module.ts にcomponentをimportしなかったらエラー！
- hoge.component.mock.ts を作成しなかったら
npm run testでいっぱい怒られた！
pipe
小文字を大文字にしたり、数字入力したら文字に変換したりと変換してくれる機能
バインディング
例えばinput.componentを作る。
inputタグにはtypeやvalueなど属性が付いているのでinput.componentで指定する枠を用意してあげるという。
属性を型指定し、htmlで"{{hoge}}"を用意し完了。
(属性以外にもスタイルやイベントも設定が可能。)
input.componentを使用する画面のhtmlに先程設定した内容を各々設定できる。(感動)
※ @Input()と@Output()についてはまだまだ理解追いついてないので後日記述します。
得た知見(新しい発見)
- cssの定義について OOCSSとSMACSS,BEM 品質大事
- シングルコーテーションとダブルコーテーションの違い
失敗の背景
- class名が画面依存型の書き方で他に画面が増えたりした時に修正が大変
- 今まで文字は" ダブルコーテーション"と認識でずっとやっており
npm run lintしたら怒られました！
これら別でブログにて記載します。
次の課題
- serviceの使い方
- @Input()と@Output()
- データの持ち方
- typescriptの書き方
他にもいっぱいありますがこのあたりを重点的に学んでいく
自分がデザインしたアプリを作ってて「色々疑問」苦笑
ちゃんと構造やデータの持ち方など理解しないとなと思ったのでした。
合わせてデザインの勉強もやらないとね。
