フロントエンドエンジニア– tag –

【cssnextをすぐ触りたい】2016年夏。cssnextがgulpで動かしてざっくり理解する 「cssnextとは」というのは他の良記事にお任せします。 とにかくよくわからないけど触っとこう、という説明書読まない派の為に動くものを外国の方のgithub見てこれを作りまし...

【React】react-modalの簡単実装するための9つの手順とハマりポイント 業務でmodalを実装したのですが、ハマったところがありました。 で、それにまつわる記事がなかったので書きます チュートリアル 作るモーダルは これ githubにReact-Sampleとしておい...

エンジニアにとって大事なこと 今やらなきゃいけないことと、将来に備えてやらなきゃいけないことと、過去の知識を更新しなきゃいけないことと、辛ラーメン5袋入りを買わなきゃいけないこと。 どれもエンジニアにとって大事なこと。 どれか一つ欠けてもだめ

Angular2 for TypeScriptのお勉強-sample(10)【NgForm and template reference variables、{{}}と[]、""の違いとか】 今日はちょっと長い。 チュートリアルでいうここを読んでます submitでわたされるのはngFormというオブジェクトみたいです。 template側...

Angular2 for TypeScriptのお勉強-sample(9)【inputの入力値を扱う。Referencing a template reference variable】 input値をbuttonに仕込んだイベントから参照、イベントに渡す方法です。 チュートリアルのここです。 #として設定 <input #phone place...

Angular2 for TypeScriptのお勉強-sample(6)【classの置き換え,override】 classを修正するのはよくするところなのでそこらへん。 チュートリアルのここ見ながら確認 今回やっていること ・普通にclassとして要素に記述する ・それをリセットして反映させ...

Angular2 for TypeScriptのお勉強-sample(5)【ngClass,*ngIf,directives】 ngClass,*ngIfはよく使う。ので最初に押さえておきたい。。   今回やったこと ・子component(directives)として親で描画 ・クリック時にisCheckedを判定してfalseだったら子c...

Angular2 for TypeScriptのお勉強-sample(4)【双方向バインディング】 Angularを使い始めてこれが一番驚いた記憶あるのですが、Angular2ではどのように書くのかと思い チュートリアルのここらへん読みました。というか多分ここのページが全てだと思うので...

Angular2 for TypeScriptのお勉強-sample(3)【clickしたら挨拶が変わるtoggleClick】 今日2回目の更新で、いっきにこのまま月曜まで一人ハッカソンやろうかな。今年最初の猛暑日みたいです。 こういうのみたりこういうのみたりしてました。 で なるほどな...

Angular2 for TypeScriptのお勉強(2) 前回からやや日が経ちましたが、 わたしのAngular2への想いは毎日のお昼ご飯ぐらい変わりません!(結構変わる) これにいこうとおもっていて。ちょっと予習もかねてお勉強 今回はよく記述することになるあそこが何してい...

Web英語記事を読む方法といろいろなWeb英語記事読んできて出会った覚えるべき英単語257語 何かのライブラリのバージョン最新のものを追いかけたり、バグ対応していると英語記事に出会います。 以前はGoogle検索2位で出てきた英語記事でもそれをのけて日本...

【2016フロントエンド|言語/まとめ】Elixir,Rust,Scala,Vanilla,ReactiveX,Co,Julia まとめよう。リンク集で。 ちょっとやろう。hello worldまで Elixir,Rust,Scala(JSの方),Vanilla,Reactive,Co,Julia。 Elixir [翻訳] Elixir - 次に来る大物Web言語 Elix...

「特定の値以外の値」を返す googleで表題の様なキーワードで探したら見当たらずなのでページ作りました。 下の用にfilterとsliceでなんとかします。 非破壊メソッドを使ってnumを壊さないようにしています。 あと全然関係ないけどQiitaにリツイートされた...

【ES6】適当に試したり。正規表現とか 全コード [code lang="javascript"] function getKey(k) { return `${k}`; } const obj = { id: 5, name: 'San Francisco', [getKey('enabled')]: true, }; console.log(obj) /////////////////////////// function f...

Chrome CanaryのconsoleでECMAScript2015試せるよ いままでBabelのTry it outでやってたりしたけど、 canaryはこちらからダウンロード。 https://www.google.co.jp/chrome/browser/canary.html いいね！

【FunctionalPrograming】抽象化2 参照javascriptで学ぶ関数型プログラミング 「O'REILY」 全コード 以下のコードでやっていること ・抽象化 ・sortとコンパレータとプレディケート関数(高階関数) [code lang="javascript"] //https://github.com/fogus/le...

FunctionalPrograming, To abstract FunctionalPrograming [code lang="javascript"] function splat(fun){ return function(array){ return fun.apply(null, array); } }; var addArrayElements = splat(function(x, y){ return x + y }); addArrayElemen...

【ECMAScript2015(ES6)】後で猫に教えてあげたいES6の「Generators(ジェネレーター)とIterator(イテレータ)」 昨日はSymbol(シンボル)でしたが、今日はGeneratorsとIterator。 babel立ち上げてコード確認しながらやりました。 ジェネレータってなにかって...

ES6 static menber [code] class Tripple { static tripple(n) { n = n || 1; return n * 3; } } class BiggerTripple extends Tripple { static tripple(n) { return super.tripple(n) * super.tripple(n); } } console.log(Tripple.tripple());//3 conso...

【Vagrant】Mac簡単設定の方法 いまさらですが、、 今度マシン変えたときのためにメモっとく 1 virtualBoxのダウンロード https://www.virtualbox.org/wiki/Downloads 2 vagrantのダウンロード https://www.vagrantup.com/downloads.html 3 vagrantの初期...