New in Angular 2023 Winter lacolaco Angular GDE @laco2net GDG DevFest Tokyo 2023
背景 私は現在、AAHubとというウェブサイトを運営しています。このサイトはIonicとAngularを用いて構築されています。 これまでAngularとIonicのフレームワークのバージョンアップには対応してきましたが、スタンドアロンコンポーネントや新しい制御フロー構文への対応は行っていませんでした。 そこで、これらの技術を取り入れることを計画しています。それに伴い、PageSpeed Insightsを使用してウェブサイトのスコアやバンドルサイズの変化を追跡し、パフォーマンスの改善を図りたいと考えています。 サイトの技術スタックについて @ionic/angular: v7.5 Angular 17.0.3 Firebase 10.7.0 @angular/fire: 17.0.0-next.0 Cloudflare Pages Before→After Before スコア:35点
JavaScriptに興味を持つ世界中のIT技術者3万9472人が回答したアンケートの結果をまとめた「State of JavaScript 2022」が公開されました(日本語訳版が同時公開されています)。 回答者の国別分布を上位5位までを見ると米国が11.9%、ドイツが5.2%、フランスが3.7%、イギリス(UK)が3.6%、そしてインドが3.2%。 言語別の回答者は、英語が69.6%、フランス語が3.4%、ドイツ語が3.1%、スペイン語が3%などとなっており、日本語での回答者は0.4%でした。 アンケートの結果は、ProxyやPromiseなどに関するJavaScriptの新機能がどのくらい使われているか、Service WorkerやWebGLなど新しいブラウザAPIがどのくらい使われているかや、人気のJavaScriptライブラリ、JavaScriptは正しい方向に進化していると思
Angular公式のi18nパッケージ(パッケージ名 @angular/locale)がとても出来がよく、DeepLを使った自動翻訳も簡単にできたので、何がよかったかをご紹介したいと思います。「いやいやそんなのまだまだだ」「こっちのツールの方が強強だ」という方はぜひ記事を書いていただき、知見を共有できれば幸いです。 Angular i18nというと「Angular公式のi18nパッケージ」( @angular/locale )と「Angularのi18n化(国際化)」の2つの意味がありややこしいですが、本文では前者の「Angular公式のi18nパッケージ」を指すことにします。 Angular i18nのよかったこと4選 私が採用してとても開発者体験がよかった点を4つご紹介したいと思います。 1. compiletime i18nによりパフォーマンスの問題がない まず、SPAの多言語化には
Angularのテンプレート内ではクロスサイトスクリプティングを防ぐためにscriptタグが使えません。 Angular内でscriptタグが必要になった場合の方法を紹介します。 本記事は参考として、charjsを読み込んでみます。 方法1 参考にしたサイト http://kenteiblog.hatenablog.com/entry/2018/08/25/113644 一つ目の方法は、Angularのテンプレートが読み込まれた後に動的にscriptタグを追加する方法です。 componentのAfterViewInitメソッド内で動的にscriptタグを作成し、属性を埋め込んでテンプレートに追加します。 ngAfterViewInit() { const script = document.createElement('script'); script.async = true; scr
Googleの「Firebase Hosting」がNext.jsとAngular Universalによる動的Webサイトもサポート、コマンド一発でデプロイ。Firebase Summit 2022 Googleは10月18日に米ニューヨークでモバイル向けのバックエンドサービスであるFirebaseにフォーカスしたイベント「Firebase Summit 2022」を開催しました。 このイベントでGoogleは、これまで静的なWebサイトのホスティングサービスだったFirebase Hostingの新機能として、Next.jsとAngular Universalを用いたサーバサイドレンダリングによる動的なWebサイトにも対応することを発表しました。 これまでFirebase HostingでNext.jsやAngular Universalのようなサーバサイドレンダリングのためのフレーム
google adsense(レスポンシブ広告)追加について レスポンシブ広告を新規に作成すると以下のようなものが提供され、通常はそのまま貼るはず。ですが、Angularで作成するSPAの場合、componentとして追加(ng generate component してcomponent.htmlに記載)しても上手く表示されなかったため、別の手段を探しました。 <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- angular_xem_harvest_checker --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-38663342XXXXXXX" data-a
AngularでAdsenseで広告を出す方法です。 AndroidやiOSアプリで広告を出すためにはAdmobが利用可能ですが、AdmobはWebプラットフフォームをサポートしておりませんのでWebでは使えません。Webの場合はAdsenseを使う必要があります。 ところがAngularでAdsenseを利用する方法はほとんど情報がなく、ましてやIonicとなると皆無でした。非常に苦労しましたが、なんとかわかってきたのでまとめます。 まとめ ng2-adsenseを使います。しかし公式の通りにやっても動作しませんので、追加でHTMLページにコードを追加する必要があります。また、広告をレスポンシブにしない、ページの上部に設置するといった一見ナンセンスなことに注意する必要があります。 環境 Angular11でIonic6です。 Ionic: Ionic CLI : 6.13.1 (/usr
Custom Elements Everywhere Making sure frameworks and custom elements can be BFFs 🍻 What's this? Custom Elements are the lynchpin in the Web Components specifications. They give developers the ability to define their own HTML elements. When coupled with Shadow DOM, Custom Elements should be able to work in any application. But things don't always work seamlessly. This project runs a suite of test
つい先日、Angular v14がめでたくリリースされました! アップデートの概要は、こちらの公式ブログをご参照ください。 今回のメジャーアップデート、なんと言っても目玉はTyped Formsの導入でしょう! これまでのAngularでは、Reactive Formsから得られるvalueの型を指定することができず、その型はすべてanyとなっていました。 TypeScriptを使用しているのにanyなんて……意味ないやん……と全Angularユーザーが不満を抱えていたことでしょう。 Typed Formsの導入で、ついにこの悩みが解消されそうです。 この記事では、Angular v13で作成したデモプロジェクトに、v14を適用してTyped Formsを試してみた結果をお届けします。 Type Formsの概要はAngular公式をご覧ください。この記事で紹介する以外にも有益な情報が載っ
Photo by PixabayIn the Angular 2021 recap and 2022 preview post, we shared our plans for 2022. As we are almost midway through 2022, this is a great time to give more insights into our long-term plan and some hints of what we might work on in 2023. Improving and simplifying the developer experience is a major theme we started to work on in 2022 and will continue into 2023 and beyond. We are excite
Angularアプリケーションの状態管理の方法はさまざまな実装がありえるが、その中でも典型的ないくつかのパターンを、それがどのようなニーズがあって選ばれるのかという考察を踏まえながら列挙する。パターンとその特徴を例示するのであって、それぞれのパターンにおける最良の実装を示すものでもないし、これらのパターンに該当しない実装を否定するものでもない。 Standalone Componentsなど、Angularのメンタルモデルが変わっていく兆しを見せる今、これらをまとめておくことは諸々のAngularアプリケーションの状態管理のあり方を見直すきっかけになるのでないかと思う。特に、NgRxがデファクトスタンダードであり唯一の選択肢だと考えている人には、それが単にひとつの選択肢であることを思い出してもらえるのではないだろうか。 コンポーネントクラスによる直接の状態管理一番最初のパターンは、次の例の
Angular(typescriptで) で Google Analytics 4(以下GA) の設定する方法がまだ見つからなかったので、こちらを試しました。 今回はngx-angular-analyticsのようなラッパーではなく、シンプルにgtag.jsを使うような設定です。 試した環境 "@angular/cli": "~13.0.3" "@angular/core": "~13.0.2" "typescript": "~4.4.4" GA の 準備 測定ID (上のスクショの緑枠) index.html に貼り付けるscriptタグ (上のスクショの赤枠) 上記までの設定値の取得までは、公式のページなどで参照してください。 Angular に GA の 設定 1. index.html に GA の設定を追加 headタグの一番下に、GAの設定を追加します🐴 環境別(ステージング
ウェブページのコンテンツが増えてくると、一つのページのコンテンツの全てを載せていてはとても大きなファイルになるため、リストでコンテンツを小分けしたページ分割を検討していく必要があります。 おそらくそのような場合、/home/hoge/piyoといったようなパスパラメータか、/home?param1=hoge¶m2=piyoのようなクエリパラメータを使用したURLアドレスを設定して小分けしたページへナビゲーションすることになります。 今回はAngularでの動的・静的ウェブページのURLパラメータによるルーティングをどう実現するのか検討してみます。
本記事は Ionic Framework / Capacitor / Stencil Advent Calendar 2021 Advent Calendar 2021 の記事です。 RxJS7のリリースに伴い RxJSを覚えないAngularの書き方 は非推奨となったので、2021年/RxJS7版としてリライトして公開しています。 「RxJSを覚えないといけないからAngularは大変だ!」「RxJSはテスト難しいからつかいたくない」などと時々聞くので、RxJSを覚えないAngularの書き方を書いておきます。 AngularでRxJSを使う場所 まず、よく「AngularはRxJSを使う」とよくいいますが、具体的にどこに使われていますでしょうか。 これいうと、大体驚かれるんですが「package.jsonでインストールされているだけ」です。[1] 特にデフォルトでRxJSが書かれてて、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く