2018年06月30日

TypeScriptのジェネリック

TypeScirptのジェネリックは以下のように関数実行時に型を定義すると関数内で型を利用できる。

function sample1<T>(arg: T): T {
return arg
}
sample1<string>('string')
sample1<number>(1)


型推論が行われるため必ずしも実行時に明示的に型を指定する必要はない

sample1('string')
sample1(1)


関数式の場合は上記のように定義できるけど、関数リテラルの場合か以下のように定義します。

const sample2: { <T>(arg: T): T } = arg => {
return arg
}
sample2<string>('string')
sample2<number>(1)


interfaceを利用して以下のように定義することもできる

interface MyFuncParam<T> {
(arg: string): T
}
interface MyFuncResponse {
type: string
text: string
}
const sample3: MyFuncParam<MyFuncResponse> = text => {
return {
type: 'aaaa',
text
}
}
sample3('foo')
【TypeScriptの最新記事】
posted by ねこまんま at 01:54 | Comment(0) | TypeScript | 更新情報をチェックする

2018年06月22日

[ts] 'React' は UMD グローバルを参照していますが、現在のファイルはモジュールです。代わりにインポートを追加することを考慮してください。

TypeScript と React で悪戦苦闘していると「[ts] 'React' は UMD グローバルを参照していますが、現在のファイルはモジュールです。代わりにインポートを追加することを考慮してください。」とのエラーが

import { Component } from 'react'


を以下のように変更すると直りました。

import React, { Component } from 'react'
posted by ねこまんま at 12:02 | Comment(0) | React | 更新情報をチェックする

2018年06月13日

Reactでasyncコンポーネントを作成して非同期で読み込みを行う

以下のようなコンポーネントをAsyncComponent.jsなどとして作成
async / awaitを利用して呼び出し時に引数で指定されたコンポーネントの呼び出しを行います。

import React, { Component } from "react";

export default function asyncComponent(importComponent) {
class AsyncComponent extends Component {
constructor(props) {
super(props);

this.state = {
component: null
};
}

async componentDidMount() {
const { default: component } = await importComponent();

this.setState({
component: component
});
}

render() {
const C = this.state.component;

return C ? <C {...this.props} /> : null;
}
}

return AsyncComponent;
}


ルーティング時に呼び出したいコンポーネントを利用できるようにしておきます

render(
<div>
<Provider store={store}>
<ConnectedRouter history={history}>
<div>
<Switch>
<Route
exact
path="/a"
component={asyncComponent(() =>
import('./App1')
)}
/>
<Route
path="/b"
component={asyncComponent(() =>
import('./App2')
)}
/>
<Route
path="/c"
component={asyncComponent(() =>
import('./App3')
)}
/>
<Redirect to="/a" />
</Switch>
</div>
</ConnectedRouter>
</Provider>
</div>,
document.getElementById('root')
);


via : https://serverless-stack.com/chapters/code-splitting-in-create-react-app.html
タグ:async REACT await
posted by ねこまんま at 12:38 | Comment(0) | React | 更新情報をチェックする

Reactのreact-helmet-asyncでhead情報を挿入

react-helmet-asyncを利用するとhead内に様々な情報を挿入できる


import * as React from "react";
import { render } from "react-dom";
import Helmet, { HelmetProvider } from "react-helmet-async";

import Hello from "./Hello";

const styles = {
fontFamily: "sans-serif",
textAlign: "center"
};

const App = () => (
<HelmetProvider>
<div style={styles}>
<Helmet>
<title>Hello World!!</title>
<link rel="canonical" href="https://www.tacobell.com/" />
</Helmet>
<Hello name="CodeSandbox" />
<h2>Start editing to see some magic happen {"\u2728"}</h2>
</div>
</HelmetProvider>
);

render(<App />, document.getElementById("root"));


HelmetProviderで包んでおけばHelmetで包んだ要素内でhead要素に入れることができる
posted by ねこまんま at 01:08 | Comment(0) | React | 更新情報をチェックする

TypeScript + Reactの基本

Propsを定義


iterface Props {
value: number;
}
class Square extends React.Component {}


PropsとStateを定義


iterface Props {
value: number;
}
interface State {
value: number | null;
}
class Square extends React.Component {}

タグ:REACT TypeScript
posted by ねこまんま at 00:59 | Comment(0) | React | 更新情報をチェックする

2018年05月17日

React + flow +ESLint + Prettierを試す

React + flow +ESLintを試す の続き。

まずは以下の拡張機能をインストール

yarn add --dev prettier eslint-config-prettier eslint-plugin-prettier


VSCodeのセッティングに以下のコードを追加

  "editor.formatOnSave": true,
"prettier.eslintIntegration": true,


.eslintrcを以下のように変更してあげるとよい

{
"parser": "babel-eslint",
"extends": ["react-app", "standard", "plugin:prettier/recommended"],
"rules": {
"prettier/prettier": [
"error",
{
"trailingComma": "es5",
"singleQuote": true,
"semi": false
}
]
}
}
posted by ねこまんま at 15:54 | Comment(0) | React | 更新情報をチェックする

React + flow +ESLint を試す

React + flow を試すの続き。

ESLintを追加でインストール、色々インストール

yarn add --dev eslint eslint-config-react-app eslint-plugin-flowtype eslint-plugin-jsx-a11y eslint-plugin-react babel-eslint eslint-plugin-node eslint-plugin-promise eslint-config-standard eslint-plugin-standard


.eslintrcを次のように設定して

{
"parser": "babel-eslint",
"extends": ["react-app","standard"]
}


以下のコマンドでエラーで

npx eslint src/App.js


以下のようなエラーが出ればOK

Definition for rule 'jsx-a11y/href-no-hash' was not found  jsx-a11y/href-no-hash


これは先程インストールしたjsx-a11y内のhref-no-hashというプラグインのhref-no-hashの名前が変わっているため。以下のようにして古いバージョンを入れることで直すことができます。

yarn remove eslint-plugin-jsx-a11y
yarn add --dev eslint-plugin-jsx-a11y@^5.1.1
posted by ねこまんま at 15:07 | Comment(0) | React | 更新情報をチェックする

React + flow を試す

React + flow を試す。

まずはcreate-react-appでプロジェクトをサクッと作成

create-react-app flow-test
cd flow-test
yarn start


次にflow-binをインストールして.flowconfigを作成する

yarn add --dev flow-bin
yarn run flow init


Visual Studio CodeにはプラグインFlow Language Support」をインストールしておきプロジェクトの設定を以下のようにしておく

{    
"flow.useNPMPackagedFlow": true,
"javascript.validate.enable": false
}


App.jsの冒頭に「// @flow」を追加する

以下のようにエラーがでて怒られますので

[flow] Cannot use `Component` [1] with less than 1 type argument. (References: [1])



以下のようにComponentに型を定義してあげるとエラーが無くなります。

type Props = {};
class App extends Component {




posted by ねこまんま at 12:10 | Comment(0) | React | 更新情報をチェックする

2018年05月05日

ReactでCSS Modulesを試す

すでに、Webpackで動いているReactプロジェクトに導入を前提としています。

まずは関連システムをインストール。

npm install --save-dev style-loader css-loader sass-loader node-sass extract-text-webpack-plugin


webpack.config.jsに会の一文を追加

module: {
rules: [
{
test: /\.scss$/,
loaders: ['style-loader', 'css-loader?modules', 'sass-loader'],
},
]
},


app.scssなどのファイルを作成して、以下のような内容を指定

.base{
background: blue;
}



app.js内でCSSを読み込み


import styles from './app.scss';



<div className={styles.base}>...</div>


などとして指定が可能
タグ:REACT CSS Modules
posted by ねこまんま at 17:34 | Comment(0) | React | 更新情報をチェックする

2018年04月12日

JEST入門

簡単なコードを買いてコレをテストしていく。
とりあえずCreateReactAppのものを使うので環境構築はなし。

xxx.jsを作成して

export default (a,b) => a + b;


xxx.test.jsとしてテストファイルが作成できるので以下のようにテストコードを書く

import sum from './sum';
test('sum',()=>{
expect(sum(2,3)).toBe(5);
})


`npm test` でテストが実行される

posted by ねこまんま at 20:15 | Comment(0) | test | 更新情報をチェックする

2018年03月17日

React.Fragment

React.Fragmentを利用するとHTML上には書き出されない要素を記述することができます。(Angularでいうng-content )

render() {
return (
<React.Fragment>
<ChildA />
<ChildB />
<ChildC />
</React.Fragment>
);
}


これは以下のようにショートカットで書くこともできます。

render() {
return (
<>
<ChildA />
<ChildB />
<ChildC />
</>
);
}
タグ:REACT fragment
posted by ねこまんま at 18:04 | Comment(0) | React | 更新情報をチェックする

2018年02月05日

Flowtype入門

Flowtypeをを導入するまでの道のり

cli編



まずはpackage.jsonを作成してBableとflowのpresetをインストールしておく。

npm init -y
npm install --save-dev babel-cli babel-preset-flow


scriptsにコンパイル用のコマンドと先ほどインストールしたbabelとpresetsを設定しておく。

  "scripts": {
"build": "babel src/ -d lib/",
"prepublish": "npm run build"
},
"babel": {
"presets": ["flow"]
},


次にflow-binをインストール

npm install --save-dev flow-bin


scriptsにflow用のコマンドを記述

  "scripts": {
"build": "babel src/ -d lib/",
"prepublish": "npm run build",
"flow": "flow"
},


npm run flowでflowが実行される

npm run flow initでは設定用の.flowconfigが作成される

script/app.js に以下のスクリプトを書いて

// @flow
const bar:string = 1


npm run flowを実行すると以下のようなエラーが出てると正解

Error: src/app.js:2
2: const bar:string = 1
^ number. This type is incompatible with
2: const bar:string = 1
^^^^^^ string


スクリプトを以下のように修正すると

// @flow
const bar:string = '1'


エラーは出なくなるはず

ちなみにこのままではブラウザは解釈できないので

npm run buildで出力された lib/app.jsをブラウザで読み込みましょう

エディタ編



いちいちコマンドを打つのが面倒くさいのでエディタでエラーがわかるように設定しておきます。

VSCodeでは「Flow Language Support」というオフィシャルプラグインをインストール。

設定で以下のように指定をしてflowのpathを先ほどのインストールしたローカルのファイルになるようにします。


"flow.pathToFlow": "${workspaceRoot}/node_modules/.bin/flow"


このままだと型宣言はTSでしか聞かないよ的なエラーが表示され続けるのでワークスペースの設定に以下の内容を追加しておきます。


"javascript.validate.enable": false
タグ:Flowtype REACT
posted by ねこまんま at 20:17 | Comment(0) | React | 更新情報をチェックする

2018年01月23日

npmが壊れた場合

npmがアップデートしろって行ってきたのでアップデートしました。

npm i -g npm


そしたらエラーがでて途中で終了、再アップデートしようにも以下のエラーが出てしまう

bash: /usr/local/bin/npm: No such file or directory


以下のコマンドでインストールファイルをもってきてインストールし直しました。

curl http://npmjs.org/install.sh| sh


以下のコマンドで設定を反映したらチャント利用できるようになりました。

exec $SHELL -l

タグ:NPM
posted by ねこまんま at 19:12 | Comment(0) | node.js | 更新情報をチェックする

ndenvでバージョンの指定ができなくなった

ndenvでバージョンの指定ができなくなった

以下のコマンドでnodeの場所を確認すると

which node


以下を示している。

/usr/local/bin/node


これ昔homebrewでインストールしたnode。もう利用することはないので

berew uninstall --ignore-dependencies node


でアンインストールしておきます。

exec $SHELL -l


で設定を反映、まだバージョンがおかしい

また以下のコマンドでnodeの場所を確認すると

which node


以下を示している。

/Users/nishihatakazuma/.nodebrew/current/bin/node


これ昔nodebrewでインストールしたnodeのバーション。以下のコマンドで削除して

rm -rf ~/.nodebrew/


bash_profileからもパスを削除

exec $SHELL -l


で設定を反映するとちゃんとバージョンが表示されるようになりました。
posted by ねこまんま at 18:58 | Comment(0) | node.js | 更新情報をチェックする

2018年01月16日

Nuxt.jsでヘッダー情報を設定

nuxt.config.jsには以下のようにheader情報を設定しておき、

module.exports = {
head: {
titleTemplate: '%s - Nuxt.js',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: 'Meta description' }
]
}
}


pagesディレクトリ配下のページコンポーネントで以下のようにtitleを設定することで、

<template>
<h1>Hello world!!!</h1>
</template>
<script>
export default {
head () {
return {
title: 'ok',
}
}
}
</script>


以下のようなtitle要素が出力される

<title data-n-head="true">ok - Nuxt.js</title>
タグ:Nuxt.js
posted by ねこまんま at 17:59 | Comment(0) | vue.js | 更新情報をチェックする

2017年11月12日

Angularの構造ディレクティブ(Structural directives)でif文を作ってみる

Angularの構造ディレクティブで*ifと同じ機能をもつ *if2を作成(elseとかはなし)

TemplateRefでテンプレート(もとのHTML的なの)を、ViewContainerRefでテンプレートが挿入されていた場所を取得できるのでif2がtrueの場合は挿入、if2がfalseの場合はクリアする。

import {Directive, Input , OnChanges, TemplateRef, ViewContainerRef} from '@angular/core';

@Directive({
selector: '[if2]'
})
export class If2Directive implements OnChanges {

@Input() if2: boolean;
constructor(
private template: TemplateRef,
private container: ViewContainerRef
) {}

ngOnChanges() {
if (this.if2) {
this.container.createEmbeddedView(this.template);
}else {
this.container.clear();
}
}
}

posted by ねこまんま at 00:44 | Comment(0) | Angular | 更新情報をチェックする

AngularのRenderer2でDOMを操作

AngularのRenderer2でDOMを操作できます。

以下のように指定を行うとElementRefで取得したネイティブのDOMにアクセスできます。

import { Component, OnInit, ElementRef, Renderer2 } from '@angular/core';

@Component({
selector: 'app-component',
templateUrl: './app-component.component.html'
})
export class AppComponent implements OnInit {

constructor(
private el: ElementRef,
private renderer: Renderer2
) { }

ngOnInit() {
const target = this.el.nativeElement;
this.renderer.setStyle(target, 'color', 'red');
this.renderer.listen(target, 'click', () => alert('ok'));
}

}

posted by ねこまんま at 00:00 | Comment(0) | Angular | 更新情報をチェックする

2017年11月11日

AngularでネイティブのDOMにアクセス

AngularでネイティブのDOMにアクセスするにはElementRefで参照します。(この場合は<app-component></app-component>)にアクセスされます。

import { Component, OnInit, ElementRef } from '@angular/core';

@Component({
selector: 'app-component',
templateUrl: './app-component.component.html'
})
export class AppComponent implements OnInit {

constructor(
private el: ElementRef
) { }

ngOnInit() {
this.el.nativeElement.style.color = 'red';
}
}


posted by ねこまんま at 23:52 | Comment(0) | Angular | 更新情報をチェックする

AngularでDirectiveの作成

AngularでDirectiveの作成するには以下のようにします。

import {ElementRef, Directive } from '@angular/core';
@Directive({
selector: '[myDirective]'
})
export class MyDirective {
constructor(
private el: ElementRef
) {
this.el.nativeElement.style.color = 'red';
}
}


こちらを作成しておけば以下のようにDirectiveが利用できます。

<p myDirective>
myDirective works!
</p>


引数を利用したい場合は@Input() を利用します。

import {ElementRef, Directive, Input , OnInit} from '@angular/core';
@Directive({
selector: '[myDirective]'
})
export class MyDirective implements OnInit {
@Input() myDirective;
constructor(
private el: ElementRef
) {}
ngOnInit() {
this.el.nativeElement.style.color = this.myDirective;
}
}


以下のようにDirectiveが利用できます。

<p myDirective="red">
myDirective works!
</p>


引数を複数設定したい場合はディレクティブ名以外の@Inputを増やしていきます。

import {ElementRef, Directive, Input , OnInit} from '@angular/core';
@Directive({
selector: '[myDirective]'
})
export class MyDirective implements OnInit {
@Input() myDirective;
@Input() myDirectiveBg;
constructor(
private el: ElementRef
) {}
ngOnInit() {
this.el.nativeElement.style.color = this.myDirectiveBg;
this.el.nativeElement.style.backgroundColor = this.myDirectiveBg;
}
}


以下のようにDirectiveが利用できます。

<p myDirective="red" myDirectiveBg="blue">
myDirective works!
</p>


@HostListenerをを利用すればイベントを制御することも可能です。HostListenerの引数にイベントを設定して、実行したいメッソッドを後ろに指定します。

import {ElementRef, Directive, Input , OnInit, HostListener} from '@angular/core';

@Directive({
selector: '[myDirective]'
})
export class MyDirective implements OnInit {

@Input() myDirective = 'blue';
@Input() myDirectiveBg = 'blue';

constructor(
private el: ElementRef
) {}

ngOnInit() {
this.el.nativeElement.style.color = this.myDirective;
}
@HostListener('click') changeBg() {
this.el.nativeElement.style.backgroundColor = this.myDirectiveBg;
}
}


@HostListenerは第2引数に配列でメソッドで利用できる引数が設定できます、'$event'と指定をするとイベントオブジェクトを利用することができます。(以下のサンプルではevent.targetをHTMLElement型にキャストしています。)

import {ElementRef, Directive, Input , OnInit, HostListener} from '@angular/core';

@Directive({
selector: '[myDirective]'
})
export class MyDirective implements OnInit {

@Input() myDirective = 'blue';
@Input() myDirectiveBg = 'blue';

constructor(
private el: ElementRef
) {}

ngOnInit() {
this.el.nativeElement.style.color = this.myDirective;
}
@HostListener('click', ['$event']) changeBg(event: MouseEvent) {
(<HTMLElement>event.target).style.backgroundColor = this.myDirectiveBg;
}
}

タグ:Directive
posted by ねこまんま at 22:54 | Comment(0) | Angular | 更新情報をチェックする

2017年10月24日

ConnectableObservableをColdに変換

Observable.forkJoin()で並列でObservableを購読しようとしたら上手く動かなかった。

調べていくと片方のObservableがBehaviorSubjectより発行されたConnectableObservableだった為、Completeを発行せずにObservable.forkJoin()がしないようです。

ColdなObservableをHotに変換するのにはpublish()などがあるけど逆は調べてもあまり見つからず。

調べていくとtake(1)を利用するとBehaviorSubjectの最新の値を取ってきてCompleteが発行されるのでObservable.forkJoin()で制御できるようなります。
posted by ねこまんま at 11:52 | Comment(0) | RxJS | 更新情報をチェックする

2017年10月23日

Angularでカスタムパイプを作る

./pipe/ellipsis.pipe.ts として省略用のパイプを作成します。PipeTransformで対象の文字列や引数(ex :foo :bar)が取得できますので変換してリターンで返すだけです。
以下のサンプルではN文字(初期値は50)以上の場合は...と省略されるパイプを作成しています。

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
name: 'ellipsis'
})

export class Ellipsis implements PipeTransform {
transform(value: string, length: number = 50 , ommission: string = '...'): any {
if ( value.length < length) {
return value;
} else {
return value.substring(0 , length) + ommission;
}
}
}


作成したパイプはapp.module.tsで登録しておきます。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { Ellipsis } from './pipe/ellipsis.pipe';

@NgModule({
declarations: [
AppComponent,
Ellipsis
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }


これで以下のように利用することができます。

<p>{{'あいうとおあいうとおあいうとおあいうとおあいうとおあいうとお' | ellipsis}}</p>
<p>{{'あいうとおあいうとおあいうとおあいうとおあいうとおあいうとお' | ellipsis : 20}}</p>
<p>{{'あいうとおあいうとおあいうとおあいうとおあいうとおあいうとおあいうとおあいうとおあいうとおあいうとお' | ellipsis}}</p>
<p>{{'あいうとおあいうとおあいうとおあいうとおあいうとおあいうとおあいうとおあいうとおあいうとおあいうとお' | ellipsis : 50 : '〜'}}</p>
<p [innerHTML] = "'あいうとおあいうとおあいうとおあいうとおあいうとおあいうとおあいうとおあいうとおあいうとおあいうとお' | ellipsis"></p>
posted by ねこまんま at 10:31 | Comment(0) | Angular | 更新情報をチェックする

2017年10月17日

AngularでURLのパラメーターを取得する

AngularでURLのパラメーターを取得する。ルーティングでは以下のように設定している

{path: 'list/:page', component: ListComponent}


呼び出したいコンポーネントでActivatedRouteのsnapshot.paramsからパラメーターが取得できる

import {Component} from '@angular/core';
import {ActivatedRoute} from '@angular/router';

@Component({
selector: 'list',
template: ' <h1 class="friend">Friend ID is {{friendId}}</h1>',
})
export class FriendComponent {
pageNo: string

constructor(route: ActivatedRoute) {
this.pageNo = route.snapshot.params.page
}
}
posted by ねこまんま at 16:55 | Comment(0) | Angular | 更新情報をチェックする

AngularでN文字以上をトリミング

AngularでN文字以上をトリミングしたい場合はtsファイル内で以下のように文字数を定義しておき

  /**
* 文のトリミング文字数
*/
public maxTextLength = 255;


HTML側ではN文字を超えたる文字はトリミングしておき文字数をみて...を付ける

<p>{{text|slice:0:maxTextLength}}<span *ngIf="ttext?.length>maxTextLength">…</p>
タグ:Angular
posted by ねこまんま at 15:21 | Comment(0) | Angular | 更新情報をチェックする

はじめてのReactNative

はじめてReactNativeでアプリっぽいものと作る勉強をするのでメモ。

オフィシャルサイトをベースに進めていきます。

まずはcreate-react-native-appをグローバルにインストール

npm install -g create-react-native-app


適当なディレクトリでcreate-react-native-appでプロジェクトを作成

create-react-native-app MyApp


プロジェクトディレクトリで「yarn start」 もしくは「 npm start」

cd MyApp
yarn start


環境によるかもしれないけど以下のようなエラーが出ました。解決用のコマンドも提示されてる親切さ。
2つのコマンドを入力したら問題なく開始できました。

12:41:08: Unable to start server
See https://git.io/v5vcn for more information, either install watchman or run the following snippet:
sudo sysctl -w kern.maxfiles=5242880
sudo sysctl -w kern.maxfilesperproc=524288


デカデカと開発環境用のQRコードが表示されます。

スクリーンショット 2017-10-17 12.50.04.png

アプリをスマホで確認する場合にはExpoというアプリをインストールして、そのアプリでこのQRコードを読み取ります。

MyApp/App.jsを立ち上げてエディタで以下のように変更。

import React, { Component } from 'react';
import { Text } from 'react-native';

export default class HelloWorldApp extends Component {
render() {
return (
<Text>Hello world!</Text>
);
}
}


スマホの表示が「Hello world!」に切り替わったのが確認できます。

これで準備はOK
タグ:ReactNative
posted by ねこまんま at 13:01 | Comment(0) | React | 更新情報をチェックする

2017年10月16日

AngularでBehaviorSubjectでloadingを表示

BehaviorSubjectでは初期値を指定しなくては行けないため値があるかないかの判定が難しいです。

そのため表示用のオブジェクトにはnullを指定しておき

export Todo {
title: string;
description: string;
}
public todo: BehaviorSubject<Todo|null> = new BehaviorSubject(null);


nullの場合はloading表示、値が入って初めてからオブジェクトの内容を表示するようにします。

<div *ngIf="!todo.value">
ローディング
</div>
<div *ngIf="todo | async">
TODOリスト
</div>
posted by ねこまんま at 23:43 | Comment(0) | Angular | 更新情報をチェックする

2017年10月13日

Angularで「WARNING .. 'Interface' was not found」と警告がでた

Angularで「WARNING .. 'Interface' was not found」と警告がでて色々と試した

WARNING in ./xxx.component.ts
39:82-90 "export 'MyInterface' was not found in './xxx.service


xxx.service.tsでは以下のようにMyInterfaceを定義し

export interface MyInterface {
foo?: string;
}


xxx.component.tsでは以下のようにMyInterfaceを読み込み

import { MyInterface } from './xxx.service';


のように定義している。

調べていくと、@inputの型定義を以下のようにしていると警告が出るようです。

@Input() myInterface: MyInterface;


以下のようにして値未定義を許可すると警告が消えました。

@Input() myInterface = <MyInterface>null;
タグ:TypeScript
posted by ねこまんま at 17:35 | Comment(0) | Angular | 更新情報をチェックする

2017年10月10日

RxJSの購読管理

RxJSでは Rx.Subscription() で購読情報を管理することができるオブジェクトを作成できる。
subscribe()の返り値をこのオブジェクトにadd()していくと、あとでまとめてunsubscribe()することができます。

import Rx from 'rxjs/Rx';
const subscription = new Rx.Subscription();
const s1 = Rx.Observable.interval(1000).subscribe(x => console.log(1,x));
subscription.add(s1);
const s2 = Rx.Observable.interval(300).subscribe(x => console.log(2,x));
subscription.add(s2);
document.body.addEventListener('click', () => {
subscription.unsubscribe();
});
posted by ねこまんま at 16:55 | Comment(0) | RxJS | 更新情報をチェックする

2017年09月27日

RxJSのオペレーター



.map(e => e.text) // ストリームを加工する
.delay(200) // ストリームを送れて配信
.throttleTime(200) // ストリームを間引く
.debounceTime(200) // 短い期間で実行されたストリームを間引く
.take(3) // n回だけストリームを流す
.takeUntil(myObserbal) // ストリーム(myObserbal)を受け取るまでストリームを流す
.pluck('target', 'value') //ストリームのオブジェクト( strem.target.vlaue)を流す
.pairwise() // 前回と今回のストリームを配列で流す
.distinct() // 重複するストリームを流さない
.distinctUntilChanged() // 連続するストリームが同じ値の場合はストリームを流さない
.scan(beforeValue => beforeValue + 1, defaultVAlue) // 前回のストリームを流す




タグ:RxJS
posted by ねこまんま at 21:50 | Comment(0) | RxJS | 更新情報をチェックする

2017年07月11日

react-router v4を試してみる

最近Angular三昧だったのでリハビリをかねて、サイトのReactのバージョンアップをしています。

はまったのがreact-router、もともとはreact-routerという名前のモジュールだったのですがreact-router v4
からはWeb用とNative用にわかれており、Web用はreact-router-domという名前のモジュールを利用します。

以下のyarnコマンドでモジュールの入れ替えを行います。

yarn remove react-router
yarn add react-router-dom


npmを利用している場合は以下のコマンドでモジュールの入れ替えを行うことができます。

npm uninstall react-router --save 
npm install react-router-dom



import  React , { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'

const Home = ()=>{
return <div>Home</div>
}

const Page1 = ()=>{
return <div>Page1</div>
}

const Page2 = ()=>{
return <div>Page2</div>
}

const Page3 = ()=>{
return <div>Page3</div>
}

class App extends Component {
render() {
return (
<Router>
<div>
<ul>
<li><Link to='/'>Home</Link></li>
<li><Link to='/page1'>Page1</Link></li>
<li><Link to='/page2'>Page2</Link></li>
<li><Link to='/page3'>Page3</Link></li>
</ul>

<hr />
<div>
<Route exact path='/' component={Home} />
<Route path='/page1' component={Page1} />
<Route path='/page2' component={Page2} />
<Route path='/page3' component={Page3} />
</div>
</div>
</Router>
);
}
}

export default App;
posted by ねこまんま at 10:28 | Comment(0) | TrackBack(0) | React | 更新情報をチェックする

2017年07月10日

"-bash: create-react-app: command not found"

create-react-appをインストールして実行した所以下のエラーが出てしまいました。

"-bash: create-react-app: command not found"


おそらくndenvでインストールしたのでパスが通ってなかったようなので以下のコマンドでパスを通す事ができまいした。

export PATH=$PATH:`npm bin -g`
posted by ねこまんま at 02:35 | Comment(0) | TrackBack(0) | node.js | 更新情報をチェックする

2017年07月09日

yarnでローカルパッケージのアップデート

yarnでローカルパッケージのアップデートする方法

インストールできる最新バージョンは以下のコマンドで確認

npm outdated


以下のコマンドで各ローカルのパッケージを最新バージョンにすることができる

yarn upgrade
タグ:NPM Yarn
posted by ねこまんま at 23:34 | Comment(0) | TrackBack(0) | node.js | 更新情報をチェックする

2017年05月03日

RxJSのSubject

RxJSのSubjectの使い方メモ
続きを読む
posted by ねこまんま at 15:52 | Comment(0) | TrackBack(0) | RxJS | 更新情報をチェックする

2017年04月23日

angularでdebounce

以下のようにnew Subjectでオブジェクトを作成しておいて、debounceTimeを設定するとデバウンスができる

import { Component,HostListener } from '@angular/core';
import {Subject} from 'rxjs/Subject'
import 'rxjs/Rx'

@Component({
selector: 'app-root',
template: `
<input (input)="subject.next($event.target.value)">
`,
})

export class AppComponent {
subject = new Subject();
constructor() {
this.subject.debounceTime(1000).subscribe((v) => {
console.log(v);
})
}
}


ただ、このままだとChange Detectionのdebounceができないので以下のように調整する

@Directive({
selector: 'input[debounceInput]'
})
export class DebounceInput {
@Output() onInput = new EventEmitter();

constructor(
private _elementRef: ElementRef,
private _zone: NgZone,
) {
this._zone.runOutsideAngular(() => {
Observable
.fromEvent(this._elementRef.nativeElement, 'input')
.debounceTime(1000)
.subscribe((ev:any) => {
this._zone.run(() => this.onInput.emit(ev));
});
});
}
}


参考:Angularでイベントから無駄にChange Detectionを走らせないためにすべきこと - Qiita
posted by ねこまんま at 20:41 | Comment(0) | TrackBack(0) | Angular | 更新情報をチェックする

angular cliで作ったプロジェクトでJSエラーが出る

Angular CLIでつくったプロジェクトを表示すると以下のようなエラーがでた。

Uncaught TypeError: Cannot read property 'apply' of undefined
at XMLHttpRequest.desc.get [as ontimeout] (zone.js:1265)
at XHRLocalObject.AbstractXHRObject._cleanup (abstract-xhr.js:149)
at XMLHttpRequest.xhr.onreadystatechange (abstract-xhr.js:125)
at XMLHttpRequest.wrapFn (zone.js:1230)
at ZoneDelegate.invokeTask (zone.js:398)
at Zone.runTask (zone.js:165)
at XMLHttpRequest.ZoneTask.invoke (zone.js:460)


以下のコマンドでzone.js@0.8.5をインストールしておけばよいです

npm install zone.js@0.8.5 --save


参考:html - Angular 2 - TypeError: Cannot read property 'apply' of undefined - Stack Overflow
posted by ねこまんま at 19:29 | Comment(0) | TrackBack(0) | Angular | 更新情報をチェックする

2017年04月06日

Angular2でformControl' since it isn't a known property of 'input'とエラーが出た

Angular2でformControlを利用しようとすると「formControl' since it isn't a known property of 'input'」とエラーが出た。

ReactiveFormsModuleモジュールを読み込んでないと使えないらしい。

import {ReactiveFormsModule} from '@angular/forms';

@NgModule({
imports : [
..
ReactiveFormsModule,
...
],
...
})
posted by ねこまんま at 14:07 | Comment(0) | TrackBack(0) | Angular | 更新情報をチェックする

2017年03月07日

Angular2のloadChildrenでモジュールの遅延読み込みを行う

Angular2のloadChildrenを利用するとモジュールの遅延読み込みが可能になる。たまにしか読み込まれないモジュールなどは遅延読み込みの対象にしておこう続きを読む
posted by ねこまんま at 14:22 | Comment(0) | TrackBack(0) | Angular | 更新情報をチェックする

2017年01月22日

ElementRef - @angular/core - Angular2

ElementRefを利用すると要素内のHTMLにアクセスできます。続きを読む
posted by ねこまんま at 22:08 | Comment(0) | TrackBack(0) | Angular | 更新情報をチェックする

2017年01月15日

Angular 2のng2-dragulaでドラッグアンドドロップ

Angular 2のng2-dragulaでドラッグアンドドロップする。ng2-draguladragulaというドラッグアンドドロップ制御表のライブラリのOfficial Angular2 wrapper 。続きを読む
タグ:Angular 2
posted by ねこまんま at 21:25 | Comment(0) | TrackBack(0) | Angular | 更新情報をチェックする

2017年01月14日

Angular 2のDatePipe

Angular 2のdateパイプで日付のフォーマットを整理でき、DatePipeの引数に言語を指定すればその言語に対応した変換方式がりようできる。

import { Component } from '@angular/core';
import {DatePipe} from '@angular/common';
@Component({
selector: 'app-root',
template: `
<p>{{now}}</p>
<p>{{now| date: 'y/MM/dd (EE) HH:mm'}}</p>
<p>{{ngDatePipeJp.transform(now, 'yMMdd (EEE) HHmm')}}</p>
`,
styleUrls: ['./app.component.css']
})
export class AppComponent {
now = new Date();
ngDatePipeJp = new DatePipe('ja-JP');
}


これだと面倒くさいので独自のパイプdateJPを作成してみる。

date-jp.pipe.ts

import { Pipe } from '@angular/core';
import { DatePipe } from '@angular/common';

@Pipe({name: 'dateJP'})
export class DateJpPipe {
private dateJpPipe: DatePipe;
constructor() {
this.dateJpPipe = new DatePipe('ja-JP');
}
transform(date, format) {
return this.dateJpPipe.transform(date, format);
}
}


app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import {DateJpPipe} from './date-jp.pipe';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent,
DateJpPipe
],
imports: [
BrowserModule,
FormsModule,
HttpModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }


app.component.ts

import { Component } from '@angular/core';
import {DatePipe} from '@angular/common';
@Component({
selector: 'app-root',
template: `
<p>{{now}}</p>
<p>{{now| date: 'y/MM/dd (EE) HH:mm'}}</p>
<p>{{now| dateJP: 'yMMdd (EE) HHmm分'}}</p>
`
})
export class AppComponent {
now = new Date();
}


変換フォーマットが正直微妙なので下記のサイトを参考に曜日だけ日本語にするのがよいかと思う。

参考:DatePipe - ts - API - 公式リファレンス
参考:【Angular2】DatePipeの曜日だけ日本語にする【LiveDemoあり】 | Bucket.GIFT
タグ:Angular 2
posted by ねこまんま at 19:14 | Comment(0) | TrackBack(0) | Angular | 更新情報をチェックする

2017年01月09日

TypeScriptの基本

TypeScriptの環境作成方法。続きを読む
タグ:TypeScript
posted by ねこまんま at 16:55 | Comment(0) | TrackBack(0) | TypeScript | 更新情報をチェックする

TypeScriptのas

TypeScriptのasオペレーターというのがあってハマった。このググラビリティの低いワードどうかにかして欲しい。続きを読む
タグ:as TypeScript
posted by ねこまんま at 14:56 | Comment(0) | TrackBack(0) | TypeScript | 更新情報をチェックする

2017年01月08日

Angular2のRouting2

Angular2のRoutingで基本的なルーティングの解説をしたけどもう少し高度なルーティング続きを読む
タグ:Angular2
posted by ねこまんま at 17:42 | Comment(0) | TrackBack(0) | Angular | 更新情報をチェックする

2017年01月06日

Stateless Functionでrefを利用する

Stateless Functionではrefsへの参照を生成しないため以下のようにして要素の内容を取得する

続きを読む
タグ:REACT
posted by ねこまんま at 17:15 | Comment(0) | TrackBack(0) | React | 更新情報をチェックする

2017年01月05日

Re : Flux を使わずに React コンポーネント間のコミュニケーションを行う8つの方法

参考:Flux を使わずに React コンポーネント間のコミュニケーションを行う8つの方法 - Qiita

結構はやい段階でReduxに以降してしまったためココらへんの知識が浅いので色々と書いてためしてみました。続きを読む
タグ:REACT
posted by ねこまんま at 14:44 | Comment(0) | TrackBack(0) | React | 更新情報をチェックする

2016年12月30日

Angular2のRouting

app.module.ts内などでRouterModuleを読み込み@NgModuleでimportsでルーティング設定を行います。

import { RouterModule }   from '@angular/router';

@NgModule({
...
imports: [
RouterModule.forRoot([
{
path: 'list',
component: ListComponent
},
{
path: 'detail',
component: DetailComponent
}
])
]
...
});


app.components.ts内の@Componentではrouter-outletタグで@NgModuleのpathがあった場合にcomponentがouter-outletタグに指定したコンポーネントが表示されます。

@Component({
selector: 'my-app',
template: `
<h1>{{title}}</h1>
<router-outlet></router-outlet>
`
});
タグ:Angular2 routing
posted by ねこまんま at 17:27 | Comment(0) | TrackBack(0) | Angular | 更新情報をチェックする

2016年12月21日

Angular2のライフサイクルメソッド

OnInitやOnChangesをimportしておけば子コンポーネントでngOnInitやngOnChangesといったライフサイクルメソッドが利用可能

import { Component} from '@angular/core';

@Component({
selector: 'my-app',
template: `
<div>
<my-h1 [myText]=h1></my-h1>
<p (click)="onClick()">click</p>
</div>
`
})
export class AppComponent{
h1:string = "h1";
onClick(){
this.h1 = this.h1+"!";
}
}


import { Component, Input,OnInit,OnChanges } from '@angular/core';

@Component({
selector: 'my-h1',
template: `
<h1>{{myText}}</h1>
`
})
export class h1Component implements OnInit,OnChanges{
@Input() myText:String;
ngOnInit() {
console.log("ngOnInit")
}
ngOnChanges(changes) {
console.log('ngOnChanges',changes);
}
}
posted by ねこまんま at 13:03 | Comment(0) | TrackBack(0) | Angular | 更新情報をチェックする

2016年12月20日

Angular2のサービス

Angular2のサービスに関しては「Angular2のDIを知る - Qiita」が詳しかった。

serviceは単純にデータ構造をかえすものにしておいて、providersに配列として登録、constructor(private fooService: FooService)みたいな感じで設定しておけばclass内からアクセスできるようになる。

myFoo.service.ts

export default class FooService {
say1(): string {
return "foo1";
}
say2(): string {
return "foo2";
}
}


app.component.ts

import { Component } from '@angular/core';
import FooService from "./myFoo.service";

@Component({
selector: 'my-app',
providers: [FooService],
template: `
<div>
<h1>{{name}}</h1>
<p (click)="onClick()">click</p>
</div>
`
})
export class AppComponent {
name:string;
constructor(private fooService: FooService) {
this.name = fooService.say1();
}
onClick(){
this.name = this.fooService.say2();
}
タグ:Angular2
posted by ねこまんま at 00:41 | Comment(0) | TrackBack(0) | Angular | 更新情報をチェックする

2016年12月19日

Angular2のコンポーネント

Angular2でコンポーネントapp.modules.tsにコンポーネントを登録しておけば利用できるようになる。

app.component.ts

import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<my-h1 myText="h1"></my-h1>
<my-h2 myText="h2"></my-h2>
`
})
export class AppComponent {

}


h1.component.ts

import { Component, Input } from '@angular/core';

@Component({
selector: 'my-h1',
template: `
<h1>{{myText}}</h1>
`
})
export class h1Component {
@Input() myText:String;
}


h2.component.ts

import { Component, Input } from '@angular/core';

@Component({
selector: 'my-h2',
template: `
<h2>{{myText}}</h2>
`
})
export class h2Component {
@Input() myText:String;
}


app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { h1Component } from './h1.component';
import { h2Component } from './h2.component';

@NgModule({
imports: [
BrowserModule,
FormsModule,
],
declarations: [
AppComponent,
h1Component,
h2Component
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

タグ:Angular2
posted by ねこまんま at 23:28 | Comment(0) | TrackBack(0) | Angular | 更新情報をチェックする

Angular2でただ追加するだけのTODOリスト

Angular2でただTODOを1行ずつ追加するだけのTODOリスト。とりあえずngModelを入力フォームに設定したけど直接取得したい。

import { Component } from '@angular/core';

export class Hero {
id: number;
name: string;
}

const HEROES: Hero[] = [];

@Component({
selector: 'app-root',
styles: [`
input[type='button']{
background:#CCC;
}
input[type='text']{
border:1px solid #CCC;
}
`],
template:`
<h1>{{title}}</h1>
<ul>
<li *ngFor="let hero of heroes">
{{hero.id}} : {{hero.name}}
</li>
</ul>
<div>
<div>
<input type="text" [(ngModel)]="addText">
<input type="button" value="追加" (click)="onClick()">
</div>
</div>
`
})
export class AppComponent {
title = 'Tour of Heroes';
heroes = HEROES;
addText: string;
onClick(){
if(!this.addText)return false;
this.heroes.push({
id: this.heroes.length+1,
name: this.addText
});
this.addText='';
}
}
タグ:Angular2
posted by ねこまんま at 21:22 | Comment(0) | TrackBack(0) | Angular | 更新情報をチェックする

ng serveでローカルサーバーが立ち上がらない

Angular2の利用でng serveで開発環境が立ち上がるようにしたのに以下のエラーがでて動かなくなった。

getaddrinfo ENOTFOUND localhost
Error: getaddrinfo ENOTFOUND localhost
at errnoException (dns.js:27:10)
at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:78:26)


立ち上がる際に以下のようにオプションを指定してあげたらちゃんと立ち上がるようになりました。

ng serve --host 0.0.0.0 --port 4201 --live-reload-port 49153

posted by ねこまんま at 20:11 | Comment(0) | TrackBack(0) | Angular | 更新情報をチェックする