12月に調べたことのメモです。
Angular関連
View作成や再利用について
- Angular ng-template, ng-container and ngTemplateOutlet: Guided Tour
- テンプレートに関してのまとめ
- TemplateRefからの利用やngTemplateOutletでの利用
- Creating Reusable Components with NgTemplateOutlet in Angular
- テンプレートを利用した再利用可能なコンポーネントの作成
- テンプレートをContentChildを利用して読み込むことで柔軟な利用ができる
- サンプルとして
CardOrListViewComponent
というコンポーネントを作成- あるItemをCardViewかListViewで表示する
- Itemが何かについては知らない
- CardView、ListViewの具体的な構造も知らない
ngTemplateOutlet
の利用方法let
,context
,$implicit
についての理解
- あるItemをCardViewかListViewで表示する
- angular-reusable-components-ngtemplateoutlet - StackBlitz
- 自分で試したサンプル
- angular-reusable-components-ngcomponentoutlet - StackBlitz
- ngComponentOutletを利用してみたけど、contextにあたるもの(@Inputできるようなもの)がない
- テンプレートを利用した再利用可能なコンポーネントの作成
- 振る舞いを再利用するサンプル
<div [myItem]="item1" #dir="myItem"> {{dir.item.header}}: {{dir.item.content}} | <button (click)="dir.onRemove()">remove</button> </div>
- (WIP) createEmbeddedViewとcreateComponen - ryotah’s blog
- 「動的にコンポーネントを作成する方法」と「テンプレートを読み込んでViewを作成する方法」についてまとめ。(途中でやめている)
Form関連
- angular-form-dynamic-form - StackBlitz
- Formのフィールドをモデルから生成
- 基本は https://angular.io/guide/dynamic-form のコード
- angular-form-ngrx - StackBlitz
- ngrxでフォームの状態管理をするサンプル
- どこまでStoreで管理するか
- touched、dirtyなどはローカルステートとして扱いStoreでは管理しない、など
touched
/dirty
/pristine
private markFormGroupTouched(formGroup: FormGroup) { (<any>Object).values(formGroup.controls).forEach(control => { control.markAsTouched(); if (control.controls) { control.controls.forEach(c => this.markFormGroupTouched(c)); } }); }
Dateライブラリ
- moment -> Luxon - ryotah’s blog
- MomentからLuxonにライブラリを変えてみた時のメモ
VSCode
コードフォーマット
{ "singleQuote": true, "trailingComma": "es5" }
tslint --fix
- 今まで利用してなかったけど、便利すぎた
- TypeScript Hero の
Sort and organize your imports (sort and remove unused)
をわざわざする必要なくなった
"tslint.autoFixOnSave": true,
"no-unused-variable": true, "ordered-imports": true,
Go環境用意
- インストール
brew install go
export GOPATH=$HOME/foo/bar export PATH=$GOPATH/bin:$PATH
GOPATH
以下に開発環境を構築するgo get
などのコマンドを実行するとGOPATH
フォルダにダウンロードされる
PATH
を設定しておくとコマンドうつのが楽
Reactチュートリアル
Tutorial
- Tutorial: Intro To React - React
in React apps to use on names for the attributes and handle for the handler methods.
- Why Immutability Is Important
- Easier Undo/Redo and Time Travel
- Tracking Changes
- Determining When to Re-render in React
It’s strongly recommended that you assign proper keys whenever you build dynamic lists.
- react-tutorial-tic-tac-toe - StackBlitz
- 自分でやったサンプル
その他
- Parcelを利用してReact × Typescriptの環境を用意 - ryotah’s blog
- Chalarangelo/30-seconds-of-code: Curated collection of useful Javascript snippets that you can understand in 30 seconds or less.
- Font Awesome
- Font Awesome 5がでていた
- [Web Fonts] ではなく [SVG with JavaScript] が推奨
- Should I use SVG, Icon Fonts, or Images? – Web-Crunch
Why Use SVG anyway? Very small footprint and easily compressible Scalability without loss of clarity Easy to control from a design perspective.
Google Analytics
- gtag.jsとかいう新しいやつ
npm install --save-dev @types/google.analytics
- Single page application tracking with gtag.js | Analytics for Web (gtag.js) | Google Developers
- Cookies and user identification with gtag.js | Analytics for Web (gtag.js) | Google Developers
コンポーネントを設計するときに
- 「飛行機のパーツ」とみるか、「2×4のブロック」とみるか
- 細かくつくる
- 汎用化と抽象化
- Viewにどこまで関係するのか(テンプレートにどこまで関係するのか)
- それは「ロジック」ではないか
- それは「振る舞い」ではない