前提 本記事の内容は主にAngular v9以上を対象としています。 v9よりIvy（Angularの次世代レンダリングエンジン）がデフォルトで有効になり、Ivyの導入に伴いデバッグAPIの仕様が変更されています。 そのため、v8以前では本記事で紹介するデバッグAPIは利用できません。 ブラウザコンソールからAngularの状態を見る Angularの開発モード（ng serveした状態）では、@angular/core/globalパッケージを使用してコンソールからアプリケーションの状態を見ることができます。 @angular/core/globalパッケージのメンバは、ngという名前空間に属する関数としてグローバル領域（windowオブジェクト内）に公開されます。 コンソールよりng.XXXXと関数を実行することで、コンポーネントのインスタンスなどを取得できます。 以下は使用可能な関数

先日、TypeScript 3.8 RCが公開されました。TypeScript 3.8はクラスのprivateフィールド（#nameみたいなやつ）を始めとして、ECMAScriptの新機能のサポートがいくつか追加されています。この記事で取り扱うtop-level awaitもその一つです。 この記事ではtop-level awaitに焦点を当てて、その意味や使い方について余すところなく解説します。top-level awaitは一見単純な機能に見えますが、実はモジュール (ES Modules) と深い関係があり、そこがtop-level awaitの特に難しい点です。そこで、この記事ではECMAScriptのモジュールについても詳しく解説します。この記事を読んでtop-level awaitを完全に理解して備えましょう。 ※ この記事は3分の1くらい読むと「まとめ」があり、残りはおまけで

最近、HTML5でベクターグラフィックスを取り扱う時にSVG形式のファイルを利用しているWEBサイトが増えて来ている。iOS系のデバイスが超高解像度のRetinaディスプレイを採用しているので、PCサイト向けに準備した800×600や1024×740といった大きめな画像でも、Retina端末で見るとぼやけてしまうという状況になったのが原因かもしれない。この状況でRetinaディスプレイでも綺麗に見れる高精細な画像を提供しようとすると、今度はファイルサイズが肥大化して、トラフィック側に悪影響が出るというジレンマに悩まされる。それらを解決すべく利用が進んだのがSVG形式のベクター画像だ。 数年前、SVGGirlとかいうコンテンツが流行っていた時は、まだSVG形式のファイルを利用できるブラウザが少なかったんだが、今どきのモダンブラウザは普通の画像ファイルと同じ感じに簡単に取り扱えるようになった。

Cypressの導入 おはようございます、モチベーションクラウドの開発に参画している@sinpaoutです。 TL; DR フロントエンドの機能動作を担保するためCypressを導入しインテグレーションテスト機構を構築した。 Cypressの導入、使い方、工夫、運用方法について記述する。 経緯 新機能を開発していると、ある日「手を止めて負債を解消しようぜ」という天命が下って希望の日差しが見えた。 みんなで負債リストを書き出し、優先順位づけしてリファクタリングを行う準備をした。 そこでリファクタリングの動作確認に自動テストの導入が必須であることに気づきCypressを使ったインテグレーションを導入することに至った。 インテグレーションテストとは ユニットテストを増やすと勝手に品質が上がるという話をよく聞くが 書くことが多く短時間で品質を担保するためには不向き。 しかし、E2E全機能を全ブラウ

Wake on Lan とは ネットワークにマジックパケットを送信することにより、遠隔でPCを起動する技術です。 自宅のPC電源がオフだとリモートデスクトップなどのリモート操作はまったくできません。 Wake On LAN を使えば、オフになっているコンピュータの電源を遠隔からオンにできます。 環境 次の組み合わせで試しました。 ホストPC OSはWindows10 Realtek製のネットワークアダプタ BUFFALO製の無線LANルータ ホストPCと無線LANルータは有線接続する必要があります。 Wake on Lan を有効化 OSの設定で Wake on Lanを有効にする 手順: デバイスマネージャー > ネットワークアダプターを右クリック > プロパティ Realtek製のネットワークアダプタなら、Wake on Magic Packet という項目を有効にする ネットワークア

2020/01/14 昨日突如 zeitからNotionをバックエンドにしたヘッドレスCMSが発表されました！！ Excited to share our long-awaited Next.js + Notion statically-generated blog example with the same tech as https://t.co/HVcLCVUO5w! - Edit via Notion - Blazing fast - JAMstack based - Always available - Fully customizable - Incremental SSG - MIT Licensedhttps://t.co/fD2vWxq2Y6 — JJ Kasper (@_ijjk) January 13, 2020 この内容が激アツなので、アツいポイントや使い方を紹介し

ちきさんです。 Sentryでエラー収集してますか？ してますよね。 さて、とあるWebアプリからSentryにエラーを送りたいが、下記の要件を満たす必要があったという話です。 (Sentry JavaScript SDK => Raven) Ravenをバンドルしてはいけない。(極限まで容量を削減する必要があるため) Sentryへのエラー送信がページ表示のパフォーマンスに影響を与えてはいけない。 同じページ上で発生する関係ないJavaScriptのエラーをSentryに送信してはいけない。 同じページに別のアプリのRavenが存在していたらそれを邪魔してはいけない。 なかなか厳しい要件ですね。 これらを満たすためにやったことは、 Ravenをバンドルせずにエラーを送信する必要が生じてから非同期でCDNから読み込む。 同じページに別のアプリのRavenが既に存在していたらCDNから読み込

概要 Github Actionsが使用できるようになったのでGithub上でのCI/CDの検証を行います。 開発において毎回デプロイ環境を構築したり、デプロイ手順書の作成、把握、手動での実施、といった一連のフローを行っていくのは非常に手間がかかります。 今回Github ActionsのCI/CDの検証を行い、定常的な方法を確立し、他の開発プロジェクトにも適用できるようなテンプレートを作成しました。 そのような環境の構築にあたっての備忘録としてここに記述しておきます。 今回、作成したテンプレートのプロジェクトは以下になります。 github-actions-examples 今回はWebサイトの環境における自動デプロイの手法になります。 この他の環境については Github Actionsにて自動的にビルドする環境作成(Android編) Github Actionsにて自動的にビルドす

App Extensionについて勉強中で、Today Extensionの基礎についてまとめました。 Today Extensionとは Today Extensionとは、App Extensionの一つで、上から出てくる通知画面の今日のお知らせ的な情報を表示している部分のこと。Todayウィジェットと呼ばれる。 ↓この画面。 自分のアプリにこのTodayExtensionを追加すると、以下のことができます。 最新情報を取得する ごく単純なタスクを実行する 複雑な処理向けではないようです。 いくつかの制限があります。例えば・・・ iOS向けのTodayウィジェットでは、キーボード入力を行うことはできない。などが挙げられます。 ロック画面でも、同じExtensionが表示されます。 アプリのアイコンを3Dタッチすると、Todayウィジェットのコンテンツが表示されます。（heightがco

はじめに これは Angular Advent Calendar 2019 10日目の記事です。 こんにちは (｡･ω･｡) Angular と Firebase で CGM サービス（一般ユーザー投稿型サービス）を開発している者です。 早いもので、Angular Advent Calendar も 3 回目の参加となります。 例年ではなんとなく不吉な 4 日目をいただいていたのですが、今年も募集当日にエントリーしに行くと既に 9 割ほどの枠で参加表明があり、狙っていた？ 4 日目も埋まっていました。 （どこでも良いので他の人が嫌がる確率が高そうなところに入ったろの精神 今まで #1 しかなかったカレンダーが今年は勢いそのまま #2 まで誕生し、ここ 1 年での Angular コミュニティの成長を実感しています (ﾉﾟ∀ﾟ)ﾉ 小話はこの辺で... この記事では、約 2 年間 Angul

これは TypeScript Advent Calendar 2019 23日目の記事です。 みなさん「any」使ってますか？え？お前はどうかって？それはもうね…つ、使ってませんよ（ドキドキ）👮‍♂️「あなたanyですね？署までご同行願います」🙋‍♂️「ぐぬぬ…マウスオーバーされてないのに何故バレた！」‬ 隠れた any を探せ👮‍♀️！ TypeScript を使っていると、意図せず any が紛れこんでくることがあります。例えば、ライブラリが提供する関数が any をデリバリーしてきて、それがそのまま伝搬してしまう様なケースです。このように any が紛れてしまうと、grep ではもちろん、コードレビューの目もすり抜けてしまいます。 import { greet } from './utils' const message = greet() // 隠れany function

import { IsNotEmpty, MaxLength } from 'class-validator'; import { Column, PrimaryGeneratedColumn } from 'typeorm'; import { ApiProperty } from '@nestjs/swagger'; export class User { @PrimaryGeneratedColumn() @ApiProperty({ example: 1 }) id!: number; @IsNotEmpty() @MaxLength(16) @Column() @ApiProperty({ example: 'alice07' }) displayId!: string; @IsNotEmpty() @MaxLength(16) @Column() @ApiProperty({

この記事は Angular #2 Advent Calendar 2019 の 17 日目の記事です。 はじめに あるプロジェクトで結構複雑めなフォームを作った時にReactive Formsを体系的に調べていたのですが、その中でReactive Formsに型欲しいなと感じたので、型をつけていきます。 備忘録も兼ねて、AngularのTemplate-driven Formsの書き方とも比較したりしながらまとめていきます。 初Advent Calendarということで、周りの先輩方の記事を模倣しながら、いい感じに記事をかけていけたらと思いま〜す！ Angularにおけるフォームの実装 ログインフォーム、決済フォーム、会員登録フォームなどみなさん一度はフォームを実装したことがあると思います。 Angularにはフォームを実装する方法が２つ用意されており、それぞれ特徴があるので、どちらが自分

PySpaアドベントカレンダーのエントリーです。昨日はYesterdayでした。今日はTodayです。 ずっと開発や普段使いで使えるChromebookが欲しいと思っていました。勉強会の発表で使ったりするので、きちんと技適が通ったやつで、性能がまとも（以前ATOMベースのマシンにLinux入れたけど遅くて使う気になれなかったので）なやつを待ち望んでいました。 7月ぐらいからHPがChromebookを販売開始してくれました。気づいてから申し込んだものの、予想外に受注があったのか、納期が伸びに伸びて1ヶ月半近くかかりましたが、とても良いものだったので、今ではすっかりメインで使っています。 バージョンによって状況はまた変わってくるかもしれないので、タイトルに日時を入れました。これを書いた時点でのバージョンは78.0.3904.106（Official Build）（64 ビット）でした。 日本

RFC7049 CBORによるオブジェクトのバイナリ表現 概要 この投稿はCBOR Web Token(CWT)入門3部作の第1弾です。 CWTとは みんな大好き JWT(JSON Web Token) のバイナリ版 JSON + Base64な日常にピリリと辛い刺激を与える、IoT時代注目の一品 今話題のWebAuthn(WebAuthentication API)でも使われている(追記) という感じです。 詳細な説明は後ほどの投稿で行うとして、ここではJWTにおけるJSONに相当する、CBORというオブジェクト表現についてざっくりと紹介します。 CBORとは The Concise Binary Object Representation (CBOR) is a data format whose design goals include the possibility of extr

この記事 Angular Advent Calendar 2019 9日目の記事です。 Schematicsでライブラリを作成してみました。 今回は作ったライブラリの説明と、作成を通して学んだことを共有させていただきたいと思います。 作ったもの https://www.npmjs.com/package/ng-layer-generator です。 とコマンドを叩くと、 task.usecase.spec.tsとtask.usecase.tsが作成されます。 作成されたファイルの中身はng g service taskで生成されたものとほぼ同じで、class名がTaskServiceではなくTaskUsecaseとなっているということだけが異なります。 要は、serviceと同じ中身だけど、sercviceって名前がつかないファイルを作るためのライブラリです。 --nameオプションと、-

私は現在、グーグルマップを利用した Angular アプリケーションを開発しています。 Angular 経験の浅い自分でも簡単に利用できる GoogleMap ライブラリーを調査していたところ、先日、Angular Material UI component library のパッケージとして、@angular/google-maps components/src/google-maps at master · angular/components · GitHub　がリリースされたので、早速検証がてら触ってみました。 この記事では、@angular/google-maps の簡単な使い方を紹介していきます。 インストールとセットアップ npm からインストールします。 import { BrowserModule } from "@angular/platform-browser"; i

@angular/youtube-player とは Angular公式のYouTube player APIのwrapperです。使用方法などは、https://github.com/angular/components/tree/master/src/youtube-player を参照してください。 https://github.com/angular/components/blob/22fecb35665b43061e3a24a89db3fbcb8b9bc5b8/src/youtube-player/youtube-player.ts のタイミングのコードについてコードリーディングしてみようと思います。 コードの依存 package.jsonのdependenciesあたりを見てみると型定義とAngularのcoreとcommonのみです。それはそうかという気もしますが、依存をなる

今年のAngularアドカレはテストの話題が豊富ですね。 Angular8 ユニットテストが動かねぇ！ や はじめてのユニットテストを書く前にモック実装で手が止まってしまわないために など、テストコードを書く上での知見が色々と紹介されています。 僕自身も3年前のアドカレで、Zone.jsがいかにAngularのテストに貢献しているかとかを書いたりしたことがあり、Angularの色々な機能の中でもテスト周りは特に好きな部分の1つだったります。 さて、Angularで直近ホットだった話題といえば、やはりIvyは外せません。 Ivy自体は基本的に内部構造の変更であるため、アプリケーションコードの書き方そのものに影響する話ではないですが、AoT(Ahead of Time)コンパイルをデフォルトにするための布石であり、バンドルサイズの削減やビルドプロセスがシンプルになる、といった効果については聞い