はてなブックマーク

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

はじめに 以前からちょこちょこ新しい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ベースの静

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 先週フロントエンドエンジニア向けの勉強会に行った際、最近フロントエンドエンジニア（コーダー寄り）になったという方に、 「なんでjQuery以外のライブラリやら、フレームワークやらを覚えないといけないんですかね。業務ならjQueryだけで十分なのに」 と訊かれ、その場の思い付きでつらつらと説明しましたが、改めてその理由を考えてみました。 状況整理 確かに、今からフロントエンドの仕事をしようとしている人や、新しい情報をキャッチアップしていなかった人にとって、今のフロントエンド界隈の新旧入り混じった状況はカオスに映るはずです。 現場

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

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クラスが脆弱で柔軟性がなく、テストが難しくなって

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

トピック 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月）での最