Angularのngrxを使って状態管理を行う（実装編：初期設定～エフェクト設定） - Qiita
この記事はAngular+Firebaseでチャットアプリを作るのエントリーです。 前記事：Angularのngrxを使って状態管理を行う（理論編） 次記事：Angularのngrxを使って状態管理を行う（実装編：エンティティ設定） この記事で行うこと 前回の記事ではngrxの概念と基本的な構成を扱いました。 本記事ではngrxの初期設定から、エフェクト設定などの具体的な実装方法について学習します。 ngrxの初期設定 Action、Reducerの実装 EffectでFirebaseのデータをストアに反映 View（コンポーネント）にStateを反映 （追記：2020/6）現時点（2020年6月）での最新の内容に書き換えています。 実装内容 ngrxの初期設定 ライブラリインストール まず、コードジェネレーターである@ngrx/schematicsを開発環境に、それ以外のライブラリをプロ
Angularのngrxを使って状態管理を行う（実装編：エンティティ設定） - Qiita
この記事はAngular+Firebaseでチャットアプリを作るのエントリーです。 前記事：Angularのngrxを使って状態管理を行う（実装編：初期設定～エフェクト設定） 次記事：WEBアプリでFirebaseのデプロイ環境を構築する この記事で行うこと 前回の記事ではngrxの状態管理の実装（初期設定～エフェクト設定）を扱いました。 本記事ではngrxの実装方法（機能ストア～エンティティ設定）について学習します。 機能ストアの設置 Entityを用いたストア設計 View（コンポーネント）にStateを反映 機能ストアとは 公式ドキュメント内で機能ストアはStoreModule.forFeatureとして記載されています。 ルートストア（StoreModule.forRoot）がアプリケーション全体で使用できる一方、機能ストアは機能モジュール単位で利用できるストアになります。 Ang
Angularのngrxを使って状態管理を行う（理論編） - Qiita
この記事はAngular+Firebaseでチャットアプリを作るのエントリーです。 前記事：Angular+Firebase ユーザー設計とデータの保護 次記事：Angularのngrxを使って状態管理を行う（実装編：初期設定～エフェクト設定） この記事で行うこと 前回の記事ではユーザー設計とデータの保護を扱いました。 ここからAngularの@ngrxというライブラリを使って、状態管理の理論、実装を３回にわけて行っていきます。 本記事ではまず、状態管理の理論について学習します。 なぜngrxを使う必要があるのか ngrxの流れを見る Effectで非同期のデータを扱う @ngrxとは @ngrxはReduxというライブラリに影響を受けて作成されたAngularの公式ライブラリです。Actions、Dispatcher、Reducer、State、ViewというReduxのデータフロー構成
Angular+Firebase ユーザー設計とデータの保護 - Qiita
この記事はAngular+Firebaseでチャットアプリを作るのエントリーです。 前記事：Angularのルーティング設定（応用編） 次記事：Angularのngrxを使って状態管理を行う（理論編） この記事で行うこと 前回の記事ではAngularのガードを導入しました。 本稿ではAngular+Firebaseを使った場合のユーザー設計、およびデータの保護について扱っていきます。 ユーザーのデータ設計 認証時のロジックをangularで実装 Firestoreのルールを設定する Firestoreのデータ保護ルール アプリケーションの設計をする際、DBにアクセスを行う入力値のバリデーション設計は、一定のセキュリティを担保する上で必須の工程です。ソースをすべて読むことができるクライアントサイドではこの処理を行うことができないため、サーバーサイドでどのように設計するかが肝になります。 Fi
Angularのルーティング設定（応用編） - Qiita
この記事はAngular+Firebaseでチャットアプリを作るのエントリーです。 前記事：Angular+Firebase Authenticationで認証機能を導入する 次記事：Angular+Firebase ユーザー設計とデータの保護 この記事で行うこと 前回の記事ではFirebaseの認証機能導入しました。 本稿ではサイトランディング時の認証照会とガード（Guard）を使ったページの保護を扱っていきます。 サイトランディング時に認証の確認をする チャット画面を保護する アカウント画面をスキップする ガード（Guard）とは 近年のWEBアプリケーションは、ほとんどと言っていいほど認証機能を保有しています。 認証を通過していないユーザーに見せたくないページがある場合は、そのページを読み込む前に認証についてのチェックを行い、そのページの読み込みを中止するか、他のページへ誘導する必要
Angularの環境構築（Yeomanで構築） - Qiita
この記事はAngular+Firebaseでチャットアプリを作るのエントリーです。 関連：Angularの環境構築（Angular CLIで構築） Yeomanでの環境構築も試してみました。 手間はAngular CLIよりもかからないかもしれないけれど、将来性とカスタマイズ性を考えたらAngular CLIの方がいいかな…… yeoman&angular2&typescriptインストール→実行 npm install yo generator-angular2-typescript typescript -g mkdir my-new-project && cd $_ yo angular2-typescript [app-name] ? Which CSS framework would you like to use? Bootstrap ? Which module loader
Angular + Firebaseで作ったWEBサービスをリリースしたので、たまった知見を書き出してみる - Qiita
Angular + Firebaseで作ったWEBサービスをリリースしたので、たまった知見を書き出してみるJavaScriptAngularSEOSPAFirebase はじめに 以前からちょこちょこ新しいWEBサービスを作っているということをQiitaの記事に掲載していましたが、このたび[SCORERA（verβ）」を正式にリリースしました。（2019年3月にサービス終了） サービス構築、リリースにあたって色々と知見がたまったので、作成過程で詰まったことや、リリースにかかる作業のうち技術的な側面のものを中心に公開しておこうと思います。 目次 前提 どんなサービス？ 使用している技術 トピック SCORERAのディレクトリとモジュール構成 RxJSの状態管理 外部ライブラリの選定 FirebaseのRealtime DatabaseとFirestore クライアントサイドのエラー取得 An
Angular+Firebaseでチャットアプリを作る - Qiita
はじめに 今、最も注目されているJavaScriptフレームワークの１つであるAngular(9.xx)と、同様に注目度の高いBaaS（Backend as a service）であるFirebaseを使って、チャット用WEBアプリをハンズオン形式で書いていきます。 「Angular+Firebase」のリアルタイム更新に興味がある方はご一読ください。 （追記：2017/6）本記事は元々「Angular2+Rails5でチャットアプリを作る」と題していましたが、ここ半年ほどひたすら「Angular+Firebase」を触ってきたので、「Angular+Firebaseでチャットアプリを作る」として、現時点（2017年6月）での最新の内容に書き換えています。 （追記：2018/1）現時点（2018年1月）での最新の内容に書き換えています。 （追記：2018/9）現時点（2018年9月）での最
Angular2 DOC GUIDEを翻訳する[STYLE GUIDE] - Qiita
トピック Angular2 CORE DOCUMENTATIONのGUIDEの翻訳です。 DOCUMENTATION OVERVIEW - ドキュメント概要 - ARCHITECTURE OVERVIEW - 構文概要 - DISPLAYING DATA - データ表示 - USER INPUT - ユーザー入力 - FORMS - フォーム - DEPENDENCY INJECTION - 依存性注入 - STYLE GUIDE - スタイルガイド - 注意1）ここに掲載されていない項目は、Angular2 CORE DOCUMENTATIONのGUIDEを直接参照してください。 注意2）2016年12月12日時点の翻訳です。翻訳者はTOEICで700点くらいの英語力なので、英訳が間違っている可能性があります。しかもかなり意訳している箇所もあります。もし意訳を通り越して、誤訳になっている
![Angular2 DOC GUIDEを翻訳する[STYLE GUIDE] - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/cb802bbbe18d574cafc3b72e550fbb630a22590b/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9QW5ndWxhcjIlMjBET0MlMjBHVUlERSVFMyU4MiU5MiVFNyVCRiVCQiVFOCVBOCVCMyVFMyU4MSU5OSVFMyU4MiU4QiU1QlNUWUxFJTIwR1VJREUlNUQmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPTA0ZmE5YjI4NjE4NGJhZDFhYjAxYjMxNzM2NWU5NzFh%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBZYW1hbW90bzA1MjUmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWVhYTEwZjNlZGRjYzM5MmE3OGJkMjcxYmJkMmNiZmI3%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Db9b8eb1dbd352b8ecf13fa93794530ea)
Angular+Firebaseでcanvasを描くWEBアプリを作る - Qiita
はじめに 今、Angular+Firebaseでプロダクト開発をしていますが、何分初めてのことばかりで何度もつまづきながら進んでいます。 最近ようやく、canvasとFirebase RealtimeDBとの連携ができるようになったので、そこに至るまでの制作過程を簡単なWEBアプリで紹介します。 angular-cliでプロジェクトを作る angularfire2をインストールする firebaseのアカウントを作成する coreモジュールを作成する canvasコンポーネントを作成する canvasテンプレートを更新する canvasに描きこむロジックを作る ロジックをサービスに分離する RealtimeDBを設定する canvasのデータをRealtimeDBと連携させる 開発環境 Mac: OSX angular-cli: v1.0.0-beta.19-3 node: v6.6.0
Angular2 DOC GUIDEを翻訳する[DEPENDENCY INJECTION] - Qiita
トピック Angular2 CORE DOCUMENTATIONのGUIDEの翻訳です。 DOCUMENTATION OVERVIEW - ドキュメント概要 - ARCHITECTURE OVERVIEW - 構文概要 - DISPLAYING DATA - データ表示 - USER INPUT - ユーザー入力 - FORMS - フォーム - DEPENDENCY INJECTION - 依存性注入 - STYLE GUIDE - スタイルガイド - 注意1）ここに掲載されていない項目は、Angular2 CORE DOCUMENTATIONのGUIDEを直接参照してください。 注意2）2016年11月22日時点の翻訳です。翻訳者はTOEICで700点くらいの英語力なので、英訳が間違っている可能性があります。しかもかなり意訳している箇所もあります。もし意訳を通り越して、誤訳になっている
![Angular2 DOC GUIDEを翻訳する[DEPENDENCY INJECTION] - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/2c9c24d9fb828d141a19731b2dc0bb48cb7388f5/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9QW5ndWxhcjIlMjBET0MlMjBHVUlERSVFMyU4MiU5MiVFNyVCRiVCQiVFOCVBOCVCMyVFMyU4MSU5OSVFMyU4MiU4QiU1QkRFUEVOREVOQ1klMjBJTkpFQ1RJT04lNUQmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPTc3NmNmMjExZjU3NDIyOWY2OGQxZjQ4MWQyYTI5YjI5%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBZYW1hbW90bzA1MjUmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWVhYTEwZjNlZGRjYzM5MmE3OGJkMjcxYmJkMmNiZmI3%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Df86ae72d8481ce38dbebb34ed809acac)
Angular2 DOC GUIDEを翻訳する[DOCUMENTATION OVERVIEW] - Qiita
Learning path - 学習方法 - ほとんどのページは独立しているので、ガイドをそのまま読み進める必要はありません。 新しくAngularを始める方には、次のようにガイドセクションを進めていく学習方法をお勧めします。 全体像を知るために、Architecture overview(英文)を読みます。 QuickStart(英文)を試してみてください。QuickStartはAngularの"Hello, World"です。その過程を通して、Angularアプリを書くために必要なライブラリやツールのセットアップ方法がわかります。 QuickStartではカバーしきれなかった点をフォローしてくれるTour of Heroes tutorial(英文)に従い、簡易的なテータ駆動型アプリを作成してください。そのアプリでは、本格的なアプリケーションとして重要となる次の特徴を試すことができます
![Angular2 DOC GUIDEを翻訳する[DOCUMENTATION OVERVIEW] - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/831085e0e90dcdb999c012714bb89cfaabc42cd3/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9QW5ndWxhcjIlMjBET0MlMjBHVUlERSVFMyU4MiU5MiVFNyVCRiVCQiVFOCVBOCVCMyVFMyU4MSU5OSVFMyU4MiU4QiU1QkRPQ1VNRU5UQVRJT04lMjBPVkVSVklFVyU1RCZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9ZGE5YzZlNzNkM2Y5N2MyNTgyMWNhZDUyMDE2MzY2MDk%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBZYW1hbW90bzA1MjUmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWVhYTEwZjNlZGRjYzM5MmE3OGJkMjcxYmJkMmNiZmI3%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D6847eb7a5540300eec3162634dea1964)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
