中安拓也のブログ

プログラミングについて書くブログ

2018-03-01から1ヶ月間の記事一覧

Angular Material の Tableを使う

Angular Materialをインストールして、テーブルを表示するところまでやる。 バージョン情報 Angular Materialをインストールする AppModuleの設定 CSSのインポート Tableを表示する 動作確認 参考サイト バージョン情報 Angular: 5.2.8 Angular CLI: 1.7.3 N…

Prettierのフォーマットルールを変更する

Prettier自体の導入方法については、前回記事参照 はじめに Prettierのフォーマットルールを変更したい。具体的には、(デフォルトの)ダブルクオート使用から、シングルクオート使用にしたい。 Prettierのルール変更方法 設定ファイルを作成する。設定ファ…

VSCodeにPrettierを入れる

Visual Studio Codeに、Prettierを導入します。 バージョン情報 Visual Studio Code: 1.21.1 Prettierとは JavaScript / TypeScript / CSS を整形してくれるコードフォーマッタです。詳しくはこちら Prettierのインストール まずPrettierをインストールしま…

Angular + Reduxを学ぶ #4 - Reducerを分割する

前回記事はこちら 引続き、angular-redux/storeの使い方を学んでいきます。今回はReducerを分割する方法について。 バージョン情報 環境構築 サンプルアプリケーションについて アプリケーションの構造 Stateの構造 Stateのソースコード Reducerを分割する …

Angular + Reduxを学ぶ #3 - @Select デコレーターでネストされたStateを参照する

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

Angularで数値を桁区切り(&小数点以下なし)で表示する

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

仮想通貨取引所のAPIを使ってみる #1 - CORS問題を克服する

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

npmパッケージを最新バージョンに更新する

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アプリをGitHub Pagesにデプロイする

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を作った

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

GitHub Pages にAngularアプリをデプロイした時、画像へのアクセスができない

という問題が起きました。 バージョン情報 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…

CSSでクリック時に画像やテキストが選択状態になるのを防ぐ

CSS

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

エラー「angular/compiler-cliが適切にインストールされてません」

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

Angular + Reduxを学ぶ #2 - Redux DevTools chrome extension を使う

引き続き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 CLI で作ったアプリから画像を参照する

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ディレクトリを作成する アク…

TypeScriptで遭遇したエラー: プロパティ 'style' は型 'Element' に存在しません。

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

Angularで新規にDOMを作成して、コンポーネントに挿入する

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

AngularのViewChildで取得した要素の幅や高さを表示する

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

Ionicで画像の設定

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

AngularでRxJSの練習 #2 - APIを叩く

前回の記事に引き続き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でRxJSの練習 #1 - クリック・ダブルクリックカウンターを作る

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

AngularにおけるRxJSのインポートについて整理した

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

Angular CLIで遭遇したエラー: Error: Cannot find module '@angular-devkit/core'

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