【効果的学習法レポート】Angular(JSフレームワーク)をこれから学びたい人のためのオススメ書籍＆教材特集
Angular関連記事ダイジェスト
【Angular活用講座】Rxjs:repeatオペレーターで一定時間間隔の処理を行わせてみる
【Angular活用講座】Rxjs:repeatオペレーターで一定時間間隔の処理を行わせてみる
Angularプロジェクト開発でRxjsを利用した応用を不定期で紹介するコーナーです。Rxjsで定期実行するためのrepeatオペレーターの使い方を紹介します。
クリックするとリンク先へ飛びます
【Angular活用講座】Rxjsで一定時間間隔でストリーム実行するためのサービスを作る
【Angular活用講座】Rxjsで一定時間間隔でストリーム実行するためのサービスを作る
Angularプロジェクト開発でRxjsを利用した応用を不定期で紹介するコーナーです。Rxjsで定期実行するためのtimerオペレーターの使い方を紹介します。
クリックするとリンク先へ飛びます
AngularでInput要素をcheckboxタイプにしたときのフラグ切り替え制御を行う(ngModel無し)
AngularでInput要素をcheckboxタイプにしたときのフラグ切り替え制御を行う(ngModel無し)
不定期でたまにある気付きナレッジを紹介しているAngular基礎講座のコーナーです。今回はcheckboxタイプのInput要素をAngularから上手くハンドリングする使い方を解説します。
クリックするとリンク先へ飛びます
AngularでTitleサービスを使って柔軟にページのタイトルを書き換える便利なやり方
AngularでTitleサービスを使って柔軟にページのタイトルを書き換える便利なやり方
不定期で思いついたときに紹介しているAngular基礎講座のコーナーです。今回はHTMLのページタイトルを柔軟に書き換えできる組込みのTitleサービスの使い方のポイントを解説します。
クリックするとリンク先へ飛びます
【Angular活用講座】Rxjsでwindow:resizeイベントから要素のClientWidthを上手く捌くやり方
【Angular活用講座】Rxjsでwindow:resizeイベントから要素のClientWidthを上手く捌くやり方
Angularプロジェクト開発でRxjsを利用した応用を不定期で紹介するコーナーです。今回はwindow:resizeイベントをrxjsのメンバークラス・メソッドだけで上手くハンドリングする方法を紹介します。
クリックするとリンク先へ飛びます
【サーバーサイドAngular】AngularでビルドしたWebアプリでExpress.jsからCORSプロキシを設定する
【サーバーサイドAngular】AngularでビルドしたWebアプリでExpress.jsからCORSプロキシを設定する
前の記事ではAnguarの開発段階でローカルサーバーを立ち上げる際のプロキシルートの設定方法を解説しました。今回はAngularアプリをビルド後にExpressからローカルサーバーを立てる際のプロキシ設定について解説します。
クリックするとリンク先へ飛びます
Angularアプリ開発の同一オリジンポリシーエラー対策 〜 CORS(オリジン間リソース共有)できるプロキシールートを設定する
Angularアプリ開発の同一オリジンポリシーエラー対策 〜 CORS(オリジン間リソース共有)できるプロキシールートを設定する
今回はAngularアプリのローカル環境での開発に便利なCORSを簡単に実現できる、独自のプロキシルートの設定方法を解説します。
クリックするとリンク先へ飛びます
Angular Universalアプリのサーバー側で独自フォント(TTF/WOFF/WOFF2)が読み込めなくて困ったときの対処法
Angular Universalアプリのサーバー側で独自フォント(TTF/WOFF/WOFF2)が読み込めなくて困ったときの対処法
Angular Universal/Express.jsでサーバーサイドアプリの構築する場合、assets内に置いたローカルにおいた独自のフォントを適用しようとしたときにエラーで躓いたときの対策法を紹介します。
クリックするとリンク先へ飛びます
【Angularユーザーのための認証API自作講座②】Serverless FrameworkでCognitoオーソライザー付きRestAPIを構築する
【Angularユーザーのための認証API自作講座②】Serverless FrameworkでCognitoオーソライザー付きRestAPIを構築する
前回は手動でCognito及びAPI Gatewayの設定しながら基本的な手順を説明しましたが、その内容はなかなか煩雑で毎回同じような手順を覚えていられません。今回はServerless FrameworkでCognitoオーソライザ付きのAPI関数を呼び出すまでを自動化する方法を検証します。
クリックするとリンク先へ飛びます
【Angularユーザーのための認証API自作講座①】AWS Cognitoでセキュアなユーザー認証を自力で構築する
【Angularユーザーのための認証API自作講座①】AWS Cognitoでセキュアなユーザー認証を自力で構築する
サイトの規模が大きくなってくるとAuth0のようなユーザー認証管理サービスの利用料がエンタープライズ版への移行が望ましく、それなりの維持費用が発生してくるようになります。そこで今回は有料のサードパーティ製サービスの利用を諦めて、独自のユーザー認証システムを一念発起してCognitoへマイグレーションする際に行うべき作業をまとめてみます。
クリックするとリンク先へ飛びます
【効果的学習法レポート】Angular(JSフレームワーク)をこれから学びたい人のためのオススメ書籍＆教材特集
【効果的学習法レポート】Angular(JSフレームワーク)をこれから学びたい人のためのオススメ書籍＆教材特集
今回はここ最近の動向を踏まえで、Angularを学ぶ上で有用な学習用の教材をまとめていきます。
クリックするとリンク先へ飛びます
【Angular】ngx-highlightjs v4.1.0以降へマイグレするときのメモ
【Angular】ngx-highlightjs v4.1.0以降へマイグレするときのメモ
ふと思いつきでメンテナンスし時な古いAngularプロジェクトで使っていたngx-highlightjsのバージョンを久々に引き上げると色々とエラーがライブラリ側から発生します。今回は現状におけるhighlightjs@10以降およびngx-highlightjs@4.1.0以降への引き上げ方法を考察してみます。
クリックするとリンク先へ飛びます
【Angular12対応】Angular12でWebpack5をサクッと使ってみよう
【Angular12対応】Angular12でWebpack5をサクッと使ってみよう
Webpack5がAngular12で始めてサポートされましたが、普通にAngularを使っている分にはwebpackのバージョンが４から５に変わったことが目に見えて実感できるほどのことはありません。ということでwebpack5単体で遊べるようなAngularプロジェクトの作成方法を解説してみます。
クリックするとリンク先へ飛びます
【Angular12対応】Angular UniversalでSSR入門〜Webサイト構築
【Angular12対応】Angular UniversalでSSR入門〜Webサイト構築
Angular Universalの登場から既に6年以上も立ち、Angularデベロッパーの弛まない努力の甲斐もあって、通常のAngularアプリケーション開発もシンプルかつ洗練されたものになって来ています。今回は最近のAngular12で試した際のSSRアプリケーションのもっとも簡単な開発方法について解説しました。
クリックするとリンク先へ飛びます
[angular] ローカル環境下のSPA(シングルページアプリケーション)を常時SSL(https)化に対応させる方法
[angular] ローカル環境下のSPA(シングルページアプリケーション)を常時SSL(https)化に対応させる方法
AngularでSPA(シングルページアプリケーション)のローカル開発時にmkcertを用いた常時SSL化をする方法をまとめました。
クリックするとリンク先へ飛びます
【Angular基礎講座】レンダリング後のhtmlの無駄にラップされている要素を無理やり剥がしてみる
【Angular基礎講座】レンダリング後のhtmlの無駄にラップされている要素を無理やり剥がしてみる
AngularのRenderer2 APIを使って、レンダリング後のHTMLに出力される無駄なDOM要素を操作して最適化を図ります。
クリックするとリンク先へ飛びます
Angular UniversalでSSR/Prerenderするときに躓いたら確認したい４つの方針
Angular UniversalでSSR/Prerenderするときに躓いたら確認したい４つの方針
Angular Universalを利用する際に静的ページのプリレンダリング中に起こるおおよそのエラーは、サーバー(Nodejs)側とブラウザ(クライアント)側の仕組みの違いをあまり理解しないで通常のAngularアプリケーションをビルドする感覚で起こっているといえます。逆に言うとクライアント側とサーバー側をより正しく理解することでAngular Universalをより良く活用できるはずです。今回はSSR/プリレンダリングする時に吐き出されるエラーの傾向と、解決のためのおおまかな指針に関してまとめます。
クリックするとリンク先へ飛びます
[Angular] KarmaでDirectiveのユニットテストをおこなう方法
[Angular] KarmaでDirectiveのユニットテストをおこなう方法
Angular/Karmaで単体テストを構築する際に、ComponentやServiceなどのメジャーどころはウェブ検索すると豊富に参考サイトが引っかかるのですが、Directiveは比較的少なめのようです。今回はDirectiveの単体テスト(の簡易版)を作成します。
クリックするとリンク先へ飛びますAngularを学べる書籍を探す
Angularアプリケーションプログラミング Kindle版
Angular超入門
Angularを学べる学習サービスを探す
『【2021年最新版】はじめてのAngular入門 実践シングルページアプリケーション（SPA）開発』
『【Angular13】で学ぶフルスタックフレームワーク：製造＋Unitテスト・E2Eテストを実践する入門版』
『【2時間半で学べる】はじめてのAngular超入門。実践で学ぶ本格Webアプリ開発【TypeScript】』
『【AngularとNode.jsで始める】JavaScript系 WEBアプリケーション開発コンプリートガイド①』
まとめ
ナンデモ系エンジニア
主にAngularでフロントエンド開発することが多いです。 開発環境はLinuxメインで進めているので、シェルコマンドも多用しております。 コツコツとプログラミングするのが好きな人間です。