なになれ

IT系のことを記録していきます。

Angular

AngularにおけるLazyLoadingの実現方法

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

メモを共有するWebアプリを作った

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

Angular+AWS Amplifyを試した

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

StorybookをAngularで試した

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

コードが公開されているAngularの使用例をまとめてみた

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

NgRxを試した所感

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

Tour of HeroesをVue+Vuexで再実装した

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

Tour of HeroesをReact+Reduxで再実装した

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

Angularにおける状態管理をRxJSで試した

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

OGPページ生成ツールというWebアプリをつくった

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

MEAN StackをKubernetesで動かす(その2)

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

MEAN StackをKubernetesで動かす(その1)

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

MEAN StackをDocker Composeで動かす

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

MEAN StackをHeroku上で動かす

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

Angular+FirebaseのWebアプリを公開するために実施したこと

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

AngularFireを使うと遭遇するRxJSでのハマりどころ

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

AngularとFirebaseでWebアプリを作った

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

MEAN and Cosmos DBをVisual Studio Team ServicesでApp Service on Linuxにデプロイする

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

AngularFireでRealtime DatabaseからCloud Firestoreに変更した

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

Auth0 + Angularでの認証機能実装

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

MEAN and Cosmos DBをVisual Studio Team ServicesでAzure App Serviceにデプロイする

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

Angular Form Validation @reactive forms

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

ng-japan 2017のコンテンツまとめ

自分のメモ用に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

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

Angular Update作業 ~Angular4 and Angular CLI~

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