2022.12.04Angular実践新機能, サンプルコード, 経験者向け この記事では、Angularのバージョン15についておもな新機能や変更点をまとめてみた。 Angularはバージョン2のリリース以降、およそ半年に一度のペースでアップデートをおこな […]
![Ugo│Ugo](https://cdn-ak-scissors.b.st-hatena.com/image/square/ea0567f9d9e6b8fde1da59663077a34aecbb2f26/height=288;version=1;width=512/http%3A%2F%2Fugo.tokyo%2Fwp-content%2Fuploads%2F2022%2F08%2FiStock-842140632.jpg)
題して「頼りすぎない Angular」ということで、Angular の層をなるべく薄くアプリケーションを作るにはどうすればいいかというのを考えるシリーズです。 Angular 良さそうなんだけどロックインされて捨てにくそう、という人々向けに、コードのモジュール性とフレームワーク非依存性を重視した実装パターンを試行錯誤します。 第一回目は Angular の HttpClient を覚えずに、人気の npm モジュールである axios を使って Angular アプリで Ajax する例を紹介します。 axios は TypeScript の型定義を同梱していて、インターセプターなど Angular の HttpClient と同じような機能が揃っています。 Live Example今回の完成形はこちらです。 https://stackblitz.com/edit/angular-with
iOS 12までのiPadはユーザーエージェントに文字列"iPad"が含まれているかで判別できました。 しかしiOS 13以降のiPadのSafariには「デスクトップ用Webサイトを表示」という機能が実装されており、それがオンになっていると(デフォルト)ユーザーエージェントに"iPad"の文字が含まれなくなるようです。 そのためユーザーエージェントでの分岐に追加をする必要があります。 var ua = window.navigator.userAgent.toLowerCase(); if(ua.indexOf('ipad') > -1 || ua.indexOf('macintosh') > -1 && 'ontouchend' in document){ // iPad用の処理 }else{ // それ以外の端末用の処理 } "macintosh"という文字列が含まれており、タッチ操
この記事で対象としているブラウザはChrome(mac/win), Safari(mac), Firefox(mac/win), Edge(win) の最新バージョンで、以降これらをモダンブラウザと表記する。 tl;dr Safariで全角入力におけるJSイベントの挙動がおかしかったため調査したところ、仕様(draft含む)上はInputEventだけで判定できそうで期待したが、現状の挙動はベンダー毎に異なった 本命のinputEvent.isComposingはSafari/Edgeで対応してなかったりChrome/Firefoxでも挙動が違って使い辛い inputEvent.inputTypeは使える場面がありそう CompositionEventはモダンブラウザ全てに実装されており最も有用 inputイベントと組み合わせる場合はFirefoxのcompositionendイベントの発
やりたいことと方法を手短に Google の検索欄って、変換を確定する前から検索してくれて便利ですよね。 Angular でこのように変換確定前の入力値を使いたいときには COMPOSITION_BUFFER_MODE が役に立ちます。モジュールやコンポーネントの providers で COMPOSITION_BUFFER_MODE を false にすれば、 IME の変換が確定していなくても input の入力値がモデルに反映されます。 デモページ ソース 詳しい説明 入力された文字を表示するだけの簡単なコードを考えます。 これを PC のブラウザで操作すると、変換を確定するまで入力した文字が表示されないはずです。なぜこのような動作になるかというと、 Angular が変換が確定するまでモデルに入力値を反映させていないからです。具体的な処理は DefaultValueAccessor
概要 Angularの文脈でアプリを高速化するとは、ほぼChange Detectionまわりの最適化を行うことだと思われます。適切にChangeDetectionStrategy.OnPushを設定するのは当たり前ですね。他に、個人的にやってみて特に体感的に速くなったなーってのが、イベントなどから無駄なChange Detectionを走らせないようにすることです。 Change Detectionが走っているかどうかはNgZone#onMicrotaskEmptyから確認できます。 export class App { constructor(zone: NgZone) { zone.onMicrotaskEmpty.subscribe(() => { console.log('detect change'); }); } } 明らかにおかしな回数呼ばれている場合は、どこかで無駄打ちし
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く