📌
Angularのメモ
Angularはスルスタックのフレームワーク
特徴
-
コンポーネント志向
- 積み木のように積みあげていく
-
TypeScript
- 静的型付け
-
関連ライブラリ
- 非同期系
- RxJS
- Zone.js
- AngularCLI
- 非同期系
フォルダ構成
- appcomponents
-
selector
- ex. htmlで<app-root></app-root>みたいに呼び出せる！！
-
TypeScript
- JSを拡張したもの、静的型付けができる
型一覧
// 文字列型
var title: string = 'Angular';
title = 'Angular';
// 数値型
var n: number = 9;
// 真偽値型
var isOpen: boolean = true;
// 配列型
var keywords: (string | number)[] = ['hoge', 8, 'foo'];
// タプル型
var payments: [number, string, number] = [1, 'hoo', 8];
// オブジェクト型
var object: { [key: string]: string } = {
name: 'naka',
id: 'uu',
};
// 共用型(Union型)
var sample : string | number | boolean;
// enum型
// 定数を列挙していく
enum ErrCode {
OK = 200,
BAD_REQUEST = 400,
}
//省略可
enum Character {
Bob,
Dad,
Mom,
}
// any型
// JavaScriptと同じ動きをする
// 使わないぐらいの気持ちでいるべし
var something: any = 'foo';
// null, undefined型
var el: Element | null = document.querySelector('#app')
// 型推論
var unknown = 'string';
変数宣言の方法
| var | let | |
|---|---|---|
| スコープ | TD | ブロックスコープ |
| 関数の巻き上げ | 起こる | 起こらない |
※関数の巻き上げとは？？
既に宣言されていて、再度関数内で宣言されたvarが、暗黙的に関数の先頭で宣言されること
var hoge = 'hoge'
function varHoge(){
// 暗黙的に以下のように、ここで宣言されることになる
// しかし変数の宣言のみで、中身の代入までは行わないため、1つ下ではUndefiedとなる
// var hoge
console.log(hoge)
var hoge = 'New Hoge'
console.log(hoge)
}
letは関数の巻き上げは起こらない
定数宣言
// 一度入れたら変えないもの
const CurrentYear = 2025
テンプレート文字列
特徴
- 改行が保持される
- ${} で変数に格納されている文字列を埋め込むことができる
let language = Angular
let templete = `
Hello, ${language}
`
スプレッド演算子
let category = ['math', 'japanese', 'science']
// 複製
let copyCategory = [...category]
// 追加
let addCategory1 = [...category, 'other']
let addCategory2 = ['other', ...category]
// マージ
let mergeCategory = [...category, ...copyCategory]
// オブジェクトの追加・上書きもできるよ
分割代入
データ参照のコードを短くすることができる
let fruits = ['apple', 'banana', 'lemon', 'peach']
let [a, b] = fruits
console.log(a, b)
// apple, banana
// 以下のような深い階層のデータを代入したい時に特に有効！
[id, name] = user.accountInfo.data
関数
特徴
- 引数に?をつけると省略可能になる
- 初期値を設定可能
- ...values []number などとすることで可変長引数にできる
アロー関数
特徴
- () => {}で関数を定義できる
- アロー関数では関数の巻き上げが起こらない
- バグの原因になりづらいのでアロー関数の使用がおすすめ
- function()で定義した場合と、thisの参照先が異なる
- アロー関数では、関数の定義された場所
() => {}
let add = (x1: number, x2: number): number => {
return x1 + x2;
}
let hello = (name: string) => {
return `Hello, ${name}`;
}
console.log(hello('Yuta'))
// 処理が１行の場合こんな感じで省略できる
let hello = name => `Hello, ${name}`;
クラス
基本要素
- メソッド
- クラス内関数
- プロパティ
- クラス内変数
- インスタンス
- クラスを使える状態にしたもの
- コンストラクタ
- クラスをインスタンス化した際に実行される関数のこと
アクセス修飾子
| public | protected | private | |
|---|---|---|---|
| アクセス可能範囲 | 制限なし（デフォルト） | そのクラス内・継承クラス内のみ | そのクラス内のみ |
アクセサメソッド（getter, setter）
安全なプロパティアクセス
class Hoge (){
private _args = 4
get getargs() {
return this._args;
}
}
取得 → getter
設定 → setter
インターフェース
クラスで定義する変数・関数をまとめて定義できる
ジェネリック
// 同じようなクラスで外から変数の型を指定できる仕組みがある
class numberStore {
data: number;
}
class stringStore {
data: string;
}
// ジェネリック
class Store<T>{
data: T;
getStore(): T{
return this.data;
}
}
let stringData = new Store<string>();
RxJS
リアクティブプログラミングを行うためのもの
検索・HTTPリクエストetc... →
川（ストリーム）を流れるイメージ
- オペレーター → データは川の途中で自由に操作することができる
- Subscribeメソッド → 流れてきたデータのキャッチを行う
Discussion