2019年を振り返る内容です。 半年過ぎたころからAWSメインのインフラ業務が多くなってきたので、そのあたりで学ぶことが変わったりしました。 AWS 基本的な理解 Udemyのコース「手を動かしながら2週間で学ぶ AWS 基本から応用まで」 ※こちらは現在新規での受…

前提条件 Angular8 LazyLoadingとは 通常のSingle Page ApplicationだとJavaScriptファイルなどのアセットを初回ロード時に全て読み込みます。 初回ロード時の読み込み時間を軽減するために、モジュール毎に分割して必要な時に読み込むのがLazyLoadingと呼ば…

メモを共有するWebアプリを作りました。 kollecton.hi1280.com ほぼWikiみたいなものです。 ここでは、どのように作ったのかの概要、製作の感想を紹介したいと思います。 Webアプリのコンセプト決め まずはWebアプリのコンセプトを決めました。 個人的に知識…

AWS AmplifyとはAWSのリソースをクライアントアプリから直接操作することができるライブラリ群です。 これによって、サーバレスなバックエンドにすることができます。 aws-amplify.github.io 似たものではFirebaseがあります。 今回はAngular製のWebアプリで…

Storybookが気になったので、Angularを使って試しました。 以下の内容をそのまま試していきましたが、Angularの場合、うまく動作しないところがありました。 修正しながら一通り試したので、その内容を残しておきます。 ページに掲載されているコードに記載…

モチベーション Vue.jsのドキュメントにある使用例（https://jp.vuejs.org/v2/examples/）の内容が魅力的だったので、Angularにもそういうものがないかを探してみました。 実際に動くものを見ると、どんなことができるのかイメージできるので良いと思ってい…

NgRxはAngularにおける状態管理のためのライブラリです。 ng-conf 2018でも状態管理関連のセッションはNgRxを前提とした内容が多く、デファクトスタンダードなのではと思います。 今回は、Tour of Heroesに対してNgRxを適用してみました。 こちらがコードで…

Vue+Vuexを勉強したアウトプットとしてアプリを作りました。 hi1280.hatenablog.com 作ったもの Tour of HeroesはAngular公式のチュートリアルです。 複数画面があって、WebAPIを呼び出すサンプルになっています。 今回はこのTour of Heroesを題材にして、Vu…

最近React+Reduxを勉強したアウトプットとして簡単なアプリを作りました。 hi1280.hatenablog.com 作ったもの Tour of HeroesはAngular公式のチュートリアルです。 複数画面があって、WebAPIを呼び出すサンプルになっています。 今回はこのTour of Heroesを…

状態管理はフロントエンドで必要な機能としてよく取り上げられています。 ReactにおけるReduxが有名で、Reduxライクな状態管理のライブラリが各種フレームワークで用意されていて、それらを使うのが主流なようです。 AngularでもReduxライクなngrxというライ…

最近Twitter等でOGPによるシェアを前提としたWebサービスが注目されています。 ちょっと前だと、Peing(質問箱)が有名で、質問がOGPでシェアされてます。 peing.net 最近だと、ためしがき、bosyuといったサービスですね。リクエスト毎にOGPでコンテンツをシェ…

前回はHTTPでアクセスするところまでを行いました。 hi1280.hatenablog.com 今回はHTTPS対応を行います。 MEAN Stackのプログラム一式はこちら github.com 実運用に耐えうることを想定して、以下の内容を含めています。 MongoDBの内容が前回までで、今回はHT…

前回はMEAN StackをDocker Composeで動かしてみました。 hi1280.hatenablog.com 今回はMEAN StackをKubernetesで動かします。 Dockerに対応したので、Kubernetesでも動くようになっているはずです。試してみます。 なお、今回のKubernetesの環境はGKE(Google…

前回はMEAN StackをHeroku上で動かしてみました。 hi1280.hatenablog.com 今回はMEAN Stackアプリに手を加えて、Dockerに対応させます。 Dockerにすれば、他の環境への移行も楽になるのではと思います。 Docker Composeを使って、nginx+Node.js+MongoDBの環…

MEAN Stackを運用するサービスを検討していましたが、Herokuが良いだろうという結論になり、実際に使ってみました。 Herokuを選んだ決め手は以下のとおりです。 Node.jsに対応している MongoDBがアドオンで簡単に使える Herokuのドキュメントを参考にして、…

過去に記事にしたWebアプリを公開しました。 bookshelf-share.hi1280.com 技術的なことは下記記事を見てください。 hi1280.hatenablog.com この記事では、アプリの開発以外で実際に公開するために実施したことを紹介します。 目次 テスト環境の作成 独自ドメ…

Angularを使うと漏れなくRxJSを使うことになります。 非同期処理を命令的に書くことがなくなるメリットがある反面、 宣言的プログラミングに慣れていない人にとってはRxJSを理解することが難しいです。 AngularFireを使ってWebアプリを作成する中で、遭遇し…

AngularとFirebaseでWebアプリを作ったので、その記録です。 作ったものがこちらです。 友達同士で本を共有できるみんなの本棚というコンセプトで、本を登録し、持っている本を友達同士で共有できるサービスです。 bookshelf-share.hi1280.com この記事では…

AzureのApp ServiceにはWindows版とLinux版があります。 OSSを使用するアプリケーションではLinux上で動作させる方がシンプルな形になりそうです。 Linux版のApp ServiceであるApp Service on Linuxを試してみます。 サンプルアプリの準備 MEAN構成のサンプ…

AngularFIreを使用してアプリを作っていたのですが、最近のAngularFireのアップデートでRealtime DatabaseからCloud Firestore推しな雰囲気を感じたので、Cloud Firestoreに変更してみました。 AngularFireを使用する上でのRealtime DatabaseとFirestoreとの…

Auth0を利用して、Angularで作成したアプリに認証機能を実装してみました。 auth0.com Auth0のドキュメントにAngular向けのQuickStartがあるので、そのまま実装すればAuth0を利用できます。 Auth0 Angular 2+ SDK Quickstarts: Login 今回はAuth0で用意され…

サンプルアプリの準備 MEAN構成のサンプルアプリとして以下を使用する https://github.com/hi1280/angular-cosmosdb 前提条件 Azure CLI 2.0をインストールしている https://docs.microsoft.com/ja-jp/cli/azure/install-azure-cli Angular CLIをインストー…

hi1280.hatenablog.com の続き Reactive Formsで同様の対応をしてみた。 ほぼ流用できた。 メッセージに渡すパラメータの定義形式をわかりやすさ重視に変えた。バリデータ毎にパラメータを定義するようにした。

自分のメモ用にng-japan 2017のコンテンツへのリンクをまとめます。 ngjapan.org 動画 Track A www.youtube.com Track B www.youtube.com 資料 Track A Keynote docs.google.com RxJS Real World speakerdeck.com 紹介されたCQRS実践のための参考書籍 Web Co…

Angular公式のForm Validationのコードサンプルがよろしくないと思ったので、 エラーメッセージの冗長部分の排除とバリデーションの汎用化を意識して書き直してみた。 なお、template-driven formsの例を対象としている。 エラーメッセージはバリデーション…

GWでいそいそAngularのUpdate作業をした。 Angularの環境構築で苦労した Angular2が正式リリースされてから、ちょこちょこ触っている。 その時に作ったAngular環境は、Angular2+webpackで構成してた。 ちなみにwebpackでの構成は、Angularの公式ドキュメント…