前回記事はこちら angular-redux/storeの@selectデコレーターの使い方について解説していきます。 バージョン情報 サンプルアプリケーションについて Stateの構造 Stateのソースコード １層目 ２層目 ネストされたStateの参照方法 動作確認 参考サイト バー…

金額を桁区切りしたい（けど、小数点以下はいらない）ときに迷ったので書きました。2パターン提示します。 バージョン情報 結論: number pipeでいい サンプルコードA 動作確認: サンプルコードA 通貨記号も表示したい - currency pipe を使う サンプルコード…

今回は、仮想通貨取引所であるbitFlyerのAPIを呼び出して、結果を画面に表示するところまでやります。 bitFlyerのAPIについて バージョン情報 実装 前準備: AppModuleにHttpClientModuleを設定 ComponentにAPIを呼び出すServiceをDI APIを呼び出すServiceを…

package.jsonに定義しているライブラリのバージョンを最新にするnpm-check-updatesの使い方について。 バージョン情報 npm-check-updates: 2.14.1 Node: 8.1.4 npm-check-updatesの使い方 npm install -g npm-check-updates # このコマンドを実行すると、更…

Angular CLIで作成したプロジェクト限定です。 バージョン情報 Angular: 5.2.3 angular-cli-ghpages: 0.5.2 angular/cli: 1.6.5 Node: 8.1.4 デプロイ方法 angular-cli-ghpagesというライブラリを使う # インストールしていなければ $ npm i -g angular-cli-…

はじめに AngularでFlappy Birdを作りました デモ https://l08084.github.io/angular-redux-flappy-bird/ ソースコード github.com デモの遊び方 PC専用（IE以外なら動くはず） クリックするとバードが上に移動します 壁にぶつかるか、地面に落ちるとゲーム…

という問題が起きました。 バージョン情報 Angular: 5.2.3 angular-cli-ghpages: 0.5.2 angular/cli: 1.6.5 Node: 8.1.4 発生した問題について angular-cli-ghpagesを使ってGitHub Pagesにデプロイした際に、CSSからの画像ファイル参照はうまくいくが、HTML…

クリックしたときに画像やテキストを選択状態にしたくない時がある。 この記事でいう選択状態とは、☝️のようにクリックしたときに半透明な膜がかかることをいいます。 バージョン情報 Angular: 5.2.3 TypeScript: 2.5.3 angular/cli: 1.6.5 Node: 8.1.4 選択…

遭遇したエラー "@angular/compiler-cli" package was not properly installed. Error: Error: Cannot find module '@angular/compiler-cli' npm installをした後に、ng serveコマンドでアプリを起動しようとした時に発生しました。 バージョン情報 angular/…

引き続きangular-redux/storeの使い方について、前回記事はこちら Redux DevTools chrome extensionを導入してブラウザデバックの効率を上げましょう。 バージョン情報 Angular: 5.2.3 angular-redux/store: 7.1.0 TypeScript: 2.5.3 angular/cli: 1.6.5 OS:…

Angularアプリによる画像フォルダの作成方法 ＆ アクセスの仕方 バージョン情報 angular/cli: 1.6.5 Angular: 5.2.3 Typescript: 2.4.2 OS: darwin x64 Node: 8.1.4 画像フォルダを作ってファイルを置く src/app/assetsにimagesディレクトリを作成する アク…

遭遇したエラーと対処法について エラー内容 Type 'HTMLCollectionOf<Element>' is not an array type or a string type. (プロパティ 'style' は型 'Element' に存在しません。) エラーの出たコード 複数のDOM要素を取得した後に、ループを回してスタイルプロパティ</element>…

AngularでDOMを操作したい時にRenderer2クラスを利用することができる。 バージョン情報 Renderer2クラスの使い方 サンプルコードで実現すること サンプルコード 実行結果 参考サイト バージョン情報 Angular: 5.0.3 node: 8.1.4 macOS High Sierra(10.13.3)…

HTML要素の幅や高さを%などで指定している場合、Angular側でサイズがわからなくて困る時がある バージョン情報 Angular: 5.0.3 node: 8.1.4 macOS High Sierra(10.13.3) Ionic: 3.9.2 サイズ取得方法 CSSのパーセント指定でサイズを設定した画像（鳥）の幅と…

画像を設定する前のアプリ画面 はじめに Ionicで画像を設定する方法について バージョン情報 Ionic: 3.9.2 Angular: 5.0.3 node: 8.1.4 macOS High Sierra 画像設定方法 設定したい画像（例では、isometropolis.jpg）をsrc/assets/imgs配下に置く。 CSS(SCSS…

前回の記事に引き続きRxJSの簡単なデモを作成していきます。 開発環境 Angular: 5.2.3 rxjs: 5.5.2 Typescript: 2.4.2 OS: darwin x64 Node: 8.1.4 練習3: GitHub APIを叩く GitHub APIからユーザーの一覧（30人分）を取得した後、先頭のユーザー3人分だけを…

初めに Angular + Reduxでアプリを作ることになり、RxJSに初めて触れたものの、オペレーターを使わずになんでもsubscribe、combineLatestで解決しようとする習性がなかなか抜けない.........特訓だ！目指せ、RP（リアクティブプログラミング）マスター 開発…

はじめに ERROR in src/app/app.component.ts(17,6): error TS2339: Property 'map' does not exist on type 'Observable<{}>'. AngularでRxJSを書いていて、上のエラーみたく"〇〇オペレータがないよ！！"と怒られることが多々あるので、RxJSのインポート方…

エラーに遭遇した状況 Angular CLIを使って、Angularプロジェクトを作成した後ng serveを実行してアプリを起動しようとしたら発生した。 $ ng new new-app $ cd new-app $ ng serve # エラー発生!! module.js:538 throw err; ^ Error: Cannot find module '@…

はじめに Angular + Reduxでストップウオッチを作りました デモ https://l08084.github.io/ng-stopwatch/ ソースコード github.com 実装 開発環境 Angular: 5.2.3 angular-redux/store: 7.1.0 OS: darwin x64 Node: 8.1.4 概要 angular-redux/storeを使ったR…

はじめに 以前、Angular5で作成したテトリスをAngular + Reduxで作り直してみました。 https://l08084.github.io/ng-redux-tetris/ 実際にのURLから遊ぶことができて(PCのChromeでのみ動作確認済み)、 github.com GitHubにソースコードも置いています。 関連…

はじめに 一定間隔で繰り返したい時におなじみのsetIntervalをRxJSでかくとObservable.intervalになりますが、 setIntervalに対するclearIntervalのようにObservable.intervalを止めたい時は何を使えばいいんだろうか 開発環境 Angular: 5.2.3 rxjs: 5.5.6 T…

はじめに Reactではなく、AngularからReduxに入門するのは茨の道かと思いますが、やっていきます。 今回はReduxを1サイクル回して、配列を更新してコンポーネントで値を取得するところまでやりました。 開発環境 Angular: 5.2.3 angular-redux/store: 7.1.0 …

はじめに 開発環境 定数をまとめて定義する方法 案1 定数定義だけ書いたファイルを作成する メリット・デメリット 案2 class定義 + readonlyアクセス修飾子 メリット・デメリット 参考サイト はじめに TypeScriptを使って、Javaでいうところの定数クラスを作…

はじめに REDEME.mdにgifアニメがのっているとちゃんとしたプログラムっぽくなる。 手順 色々とやり方があるらしいが(gifを置く用のブランチを作ったり)、下記手順でやってます。 GIPHY Capture. The GIF MakerGiphy, Inc.写真／ビデオ無料 まず、gifアニメ…

はじめに 操作方法: 開発環境 このテトリスについて Angular感のあるところ Angularによるcanvas参照 Angularによるキーボードイベント取得 初めてのGithub Pages 参考サイト はじめに Angular5を使ってテトリスを作成しました。のGitHub Pagesで実際に遊べ…

はじめに 開発環境 エラーが発生した時のコード エラーを修正した後のコード はじめに Angularでキーボードの→↓←↑とかspaceキーを押した時のイベントを検知するコードを書いていたら発生したエラーとなります。 発生したエラー ERROR in src/app/app.compone…

はじめに TypeScriptでコードを書いていた所、呼び出し先の関数を定義しているのに、 「XXX is not a function」が発生する事象に苦しんだため、対応方法について記述する。 ERROR TypeError: this.isMobile is not a function at AppComponent.tick (app.co…

はじめに 開発環境 発生したエラーについて エラー原因 参考にしたサイト はじめに Angular + TypeScriptでcanvasの処理を書いていたら、下記のエラーが発生しました(3つとも同様のエラー)。 ERROR in src/app/app.component.ts(159,7): error TS2349: Canno…

はじめに Visual Studio Codeを使ってAngular + Typescriptのコードを書いてたら下記のエラー(警告？)が発生したので、対処法を調べました。 [ts] Experimental support for decorators is a feature that is subject to change in a future release. Set th…