【効果的学習法レポート】Angular(JSフレームワーク)をこれから学びたい人のためのオススメ書籍＆教材特集
Angularを学べる書籍を探す
Angularの基礎を全体的に学ぶ
リアクティブプログラミングを学ぶ
Typescriptが学べる書籍・学習サービス
Angularを学べる学習サービスを探す
Angular関連記事ダイジェスト
CodeGenieApp/serverless-express(Express Adapter for AWS)のv4への更新方法
CodeGenieApp/serverless-express(Express Adapter for AWS)のv4への更新方法
Angular/SSRをサッとサーバレスアプリとしてデプロイできるAWSアダプター・「CodeGenieApp/serverless-express」を使えるようにするためのコード修正について考えます。
クリックするとリンク先へ飛びます
【Angularの新しいSSR環境】「Angular Universal」から「@angular/ssr」へのマイグレーションガイド
【Angularの新しいSSR環境】「Angular Universal」から「@angular/ssr」へのマイグレーションガイド
Angular v17よりAngular Universalが標準ライブラリへ昇華し、新しく「Angular/SSR」へとなりました。今回は過去のUniversalプロジェクトを手動でAngular/SSRに対応させるポイントを紹介していきます。
クリックするとリンク先へ飛びます
【Angular応用講座】Angularプロジェクトからenvironment.tsを捨ててうっかりCreadentials(個人情報)の漏洩を防ぐ
【Angular応用講座】Angularプロジェクトからenvironment.tsを捨ててうっかりCreadentials(個人情報)の漏洩を防ぐ
Angularのデフォルト仕様ではプロジェクト内に含まれるenvirnonment.tsを除外し、開発時のプライベートな秘密情報の漏洩防止する方法を検討します。
クリックするとリンク先へ飛びます
【Angular活用講座】Rxjs:repeatオペレーターで一定時間間隔の処理(再帰的ループ)を行わせてみる
【Angular活用講座】Rxjs:repeatオペレーターで一定時間間隔の処理(再帰的ループ)を行わせてみる
Angularアプリ開発で知っていると使えるかもしれないRxjsで再帰的なループ処理を実行するためのrepeatオペレーターのデザインパターンを紹介します。
クリックするとリンク先へ飛びます
【Angular活用講座】Rxjsでエラーレスポンスを上手にリトライするためのサービスを作る
【Angular活用講座】Rxjsでエラーレスポンスを上手にリトライするためのサービスを作る
Angularプロジェクト開発で、通信エラー発生時のリトライを実装するための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イベントの上手なハンドリング方法を紹介します。
クリックするとリンク先へ飛びます
【サーバーサイドAngular】AngularでビルドしたWebアプリでExpress.jsからCORSプロキシを設定する
【サーバーサイドAngular】AngularでビルドしたWebアプリでExpress.jsからCORSプロキシを設定する
前の記事ではAnguarの開発段階でローカルサーバーを立ち上げる際のプロキシルートの設定方法を解説しました。今回はAngularアプリをビルド後にExpressからローカルサーバーを立てる際のプロキシ設定について解説します。
クリックするとリンク先へ飛びます
Angularアプリ開発の同一オリジンポリシーエラー対策 〜 CORS(オリジン間リソース共有)できるプロキシールートを設定する
Angularアプリ開発の同一オリジンポリシーエラー対策 〜 CORS(オリジン間リソース共有)できるプロキシールートを設定する
今回はAngularアプリのローカル環境での開発に便利なCORSを簡単に実現できる、独自のプロキシルートの設定方法を解説します。
クリックするとリンク先へ飛びます
Angular Universalのサーバー(AWS Lambda)側で独自フォント(TTF/WOFF/WOFF2)がデコードできないときの対処法
Angular Universalのサーバー(AWS Lambda)側で独自フォント(TTF/WOFF/WOFF2)がデコードできないときの対処法
Angular Universal/Express.jsでAWS Lambdaを使ったサーバレスアプリを構築する場合、ローカルにおいた独自フォントを適用しようとしたときのエラーで躓いたときの対策法を紹介します。
クリックするとリンク先へ飛びます
【Angularユーザーのための認証API自作講座②】Serverless FrameworkでCognitoオーソライザー付きRestAPIを構築する
【Angularユーザーのための認証API自作講座②】Serverless FrameworkでCognitoオーソライザー付きRestAPIを構築する
Serverless FrameworkでAWS Cognitoオーソライザ付きのAPIGatewayのスタックを呼び出す作業を自動化する方法を検証します。
クリックするとリンク先へ飛びます
【Angularユーザーのための認証API自作講座①】AWS Cognitoでセキュアなユーザー認証を自力で構築する
【Angularユーザーのための認証API自作講座①】AWS Cognitoでセキュアなユーザー認証を自力で構築する
Auth0などの有料のユーザー認証管理サービスから、Cognitoを使った独自のユーザー認証システムへマイグレーションする際に行うべきポイントをまとめます。
クリックするとリンク先へ飛びます
【効果的学習法レポート・2022年版】Angular(JSフレームワーク)をこれから学びたい人のためのオススメ書籍＆教材特集
【効果的学習法レポート・2022年版】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】rxjs#fromEventとViewChildでコンポーネント間のデータ受け渡しを考えてみる
【Angular】rxjs#fromEventとViewChildでコンポーネント間のデータ受け渡しを考えてみる
Angularの静的コンポーネントと動的コンポーネント間のデータ受け渡しをする際に考慮すべきポイントを実際のコーディングを例に解説していきます。
クリックするとリンク先へ飛びます
【Angular】ローカル環境下のSPA(シングルページアプリケーション)を常時SSL(https)化に対応させる方法
【Angular】ローカル環境下のSPA(シングルページアプリケーション)を常時SSL(https)化に対応させる方法
AngularでSPA(シングルページアプリケーション)のローカル開発時にmkcertを用いた常時SSL化をする方法をまとめました。
クリックするとリンク先へ飛びます
【Angular基礎講座】レンダリング後のhtmlの無駄にラップされている要素を無理やり剥がしてみる
【Angular基礎講座】レンダリング後のhtmlの無駄にラップされている要素を無理やり剥がしてみる
AngularのRenderer2 APIを使って、レンダリング後のHTMLに出力される無駄なDOM要素を操作して最適化を図ります。
クリックするとリンク先へ飛びます
【Angular基礎講座】動的/静的ウェブサイト内のページネイション作成 〜 パスパラメータ/クエリパラメータ付きのURLアドレスからルーティングする
【Angular基礎講座】動的/静的ウェブサイト内のページネイション作成 〜 パスパラメータ/クエリパラメータ付きのURLアドレスからルーティングする
今回はAngularで、クエリパラメータかパスパラメータかのどちらかを使って、ウェブページのコンテンツを小分けしてページ分割するテクニックを検討してみます。
クリックするとリンク先へ飛びます
Angular UniversalでSSR/Prerenderするときに躓いたら確認したい４つの方針
Angular UniversalでSSR/Prerenderするときに躓いたら確認したい４つの方針
Angular UniversalでSSR/プリレンダリングする時に起こるサーバーサイド・プログラミング特有のエラーと、その解決のためのおおまかな指針をまとめます。
クリックするとリンク先へ飛びます
【Angular】KarmaでDirectiveのユニットテストをおこなう
【Angular】KarmaでDirectiveのユニットテストをおこなう
Angular/Karmaで単体テストを構築する際に、ComponentやServiceなどのメジャーどころはウェブ検索すると豊富に参考サイトが引っかかるのですが、Directiveは比較的少なめのようです。今回はDirectiveの単体テスト(の簡易版)を作成します。
クリックするとリンク先へ飛びます
【Angular】head要素内に配置したlink要素でCanonical Urlを書き換えるサービスクラスの実装方法
【Angular】head要素内に配置したlink要素でCanonical Urlを書き換えるサービスクラスの実装方法
Angularでルータによるページ遷移する時に、SEO対策のためにheadのrel='canonical'のlink要素を動的に書き換えるサービスクラスの作成方法を検討します。
クリックするとリンク先へ飛びます[Angular] ビルド後のファイルの出力サイズが出来るだけコンパクトにまとまるようなng buildのコマンドオプションを最適化する方法を考える
[Angular] ビルド後のファイルの出力サイズが出来るだけコンパクトにまとまるようなng buildのコマンドオプションを最適化する方法を考える
Angularアプリケーションのビルドサイズを少しでも削減するために、ビルドオプションを引っ換えとっかえして実験してみた結果をまとめています。
クリックするとリンク先へ飛びますまとめ
ナンデモ系エンジニア
主にAngularでフロントエンド開発することが多いです。 開発環境はLinuxメインで進めているので、シェルコマンドも多用しております。 コツコツとプログラミングするのが好きな人間です。