タグ別アーカイブ: フロントエンドエンジニア芸人

【React】子供のメソッドを親から呼びたい!!ref/refs使ったら「Uncaught Invariant Violation: addComponentAsRefTo(…): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component’s `render` method, or you have multiple copies of React loaded」

親のコンポーネントからレンダー内で読み込んでいる子コンポーネント内のメソッドを呼びたいのですが、
上のようなエラー出ることがあります。
続きを読む

【React】以前REACT × FLUX × ES6 LINE風チャットを修正しました。

fafa

こちらなのですが、動かないとのご指摘を受けて、修正しました。

修正内容

https://github.com/kenmori/React-ES6-Flux-Playground/pull/75/commits/f1b343b6797ced8f43f7c5fef01fc50ce16d8bda

リプレイスしました。

こちら

概要
・reactを最新バージョンに変更
・react-dom提供のReactDOM.findDOMNodeに変更
・node-devモジュールのバージョンによるエラーを修正
・package.jsonを修正
・serverタスクのgulpfileを修正

です。
ソースは
こちら

ご指摘ありがとうございました。

【 併せて読みたい 】

【REACT】REACTの動きを理解したい人の為の最小サンプル

【REACT入門】過去のREACT初心者の自分にREACTのPROPSとSTATEの違いを簡単に説明してあげたい

【REACT × ES6 × FLUX】を手っ取り早く学びたい人の為にサンプル作ったよ【3の倍数と3が付くときだけ猫になるCOUNTER】

REACT × FLUX × ES6 [WIP]LINE風チャット

他のReact記事

フロントエンド記事

github

qiita

【React】React15.3.0からfindDOMがReactから切り離されたのでこのようなエラー出た場合「Uncaught TypeError: _react2.default.findDOMNode is not a function」

Reactのメソッドから切り離されたと思われるコミット
https://github.com/facebook/react/pull/5832/commits/2e1fb4b52972711199d5065625251642f7d75c29
続きを読む

【React】エラー「ReactDefaultInjection.js:53Uncaught TypeError: Cannot read property ‘toUpperCase’ of undefined」

このようなエラーがでたら。
reactの読み込んでいるバージョンが違う可能性があります。
https://github.com/reapp/reapp/issues/55

package.jsonをみてください
“react”: “^15.3.0”,
“react-dom”: “^15.3.0”,
このようにバージョンを合わせる必要があります。
もし、
“react”: “^15.3.0”,

このようにproject直下の
package.jsonが1つしか書いていなくて、
jsファイルの方で
react-domをimportしていた場合、
node_modulesはそのプロジェクトファイルにreact-domがnpm iされていないばあい
階層を登って見つけようとします。
そして違うバージョンのreact-domを呼びにいくかもしれません。

あとリンク先のようにrender内のdomの返し方に問題があるみたいです

【 併せて読みたい 】

【REACT】REACTの動きを理解したい人の為の最小サンプル

【REACT入門】過去のREACT初心者の自分にREACTのPROPSとSTATEの違いを簡単に説明してあげたい

【REACT × ES6 × FLUX】を手っ取り早く学びたい人の為にサンプル作ったよ【3の倍数と3が付くときだけ猫になるCOUNTER】

REACT × FLUX × ES6 [WIP]LINE風チャット

他のReact記事

フロントエンド記事

github

qiita

【JavaScript】yahooUIのようなフリックでタブ切り替えを作ったこれをReactに置き換える話

1年ぐらい前に「yahooUIのようなフリックでタブ切り替え」を作ったのですが、
日の目をみることがなかったのでもう一度作り直した

【フロントエンドエンジニア芸人】yahooUIのようなフリックでタブ切り替えを作ったこれをReactに置き換える話

【フロントエンドエンジニア芸人】yahooUIのようなフリックでタブ切り替えを作ったこれをReactに置き換える話

これ
(スマホで見てください。Android2,iOS6まで対応)
いろいろキモいところあるのですが、、

Query以外のライブラリを使っていなくて、
フリック実装にてこずったりした。
レガシーなブラウザにフリックを効かすとことか。

仕様は、
・スマホのデバイスの幅に対応
・Android2、iOS6から対応
・オリエントチェンジに対応
・タブ内の文字は可変(何文字でも可)
・タブの数も可変
・ユーザーがフリックかタップ押下時にタブを真ん中に位置させる
・タブの列はスクロールできる
・アクティブなタブが全体のタブの最後だったら最初に戻る
・画面遷移時に両方の矢印をフェードインフェードアウトする
・フリック/タップ時矢印をフェードインフェードアウトする。

大変だった思い出があります。

今回は当時jQueryで書いていたこれをどうにかReactに置き換えようと思っている。

github

jsのソース

でわまたー

他のJavaScript記事

他のReact記事

Angular2 for TypeScriptのお勉強-sample(12)【ngStyleとstyle属性にbindingの違い】

フロントエンドエンジニア芸人もりたけんじのAngular2とTypeScriptのお勉強

フロントエンドエンジニア芸人もりたけんじのAngular2とTypeScriptのお勉強

チュートリアルでいうここここ読んでいます。

style属性をbindingする方法とngStyleとの違いは何なのか。

これは前回のclass属性をbindingするのとビルドインdirectiveのngClassとの違いと似ていますね。

今回のコード

のhtmlとtsファイルに書き起こしました。

Style属性をbinding

<div [style.font-size]=”isSpecial ? ‘x-large’ : ‘smaller'”>This div is x-large.</div>

「””」のテンプレートステートの中で値をセットしています。

この方法だと2、3つとなった場合htmlを汚してしまいます(class使えよなのですが、、)
ビルドインdirectiveのngStyle

こちらのbild-in-directiveの方ngStyleは同時に多くのinline-styleを定義したい場合有効なのですね。

下の様に関数で呼び出して返り値でtrueなstyleを有効にしている。

htmlはこうで、
<div [ngStyle]=”setStyle()”> This div is italic, normal weight, and extra large (24px)</div>

componentの方は(インデント整ってなくてごめんなさい。なんかできない)

export class ChildComponent {
canSave:boolean = true;
isUnchanged: boolean = false;
isSpecial: boolean = true;
setStyle(){
let styles = {
‘font-style’: this.canSave ? ‘italic’ : ‘normal’ ,
‘font-weight’: this.isUnchanged ? ‘bold’ : ‘normal’,
‘font-size’ : this.isSpecial ? ’24px’ : ‘8px’,
};
return styles;
}
}

のようにして、

三項演算子で値をsetしていますね。

ngClassの回と同じですね。

でわまた〜〜

他のAngular2記事

他のjavascript記事

【React × ECMAScript2015】Object.assign,Array.includesがiOS8.1.1、Androidで使えない!ES6(ECMAScript2015)でのpolyfillの意味と使い方

今日Reactでmodalを作っているとsetStateする値をオブジェクトそのままで保持しておく必要があって、さらにもし他のstateが更新されたら一緒にsetStateをする必要があった。

objectとobjectをマージしなくてはならなかったし、objectを非破壊メソッドでコピーしておかなければならなかった。

この2つができるObject.assign
なのですが、
これがiOS9からで8やAndroidには対応していない。
じゃあJSON.parse(JSON.stringify(obj))でコピー作ろうと思ったんだけど、
調べるとfunctionやundefinedをkey値にしてはいけないなどいろいろあるみたい。そもそもオブジェクトコピーするだけでJSONオブジェクトってなんかあれですよねってことで、
やはりObject.assign使いたい!

polyfillの意味は壁の穴を埋めるための物のようです。まさにブラウザのバージョンの差異を埋めるためのもの。

でES6でどこにどう書くんだと思った。

スクリーンショット 2016-07-05 23.53.09

デモ

 

・constructor内にpolyfillを入れる(初期化時にObjectがもっているかどうか判定して持っていなかったらfunctionを代入している)

 

iphoneをMacにつないでwebインスペクタのコンソールでObject.assignが使えたらOK

よかったね!
でわまたーーーー

Angular2 for TypeScriptのお勉強-sample(11)【class,NgClassの使い方】

フロントエンドエンジニア芸人もりたけんじのAngular2とTypeScriptのお勉強

フロントエンドエンジニア芸人もりたけんじのAngular2とTypeScriptのお勉強

チュートリアルでいうここを読んでます

class,NgClassの使い方

class=”isSpecial”

[class.isSpecial]=”isSpecial”

[ngClass]=”isSpecial”の違いについて。
下の今回のコードを見て貰うと一目瞭然なのですが、
今回のコード

例えば

<div class=”pl30  fs20 w100 block” >は通常のclass付与

<div class=”pl30  fs20 w100 block” [class.primary]=”isPrimary”>

これはclass名primaryにisPrimaryがtrueの際付与されます。

この場合どうでしょうか

<div class=”block” [class.block]=”!isblock”>

もしisblockがtrueを返して!でfalseになるとclass=”block”の方は適応されません。

簡単にいうとclass=””属性という書き方は[class.something]という書き方に負けるということですね

NgClassは何に使えるのかというとチュートリアルを見ると、

複数のclassを管理するといいとのことです。

<div [ngClass]=”setClass()”>のようにすると、

componentの方のメソッド定義で

setClass(){
let classes = {
saveable: this.canSave,
modified: !this.isUnchaned,
special: this.isSpecial
}
}

のようにsaveable、modified、specialなど任意の数だけbooleanで制御できてこういう場合はtrueにして返す、みたいなことができるのですね、

classのtoggleなどは1つのclass、

先程の

<div  [class.block]=”!isblock”>

のような方法がgoodらしいです。

詳しくは

今回のコード

のapp.childComponent.tsとapp.childComponent.htmlの関係性を見て頂ければ〜

今日はclassでしたー

でわまた〜〜

前のAngular2記事へ

次のAngular2記事へ

他のAngular2記事

他のjavascript記事

【cssnextをすぐ触りたい】2016年夏。cssnextがgulpで動かしてざっくり理解する

フロントエンジニア芸人【cssnextをすぐ触りたい】2016年夏。cssnextがgulpで動かしてざっくり理解する

【cssnextをすぐ触りたい】2016年夏。cssnextをgulpで動かしてざっくり理解する


cssnextとは」というのは他の良記事にお任せします。
とにかくよくわからないけど触っとこう、という説明書読まない派の為に動くものを外国の方のgithub見てこれを作りました。(gulpfile以外ほぼまま)

以下cssnextに対しての現時点での理解。(勉強つう)

PostCSS-cssnext(PostCSSのプラグイン群)っていうプラグインのパッケージ名がcssnextで、ブラウザ間で解釈が違うプロパティ(-webkit-などのプリプロセッサー)や、まだ未実装なプロパティをトランスパイルすることで次世代のCSSを先取りできる。ブラウザの実装を待たなくていい。(ECMAScript2015をbabelでトランスパイルしてレガシーなのにも対応できるように)、自分で定義したプロパティをSassのように変数にして使えたり、ネストも使えたりできる。

CSSにそれらの「nextの記法」を直接書いて、トランスパイルして、生成されたCSSを使う。

例1

したの様にrootに「カスタムプロパティ」をCSS内で定義(今のところの決まり事)して、

:root {
–fontSize: 1rem;
–mainColor: #12345678;
–highlightColor: hwb(190, 35%, 20%);
}

–[customePropertyName]と書く。

var()で値の箇所で呼び出す。calcは返された値を計算してくれるメソッド

body {
color: var(–mainColor);

font-size: var(–fontSize);
line-height: calc(var(–fontSize) * 1.5);
padding: calc((var(–fontSize) / 2) + 1px);
}

トランスパイルされた出力

body {
color: rgba(18, 52, 86, 0.47059);

font-size: 16px;
font-size: 1rem;
line-height: 24px;
line-height: 1.5rem;
padding: calc(0.5rem + 1px);
}

例2
定義

/* custom selectors */
@custom-selector :–heading h1, h2, h3, h4, h5, h6;
:–heading { margin-top: 0 }

custom-selectorというプラグインで–headingというセレクタを定義、値をh1,h2、、としている

:で呼び出し、使っている。(custom selectorsは当然var()ではない。)

生成されるCSS

/* custom selectors */
h1,
h2,
h3,
h4,
h5,
h6 { margin-top: 0 }

と理解しました。

cssnextのplayground

http://cssnext.io/playground/

cssnextの記法

http://cssnext.io/features/

でわまたーー

他のフロントエンド記事

【React】react-modalの簡単実装するための9つの手順とハマりポイント

業務でmodalを実装したのですが、ハマったところがありました。
で、それにまつわる記事がなかったので書きます

チュートリアル

作るモーダルは
これ

githubにReact-Sampleとしておいています。ここ
他のサンプルと混在していて見にくいですが。。

作り方
1. npm i -D react-modal
プロジェクトのnode_modulesにインストールしてください

2. 親コンポーネントでreact-modalを読み込む
ここ

import Modal from 'react-modal';

3 トリガーになるidを付与、button設置
※WPエディタがhtmlタグと認識してしまうので画像で表示しています
ここ


<h2 id="modal">react-modal</h2>

			<button className="btn btn-primary" onClick={this.openModal}>open modal</button>
			<Modal><button onClick={this.closeModal}>Close<button></Modal>

//ここでのcloseボタンの位置に注意してください。ここで更に下、子コンポーネントにthis.closeModalを渡すことはできません

4 stateを管理(初期はOpenではないのでfalse)
ここ

this.state = {
	modalIsOpen: false
}

5 constructorでbind
ここ

this.openModal = this.openModal.bind(this);
this.closeModal = this.closeModal.bind(this);

6 this.openModalとthis.closeModalを実装
//setStateでbooleanを渡すだけ
ここ

openModal() {
	this.setState({modalIsOpen: true});
}

closeModal() {
	this.setState({modalIsOpen: false});
}

7.Modalのpropに設定を渡す
ここ

<Modal isOpen={this.state.modalIsOpen} onAfterOpen={this.afterOpenModal} onRequestClose={this.closeModal} shouldCloseOnOverlayClick={true} style={customStyles}>
//ここで最低限必要なのはisOpenだけです。
//あとはご自由に

7_2 スタイルをカスタムしたい場合styleにcustomStyleを渡す
//render内です。
ここら辺

const customStyles = {
	overlay : {//ovelayの色を変える
	background: 'rgba(0,0,0, .4)'
},
content : {
	top : '50%',
	left : '50%',
	right : 'auto',
	bottom : 'auto',
	marginRight : '-50%',
	transform : 'translate(-50%, -50%)',
	width : '72%'//openしているコンテンツの幅を変える
	}
};

8、モーダルを実装しているコンポーネントのclassより外に下記
ここらへん

const appElement = document.getElementById('content');
Modal.setAppElement(appElement);

わかりずらかったらチュートリアルのここ見てね

9 おしまい
おしまいです。どうでしょうか??

はまりポイント
ハマったところは
3の閉じるボタンの位置でした。。
これはModalコンポーネントの直下に置かなくてはならず、、これをModalコンポーネントの子コンポーネントの中で使うことが
できませんでした。
子コンポーネントにpropsで渡しているんですけどいけなかった。
子コンポーネントではいろいろなボタンがあり、そのボタンの状態を管理して、「今の状態でcloseする 」ということが
したかったのですが、そこにはcloseModalは実装できず、

ここにもかいてある「subComponentは持てない」って。

ではModal直下にcloseを置くといろいろなボタンの状態を変えるとモーダル下のrenderが走ってしまう。
(それはshouldComponentUpdateで制御しなくてはだめ)
でした。

また
closeModal内で他の関数を呼べなかった気がする。。これは多くの時間を割いて調査していませんが、、
わかっちゃえば簡単なのですが、地味にやられました。

でわ〜〜〜

【 併せて読みたい 】

【React】Reactの動きを理解したい人の為の最小サンプル

【REACT入門】過去のREACT初心者の自分にREACTのPROPSとSTATEの違いを簡単に説明してあげたい

【REACT × ES6 × FLUX】を手っ取り早く学びたい人の為にサンプル作ったよ【3の倍数と3が付くときだけ猫になるCOUNTER】

REACT × FLUX × ES6 [WIP]LINE風チャット

他のReact記事

フロントエンド記事