「フロントエンドエンジニア」タグアーカイブ

【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

https://cssnext.io/playground/

cssnextの記法

https://cssnext.io/features/

でわまたーー

他のフロントエンド記事

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

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

チュートリアル

作るモーダルは
これ

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

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

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

[code language="javascript"]
import Modal from 'react-modal';
[/code]

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

[code language="javascript"]

<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>
[/code]

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

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

[code language="javascript"]
this.state = {
modalIsOpen: false
}
[/code]

5 constructorでbind
ここ

[code language="javascript"]
this.openModal = this.openModal.bind(this);
this.closeModal = this.closeModal.bind(this);
[/code]

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

[code language="javascript"]
openModal() {
this.setState({modalIsOpen: true});
}

closeModal() {
this.setState({modalIsOpen: false});
}
[/code]

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

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

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

[code language="javascript"]
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しているコンテンツの幅を変える
}
};
[/code]

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

[code language="javascript"]
const appElement = document.getElementById('content');
Modal.setAppElement(appElement);
[/code]

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

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袋入りを買わなきゃいけないこと。

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

Angular2 for TypeScriptのお勉強-sample(10)【NgForm and template reference variables、{{}}と[]、""の違いとか】

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

今日はちょっと長い。

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

submitでわたされるのはngFormというオブジェクトみたいです。

template側

 

<form #theForm="ngForm" (ngSubmit)="onSubmit(theForm)">
<label for="name">Name</label>
<input required ngControl="firstName" [(ngModel)]="current.firstName">
{{current.firstName}}
<button type="submit" [disabled]="!theForm.form.valid">submit</button>
</form>

太字で示したtheFormとはHTMLFormElementです。

ngFormとはそのHTMLFormElementをNgFormとしてラップしたAngularのビルドインディレクティブです。

上記のコードはonSubmitとしてsubmit時theFormを渡しています。

Component側
export class ChildComponent {
onSubmit(formValue){
console.log(formValue);
}
}
で受け取り、

console出力してみました。
スクリーンショット 2016-06-25 9.37.01

template側の記述に「ngControl="firstName" 」としているところがあると思います。

inputにng-controls="firstName"とすると
そのオブジェクトから参照できます

スクリーンショット_2016-06-25_9_45_04

 

Input and output properties

This section concentrates on binding to targets, which are directive properties on the left side of the binding declaration. These directive properties must be declared as inputs or outputs.

bindingへのターゲット(=の左側にあるdirectiveプロパティ)は出力か入力として宣言されなければならない

データバインディングターゲットとデータバインディングソース

コード上「=」の左側にあるのがデータバインディングターゲット。

それらは[]か()、もしくは[()]される。

コード上「=」の右側にあるのがデータバインディングターゲット。

それらは""か{{}}される必要がある。

データバインディングソースは自動的にbindingされているので、特別にdirectiveのメンバーにtemplate expression({{}}。二重ブラケット)やstatement(""。二重符)の中でアクセスする必要はない

ちょっと脱線してAngular2によるデータの流れ

データの流れは3種類。
チュートリアルのここをよんでいます。

1.One-way from data source to view target(データソースからビューターゲットへの一方通行)

・{{expresson}}
・[target] = "expression"
・bind-target = "expression"

bindingできるタイプ
Interpolation
・・Property
・Attribute
・Class
・Style
※PropertyとAttributeの違いが分からない方はこちら
※Interpolationというのはtemplate文中で{{}}で描画しているところですかね。それが直接component propertyを参照している
Interpolationは最初にAngular

2.One-way from view target to data source(ビューターゲットからデータソースへの一方通行)

・(target) = "statement"
・on-target = "statement"
ここで出てくるstatementと上のexpressionの違い
template-expressionのターゲットはhtml要素かcomponentか、directive。{{1+1}}。インターポレーションの中にかいた「1+1」の部分ね。
これらは評価して値をターゲットに返していますね。以前の記事参照

template-statementはここによると
componentやディレクティブ、要素にbindeingされたイベントに対応する。

例(event)="statement"
ここの左部分でeventをハンドリングするってことかな。

「この方法以外でイベントに対応するのは意味がない」と書かれています。

Responding to events is the other side of Angular's "unidirectional data flow". We're free to change anything, anywhere, during this turn of the event loop.
イベントの定義はAngularのdirective data flowの管理外。イベントループの間、どこでも自由に変えられる。

template expressonと statementの解析は異なる。
statementの方はJavaScriptのような「=」の代入や「;」や「,」が使える
だがstatement内で下記は使えない
・new
・increment and decrement operators, ++ and --
・operator assignment, such as += and -=
・the bitwise operators | and &
・the template expression operators

template statement は window、document、console、Math等の参照はもっていない。

(click)="onSave()"
こう書かれていたら、onSaveはcomponentのインスタンスメソッドにdata-bindingされているメソッドです。
それは
昨日の記事のようにobjectを渡すことができる:see

3.Two-way

・[(target)] = "expression"
・bindon-target = "expression"

※後日postします。

今日は長かったね〜。疑問点追っていったらこうなった。。

今回のコード

でわまた〜〜

前のAngular2記事へ

次のAngular2記事へ

他のAngular2記事

他のjavascript記事

Angular2 for TypeScriptのお勉強-sample(9)【inputの入力値を扱う。Referencing a template reference variable】

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

input値をbuttonに仕込んだイベントから参照、イベントに渡す方法です。
チュートリアルのここです。

#として設定

<input #phone placeholder="phone number">
<button (click)="callPhone(phone.value)">call</button>

ref-prefixとして設定

<input ref-fax placeholder="fax number">
<button (click)="callFax(fax.value)">Fax</button>

input要素に#phoneとすることでbutton要素がphoneへの参照を可能にしています。
ref-faxもやはりbutton要素からfaxへの参照を可能にしています。

上記のことは同じ要素か、兄弟要素か、子要素に対してできるようです。

試してみたのがこちら

<button ref-oneself (click)="callOneself(oneself.value)" value="it's me!">it's me!</button>
自分自身のvalueを参照しています。

コンポーネント側

export class ChildComponent {
callPhone(value){
alert(value);
}
callFax(value){
alert(value);
}
callOneself(value){
alert(value)
}
}

なるほどですねーー。

今回のコード

でわまた〜〜

前のAngular2記事へ

次のAngular2記事へ

他のAngular2記事

他のjavascript記事

Angular2 for TypeScriptのお勉強-sample(6)【classの置き換え,override】

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

classを修正するのはよくするところなのでそこらへん。

チュートリアルのここ見ながら確認

今回やっていること

・普通にclassとして要素に記述する
・それをリセットして反映させる[class]
・メタデータにstylesとして子directiveのstyle制御
・子directiveをtemplateUrlとしてhtmlファイルで管理する

app.childComponent.html

<nav class="navbar-fixed"><span class="">Contacts</span></nav>

app.component.ts
@Component({
selector: 'contacts-header',
templateUrl: `./app/app.childComponent.html`,
styles: ['.navbar-fixed { position:fixed; }']
})
export class HeaderComponent {
colorBlue: string = "colorBlue";
constrctor (){
}
}

なんてことないですが、ちょっとずつ確認してこーと思います

今回のコード

でわまた〜〜

次のAngular2記事へ

他のAngular2記事

他のjavascript記事

Angular2 for TypeScriptのお勉強-sample(5)【ngClass,*ngIf,directives】

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

ngClass,*ngIfはよく使う。ので最初に押さえておきたい。。

 

今回やったこと

・子component(directives)として親で描画

・クリック時にisCheckedを判定してfalseだったら子componentをhide

・isCheckedによってスタイルとテキストを変える

import { Component } from '@angular/core';
import { ChildComponent } from './app.childComponent';
import { Ngif } from 'angular/common';

@Component({
selector: 'my-app',
template: `
<h1 style="height:45px">WIP</h1>
<div [style.color]="isChecked ? '#e3e3e3': 'red'">{{isChecked ?'now is true' : 'now is false'}}</div>
<child-component *ngIf="isChecked"></child-component>
<input type="checkbox" [(ngModel)]="isChecked" />
{{isChecked}}
`,
directives: [ChildComponent]
})
export class AppComponent {
isChecked:boolean;
constructor(){
this.isChecked = !this.isChecked;
}
}

・サブツリーを削除する

今回のコード

でわまた〜〜

次のAngular2記事へ

他のAngular2記事

他のjavascript記事

Angular2 for TypeScriptのお勉強-sample(4)【双方向バインディング】

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

Angularを使い始めてこれが一番驚いた記憶あるのですが、Angular2ではどのように書くのかと思い
チュートリアルのここらへん読みました。というか多分ここのページが全てだと思うので今後ここのやつ一通りやりたいと思います。

input内に入力するとその場でdirtyチェック?走ってリアルタイムに書き出されるのはAngularでもそうでしたが、
ngModelを[(ngModel)]="name"として定義するのですね。

また(click)="save($event)"としてクリック時$eventを渡すのですね($を書き忘れてなんでだってなりました)

今回のコード

でわまた〜〜

次のAngular2記事へ

他のAngular2記事

他のjavascript記事

Angular2 for TypeScriptのお勉強-sample(3)【clickしたら挨拶が変わるtoggleClick】

今日2回目の更新で、いっきにこのまま月曜まで一人ハッカソンやろうかな。今年最初の猛暑日みたいです。

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

こういうのみたりこういうのみたりしてました。

なるほどなと思ったのは、

今回下のようなコードかいたのです。
これはclickしたらコンバンワかこんにちわを判定して変えるものです。

@Component({
selector: 'my-app',
template: `<h1>{{greeting}}</h1><div>
<button (click)="getGreetingEvening()">click</button></div>    `
})
export class AppComponent {
greeting: string;
constructor(){
this.getGreeting();
}
getGreeting(){
this.greeting = "ohayou";
}
getGreetingEvening() {
if(this.greeting == 'ohayou'){
this.greeting = "konbanwa";
} else {
this.greeting = "ohayou";
}
}
}

onClick属性でやっていたら動かなかったのですがみてのとおり(click)としなくてはいけないのですね。
あと2回目ででてきたアプリケーションロジックには何も書きませんでしたが、今回templateにアクションごとに描画させたくて
greetingを変えることをやってみました。
ReactでいうrenderのJSXですねtemplateは

今回のコード

でわーまたー

次のAngular2記事へ

他のAngualr2記事

他のjavascript記事

Angular2 for TypeScriptのお勉強(2)

前回からやや日が経ちましたが、
わたしのAngular2への想いは毎日のお昼ご飯ぐらい変わりません!(結構変わる)

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

これにいこうとおもっていて。ちょっと予習もかねてお勉強

今回はよく記述することになるあそこが何しているかチュートリアルの「Step 2: Our first Angular component」から読んでいく

よく書くこれ。
@Component({})
export class AppComponent {}

これが何しているのか。なんですぐ下にclassを記述するのか。。
以下チュートリアル読んだメモ書き。
-------------------------------

デコレーターファンクション

@Component({
//メタデータ
selector : ‘my-app’,
template: ‘<h1>ふぁふぁふぁ</h1>'
})
export class AppComponent {} ←componentクラスにデコレーターファンクションを適応させている

メタデータはAngularにcomponentのつくり方と使い方を教えている

{
selector : ‘my-app’ ←このcomponentの要素は’myapp’と命名されている
//htmlがこのセレクターを読み込んだ時、AngularはAppComponentのインスタンスを描画させる
template : ‘

’ //componentのHTMLの拡張されたtemplateでAngularにこのcomponentの描画を教えている
}

//export class AppComponent{}←アプリケーションロジック(このcomponentの振る舞い)を書けるが今回は描画だけ。

自分へのメモをそのままブログにしてすみません。

今回のコード
ふぁふぁふぁにしただけ。

でわまた〜〜

次のAngular2記事へ

他のAngular2記事

他のjavascript記事

「特定の値以外の値」を返す

googleで表題の様なキーワードで探したら見当たらずなのでページ作りました。
下の用にfilterとsliceでなんとかします。
非破壊メソッドを使ってnumを壊さないようにしています。

あと全然関係ないけどQiitaにリツイートされたので嬉しかったので張っておきます。

「特定の値以外の値」を返すコード

[code lang="javascript"]

var num = [0,1,2];
//任意の値を返す関数
function select(num,i){
return num.slice(i)
};

//任意の値以外を返す関数
function unselect(num, i){
var selected = num.filter(function(num, inde){
return inde !== i
});
return selected
}
select(num, 2);
//[2]

num
//[0, 1, 2] 壊れていない

unselect(num, 1)
//[0, 2]

num
//[0, 1, 2] 壊れていない
[/code]

【ES6】適当に試したり。正規表現とか

全コード

[code lang="javascript"]

function getKey(k) {
return `${k}`;
}

const obj = {
id: 5,
name: 'San Francisco',
[getKey('enabled')]: true,
};

console.log(obj)
///////////////////////////

function f(x, ...y) {//ここで受け取らない分が配列の要素としてyになる
// y is an Array
console.log(y)//["hello","true"]
return x * y.length;
}
const r1 = f(3, "hello", true) == 6
console.log(r1);//true

//////////////////////////////

function f(x, y, z, t, p) {//インデックス順に受け取る
console.log(z);
return x + y + z;
}
// Pass each elem of array as argument
//const arry = [1,2,3,5,6];
//f(...arry) == 6
//or
f(...[1,2,4]);

///////////////////////////////

let fibonacci = {
[Symbol.iterator]() {
let pre = 0, cur = 1;
return {
next() {
console.log([pre, cur] = [cur, pre + cur]);
return { done: false, value: cur }
}
}
}
}

//////////////////////

let [a, b, c] = []
console.log(a,b,c);
typeof b

function getSomething(){
return {
first: 1,
second: 2,
third: 3
}
}

var { first, second, third } = getSomething();
console.log(first)

console.log("repeat".repeat(2));

console.log(["morita","kenji","fafafa"].findIndex(x => x == "fafafa"))

console.log(["A","B","C"].map(x => Array.of(x)));

console.log(['a', 'b', 'c'].fill('kenji', 1, 2));

const i = [3, 0, 6, -1].find(x=> x < 0);
console.log(i)

function* idMaker(){
var index = 0;
while(true)
yield index++;
}

const gen = idMaker();
console.log(gen)
////////////////////////////

const str = "わたしの名前は「もりた」です。あだなは「もりけん」です";

const re = /「.*?」/ig;

const myRe=/ken*/g;
const str2 = "fafakenfafkenji";
let array;
while ((array = myRe.exec(str2)) !== null) {
let msg = array[0] + " を見つけました。";
msg += "次のマッチは " + myRe.lastIndex + " からです。";
console.log(msg);
}

const str3 = "<img src='fafa.com'>"
const str4 = "<p>"
const reg2 = /<(\S+)(\s+.+)?>/;
const reg3 = /<(?:\S+)(?:\s+.+)?>/;
const re2 = str3.match(reg2);
const re3 = str3.match(reg3);
const re4 = str4.match(reg2);
console.log(re2);console.log(re2[0]);
console.log(re3);console.log(re3[0]);
console.log(re4);console.log(re4[0]);

const str222 = "わたしの名前は「もりた」です。あだなは「もりけん」です";

const re222 = /「(.+?)」/ig;

let result;
while ((result = re222.exec(str222)) !== null){
console.log(result[0],"ここ")
}

const nen = "西暦1980年の3581歳です";
const reg1 = /\d+(?=年)/;
console.log(nen.match(reg1))

const string3 = "washable reasonable accessible assemble answerable";
const reg5 = /\b\w+(?=able\b)/g;
console.log(string3.match(reg5));

const nen1 = "ケンジは昭和55年生まれの35歳であり、ケンジの母は昭和22年生まれの64歳である"
const reg6 = /\d+(?![年\d])/g;
console.log(nen1.match(reg6));

const str5 = "あの客はよく柿食う客だ";
const res5 =str5.match(/あの(.+)はよく柿食う\1だ/);
console.log(res5);

const tag = "<div><h1>kenjimorita.jp</h1></div>";

console.log(/<(\w+)><(\w+)>kenjimorita.jp<\/\2><\/\1>/.test(tag))

// const str6 = "西暦2010年は平成22年です。西暦1980年は昭和55年です。";
// console.log(str6.match(/(?<=昭和|平成)\d+/))

const str7 = "My name is Taro Suzuki and I am a researcher at ABC.";

console.log(str7.match(/\ba\w*\b/g));

var falseValue = new Boolean(false);
console.log(falseValue)//false

var fafa = null;
console.log(typeof fafa)//Object
console.log(fafa == undefined)//等値演算子ではtrueになってしまう
console.log(fafa === null);//true //同値演算子を使う
[/code]

【ECMAScript2015(ES6)】後で猫に教えてあげたいES6の「Generators(ジェネレーター)とIterator(イテレータ)」

昨日はSymbol(シンボル)でしたが、今日はGeneratorsとIterator。
babel立ち上げてコード確認しながらやりました。

ジェネレータってなにかって再帰処理を簡単にしてくれるものなんですね。
そのイテレータオブジェクトを返す関数がジェネレータ

ジェネレータを扱うにはイテレータを理解する必要があるようです。
続きを読む