2024/02/03 ~ 2024/02/09 のもくもく日記

もくもく 前回までは

2024/01/27 ~ 2024/02/02 のもくもく日記 をご覧ください。

途中経過

その１

package.json の内容は、 npm package コマンドを使うことで取得できるっぽい。 GitHub Actions でバージョン取得したい場合とかに使えそう 👀

https://docs.npmjs.com/cli/v10/commands/npm-pkg

その２

Angular 16 -> 17 にしたらTypeScript 5.1 -> 5.3 になったので読んでみる 👀

• TypeScript 5.2
• TypeScript 5.3

その３

下記のAngular バージョンをアップデートしてみた。 Angular 17 から新しいビルドシステム @angular-devkit/build-angular:browser-esbuild が使えるようになったので、 こちらも併せて書き換えてみた。

同じAngular 17 でも 従来のビルドシステム @angular-devkit/build-angular:browser より、 だいぶビルド時間が早くなったので、とても嬉しい 🎉

ちなみに、ビルドシステムを書き換えた際、一部コードを修正する必要があった。

• CSS: node_modules 配下にあるファイルのimport
  • before: @import "~purecss/???.css";
  • after: @import "purecss/???.css";
• TypeScript: import の書き方
  • before: import * as Markdown from 'markdown-it'
  • after: import Markdown from 'markdown-it'
  • デバッグ時と本番デプロイ時で挙動が違ったので、見つけにくいかも

その４

<a href="???" target="_blank"> を記述した際、 セキュリティの問題があるので noopener noreferrer も指定すると思うのだけど、 よく書き忘れちゃうorz

……で調べてみたのだけど、下記のAngular 実装、うまいなと思ったw

https://dev.to/azrizhaziq/secure-your-apps-with-angular-directive-for-target-blank-fi9

import { Directive, HostBinding } from '@angular/core';

@Directive({
  // target every <a target="_blank">...<a>
  selector: 'a[target=_blank]',
})
export class TargetBlankDirective {
  // will add <a ... rel='noopener noreferrer'>...</a>
  @HostBinding('attr.rel') rel = 'noopener noreferrer';
}

今回の進捗

• GitHub
• Nintendo Switch でトレーニングを進めた
  • 脳を鍛える大人のNintendo Switchトレーニング
• 本を読み進めた
  • クラウドアプリケーション 10の設計原則