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) | Ajax | 更新情報をチェックする

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) | Ajax | 更新情報をチェックする

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) | Ajax | 更新情報をチェックする

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>


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

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
posted by ねこまんま at 20:17 | Comment(0) | Ajax | 更新情報をチェックする

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) | サーバー | 更新情報をチェックする

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) | サーバー | 更新情報をチェックする

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 | 更新情報をチェックする