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

【JavaScript】JavaScript問題集に追加しました。

フロントエンドエンジニア芸人もりたけんじのJavaScript【JavaScript】JavaScript中級者の為の練習問題集287問(脱初心者へ)2016/11/5更新

フロントエンドエンジニア芸人もりたけんじのJavaScript【JavaScript】JavaScript中級者の為の練習問題集287問(脱初心者へ)2016/11/05更新


こちらの記事も更新しました。

追加したいくつか。

問 location.href’で返す文字の最後が’/’かどうかを判定する関数を定義してください。
答えはこちらの問276のとこ
問 こちら、

var obj = {a : 1}
Reflct.get(obj, "a")
//1

Reflect.getを使って値を取得しています。
obj[“a”]
//1
との違いを教えてください。
ここの282問のとこ

とか。
もうちょっと理解深めて増やしたいと思います。
でわよい週末をーーーー。

https://github.com/kenmori/javascript/blob/master/README.md

わたしもみている| Immutable Javascript using ES6 and beyond(Array)

前回ここのObjectまで読みました。

今回はArray
immutableなArray。
非破壊メソッドを使おう

pushの代わりに、
Spread Operator

let characters = ['a', 'b'];
let newCharactors = [...characters, 'c'];
console.log(newCharactors === characters)
//false
console.log(characters)
//["a", "b"]
newCharactors
//["a", "b", "c"]
//要素b以外の新しい配列を返す
const whithout = characters.filter(char => char !== 'b');
whithout
//["a"]

//要素bとcを入れ替えた新しい配列を返す
const backInTime = characters.map(char => char === 'b' ? 'c' :char);
backInTime
//["a", "c"]

//大文字にした新しい配列を返す
const shoutOut = characters.map( char => char.toUpperCase())
shoutOut
//["A", "B"]

//2つの配列を足した新しい配列を返す
let characters = ['a', 'b'];
const otherCharacters = ['d','e'];
const moreCharacters = [...characters, ...otherCharacters]
moreCharacters
//["a", "b", "d", "e"]

sort()の返り値とオリジナルの参照先は変わらない。要素順だけ入れ替える

const characters2 = ["b", "d", "a", "c"];
const sortedCharacters = characters2.sort()
sortedCharacters
//["a", "b", "c", "d"]
sortedCharacters === characters2
//true

順序を入れ替えた上で新しい配列を返すにはsliceを使う

const sortedCharacters2 = characters2.slice().sort();
sortedCharacters2 === characters2
//false
characters2
//["a", "b", "c", "d"]
sortedCharacters2
//["a", "b", "c", "d"]

なぜ新しいオブジェクトを生成する方がいいのか??
そんなに新しいオブジェクトを生成してメモリは大丈夫なの??

But that disadvantage is very small compared to the advantages.
欠点は利点に比べて非常に小さいです

One of the more complicated operations in Javascript is tracking if an object changed
JSでより複雑な操作の一つはオブジェクトが変更された場合の追跡です

Object.observe(object, callback) are pretty heavy
Object.observeは相当重たいです。
※記事が古いのか、Object.observeは今では廃止されています

if you keep your state immutable you can just rely on oldObject === newObject to check if state changed or not, this is way less CPU demanding.

もしオブジェクトの状態を不変に保てば古いオブジェクトか新しいオブジェクトかどうかのチェックは
oldObjet === newObject だけで可能だし、これはCPUへのダメージが少ない方法です

Second big advantage is code quality. Making sure your state is immutable forces you to think better of your application structure. It encourages programming in a more functional way, makes your code easy to follow and reduces the possibility of nasty bugs. Win, win, right?
第二の大きなアドバンテージはコードの品質です。
状態を確認することは不変オブジェクトがなせることです。
これはアプリケーションの構築への良い考えなのです
It encourages programming in a more functional way, makes your code easy to follow and reduces the possibility of nasty bugs.
より関数型なプログラミングを奨励します。バグを除き、コードを追いやすくするのです

Reference
Immutable Javascript using ES6 and beyond

Chrome (DeveloperTools)デベロッパーツールでJavaScript実行時エラー、処理を止めないようにブレイクポイント(使い方)編集、それをローカル保存する方法

実際にデバッグを覚えたい方への記事です。
こちらを使って。

環境
Mac、chromeです。

モチベーション
JS入りたての頃のわたしはデバッグ記事の少なさとそれをハンズオンで教えてくれる記事があまりないことに弱っていました。その頃英語記事アレルギーもありました。
実際デバッグの方法を細かく教えてもらえたらなぁ。っていう過去の自分みたいな方多いのではないかと思いました。
(今回の記事はデバッグの方法を全く知らない人向けではありませんが。。)

デバッグができるようになるとエラーに尻込みしなくなるし、時間が短縮されますよね。

今回は表題の通り
「chrome (developerTools)デベロッパーツールでJavaScript実行時エラー、処理を止めないようにブレイクポイント(使い方)編集、それをローカル保存する方法」
です。

やること
こちらをクリックしてください。gifアニメが動きます。(約2分, PC奨励)
1

こちら何をしているか写真で説明しますので先ほどのコードをご用意してブラウザ上でindex.htmlを表示させてみてください。

ハンズオン
コード上のここ
にエラーを発生させています。

chrome (developerTools)デベロッパーツールでjavascript実行時エラー、処理を止めないようにブレイクポイント(使い方)編集、それをローカル保存する方法

chrome (developerTools)デベロッパーツールでjavascript実行時エラー、処理を止めないようにブレイクポイント(使い方)編集、それをローカル保存する方法

1

chrome (developerTools)デベロッパーツールでjavascript実行時エラー、処理を止めないようにブレイクポイント(使い方)編集、それをローカル保存する方法

chrome (developerTools)デベロッパーツールでjavascript実行時エラー、処理を止めないようにブレイクポイント(使い方)編集、それをローカル保存する方法

・ファイルをロードするとコンソールにエラーが出ています。(yが未定義のようです)

chrome (developerTools)デベロッパーツールでjavascript実行時エラー、処理を止めないようにブレイクポイント(使い方)編集、それをローカル保存する方法

chrome (developerTools)デベロッパーツールでjavascript実行時エラー、処理を止めないようにブレイクポイント(使い方)編集、それをローカル保存する方法

2
・ここでshift + cmd + p押してください

chrome (developerTools)デベロッパーツールでjavascript実行時エラー、処理を止めないようにブレイクポイント(使い方)編集、それをローカル保存する方法

chrome (developerTools)デベロッパーツールでjavascript実行時エラー、処理を止めないようにブレイクポイント(使い方)編集、それをローカル保存する方法

で「sou」まで打ってパーーンっとしてみてください。

chrome (developerTools)デベロッパーツールでjavascript実行時エラー、処理を止めないようにブレイクポイント(使い方)編集、それをローカル保存する方法

chrome (developerTools)デベロッパーツールでjavascript実行時エラー、処理を止めないようにブレイクポイント(使い方)編集、それをローカル保存する方法

ソースパネルまで飛んだと思います。

3
そのソースパネル上で、
option + o 。をしてください。

ファイル検索できます。(いちいち左のツリーをクリックして探さなくていいってことです。)

chrome (developerTools)デベロッパーツールでjavascript実行時エラー、処理を止めないようにブレイクポイント(使い方)編集、それをローカル保存する方法

chrome (developerTools)デベロッパーツールでjavascript実行時エラー、処理を止めないようにブレイクポイント(使い方)編集、それをローカル保存する方法

余裕があったらソースパネル上で、
shift + cmd + o を押してみてください。
関数が出てくると思います。もしあらかじめffがおかしいと疑えてたらff()のところまでジャンプできます。

main.jsのエラーでしたのでmainまで打てば行けます

赤くなっています。。秋ですね。。

chrome (developerTools)デベロッパーツールでjavascript実行時エラー、処理を止めないようにブレイクポイント(使い方)編集、それをローカル保存する方法

chrome (developerTools)デベロッパーツールでjavascript実行時エラー、処理を止めないようにブレイクポイント(使い方)編集、それをローカル保存する方法

つまり1 + xと加算したかったのを
yを記述したせいで、
スコープ内にもyがない、、
辿っていったスコープ内にもない、、
グローバルスコープにもyがない、、
yは未定義。
とされてここで処理がとまっているのです。
ここをどうにか直したい。
どう直せばいいか分かっている場合、
ファイルに戻ってxと書き直すのもいいですが、

こちらが直ってもこの先にもし、
なんらかのエラーがあった場合また処理が止まります。

ここで編集して実行、反映させることで

・その先のエラーがあるかないかまで見れる。
・違う変数や処理を追加 or 削除などその場で試せる。
・ここでの修正をローカルファイルに反映することができる。

のですね。

4
ブレイクポイントを仕込んでください。赤くなっている箇所に行番号をクリックです

chrome (developerTools)デベロッパーツールでjavascript実行時エラー、処理を止めないようにブレイクポイント(使い方)編集、それをローカル保存する方法

chrome (developerTools)デベロッパーツールでjavascript実行時エラー、処理を止めないようにブレイクポイント(使い方)編集、それをローカル保存する方法

ブレイクポイントはその行で実行を止めて、スコープの範囲の変数に何が代入されているか、何を参照しているか確認できます。
※実際コンソールタブまで移動してcondole.log(y)とすればundefinedが返ってくると思います

話戻して、

5

yをxと書き換えます。このように
※リロードしないでくださいね。

chrome (developerTools)デベロッパーツールでjavascript実行時エラー、処理を止めないようにブレイクポイント(使い方)編集、それをローカル保存する方法

chrome (developerTools)デベロッパーツールでjavascript実行時エラー、処理を止めないようにブレイクポイント(使い方)編集、それをローカル保存する方法

6

編集し終わったらsaveしてください(cmd + s)
するとファイルの背景がピンクになります(gifアニメーションではなりませんでしたが)

chrome (developerTools)デベロッパーツールでjavascript実行時エラー、処理を止めないようにブレイクポイント(使い方)編集、それをローカル保存する方法

chrome (developerTools)デベロッパーツールでjavascript実行時エラー、処理を止めないようにブレイクポイント(使い方)編集、それをローカル保存する方法

7

でここ押してください。(したの方で青くなっている矢印の横にある「step into next function」「関数の中に入って行って、一行一行処理を進めるボタン」です)chrome (developerTools)デベロッパーツールでjavascript実行時エラー、処理を止めないようにブレイクポイント(使い方)編集、それをローカル保存する方法

すると処理が進んでscopeの変数が7を返しているのがパネルからわかります。ローカル変数がxを参照して期待する通り、1 + x として加算されたのですね。

chrome (developerTools)デベロッパーツールでjavascript実行時エラー、処理を止めないようにブレイクポイント(使い方)編集、それをローカル保存する方法

chrome (developerTools)デベロッパーツールでjavascript実行時エラー、処理を止めないようにブレイクポイント(使い方)編集、それをローカル保存する方法

8

実際ホーバーしてみてください。代入されていることが確認できます。

chrome (developerTools)デベロッパーツールでjavascript実行時エラー、処理を止めないようにブレイクポイント(使い方)編集、それをローカル保存する方法

chrome (developerTools)デベロッパーツールでjavascript実行時エラー、処理を止めないようにブレイクポイント(使い方)編集、それをローカル保存する方法

先ほどのボタンを推し進めていくとconsole.logを実行する箇所がありますね。
先ほどまではここまでたどり着きませんでした。
なぜならエラーで処理がとまっていたからです。

このように処理を正しく記述、ブラウザ編集することで
その実行を止めないで進めることができます。

chrome (developerTools)デベロッパーツールでjavascript実行時エラー、処理を止めないようにブレイクポイント(使い方)編集、それをローカル保存する方法

chrome (developerTools)デベロッパーツールでjavascript実行時エラー、処理を止めないようにブレイクポイント(使い方)編集、それをローカル保存する方法

9

consoleタブに移動してコンソール出力をみてください。
7とあるはずです。

その先もエラーがなく処理を終えたみたいです。

10

先ほどの編集したJSファイルをセーブしましょう。

chrome (developerTools)デベロッパーツールでjavascript実行時エラー、処理を止めないようにブレイクポイント(使い方)編集、それをローカル保存する方法

chrome (developerTools)デベロッパーツールでjavascript実行時エラー、処理を止めないようにブレイクポイント(使い方)編集、それをローカル保存する方法

エディターの該当箇所もそれを反映しているはずです。
6_13

11
リロードすると。。

chrome (developerTools)デベロッパーツールでjavascript実行時エラー、処理を止めないようにブレイクポイント(使い方)編集、それをローカル保存する方法

chrome (developerTools)デベロッパーツールでjavascript実行時エラー、処理を止めないようにブレイクポイント(使い方)編集、それをローカル保存する方法

エラーが消えました。(ブラウザ上の編集がエディタのコードに反映されて)

※ローカルで編集しているファイルと実際の実行ファイルが同じ参照先にあれば同期されます。
※ミニファイやwebpackで書き出したファイルは大元のファイルを修正する必要が有るかもしれませんね。

Chrome (DeveloperTools)デベロッパーツールでJavaScript実行時エラー、処理を止めないようにブレイクポイント(使い方)編集、それをローカル保存する方法
でしたーー

実際のコード(エラーがでるコード)をこちらにあげておきますので、
ローカルにダウンロードして、確かめてみてくださいー。

ありがとうございましたーーー

ではーーー

JavaScriptと人間のハーフ始めました

JavaScriptと人間のハーフ始めました

「JavaScriptと人間のハーフ」始めました

ここ

わざわざここに見に来なくても更新されたことが分かるように生まれたものです。

ひっそりやります。。
でわー

【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」

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

【Aurelia】ドキュメントのTodoアプリをなぞったけど

ざわざわしているようなのでこういうトラブルありましたが

できました。

【Aurelia】ドキュメントのTodoアプリをなぞったけど

ここ

どのフレームワークもそうなのですが、
ここからですよね笑

データをどこが持つかどうやって渡すかどうやって更新するか、ルーティングや非同期や、
とか、
最初だけ簡単に作らせておいて「できるかも」て思わせて結構辛いの知っていますよわたしは。。

キャバ嬢だキャバ嬢

作っていて思ったのは
Angular2のチームだった人が先導して作っていることもあってdata-bindingとか、
attributeに書いちゃうとことかAngularに似ていますね

似てますけどなんかコードがすっきりしたような気がします。
Angularより学習コスト低い気がするのは簡単なTodoアプリだからでしょうか??

本格的に作らないとまだわかりませんが。。

もうちょっと能動的に作れるようになるまで勉強が必要ですね。

これを機にsample集つくりながら学ぼうかしら。。

ではまたーーー

【 関連記事 】

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

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

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

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

他のReact記事

フロントエンド記事

github

qiita

【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記事

フロントエンド記事

エンジニアにとって大事なこと

今やらなきゃいけないことと、将来に備えてやらなきゃいけないことと、過去の知識を更新しなきゃいけないことと、辛ラーメン5袋入りを買わなきゃいけないこと。

どれもエンジニアにとって大事なこと。
どれか一つ欠けてもだめ