はてなブックマーク

この記事はAngular+Firebaseでチャットアプリを作るのエントリーです。 次記事：Angularでビュー（チャット画面）を作る 関連：Angular2の環境構築（yoemanで構築） この記事で行うこと Angular CLIをインストール プロジェクトを作成 「Angular Cli」とは Angularの環境構築に「Angular CLI」は欠かせません。 他のJavaScriptフレームワークと比較して、あえてAngularを選択するという場合、次のような理由が考えられます。 デザイナーとの協業がしやすい。 公式ドキュメントが豊富なため、困ったら公式を頼ることができる。 コンポーネント、サービス、ルーティング、モジュール、パイプ、http通信など、アプリ構築に必要な機能が揃っており、第三者が作ったライブラリを使わなくともよい。 命名規則やディレクトリ構成などがあらかじめ定め

この記事はAngular+Firebaseでチャットアプリを作るのエントリーです。 前記事：Angular+Firebase ユーザー設計とデータの保護 次記事：Angularのngrxを使って状態管理を行う（実装編：初期設定～エフェクト設定） この記事で行うこと 前回の記事ではユーザー設計とデータの保護を扱いました。 ここからAngularの@ngrxというライブラリを使って、状態管理の理論、実装を３回にわけて行っていきます。 本記事ではまず、状態管理の理論について学習します。 なぜngrxを使う必要があるのか ngrxの流れを見る Effectで非同期のデータを扱う @ngrxとは @ngrxはReduxというライブラリに影響を受けて作成されたAngularの公式ライブラリです。Actions、Dispatcher、Reducer、State、ViewというReduxのデータフロー構成

はじめに 以前からちょこちょこ新しいWEBサービスを作っているということをQiitaの記事に掲載していましたが、このたび[SCORERA（verβ）」を正式にリリースしました。（2019年3月にサービス終了） サービス構築、リリースにあたって色々と知見がたまったので、作成過程で詰まったことや、リリースにかかる作業のうち技術的な側面のものを中心に公開しておこうと思います。 目次 前提 どんなサービス？ 使用している技術 トピック SCORERAのディレクトリとモジュール構成 RxJSの状態管理 外部ライブラリの選定 FirebaseのRealtime DatabaseとFirestore クライアントサイドのエラー取得 AngularプロジェクトのSEO 技術面以外でやったこと、やること 前提 どんなサービス？ 「SCORERA（verβ）」はスポーツ競技や文化系競技（将棋、ゲームなど）とい

この記事はAngular+Firebaseでチャットアプリを作るのエントリーです。 前記事：Firebaseの環境構築 次記事：Angular+Cloud Firestore(CREATE, READ, UPDATE, DELETE)を実装する この記事で行うこと 本稿では、Angularのプロジェクトに「angularfire」というライブラリを使ってFirebaseの導入を行います。 angularfireとfirebaseをインストール Cloud Firestoreを導入する angularfireとは Angularで使い勝手がよくなるようラッピングされた、Firebaseクライアントです。 RxJSを使ってクライアントとFirebase間の同期を行うのが特徴で、現在（2018年9月）のところCloud Firestore、Realtime Database、Authentica

この記事はAngular+Firebaseでチャットアプリを作るのエントリーです。 前記事：Angularのルーティング設定（基礎編） 次記事：Angular+Firebase Authenticationで認証機能を導入する この記事で行うこと 前回の記事ではルーティングの基本的な設定を行いました。 本稿ではAngularに標準採用されているRxJSを使って、アプリ内のセッション管理をする基礎を作っていきます。 AngularのRxJS sessionサービスを作る RxJSとは 『正式名称「Reactive Extensions for JavaScript」。リアクティブプログラミングを行う「Reactive extensions」のJavaScript版です。』 『リアクティブプログラミングとは、データストリームと変更の伝播に関係する非同期プログラミングの仕組みです。』 最初に私が

この記事はAngular+Firebaseでチャットアプリを作るのエントリーです。 前記事：AngularのNgModuleを使って、アプリの構成を管理する 次記事：AngularのRxJSを使ってデータの受け渡しをする この記事で行うこと 前回の記事で中規模アプリのモジュール構成を扱いました。 本稿ではモジュールをベースにしたAngularのルーティングを扱っていきます。 ルーティングの基本設定 機能モジュールへのルーティング SPA（シングルページアプリケーション）のルーティング IT関係者が「ルーティング」と聞くとネットワークのルーティングを思い浮かべてしまうかもしれませんが、ここでいうルーティングとは全くの別物です。SPAの文脈で使われる「ルーティング」とは、表示されているDOMをJavaScriptで書き換え、ページ遷移を擬似的に再現することを指します。 従来のHTMLベースの静

はじめに 先週フロントエンドエンジニア向けの勉強会に行った際、最近フロントエンドエンジニア（コーダー寄り）になったという方に、 「なんでjQuery以外のライブラリやら、フレームワークやらを覚えないといけないんですかね。業務ならjQueryだけで十分なのに」 と訊かれ、その場の思い付きでつらつらと説明しましたが、改めてその理由を考えてみました。 状況整理 確かに、今からフロントエンドの仕事をしようとしている人や、新しい情報をキャッチアップしていなかった人にとって、今のフロントエンド界隈の新旧入り混じった状況はカオスに映るはずです。 現場ではjQueryが重宝され、それで十分業務は回っているのに、ネットを覗いてみると、やれSPAだ、リアクティブプログラミングだと騒いでおり、Angular、React、Vue.js、PostCSS、Sass、Babel、webpackなどの横文字が乱立していて

Learning path - 学習方法 - ほとんどのページは独立しているので、ガイドをそのまま読み進める必要はありません。 新しくAngularを始める方には、次のようにガイドセクションを進めていく学習方法をお勧めします。 全体像を知るために、Architecture overview(英文)を読みます。 QuickStart(英文)を試してみてください。QuickStartはAngularの"Hello, World"です。その過程を通して、Angularアプリを書くために必要なライブラリやツールのセットアップ方法がわかります。 QuickStartではカバーしきれなかった点をフォローしてくれるTour of Heroes tutorial(英文)に従い、簡易的なテータ駆動型アプリを作成してください。そのアプリでは、本格的なアプリケーションとして重要となる次の特徴を試すことができます

export class Car { public engine: Engine; public tires: Tires; public description = 'No DI'; constructor() { this.engine = new Engine(); this.tires = new Tires(); } // Method using the engine and tires drive() { return `${this.description} car with ` + `${this.engine.cylinders} cylinders and ${this.tires.make} tires.`; } } Carはコンストラクタの中で必要なものをすべて作り出しています。何が問題なのでしょうか。問題は、Carクラスが脆弱で柔軟性がなく、テストが難しくなって

はじめに 今、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 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点くらいの英語力なので、英訳が間違っている可能性があります。しかもかなり意訳している箇所もあります。もし意訳を通り越して、誤訳になっている

はじめに 今、最も注目されている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月）での最