Typescript
今回作成する画面 前回の記事はこちら ハイブリットモバイルアプリフレームワークのIonicを使って、架空のアパレルショップにおける注文アプリを作成する。 第2回目である今回は、商品リスト(ホーム)画面を作成するところまで デモ こちらのURLで、完成版…
ハイブリットモバイルアプリフレームワークのIonicを使って、架空のアパレルショップにおける注文アプリを作成する。 第1回目である今回は、商品(洋服)データを作成するところまで デモ こちらのURLで、完成版のアプリを実際に操作することができます http…
前回記事はこちら 仮想通貨取引所のbitFlyerのHTTP Private APIにアクセスして、自分の資産残高を取得する。 バージョン情報 今回アクセスするAPIは認証が必要 Private APIの認証 下準備 コード 動作確認 参考サイト バージョン情報 JavaScriptのフレームワ…
Angular Materialを使って、ログイン用のフォームを作ります Angular Materialのインストールから解説している記事はこちら バージョン情報 テンプレート駆動型とモデル駆動型 NgModuleの設定 index.htmlにアイコンのCDNを追加 ログインフォームを作る 参考…
前回記事はこちら 国内仮想通貨取引所5種(bitFlyer、Coincheck、Zaif、bitbank、QUOINEX)のWeb APIにアクセスして、現在のビットコイン価格を表示するアプリケーションを作成しました。 バージョン情報 実装 アプリケーション概要 bitFlyer APIの呼び出し …
Prettier自体の導入方法については、前回記事参照 はじめに Prettierのフォーマットルールを変更したい。具体的には、(デフォルトの)ダブルクオート使用から、シングルクオート使用にしたい。 Prettierのルール変更方法 設定ファイルを作成する。設定ファ…
Visual Studio Codeに、Prettierを導入します。 バージョン情報 Visual Studio Code: 1.21.1 Prettierとは JavaScript / TypeScript / CSS を整形してくれるコードフォーマッタです。詳しくはこちら Prettierのインストール まずPrettierをインストールしま…
package.jsonに定義しているライブラリのバージョンを最新にするnpm-check-updatesの使い方について。 バージョン情報 npm-check-updates: 2.14.1 Node: 8.1.4 npm-check-updatesの使い方 npm install -g npm-check-updates # このコマンドを実行すると、更…
遭遇したエラーと対処法について エラー内容 Type 'HTMLCollectionOf<Element>' is not an array type or a string type. (プロパティ 'style' は型 'Element' に存在しません。) エラーの出たコード 複数のDOM要素を取得した後に、ループを回してスタイルプロパティ</element>…
はじめに 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…
はじめに 一定間隔で繰り返したい時におなじみの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でいうところの定数クラスを作…
はじめに 操作方法: 開発環境 このテトリスについて 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…
はじめに Visual Studio Codeを使用してJSDocコメントを自動生成する方法について書きます。 JSDoc自動生成方法 Document Thisのインストール VSCodeの拡張機能ボタンをクリックした後、Document Thisをインストールする。 なお、Document ThisはJavaScript…
はじめに Angular5 + Typescript2でコードを書いてたら、表題のエラーに遭遇した。遭遇するの2度目なので解決方法をメモる。 開発環境 Angular@5.2.0 TypeScript@2.5.3 Node@8.1.4 エラー発生時のコード 下記コードのinterval: NodeJS.Timer;の部分でTS2503:…
はじめに Angularプロジェクトをブラウザでデバッグする際に、TypescriptファイルにBreakPointを設定する方法がわからなかったので調べた。 環境 Angular: 2.4.7 angular-cli: 1.0.0-beta.28.3 webpack: 2.2.0 Google Chrome: 53.0.2785.116 各種設定ファイ…
Angularプロジェクトの雛形作成に、generator-angular2-typescriptを使っていたのですが、最近Angular CLIに移行しました。 表題の件 Angular CLIでは、ng new [プロジェクト名]コマンドでプロジェクトの雛形をカレントディレクトリに作成してくれるんですが…
イントロ 前前回の記事で作成した、angular2-google-mapsのデモアプリに、渋滞状況表示のデモを追加した。 開発環境 Angular@2.4.1 angular2-google-maps@0.17.0 typescript@2.0.10 渋滞状況の表示(traffic layer)とは 道路の混雑状況を色で表示する(空いて…