【VSCode】Prettierの設定(備忘録)

備忘録として 忘れがちなので、記載します。 VSCodeの設定 1. 設定画面(setting)を開く 2. 検索欄で「format」と調べる 3. 「Editor: Default Formatter」で「Prettier - Code formatter」を選択 4. 「Editor: Format On Save」にチェックを入れる。 プロジェクトごとの設定 プロジェクトフォルダの直下に .prettierrcファイルを作成し、設定を記載 以下は、htmlファイルの例 { "overrides": [ { "files": "*.html", "options": { "tabWidth…

【Angular】Bootstrap5の導入

Angular Materialを使うことが多いですが... AngularでBootstrap5を使うための手順を記載します。 1. 以下のコマンドを実行します。 $ npm install bootstrap --save 2. プロジェクトフォルダの node_modulesフォルダを参照して、bootstrapの相対パスを取得します。 (1) CSS: node_modules/bootstrap/dist/css/bootstrap.min.css (2) JS: node_modules/bootstrap/dist/js/bootstrap.min.js 3. angular.j…

【Bootstrap5】ナビゲーションバーの要素の右寄せ

備忘録として Bootstrap5になって、「ナビゲーションバーの要素の右寄せができない！」という声が多い。 ちょっとしたことなのに、実現できないと、意外とイライラしますよね。 そのため、備忘録として記載します。 右寄せしたい ul に 以下のクラスを設定します。 ms-auto mb-2 mb-lg-0 以下は、参考例です。 <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> <…

【VSCode】BracketPairをVSCode純正のものに変更

VSCodeの設定の備忘録として BracketPairをVSCode純正のものに変更する設定を記載します。 indentRainbowはお役御免となります。 設定画面の検索窓に以下の文言を入力して、チェックボタンをオンにします。 editor.bracketPairColorization.enabled 以上です。

【書籍】Angular超入門の誤り箇所等のまとめ

今までの記事をまとめました これまで「Angular超入門」を読み進む中で発見した誤り箇所などを記事にしてきました。 だいぶ量がたまったので、以下のページに、まとめページを作成しました。 技術書籍 以上。

【書籍】Angular超入門の誤り箇所(14)

記載誤りの備忘録として 「Angular超入門」を読んでいて、記載誤りと思われる箇所を記します。 P.268〜269のAngular Materialのインストール手順 Angular Materialのインストール手順が変わっていました。以下、記載します。 1. 以下のコマンドを実行 $ ng add @angular/material 2. しばらく待つと、以下のように、「パッケージ情報がロードされました」というメッセージが表示されます。 ℹ Using package manager: npm ✔ Found compatible package version: @angular/ma…

【書籍】Angular超入門の誤り箇所(13)

記載誤りの備忘録として 「Angular超入門」を読んでいて、記載誤りと思われる箇所を記します。 P.297 リスト5-25 MatNativeModuleのimport文のfrom句は、@angular/materialでは足りません。 以下のようにcoreまで指定する必要があります。 import { MatNativeDateModule } from '@angular/material/core'; 以上。

【書籍】Angular超入門の誤り箇所(12)

記載誤りの備忘録として 「Angular超入門」を読んでいて、記載誤りと思われる箇所を記します。 P.273 リスト5-6 containerクラスの paddingを 0px 10pxとすると、このcontainerクラスの表示が上に行きすぎる。 そこで、以下のように0pxを削除したら、P.273の図5-4と同じ表示になった。 .container { background-color: aliceblue; padding: 10px; } 以上。

【書籍】Angular超入門の誤り箇所(11)

記載誤りの備忘録として 「Angular超入門」を読んでいて、記載誤りと思われる箇所を記します。 P.271 リスト5-3 MatButtonModuleのimport文のfrom句では、@angular/materialだとエラーになるので、以下のようにbuttonまで含める必要がある。 import { MatButtonModule } from '@angular/material/button'; 以上。

【書籍】Angular超入門の(勝手な)改善提案(4) - シンプルな記述

改善箇所の備忘録として 「Angular超入門」を読んでいて、こう改善したら良いかなと思う箇所を記します。 P.260 リスト4-50 filter関数の中のreturn の箇所は、以下のように短縮できますね。 return k % 2 === 0; 以上。

【書籍】Angular超入門の誤り箇所(10)

記載誤りの備忘録として 「Angular超入門」を読んでいて、記載誤りと思われる箇所を記します。 P.221 リスト4-27 navigateメソッドの引数eventに型指定(any)が必要。 navigate(event: any) { this.message = event.url; } 以上。

【書籍】Angular超入門の(勝手な)改善提案(3) - シンプルな記述

改善箇所の備忘録として 「Angular超入門」を読んでいて、こう改善したら良いかなと思う箇所を記します。 P.204 リスト4-11 listメソッド内で、JSON.parseとJSON.stringifyの箇所は不要で、以下のようにシンプルに書けるのでは？ get list() { return this.data; } 以上。

【書籍】Angular超入門の誤り箇所(9)

記載誤りの備忘録として 「Angular超入門」を読んでいて、記載誤りと思われる箇所を記します。 P.248 リスト4-43 fetch関数後のthenの引数respに型指定(Response)が必要。 resp.json()関数後のthenの引数valに型指定(MyData)が必要。 fetch('/assets/data.json') .then((resp:Response) => { resp.json().then((val:MyData) => { this.mydata = val; }); }); 以上。

【書籍】Angular超入門の(勝手な)改善提案(2) - Serviceのスコープを深掘り

改善提案の備忘録として 「Angular超入門」を読んでいて、こう改善したら良いかなと思う箇所を記します。 P.208まで読み進んだ後は... リスト4-15(P.207)とリスト4-16(P.208)を弄りながら、Serviceのスコープを深掘りしてみる。 その1 修正内容 リスト4-16(P.208)(message.component.ts)を以下のように修正して、動作させてみる。 5行目をコメント化する。 providers: [MycheckService] ↓ // providers: [MycheckService] ※ リスト4-15(P.207)(hello.compone…

【書籍】Angular超入門の誤り箇所(8)

記載誤りの備忘録として 「Angular超入門」を読んでいて、記載誤りと思われる箇所を記します。 P.202 リスト4-9 リスト4-10(P.202〜203)のmessage.component.tsの実装内容を見ると、doActionメソッドがない。 そのため、リスト4-9のmessage.component.htmlでは、(click)="doAction($event)"の箇所を削除する必要がある。 <li class="message" (click)="doAction($event)" *ngFor="let item of content">{{item}}</li> ↓ <l…

【書籍】Angular超入門の(勝手な)改善提案(1) - 個別バリデーション

改善箇所の備忘録として 「Angular超入門」を読んでいて、こう改善したら良いかなと思う箇所を記します。 P.152 リスト3-24 個別のバリデーション表示時の書き方は、以下のように書くとシンプルにできる。 nameのバリデーション箇所 <div *ngIf="name.errors != null && name.errors.required != null">Nameは必須項目です</div> ↓ <div *ngIf="name?.errors?.['required']">Nameは必須項目です</div> 他の箇所も同様 mailやageのバリデーション箇所も、上と同様に改善で…

【書籍】Angular超入門の誤り箇所(7)

記載誤りの備忘録として 「Angular超入門」を読んでいて、記載誤りと思われる箇所を備忘録として残します。 P.257 リスト4-48 【書籍】Angular超入門の誤り箇所(5)も参照。 fromEventの箇所を訂正すると、以下の通り。 fromEvent<MouseEvent>(btn, 'click') .pipe(filter((res:MouseEvent, n:number)=>{ console.log(n); if (res.shiftKey) { return false; } return true; })) .subscribe((event: MouseEvent)…

【書籍】Angular超入門の誤り箇所(6)

記載誤りの備忘録として 「Angular超入門」を読んでいて、記載誤りと思われる箇所を備忘録として残します。 P.255 リスト4-47 updateDataメソッドの2行目の getメソッドに戻り値の型指定(MyData)が必要。 mapの関数について、引数resの型は、Responseではなく、MyDataなのでは? updateData(f:boolean) { this.client.get('/assets/data.json') .pipe( map((res:Response) => { return f ? res : null; }) ) : : ↓ updateData(f…

【書籍】Angular超入門の誤り箇所(5)

記載誤りの備忘録として 「Angular超入門」を読んでいて、記載誤りと思われる箇所を備忘録として残します。 P.250 リスト4-45 1行目 AfterViewInitもimplementする export class MessageComponent implements OnInit { ↓ export class MessageComponent implements OnInit, AfterViewInit { 4行目 変数btnにびっくりマーク(!)を付ける @ViewChild('btn') btn: ElementRef; ↓ @ViewChild('btn') btn!…

【書籍】Angular超入門の誤り箇所(4)

記載誤りの備忘録として 「Angular超入門」を読んでいて、記載誤りと思われる箇所を備忘録として残します。 P.249 リスト4-44 2行目のObservableには、戻り値の型指定が必要。 let ob: Observable = from(fetch('/assets/data.json')); ↓ let ob: Observable<Response> = from(fetch('/assets/data.json')); 以上。